Make editable Kendo grid in partial view in MVC

Question

I want to make editable kendo grid as partial view control to use it many times when i needed.

I have customer and employee that have multi address so I want to make editable kendo grid for addresses in partial view to use it in employee and customer.

My partial view for kendo grid is

    @model AddressesModel
@using Kendo.Mvc.UI


@{
    var prefix = ViewData.TemplateInfo.HtmlFieldPrefix;
    var propertyPrefixName = "";
    if (string.IsNullOrEmpty(prefix))
    {
        propertyPrefixName = nameof(AddressesModel.AddressesList);
    }
    else
    {
        propertyPrefixName = prefix + "." + nameof(AddressesModel.AddressesList);
    }
    var cityId = nameof(AddressModel.CityId);
    var email = nameof(AddressModel.Email);

}

@(Html.Kendo().Grid(Model.AddressesList)
              .Name("AddressGrid")
              .ToolBar(tools => tools.Create().Text(GlobalResources.Add))
              .Editable(editable
              => editable.Mode(GridEditMode.InCell).CreateAt(GridInsertRowPosition.Bottom))
              .Columns(columns =>
              {


                  columns.Bound(p => p.CityId).ClientTemplate("#= " + cityId + " #" +
                  "<input type='hidden' name='" + propertyPrefixName + "[#= index(data)#]." + cityId + "' value='#= " + cityId + " #' />"

                       );

                  columns.Bound(p => p.Email).ClientTemplate("#= " + email + " #" +
                    "<input type='hidden' name='" + propertyPrefixName + "[#= index(data)#]." + email + "' value='#= " + email + " #' />"
                  );


                  columns.Command(command => command.Destroy()).Width(20).Title(GlobalResources.Delete);
              })
              .DataSource(dataSource => dataSource.Ajax()
                   .Model(model =>
                   {
                       model.Id(p => p.Id);
                       model.Field(p => p.Id).Editable(false);
                   })
                   .ServerOperation(false)
              )
)





<script>

    function index(dataItem) {

        var data = $("#AddressGrid").data("kendoGrid").dataSource.data();
        return data.indexOf(dataItem);
    }

</script>

and in employee view i used like this

@Html.Partial("_AddressesGrid", Model.Addresses, new ViewDataDictionary { TemplateInfo = new System.Web.Mvc.TemplateInfo { HtmlFieldPrefix =nameof(CreateEmployeeModel.Addresses)} })

when i edit email i have this error

and it not edited!

Please help , how i can make editable kendo grid in partial view!!

Note the kendo grid works correctly if i put it in employee view without partial view.

Apparently Kendo widgets like to have unique ids in partials. See this answer too. — ourmandave
I'm use one grid in view , my problem that when edit incell the error appear — Duha

Duha Duha · Accepted Answer · 2016-02-09T13:47:11

change

@Html.Partial("_AddressesGrid", Model.Addresses, new ViewDataDictionary { TemplateInfo = new System.Web.Mvc.TemplateInfo { HtmlFieldPrefix =nameof(CreateEmployeeModel.Addresses)} })

to

@Html.Partial("_AddressesGrid", Model.Addresses)

and be careful don't use HtmlFieldPrefix , the kendo will make editor cell template with error name , so that i have the above error

Make editable Kendo grid in partial view in MVC

1 Answers