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

Grid Change Event Issue

2 Answers 164 Views

Grid

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

n/a asked on 01 Apr 2020, 04:55 PM

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 Answers, 1 is accepted

Accepted

answered on 06 Apr 2020, 10:00 AM

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.