Hi Vignesh,
Thank you for your advises. I am still unable to correctly configure the data binding for the Grid - despite much effort!
My setup includes a SQL db back-end, using Dapper with stored procedures - which all work fine from Blazor when using Dependency Injection and
HTML table and form for CRUD operations. For differing reasons, Entity
Framework with controllers and API is not being used at this time.
Using
the documentation for data binding and editing, the closest I've been
able to achieve to error free code (for a start!) is the following page
(code). Although it is not populating data yet, I am hopeful that you
may be able to comment on the setup...
Thank you for your patience and time, I am sincerely trying to learn and understand the process for myself.
@using Syncfusion.EJ2.Blazor
@using Syncfusion.EJ2.Blazor.Grids
@using Syncfusion.EJ2.Blazor.Data
@using Newtonsoft.Json;
@using HebronDataAccess.Models.Administration.Development
@inject IHebronAppService HebronAppService
@inject NavigationManager NavigationManager
<div class="col-lg-12 control-section">
<div class="content-wrapper">
<div class="row">
<EjsGrid TValue="HebronAppModel" AllowPaging="true" Toolbar="@(new string[] {"Add","Edit","Delete","Update","Cancel"})">
<EjsDataManager AdaptorInstance="@typeof(CustomAdaptor)" Adaptor="Adaptors.CustomAdaptor"></EjsDataManager>
<GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="EditMode.Normal"></GridEditSettings>
<GridColumns>
<GridColumn Field=@nameof(HebronAppModel.Id) HeaderText="App Id" IsPrimaryKey="true" TextAlign="TextAlign.Right" Width="120"></GridColumn>
<GridColumn Field=@nameof(HebronAppModel.AppName) HeaderText="App Name" TextAlign="TextAlign.Right" Width="120"></GridColumn>
<GridColumn Field=@nameof(HebronAppModel.Description) HeaderText="Customer Name" Width="150"></GridColumn>
<GridColumn Field=@nameof(HebronAppModel.ParentId) HeaderText="ParentId" Format="d" Type="ColumnType.Number" TextAlign="TextAlign.Right" Width="130"></GridColumn>
<GridColumn Field=@nameof(HebronAppModel.AppImageUrl) HeaderText="App Image Url" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>
</GridColumns>
</EjsGrid>
</div>
</div>
</div>
@code{
public class CustomAdaptor : DataAdaptor
{
HebronAppService appService = new HebronAppService();
IEnumerable<HebronAppModel> hebronapp;
public override async Task<Object> ReadAsync(DataManagerRequest dataManagerRequest, string key = null)
{
hebronapp = await appService.HebronAppList();
IEnumerable<HebronAppModel> GridData = hebronapp;
if (dataManagerRequest.Skip != 0)
{
GridData = GridData.Skip(dataManagerRequest.Skip); //Paging
}
if (dataManagerRequest.Take != 0)
{
GridData = GridData.Take(dataManagerRequest.Take);
}
return dataManagerRequest.RequiresCounts ? new DataResult() { Result = GridData } : (object)GridData;
}
public override async Task<Object> InsertAsync(DataManager dataManager, object value, string key)
{
var val = (value as HebronAppModel);
await appService.HebronAppsInsert(val);
return value;
}
public override async Task<object> RemoveAsync(DataManager dataManager, object value, string keyField, string key)
{
int data = (int)value;
await appService.HebronAppsDelete(data);
return value;
}
public override async Task<object> UpdateAsync(DataManager dataManager, object value, string keyField, string key)
{
var val = (value as HebronAppModel);
var data = hebronapp.Where((HebronAppModel) => HebronAppModel.Id == val.Id).FirstOrDefault();
if (data != null)
{
data.Id = val.Id;
data.AppName = val.AppName;
data.Description = val.Description;
data.AppImageUrl = val.AppImageUrl;
data.ParentId = val.ParentId;
}
await appService.HebronAppsUpdate(val);
return value;
}
}
}
