Get record count in Kendo Grid after dataSource.read

Question

I want to be able to push the record count from my Kendo grid after read (refresh).

Here is my Kendo Grid:

    @(Html.Kendo().Grid(Model)
      .Name("SearchWindowGrid")
      .Columns(columns =>
          {
              columns.Bound(p => p.SYSTEM_ITEMS_SEGMENT1).Hidden();
          })
      .ClientRowTemplate(
          "<tr>" +
            "<td>" +
                "<span><b>#: SYSTEM_ITEMS_SEGMENT1#</b></span>&nbsp;<br/>" +
                "<span>#: DESCRIPTION# </span>" +
            "</td>" +
          "</tr>"
      )
      .DataSource(dataSource => dataSource
        .Ajax()
        .Read(read => read.Action("PopulateSearchWindow", "Item").Data("additionalSearchWindowInfo"))
        .Events(ev => ev.Error("onErrorSearchWindow"))
      )
      .Selectable(s => s.Enabled(true).Mode(GridSelectionMode.Single).Type(GridSelectionType.Row))
      .Scrollable(s => s.Enabled(true).Height(450))
  )

My Controller action:

    public ActionResult PopulateSearchWindow([DataSourceRequest] DataSourceRequest request, string option, string searchText, string searchDesc)
    {
        try
        {
            var derps= _idg.SearchItems(searchText, searchDesc, _adg.OrganizationCode).ToList();

            return Json(derps.ToDataSourceResult(request, ModelState));
        }
        catch (Exception e)
        {
            ModelState.AddModelError("ExceptionErrors", e.Message);
            return Json(new List<Derp>().ToDataSourceResult(request, ModelState));
        }
    }

Here is my function that forces data refresh:

    function refreshData(){
        $("#SearchWindowGrid").data("kendoGrid").dataSource.read();
        //TODO: get the total count and push to #countElement
        var count = $("#SearchWindowGrid").data("kendoGrid").length; //not sure what to do here
        $("#countElement").val(count);
    }

Where I put my TODO in the jQuery function I want to be able to get the number of rows and push that number into a specific elemnt on my page.

Solution 1

According to the API Reference here

the dataSource has a total() function. So you should be able to do the following, in theory:

function refreshData(){
        var grid = $("#SearchWindowGrid").data("kendoGrid");
        grid.dataSource.read();
        var count = grid.dataSource.total();
        $("#countElement").val(count);
    }

Solution 2

I found that when you request the .total() after a .read() function the grid would not be really refreshed, even if you call .refresh() right after the read function. By defining a change event, the following would make getting the total more elegant and accurate:

@(Html.Kendo().Grid(Model)
  .Name("SearchWindowGrid")
  ...      
 .DataSource(dataSource => dataSource
    .Ajax()
    .Read(read => read.Action("PopulateSearchWindow", "Item").Data("additionalSearchWindowInfo"))
    .Events(ev => ev.Error("onErrorSearchWindow").Change("OnGridChange"))
  )
)

with the following scripts:

function refreshData(){
    var grid = $("#SearchWindowGrid").data("kendoGrid");
    grid.dataSource.read();
    grid.refresh();
}

function OnGridChange() {
    var grid = $("#SearchWindowGrid").data("kendoGrid");
    var count = grid.dataSource.total();
    $("#countElement").val(count);
}

Comments

[gardarvalur]

Thank you for your answer @Quinton Bernhardt. The fetch() function was eluding me but that reference you send me did the trick. Thanx again :)

[gardarvalur]

var searchWindowSource = $("#SearchWindowGrid").data("kendoGrid").dataSource; searchWindowSource.fetch(function () { var total = searchWindowSource.total(); });

[gardarvalur]

Thank you for that @Shadi, that would be the more accurate way of using the events from the grid itself. In fact I believe I did eventually use the refresh function when implementing this answer because I was having hard time refreshing the data.

[Paritosh]

total() works even with the filter. If filter is applied on grid dataSource, then also it gives us the count of the filtered records.