Свой порядок колонок в таблице для каждого пользователя

Рейтинг: 1Ответов: 1Опубликовано: 12.04.2023

веб приложение Blazor, как можно сохранить порядок колонок в таблице для пользователя?

К примеру Вадим зашел на свой аккаунт и переставил порядок колонок некой таблицы (по умолчанию 123, а у Вадима 312) и этот порядок условно это его настройки, и завтра когда он зайдет к себе на страницу ему надо показать таблицу 312 а не 123

...для данной веб страницы я использую Syncfusion и находясь на странице я могу показать настройки пользователя, если он изменил порядок колонок, а потом сбросил, то кнопка 'мои настройки' покажет ему как он сохранил порядок (при условии что он нажал на кнопку 'сохранить порядок'), но как только страница закрыта/открыта настройки по умолчанию сбрасываются.

я решила сохранить строку последовательности колонок в cookie, чтоб потом применить оттуда (пока не знаю как, но это не вопрос) мне подумалось, что будет уместным вызвать cookie именно тогда, когда пользователь меняет порядок и там я вызываю событие, которое set cookie пользователя. Только вот у меня строка не сохраняется в куки пользователя, из-за большого размера. А может есть другой вариант, не через куки ?

страница razor

@page "/ordreColumn"

@using System.Drawing;
@using CalendarTestSync.Model;
@using Syncfusion.Blazor.Buttons
@using Syncfusion.Blazor.DropDowns
@using Syncfusion.Blazor.Grids


<SfGrid @ref="Grid" DataSource="@garajListsModel" Height="auto" AllowReordering="true" AllowFiltering="true" AllowPaging="true" AllowSorting="true" AllowResizing="true">
    <GridEvents TValue="GridModelData" OnActionComplete="ActionCompletedHandler"></GridEvents>
    <GridPageSettings PageSize="17"></GridPageSettings>
    <GridFilterSettings Type="Syncfusion.Blazor.Grids.FilterType.CheckBox" IgnoreAccent="true" ShowFilterBarStatus="true" Mode="FilterBarMode.Immediate" ImmediateModeDelay="300" Operators=Operator.Contains>
    </GridFilterSettings>

    <GridColumns>
        <GridColumn Uid="0" Field=@nameof(GridModelData.GarajNum) HeaderText="Column0" Width="90" Type=ColumnType.String ClipMode="ClipMode.EllipsisWithTooltip"></GridColumn>
        <GridColumn Uid="1" Field=@nameof(GridModelData.HoursWork) HeaderText="Column1" Format="HH:mm" Width="70" AllowFiltering="false" ClipMode="ClipMode.EllipsisWithTooltip"></GridColumn>
        <GridColumn Uid="2" Field=@nameof(GridModelData.TimeDif) HeaderText="Column2" Type=ColumnType.String Width="120" DisableHtmlEncode="false" AllowFiltering="false" ClipMode="ClipMode.EllipsisWithTooltip"></GridColumn>
    </GridColumns>
</SfGrid>

<button class="btnLogout" @onclick="@(async() => await Grid.ResetPersistDataAsync())">сбросить все изменения примененные к этой таблице</button>
<button @onclick="saveColumnOrdreAsync">сохранить порядок колонок</button>
<button @onclick="setColumnOrdreAsync">мои настройки колонки</button>

@code {
    #region property
    public SfGrid<GridModelData> Grid;
    //table display & table Temp
    IEnumerable<GridModelData>? garajListsModelTemp;
    IEnumerable<GridModelData>? garajListsModel;
    #endregion

    public async void saveColumnOrdreAsync()
    {
        VariableStatic.ColumnOrdreGet = await Grid.GetPersistDataAsync();
    }
    public async void setColumnOrdreAsync()
    {
        await Grid.SetPersistDataAsync(VariableStatic.ColumnOrdreGet);
    }
    public async void getColumnOrdreAsync()
    {
        await Grid.ResetPersistDataAsync();
    }

    public async void ActionCompletedHandler(Syncfusion.Blazor.Grids.ActionEventArgs<GridModelData> args)
    {
        if (args.RequestType == Syncfusion.Blazor.Grids.Action.Reorder)
        {
            //тут я пытаюсь вызвать куки, чтоб добавить поле, но по моему так не бывает?
            //на стр1 я уже присвоила кое какие куки этому пользователю, и добавить еще одно поле не понимаю как
            //а может надо новый куки под эти колонки, а как они будут знать чьи где, ведь у меня куки хранятся для каждого пользователя отдельно...
            //и порядок вызова моих функций ===> save ===> set, а не слишком ли тяжело загружать эти функции каждый раз когда он дергает колонки, может есть вариант в конце вызвать, типа UnFocus из таблицы и раз сохранить .....пАмагите
        }
    }
}
c# таблицы blazor syncfusion
Источник: Stack Overflow на русском

Ответы

▲ 2Принят

Чтобы сохранить порядок колонок для каждого пользователя, можно создать базу данных пользовательских настроек. И сохранить там строку порядка колонок. К примеру Syncfusion предлагает строку в тот момент, когда пользователь начал двигать/менять местами колонки таблицы вызвать метод await Grid.GetPersistDataAsync(); и присвоить его значение строке ordreColumnByUser = await Grid.GetPersistDataAsync(); в куках эта строка не может хранится, так как размер превышает, и собственно поэтому создается база данных, тк там есть некий ключ для каждого пользователя, в данном примере будет его логин.

Информация: Ассембли не поддерживает подключения к SQL, но есть альтернативар IndexedDb, в любом случае лучше подключаться через апи. Но в моем примере подключение идет напрямую к базе данных через блазор сервер. Оставлю здесь, больше для того, чтобы понять логику.

User result { get; set; } //класс модель
private string userLoginSession { get; set; } = "SomeUserLogin"; //логин при входе
private string ordreColumnByUser { get; set; } = "StringColumnOrdre"; 
private User userExisteCheck { get; set; } 
private User user { get; set; }

//вызвать, если он подвигал и решил сохранить свои настройки
private async Task saveOrdreColumnForUsers() 
{
    result = new User()
    {
        UserLogin = userLoginSession,
        OrdreColumn = ordreColumnByUser,
    };
    try
    {
        using var connection = new SqlConnection(ConnectionStringInYourDataBase);
        {
            string requestDb = $"SELECT * FROM [your_table_name] WHERE UserLogin = '{userLoginSession}'";

            userExisteCheck = connection.QueryFirst<User>(requestDb);
            if (string.IsNullOrEmpty(userExisteCheck.UserLogin))
                connection.Insert<User>(result); //комманда Insert добавляет пользователя по модели
            else
                connection.Execute($"UPDATE Users SET OrdreColumn = '{result.OrdreColumn}' WHERE 'UserLogin' = '{userLoginSession}'");
        }
    }
    catch (Exception ex)
    {
        Console.WriteLine(ex.Message);
    }
}

//применить, либо вызвать, для пользовательских настроек
private async Task setOrdreColumnForUsers()
{
    try
    {
        string requset = $"SELECT * FROM [your_table_name] WHERE UserLogin = '{userLoginSession}'";
        using var connection = new SqlConnection(ConnectionStringInYourDataBase);
        {
            result = connection.QueryFirst<User>(requset);
            if (result != null)
                user = result;
        }
        ordreColumnByUser = user.OrdreColumn;
    }
    catch (Exception ex)
    {
        Console.WriteLine(ex.Message);
    }
    await Grid.SetPersistDataAsync(ordreColumnByUser);
}
    
public class User
{
    public User() { }
    public int Id { get; set; }
    public string UserLogin { get; set; }
    public string OrdreColumn { get; set; }
}

таким образом, если Василий зайдет "завтра" его настройки будут сохранены в ordreColumnByUser await Grid.SetPersistDataAsync(ordreColumnByUser); и либо присвоены по умолчанию, либо кнопочка...применить мои настройки...

если вы используете таблицу, то также по логике синфузион можно создать строку с изначальным значением каждого столбца, и потом запоминать для каждого пользователя...

введите сюда описание изображения