Run Code After Filter/Sort When DataSource In Model

[Graham]

I need a way to run javascript code after a sort or a filter has been done. Unusually, the datasource is in the view model - not an ajax call to the server.

 

Here is my grid:

 

    @(Html.Kendo().Grid(Model.TrunkGridData)
        .Name("TrunkSummaryGrid")
        .Columns(columns =>
        {
            columns.Bound(c => c.DepotNumber).Title("Depot").Sortable(true);
            columns.Bound(c => c.TrunkName).Title("Trunk").Sortable(true);
            columns.Bound(c => c.TipType).Title("Tip / Load").Sortable(true);
            columns.Bound(c => c.ArrivalTimeExpected).Title("Booked Arrival").Sortable(true);
            columns.Bound(c => c.ArrivalTimeActual).Title("Actual Arrival").Sortable(true);
            columns.Bound(c => c.DepartureTimeExpected).Title("Booked Departure").Sortable(true);
            columns.Bound(c => c.DepartureTimeActual).Title("Actual Departure").Sortable(true);
        })
        .Filterable()
        .Sortable()
        .Scrollable()
        .Selectable()
        .HtmlAttributes(new { style = "height:700px;" })
        .ToolBar(tools => tools.Excel())
        .Excel(excel => excel
            .FileName("TrunkSummary.xlsx")
            .Filterable(true)
            .ProxyURL(Url.Action("Excel_Export_Save", "Grid"))
        )
        .DataSource(dataSource => dataSource
            .Custom()
            .ServerFiltering(false)
            .ServerSorting(false)
            .Schema(schema => schema
                .Model(model =>
                {
                    model.Id("TrunkRouteID");
                    model.Field("DepotNumber", typeof(string));
                    model.Field("TrunkName", typeof(string));
                    model.Field("TipType", typeof(string));
                    model.Field("ArrivalTimeExpected", typeof(string));
                    model.Field("ArrivalTimeActual", typeof(string));
                    model.Field("DepartureTimeExpected", typeof(string));
                    model.Field("DepartureTimeActual", typeof(string));
                    model.Field("IsLate", typeof(bool));
                    model.Field("IsThirtyMinutesLate", typeof(bool));
                    model.Field("ArrivalMinsLate", typeof(double));
                    model.Field("DepartureMinsLate", typeof(double));
                    model.Field("TrunkRouteID", typeof(int));
                })
            )
        )
    )

[Georgi]

Hi Graham,

You can attach JavaScript functions on the events of the Kendo Grid. In the documentation of the widget you can find all the events:

• http://docs.telerik.com/aspnet-mvc/api/Kendo.Mvc.UI.Fluent/GridEventBuilder

The following demo illustrates how to attach functions to the events of the Kendo Grid.


http://demos.telerik.com/aspnet-mvc/grid/events  

Regards,
Georgi
Progress Telerik

[Graham]

Hi Georgi,

 

The filter event is fired before filtering - not afterwards - see http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#events-filter .

My requirements are:

1. display the number of grid rows showing after a filter

2. after either a filter or a sort, redo the colouring of rows and cells that meet a particular criteria

[Georgi]

Hi Graham,

I apologize for misunderstanding the exact scenario.

The dataBound event of the Kendo Grid is fired when the widget is bound to data from its data source. It is possible to count and apply any logic over the received data after it has been filtered or sorted. The following dojo illustrates how to achieve the aforementioned approach:

• http://dojo.telerik.com/aqerA

Regards,
Georgi
Progress Telerik

[Graham]

Hi Georgi,

 

That didn't work because my grid doesn't use server filtering - but it put me on the right path. Here's what actually worked:

 

$(document).ready(function () {

        var grid = $("#TrunkSummaryGrid").data("kendoGrid");
        var dataSource = grid.dataSource;

        dataSource.bind('requestEnd', function (e) {
            var filterCount = e.sender._total;
            $('#trunksInGrid').html(filterCount);
            setTimeout(function () { trunkGridColouring(); }, 10);
        })

}