New to Telerik UI for ASP.NET MVCStart a free 30-day trial

Use Custom JsonResult with Ajax-Bound Grids

Environment

ProductTelerik UI for ASP.NET MVC Grid
Product Version2025.1.227

Description

How can I use custom JsonResult when the Telerik UI for ASP.NET MVC Grid is configured for Ajax data binding?

Solution

This example demonstrates how to use a custom JSON serializer for the Controller and the server-bound data of the Grid.

For the Controller, this is achieved by overriding the Json method. For the Grid, this is achieved through the registration (with the ID) of a custom IJavaScriptInitializer implementation on the application start event.

The example relies on the following key steps:

  1. Define the Grid for Ajax data binding:

    Razor
    @(Html.Kendo().Grid<Telerik.Examples.Mvc.Areas.GridAjaxBindingCustomJsonResult.Models.Product>()
        .Name("Grid")
        .Columns(columns =>
        {
            columns.Bound(p => p.ID);
            columns.Bound(p => p.Name);
        })
        .Pageable()
        .Sortable()
        .Filterable()
        .DataSource(dataSource => dataSource
            .Ajax()
            .ServerOperation(false)
            .Read("Read", "Home")
        )
    )
  2. Return the data using the custom JsonResult method:

    C#
        protected override JsonResult Json(object data, string contentType, Encoding contentEncoding, JsonRequestBehavior behavior)
        {
            return new CustomJsonResult
            {
                Data = data,
                ContentType = contentType,
                ContentEncoding = contentEncoding,
                JsonRequestBehavior = behavior
            };
        }
    
        public ActionResult Read([DataSourceRequest] DataSourceRequest request)
        {
            return Json(products.ToDataSourceResult(request));
        }

To review the complete example, refer to the ASP.NET MVC application on how to use a custom JsonResult with an Ajax-bound Grid.

More ASP.NET MVC Grid Resources

See Also