Change event and row unselect

3 posts, 1 answers
  1. piotrekk
    piotrekk avatar
    6 posts
    Member since:
    Sep 2006

    Posted 09 Aug 2012 Link to this post

    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. Answer
    John DeVight
    John DeVight avatar
    209 posts
    Member since:
    Jan 2010

    Posted 09 Aug 2012 Link to this post

    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
  3. Kendo UI is VS 2017 Ready
  4. piotrekk
    piotrekk avatar
    6 posts
    Member since:
    Sep 2006

    Posted 10 Aug 2012 Link to this post

    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
Back to Top