New to Telerik UI for ASP.NET MVC? Start a free 30-day trial

Post Grid Through a Form

Environment

Product	Telerik UI for ASP.NET MVC Grid
Product version	2025.1.227

Description

How can I use the Grid in a form and submit its data along with the form fields?

Solution

To submit the Grid's data items as part of an Html.Form, note that.

All items in the Grid are submitted no matter if they are updated or not.
Only the items from the current page are submitted.
Server operations must be disabled—ServerOperation(false).

The solution relies on the following key steps:

Define the form and the Grid. Set the Name() of the Grid to the name of the Model property that the Grid binds to.

C#
public class Category
{
    public int CategoryID { get; set; }
    public string Name { get; set; }
    public IEnumerable<Product> Products { get; set; }
}

public class Product
{
    public string Name { get; set; }
    public int ProductID { get; set; }
}
Razor
@model Telerik.Examples.Mvc.Areas.GridPostWithForm.Models.Category

@using(Html.BeginForm("Save", "Home"))
{
    <fieldset>
        <legend>Editing Category (@Model.CategoryID)</legend>

        @Html.LabelFor(category => category.Name)
        @Html.EditorFor(category => category.Name)

        @(Html.Kendo().Grid(Model.Products)
            .Name("Products")
            .ToolBar(tools => tools.Create().Text("Add new product"))
            .Editable(editable => editable.Mode(GridEditMode.InCell).CreateAt(GridInsertRowPosition.Bottom))
            .Columns(columns =>
            {
                ... // Defined columns.
            })
            .DataSource(dataSource => dataSource
                .Ajax()
                .Model(model => 
                {
                    model.Id(p => p.ProductID);
                    model.Field(p => p.ProductID).Editable(false);
                })
                .ServerOperation(false)
            )
        )
    </fieldset>

    <input type="submit" value="Save" />
}

Set the ClientTemplate() option to each Grid column in order to add the respective input element with name and value attributes.

Razor

.Columns(columns =>
{
    columns.Bound(p => p.Name).ClientTemplate("#= Name #" + 
    "<input type='hidden' name='Products[#= index(data)#].Name' value='#= Name #' />"
    );

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

    columns.Command(command => command.Destroy()).Width(100);
})

Get the index of the data item for the name attribute of each input element:

function index(dataItem) {
    var data = $("#Products").data("kendoGrid").dataSource.data();
    return data.indexOf(dataItem);
}

To review the complete example, refer to the project on how to submit the Grid data items as part of an Html.Form.

Post Grid Through a Form

Environment

Description

Solution

More ASP.NET MVC Grid Resources

See Also