Kendo Grid - Return Grid contents within Form Post

Sometimes you have a page with a few input controls and an editable grid and you wish to return the whole lot in the Form post rather than deal with the grid edited data separate. There are two ways…

Telerik provide examples for doing it. See in there Github
https://github.com/telerik/ui-for-aspnet-mvc-examples
Within the Grid examples there are

  • post-grid-with-form
  • submit-grid-with-form

Both do the same thing.

To summarise

@(Html.Kendo().Grid(Model.Categories)
.Name("kgridA")
.ToolBar(tools => tools.Create().Text("Add new category"))
.Editable(editable => editable.Mode(GridEditMode.InCell).CreateAt(GridInsertRowPosition.Bottom))
.Columns(columns => {
  columns.Bound(p => p.Name).ClientTemplate("#= Name #" +
    "<input type='hidden' name='Categories[#= index(data)#].Name' value='#= Name #' />"
  );

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

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

It makes use of a hidden input field to generate the required parameter getting posted back. It uses a client template on each column to achieve this.
See the following on a good article on how it is working
http://www.hanselman.com/blog/ASPNETWireFormatForModelBindingToArraysListsCollectionsDictionaries.aspx

Alternatively method

The above does a good job if using something very similar. I had combo boxes so instead I came up with the following method instead. It creates the same result but instead traps the submit query and adds the hidden inputs via Javascript rather than the use of client templates.

Create your Grid as normal and without the client templates required above.
Use JavaScript similar to below to insert the Inputs on the submit.

$("#myform").submit(function (event) {
  var grid = $("#mygrid").data("kendoGrid");
  var data = grid.dataSource.view();
  var input;
  for (var i = 0; i < data.length; i++) {
    input = $("<input>", { type: 'hidden', name: 'Categories[' + i + '].Id', value: data[i].Id })
    $(this).append($(input));
    input = $("<input>", { type: 'hidden', name: 'Categories[' + i + '].Name', value: data[i].Name })
    $(this).append($(input));
  }
}

References
https://github.com/telerik/ui-for-aspnet-mvc-examples
http://www.hanselman.com/blog/ASPNETWireFormatForModelBindingToArraysListsCollectionsDictionaries.aspx


Above referring to version
Telerik Kendo UI Professional Q1 2015
Telerik UI for ASP.NET MVC Q1 2015


comments powered by Disqus