This is a migrated thread and some comments may be shown as answers.

How to do an Ajax binding for Kendo Grid in a Partial View of a MVC app ?

1 Answer 329 Views
This is a migrated thread and some comments may be shown as answers.
Top achievements
Rank 1
Amyth asked on 28 Jul 2014, 05:37 AM
I have a kendo grid in  a partial View bound to Ajax data source.
When the partial view is rendered, it only displays an empty grid without data in it.
Can't i do an server side Ajax binding (json) for the grid in a partial View ?

This only works when the grid is on a view associated with Home controller and not in a partial view.
How do i get it to work in a partial view ? 

Below is what i have in the Partial View.

@using Kendo.Mvc.UI

<div id="Main">
    Kendo Grid Partial View Demo
<br />
<div id="Grid">

      .Pageable(pager => pager
            .Messages(messages => messages.Empty("No data")))
      .DataSource(dataSource => dataSource // Configure the grid data source
          .Ajax()// Specify that ajax binding is used
          .Read(read => read.Action("Products_Read", "Home")) // Set the action method which will return the data in JSON format
          //.Model(model => model.Id(product => product.ProductID))
               .Model(model =>
                   //The unique identifier (primary key) of the model is the ProductID property
                   model.Id(product => product.ProductID);
                   // Declare a model field and optionally specify its default value (used when a new model instance is created)
                   model.Field(product => product.ProductName).DefaultValue("N/A");
                   // Declare a model field and make it readonly
                   model.Field(product => product.UnitsInStock).Editable(false);
      .Columns(columns =>
          // Create a column bound to the ProductID property
          columns.Bound(product => product.ProductID);
          // Create a column bound to the ProductName property
          columns.Bound(product => product.ProductName).ClientTemplate("<strong>#: ProductName #</strong>");
          // Create a column bound to the UnitsInStock property
          columns.Bound(product => product.UnitsInStock);

          // Define a template column - it needs a templated razor delegate
          columns.Template(@<text>  @Html.ActionLink("About", "Home", new { id = item.ProductID }) </text>);
      .Pageable() // Enable paging
      .Sortable() // Enable sorting                           


And below is the code to get Json Data for kendo grid in the Home Controller in my MVC app.

public ActionResult Products_Read([DataSourceRequest]DataSourceRequest request)
            List<Product> ProductList = new List<Product>();

            for (int i = 1; i <= 10; i++)
                Product p = new Product();
                p.ProductID = i;
                p.ProductName = "Product_" + i;
                p.UnitsInStock = 5;

                IEnumerable<Product> products = ProductList;
                DataSourceResult result = products.ToDataSourceResult(request);
                return Json(result);

Any Help will be greatly appreciated.
Thanks in Advance!

1 Answer, 1 is accepted

Sort by
Vladimir Iliev
Telerik team
answered on 30 Jul 2014, 05:49 AM
Hi Amyth,

From the provided information it's not clear for us what is the exact reason for current behavior - could you please provide small runable example where the issue is reproduced (the Grid can load list of static data)? This would help us pinpoint the exact reason for this behavior.

Vladimir Iliev

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

Asked by
Top achievements
Rank 1
Answers by
Vladimir Iliev
Telerik team
Share this question