сохранить порядок колонок в таблице веб страницы
веб приложение Blazor Web Assembly
...как можно сохранить порядок колонок в таблице для пользователя? К примеру Вадим зашел на свой аккаунт и переставил порядок колонок некой таблицы (по умолчанию 123, а у Вадима 312) и этот порядок условно это его настройки, и завтра когда он зайдет к себе на страницу ему надо показать таблицу 312 а не 123
...для данной веб страницы я использую Syncfusion и находясь на странице я могу показать настройки пользователя, если он изменил порядок колонок, а потом сбросил, то кнопка 'мои настройки' покажет ему как он сохранил порядок (при условии что он нажал на кнопку 'сохранить порядок'), но как только страница закрыта/открыта настройки по умолчанию..., и...
я решила сохранить строку последовательности колонок в куки, чтоб потом применить оттуда (пока не знаю как, но это не вопрос)
мне подумалось, что будет уместным вызвать куки именно тогда, когда пользователь меняет порядок и там я вызываю событие, которое set куки пользователя. Только вот у меня строка не сохраняется в куки пользователя. А может есть другой вариант, не через куки ?
страница 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 из таблицы и раз сохранить .....пАмагите
}
}
}
***добавьте пожалуйста метку Syncfusion у них на сайте можно спросить конкретно по компонентам, а по логике и др применениях, лучше на сайте программистов, где возможно кто то уже использовал и знает как // например на англ стакОверФлоу есть эта метка
Ответы (1 шт):
Чтобы сохранить порядок колонок для каждого пользователя, можно создать базу данных пользовательских настроек. И сохранить там строку порядка колонок. К примеру 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); и либо присвоены по умолчанию, либо кнопочка...применить мои настройки...
если вы используете таблицу, то также по логике синфузион можно создать строку с изначальным значением каждого столбца, и потом запоминать для каждого пользователя...
