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

Run Code After Filter/Sort When DataSource In Model

4 Answers 305 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Graham
Top achievements
Rank 1
Iron
Graham asked on 01 Jun 2017, 08:43 AM

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));
                })
            )
        )
    )

4 Answers, 1 is accepted

Sort by
0
Georgi
Telerik team
answered on 02 Jun 2017, 07:29 AM
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:

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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Graham
Top achievements
Rank 1
Iron
answered on 07 Jun 2017, 03:03 PM

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

0
Georgi
Telerik team
answered on 09 Jun 2017, 01:21 PM
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:



Regards,
Georgi
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Graham
Top achievements
Rank 1
Iron
answered on 12 Jun 2017, 02:59 PM

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);
        })

}

Tags
Grid
Asked by
Graham
Top achievements
Rank 1
Iron
Answers by
Georgi
Telerik team
Graham
Top achievements
Rank 1
Iron
Share this question
or