Because the shape of our business objects is not something your grid is easily bound to, we are attempting to generate ExpandoOjbects on the fly and bind to them. In the picture below you can see that Id is not binding correctly. Name is showing up because a column Template was used and that seems to work fine. However, when attempting to use an EditorTemplate we get the RuntimeBinderException shown below.
@page "/dynamic-vendor"
@using System.Dynamic
@using Telerik.Blazor.Components.Grid
<div style="width: 800px; overflow-x: auto; overflow-y:hidden; border: 1px solid red; height:400px">
<TelerikGrid Data="@expandoVendors" EditMode="inline" Pageable=true PageSize=10 SelectionMode="Telerik.Blazor.GridSelectionMode.Multiple">
<TelerikGridColumns>
<TelerikGridCommandColumn width="100">
<TelerikGridCommandButton Command="Edit" Icon="edit">Edit</TelerikGridCommandButton>
<TelerikGridCommandButton Command="Update" Icon="save" ShowInEdit="true">Update</TelerikGridCommandButton>
<TelerikGridCommandButton Command="Cancel" Icon="cancel" ShowInEdit="true">Cancel</TelerikGridCommandButton>
</TelerikGridCommandColumn>
<TelerikGridColumn Field="Id"></TelerikGridColumn>
<TelerikGridColumn Field="Name" Title="Name" Editable="true">
<Template>
@{
dynamic v = context as ExpandoObject;
<span style="white-space:nowrap">@(v.Name)</span>
}
</Template>
<EditorTemplate>
@{
dynamic v = context as ExpandoObject;
<input type="text" bind="@(v.Name)" />
}
</EditorTemplate>
</TelerikGridColumn>
</TelerikGridColumns>
</TelerikGrid>
</div>
@functions {
List<ExpandoObject> expandoVendors { get; set; }
protected override async Task OnInitializedAsync()
{
expandoVendors = new List<ExpandoObject>();
var v1 = new ExpandoObject();
v1.TryAdd("Id", "1");
v1.TryAdd("Name", "Google");
expandoVendors.Add(v1);
var v2 = new ExpandoObject();
v2.TryAdd("Id", "2");
v2.TryAdd("Name", "Amazon");
expandoVendors.Add(v2);
}
}