Huge data not binding to Kendo Grid

Question

I just using kendo grid in my application and in that i need to show 2500 records of a company in a grid. but when i try to bind less data like 200 its working well, but when i try to bind 2500 records it not displaying any data ('No items to display')

Grid to display:

 <div id="divSearchResult" >

 </div>

kendo bind:

 <script>
        function BindGridSearchResult(data)
        {
            $("#divSearchResult").kendoGrid({
                dataSource: data,
                navigatable: true,
                pageable: true,


                //toolbar: ["create", "save", "cancel"],
                columns: [

                    { field: "UnitID", title: "UnitID", width: 110, hidden: true },
                    { field: "Nickname", title: "Nickname", width: 110 },
                { field: "ContractNumber", title: "ContractNumber", width: 110 },
        { field: "SerialNumber", title: "SerialNumber", width: 110 },
        { field: "UnitPriority", title: "UnitPriority", width: 110 },
        { field: "Address1", title: "Address1", width: 110 },
        { field: "City", title: "City", width: 110 },
        { field: "Region", title: "Region", width: 110 }]


            });

        }
    </script>

Ajax call to get data:

$.ajax({
            url: "/Admin/GetSearchUnit",
            data: Data,
            success: function (result)
            {
                debugger;
                BindGridSearchResult(result);
                //alert("Success");
            },
            erro: function (error, err) {
                alert("Failed");
            },

        })

Less data: enter image description here

Huge Data:

enter image description here

please help me out of this issue..

Thankyou in advance..

Shadi Shadi · Accepted Answer · 2014-10-30T10:54:16

You can use the Ajax binding with paging, which is out of the box for Kendo grid as following:

@(Html.Kendo().Grid<SearchUnit>()
  .Name("divSearchResult")
  .DataSource(dataSource => dataSource // Configure the grid data source
      .Ajax() // Specify that ajax binding is used
      .Read(read => read.Action("GetSearchUnit", "Admin")) 
   )
  .Columns(columns =>
  {
      columns.Bound(searchunit => searchunit.ID);
      columns.Bound(searchunit => searchunit.Name);
  })
  .Pageable() // Enable paging
  .Sortable() // Enable sorting
)

This way you can receive data into pages, here is how you should implement the server side:

public ActionResult GetSearchUnit([DataSourceRequest]DataSourceRequest request)
{
    using (var _db = new DatabaseEntities())
    {
        IQueryable<SearchUnit> unitslist = _db.units;
        DataSourceResult result = unitslist.ToDataSourceResult(request);
        return Json(result);
    }
}

Huge data not binding to Kendo Grid

1 Answers