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

Change event and row unselect

2 Answers 492 Views
Grid
This is a migrated thread and some comments may be shown as answers.
piotrekk
Top achievements
Rank 1
piotrekk asked on 09 Aug 2012, 09:21 AM
Hello,
According to documentation the change event should be fired when grid selection is changed. But this event don't occurs when row or cell is "unselected" by operations like sort or page change. Is there any way to detect that situation?

regards
pk

2 Answers, 1 is accepted

Sort by
0
Accepted
John DeVight
Top achievements
Rank 1
answered on 09 Aug 2012, 01:35 PM
Hi Piotrekk,

The only way I know of to do this would be to override the grid's dataSource sort and page functions.  Within the new sort or page function, raise an event and then call the original sort or page function.

If I had a grid defined as follows:

var grid = $("#grid").kendoGrid({
    dataSource: data,
    columns: [
        {
            field: "product",
            title: "Product",
            sortable: true
        },
        {
            field: "control",
            title: "Control"
        }
    ],
    selectable: "row",
    sortable: true,
    pageable: {
        pageSize: 5
    }
}).data("kendoGrid");

I could override the grid's dataSource sort and page functions like this:

// Save the reference to the original sort function.
grid.dataSource.originalSort = grid.dataSource.sort;
  
// Replace the original sort function.
grid.dataSource.sort = function() {
    // If a column is about to be sorted, then raise a new "sorting" event.
    if (arguments.length > 0) {
        this.trigger("sorting", arguments);
    }
    // Call the original sort function.
    var result = grid.dataSource.originalSort.apply(this, arguments);
    return result;
}
  
// Save the reference to the original page function.
grid.dataSource.originalPage = grid.dataSource.page;
  
// Replace the original page function.
grid.dataSource.page = function() {
    // If the grid is about to be paged, then raise a new "paging" event.
    if (arguments.length > 0) {
        this.trigger("paging", arguments);
    }
    // Call the original sort function.
    var result = grid.dataSource.originalPage.apply(this, arguments);
    return result;
}

Then I could bind to the dataSource's new "sorting" and "paging" events and detect whether there was a cell or row that was selected:

// Bind to the dataSource paging event.
$("#grid").data("kendoGrid").dataSource.bind("paging", function() {
    if ($("#grid .k-state-selected").length > 0) {
        if (console !== undefined) {
            console.log("About to page and a row or cell is selected");
        }
    }
});
  
// Bind to the new dataSource sorting event.
$("#grid").data("kendoGrid").dataSource.bind("sorting", function() {
    if ($("#grid .k-state-selected").length > 0) {
        if (console !== undefined) {
            console.log("About to sort and a row or cell is selected");
        }
    }
});

Attached is a sample.

Hope that helps.

Regards,

John DeVight
0
piotrekk
Top achievements
Rank 1
answered on 10 Aug 2012, 04:10 PM
Hi John,

Thank you for quick response with great example. I have expected, that solution will not be simple - the changes that you provided for datasource events 'page' and 'sort' should be also introduced for the 'group', 'filter', etc. Maybe someday Kendo team will expand the scope of the event 'change' (or rename it to 'select' :-) )

regards,
Piotr
Tags
Grid
Asked by
piotrekk
Top achievements
Rank 1
Answers by
John DeVight
Top achievements
Rank 1
piotrekk
Top achievements
Rank 1
Share this question
or