@using MyNamespace.Data.Models
@using Syncfusion.EJ2.Blazor
@using Syncfusion.EJ2.Blazor.Data
@using Syncfusion.EJ2.Blazor.DropDowns
@using Syncfusion.EJ2.Blazor.Grids
@using Microsoft.Extensions.Logging
@page "/test3"
@inject ILogger<Program> logger
@inject Services.Helpers Helpers
@inject Services.PersonService PersonService
@inject Services.SkillService SkillService
<h1>People</h1>
<EjsButton @onclick="@FetchData">Button</EjsButton>
<EjsGrid DataSource="@Persons" ModelType="@Model" @ref="Grid" AllowPaging="true" Toolbar=@ToolbarItems AllowPdfExport="true" AllowExcelExport="true">
<GridEvents OnActionBegin="ActionBegin" TValue="Person"></GridEvents>
<GridPageSettings PageSizes="@PageSizes"></GridPageSettings>
<GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" ShowDeleteConfirmDialog="true" Mode="@EditMode.Dialog"></GridEditSettings>
<GridColumns>
<GridColumn Field=@nameof(Person.Id) HeaderText="Person Id" IsPrimaryKey="true" Visible="false" TextAlign="TextAlign.Left" Width="50"></GridColumn>
<GridColumn Field=@nameof(Person.Skills) HeaderText="Skills" TextAlign="TextAlign.Left">
<Template>
@{
var item = (context as Person);
var output = "";
if (item.Skills != null)
{
for (int i = 0; i < item.Skills.Count; i++)
{
if (item.Skills[i].Skill != null)
{
output += item.Skills[i].Skill.Name;
if (i < item.Skills.Count - 1) output += ", ";
}
}
if (item.Id == 16) {
Helpers.Dump(item.Skills);
}
@output
}
}
</Template>
<EditTemplate>
@{
var item = (context as Person);
var skillIds = new List<int>();
if (item.Skills != null)
{
for (int i = 0; i < item.Skills.Count; i++)
{
skillIds.Add(item.Skills[i].SkillId);
}
}
}
@functions {
public void onSelect(Syncfusion.EJ2.Blazor.DropDowns.MultiSelectChangeEventArgs<List<int>> args)
{
EditMultiValSkills = args.Value;
}
}
<EjsMultiSelect TValue="List<int>" Value="@skillIds" DataSource="@SkillList" AllowFiltering=true>
<MultiSelectEvents TValue="List<int>" ValueChange="@((v)=>onSelect(v))"></MultiSelectEvents>
<MultiSelectFieldSettings Text="Name" Value="Id"></MultiSelectFieldSettings>
</EjsMultiSelect>
</EditTemplate>
</GridColumn>
</GridColumns>
</EjsGrid>
@code {
EjsGrid<Person> Grid;
public string[] ToolbarItems = new string[] { "Add", "Edit", "Delete", "Update", "Cancel", "ExcelExport", "Search" };
public int[] PageSizes = new int[] { 1, 10, 25, 50, 100, 1000 };
public Person Model = new Person();
public List<Skill> SkillList { get; set; }
public List<Person> Persons { get; set; }
public List<int> EditMultiValSkills = new List<int>();
protected override async Task OnInitializedAsync()
{
await FetchData();
}
protected async Task FetchData()
{
logger.LogInformation("FetchData()");
SkillList = await SkillService.Get();
Persons = await PersonService.GetAsync();
}
public void ActionBegin(ActionEventArgs<Person> args)
{
if (args.RequestType == Syncfusion.EJ2.Blazor.Grids.Action.Save)
{
Person p = PersonService.Get(args.Data.Id);
Helpers.Dump(p.Skills, "Skills before edit");
if (p == null) return;
var skillOrig = p.Skills.Select(x => x.SkillId).Distinct();
var newSkills = EditMultiValSkills.Except(skillOrig).ToList();
var removedSkills = skillOrig.Except(EditMultiValSkills).ToList();
// remove deselected and add new skills
foreach (var s in newSkills)
{
p.Skills.Add(new PersonToSkill() { SkillId = s });
}
foreach (var s in removedSkills)
{
p.Skills.RemoveAll(x => x.SkillId == s);
}
var res = PersonService.Update(p); // updates item in database
// manually replace item in List to be extra sure that the data changed
var indexOfPerson = Persons.IndexOf(Persons.Where(x => x.Id == res.Id).First());
if (indexOfPerson != -1)
{
Persons[indexOfPerson] = res;
Helpers.Dump(Persons[indexOfPerson].Skills, "Skills after edit");
this.Grid.DataSource = Persons;
this.Grid.Refresh();
}
}
}
}
