Sending Additional Form Data in the Grid

Updated on Dec 10, 2025

Environment

Product	Telerik UI for ASP.NET MVC Grid
Progress Telerik UI for ASP.NET MVC version	Created with the 2023.1.117 version

Description

How can I pass a serialized form as an additional parameter to my controller when fetching data in the Telerik UI for ASP.NET MVC Grid?

Solution

To achieve the desired results:

1. Provide a function handler by using the Data() configuration option for the Read method of the Grid.
2. To get the form field as key-value pairs, utilize the serializeArray() within the handler.
3. Traverse through each of the fields, and alter them into your required format, which will then be displayed as a JSON object.
4. Map the external fields to the JSON object.
5. Pass the JSON object in the return statement of the handler.

Razor

    // Form
    <form id="userForm">
        <label for="FirstName">First name:</label>
        <input type="text" id="FirstName" name="FirstName" value="John">
        <label for="LastName">Last name:</label>
        <input type="text" id="LastName" name="LastName" value="Doe">
    </form>

    // Grid
    @(Html.Kendo().Grid<OrderViewModel>()
                .Name("grid")
                .Columns(columns =>
                {
                    columns.Bound(p => p.OrderID).Filterable(false);
                    columns.Bound(p => p.Freight);
                    columns.Bound(p => p.OrderDate).Format("{0:MM/dd/yyyy}");
                    columns.Bound(p => p.ShipName);
                    columns.Bound(p => p.ShipCity);
                })
                .Pageable()
                .Filterable()
                .HtmlAttributes(new { style = "height:550px;" })
                .DataSource(dataSource => dataSource
                    .Ajax()
                    .PageSize(20)
                    .Read(read => read.Action("Orders_Read", "Grid").Data("dataHandler"))
                )
    )

JS

    <script>
        function dataHandler(e){
            var formArray = $("#userForm").serializeArray(); // Serialize the form data as an array.

            var form = {};
            for (var i = 0; i < formArray.length; i++) {
                form[formArray[i]['name']] = formArray[i]['value']; // Map the current key-value pairs into the form variable   object.
            }

            return {
                model: form // Return the JSON object.
            }
        }
    </script>

C#

    public class GridController : Controller
    {
         public ActionResult Orders_Read([DataSourceRequest] DataSourceRequest request, UserModel model)
         {
             // Custom read logic.
             var result = GetData();
             return Json(result.ToDataSourceResult(request));
         }
    }

C#

    public class UserModel
    {
        public string FirstName { get; set; }
        public string LastName { get; set; }
    }

More ASP.NET MVC Grid Resources

• ASP.NET MVC Grid Documentation

• ASP.NET MVC Grid Demos

• ASP.NET MVC Grid Product Page

• Telerik UI for ASP.NET MVC Video Onboarding Course (Free for trial users and license holders)

• Telerik UI for ASP.NET MVC Forums

See Also

• Client-Side API Reference of the Grid for ASP.NET MVC
• Server-Side API Reference of the Grid for ASP.NET MVC
• Telerik UI for ASP.NET MVC Breaking Changes
• Telerik UI for ASP.NET MVC Knowledge Base