Grid Change Event Issue

3 posts, 1 answers
  1. Ari Perlstein
    Ari Perlstein avatar
    8 posts
    Member since:
    Nov 2009

    Posted 01 Apr 2020 Link to this post

    We are seeing an issue where the Change event for Grid is firing as if it was the Databind event.  We get a console log event on load and when we filter the grid to cause another bind, but not when I click select on a row.  I want to redirect to a details page for that row when the user clicks.

    <div class="ci-body-grid">
        @(Html.Kendo().Grid<OrderViewModel>()
            .Name("gridMain")
            .Columns(columns => {
                columns.Bound(e => e.OrderID).Filterable(false);
                columns.Bound(e => e.Freight);
                columns.Bound(e => e.OrderDate).Width(120).Format("{0:MM/dd/yyyy}");
                columns.Bound(e => e.ShipName).Width(260).Filterable(filterable => filterable.Cell(cell => cell.Operator("contains").ShowOperators(false)));
                columns.Bound(e => e.ShipCity).Width(150);
            })
            .Excel(excel => {
                excel.AllPages(true);
                excel.FileName("Users.xlsx");
            })
            .ToolBar(toolbar => { toolbar.ClientTemplateId("tmpGridToolbar"); })
            .Pageable(pageable => pageable.Refresh(true).Numeric(false).PreviousNext(false))
            .Selectable(selectable => selectable.Mode(GridSelectionMode.Single).Type(GridSelectionType.Cell))
            .Navigatable()
            .Mobile()
            .Resizable(resize => resize.Columns(true))
            .ColumnMenu()
            .Sortable()
            .Scrollable(scrollable => scrollable.Virtual(true))
            .Filterable(filterable => filterable.Mode(GridFilterMode.Row))
            .DataSource(dataSource => dataSource
            .Custom()
            .Events(events => events.Change("gridMain_OnChange").Error("error_handler"))
            .Type("odata")
            .Transport(transport =>
                transport.Read(read => read.Url("https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"))
            )
            .PageSize(100)
            .ServerPaging(true)
            .ServerSorting(true)
            .ServerFiltering(true)
        ))
    </div>
     
    <script id="tmpGridToolbar" type="text/x-kendo-template">
        <span class="ci-header-grid">Users</span>
        <div class="k-float-right k-display-inline-block">
            @(Html.Kendo().Button().Name("btnExport").Icon("file-excel").Content("Export").Events(evt => evt.Click("exportGrid")).ToClientTemplate())
        </div>
    </script>
     
    @section Scripts {
        <script>
            function exportGrid() {
                $("#gridMain").data("kendoGrid").saveAsExcel();
            }
            function resizeGrid() {
                $("#gridMain").data("kendoGrid").resize();
            }
            $(window).resize(function () {
                resizeGrid();
            });
            function gridMain_OnChange(arg) {
                var test = "";
                console.log(this);
                //var selected = $.map(this.select(), function (item) {
                //  return $(item).text();
                //});
                //console.log("Selected: " + selected.length + " item(s), [" + selected.join(", ") + "]");
            }
        </script>
    }

  2. Answer
    Petar
    Admin
    Petar avatar
    462 posts

    Posted 06 Apr 2020 Link to this post

    Hi Ari,

    In the provided Grid definition the gridMain_OnChange function is executed when the change event of the DataSource is triggered. Define the Grid as follows and the change event should be fired as expected:

    @(Html.Kendo().Grid<OrderViewModel>()
        .Name("gridMain")
        .Columns(columns =>
                {
            columns.Bound(e => e.OrderID).Filterable(false);
            columns.Bound(e => e.Freight);
            columns.Bound(e => e.OrderDate).Width(120).Format("{0:MM/dd/yyyy}");
            columns.Bound(e => e.ShipName).Width(260).Filterable(filterable => filterable.Cell(cell => cell.Operator("contains").ShowOperators(false)));
            columns.Bound(e => e.ShipCity).Width(150);
        })
        .Excel(excel =>
                {
            excel.AllPages(true);
            excel.FileName("Users.xlsx");
        })
        .ToolBar(toolbar => { toolbar.ClientTemplateId("tmpGridToolbar"); })
        .Pageable(pageable => pageable.Refresh(true).Numeric(false).PreviousNext(false))
        .Selectable(selectable => selectable.Mode(GridSelectionMode.Single).Type(GridSelectionType.Cell))
        .Navigatable()
        .Mobile()
        .Resizable(resize => resize.Columns(true))
        .ColumnMenu()
        .Sortable()
        .Scrollable(scrollable => scrollable.Virtual(true))
        .Filterable(filterable => filterable.Mode(GridFilterMode.Row))
        .Events(events => events.Change("gridMain_OnChange"))
        .DataSource(dataSource => dataSource
            .Custom()
            .Type("odata")
            .Events(events => events.Error("error_handler"))
            .Transport(transport =>
                transport.Read(read => read.Url("https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"))
            )
            .PageSize(100)
            .ServerPaging(true)
            .ServerSorting(true)
            .ServerFiltering(true))
        )
    

    Let me know if the suggested change resolves the issue.

    Regards,


    Petar
    Progress Telerik

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
  3. Ari Perlstein
    Ari Perlstein avatar
    8 posts
    Member since:
    Nov 2009

    Posted 06 Apr 2020 in reply to Petar Link to this post

    Yup, saw that soon after I posted, should have followed up, but thanks for looking into it.
Back to Top