Use a Kendo Grid in field template

2 posts, 0 answers
  1. Alexandre
    Alexandre avatar
    20 posts
    Member since:
    Apr 2014

    Posted 15 Apr 2014 Link to this post

    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, 
  2. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 17 Apr 2014 Link to this post

    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):

    Regards,
    Vladimir Iliev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for ASP.NET MVC is VS 2017 Ready
Back to Top