Run Code After Filter/Sort When DataSource In Model

5 posts, 0 answers
  1. Graham
    Graham avatar
    35 posts
    Member since:
    Jul 2012

    Posted 01 Jun Link to this post

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

  2. Georgi
    Admin
    Georgi avatar
    169 posts

    Posted 02 Jun Link to this post

    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.
  3. Graham
    Graham avatar
    35 posts
    Member since:
    Jul 2012

    Posted 07 Jun in reply to Georgi Link to this post

    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

  4. Georgi
    Admin
    Georgi avatar
    169 posts

    Posted 09 Jun Link to this post

    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.
  5. Graham
    Graham avatar
    35 posts
    Member since:
    Jul 2012

    Posted 12 Jun in reply to Georgi Link to this post

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

    }

Back to Top