Use a Kendo Grid in field template

[Alexandre]

Hi,

I'm trying to use a Kendo Grid inside a field template to handle the edit of a list of objects define as a property of another object using the UIHintAttribute.
The problem that I have is when you click the edit on the grid the values are not set to the editor controls they are all empty.

I have attached the relevant files from my test project and would appreciate any help.

Thanks, 

[Vladimir Iliev]

Hi Alexandre,

The reason for current behavior is that the editors inside the Grid have prefix included which prevents the data to be bind correctly. Possible solution is to remove the prefix before the Grid initialization and set it back after the initialization:

e.g.:

@{
    string prefix = ViewData.TemplateInfo.HtmlFieldPrefix;
    ViewData.TemplateInfo.HtmlFieldPrefix = "";
}

@(Html.Kendo().Grid<WebApplication1.Models.Test>()
    .Name("grid")
    .Columns(columns =>
    {
        columns.Bound(t => t.Id).Visible(false);
        columns.Bound(t => t.Name);
        columns.Bound(t => t.Created);
        columns.Command(commands =>
        {
            commands.Edit();
            commands.Destroy();
        });
    })
        .ToolBar(toolbar => toolbar.Create())
        .Editable(editable => editable.Mode(GridEditMode.InLine))
        .DataSource(dataSource =>
        dataSource.Ajax()
        .Model(model =>
        {
            model.Id(member => member.Id);
            model.Field(member => member.Id).Editable(false);
            model.Field(member => member.Name);
            model.Field(member => member.Created);
        })
            .Create(create => create.Action("Create", "Kendo"))
        .Read(read => read.Action("Read", "Kendo"))
            .Update(update => update.Action("Update", "Kendo"))
                .Destroy(destroy => destroy.Action("Destroy", "Kendo"))

    )
    .Pageable()
    .Sortable()
)

@{
    ViewData.TemplateInfo.HtmlFieldPrefix = prefix;
}

Also I would suggest to check the following CodeLibry examples which demonstrates possible solutions for editing nested fields using the Grid (where the parent model is also rendered in Grid):

• Grid Ajax Hierarchy Editing
• Grid Popup Editing Navigation Property Collection with nested Grid
• Using MultiSelect In Grid

Regards,
Vladimir Iliev
Telerik