Grid row deselects on dataSource sync()

10 posts, 0 answers
  1. DJo
    DJo avatar
    23 posts
    Member since:
    Nov 2012

    Posted 25 Mar 2013 Link to this post

    I have a grid bound to a dataSource. A change event on another control modifies the grid's selected data item and syncs the dataSource.

    When the operation completes the selected row in the grid deselects.

    This is not the behaviour I want - I want the grid row to remain selected. I cannot find anything to explain or modify the behaviour.

    Several controls can modify the data, for instance:
    $("#projectSponsor").kendoDropDownList({
                    dataTextField: "name",
                    dataValueField: "id",
                    dataSource: projectSponsorDataSource,
                    autoBind: true,
                    change: projectUpdate
                });
    The function that updates the data item and syncs the source is below:
    function projectUpdate() {
        //Update the data item related to the selected projectsGrid row and call sync()
        var grid = $("#projectsGrid").data("kendoGrid");
        var dataItem = grid.dataItem(grid.select());
        dataItem.title = document.getElementById("projectTitle").value;
        dataItem.budget = $("#projectBudget").data("kendoNumericTextBox").value();
        dataItem.sponsor = $("#projectSponsor").data("kendoDropDownList").value();
        dataItem.manager = $("#projectManager").data("kendoDropDownList").value();
        dataItem.status = $("#projectStatus").data("kendoDropDownList").value();
        dataItem.phase = $("#projectPhase").data("kendoDropDownList").value();
        dataItem.chartCode = $("#projectCIPcode").data("kendoDropDownList").value();
        dataItem.startDate = $("#startDatePicker").data("kendoDatePicker").value();
        dataItem.endDate = $("#endDatePicker").data("kendoDatePicker").value();
        dataItem.dirty = true;
        grid.dataSource.sync();
    }
    This all works very well, except that after the sync() method on the dataSource the selected row in the table is deselected.
  2. DJo
    DJo avatar
    23 posts
    Member since:
    Nov 2012

    Posted 26 Mar 2013 Link to this post

    Need some help here.

    I could track the ID of the selected row and force it to be selected after the sync(), but that seems clunky. Other alternatives?
  3. Kendo UI is VS 2017 Ready
  4. DJo
    DJo avatar
    23 posts
    Member since:
    Nov 2012

    Posted 26 Mar 2013 Link to this post

    I've walked through the code and this is caused by something in jQuery firing long after the dataSource is synced. It could be that using a distinct control to trigger a sync on the grid's dataSource causes focus to shift to the other control, taking the select off the grid. In other words clicking on the other control updates the dataSource but then shifts focus to that control, deselecting the grid row.

    I've even tried forcing a select on the grid after the sync, but the deselect is happening after all my javascript is done so it just deselects again.

    Any insight?
  5. Daniel
    Admin
    Daniel avatar
    2118 posts

    Posted 27 Mar 2013 Link to this post

    Hello David,

    The Grid will rebind itself after the data has been saved so the selection will be lost. You should save the row ID or index and restore the selection in the dataBound event.

    Regards,
    Daniel
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. DJo
    DJo avatar
    23 posts
    Member since:
    Nov 2012

    Posted 27 Mar 2013 Link to this post

    OK. I've set projectID to have the value of the id field in the data item selected in the grid. I've tried this:
    dataBound: function () {
                        $("#projectsGrid").data("kendoGrid").select(projectID);
                    }
    ... and this:
    dataBound: function () {
                        $("#projectsGrid").data("kendoGrid").select(projectsDataSource.data(projectID));
                    }
    ... to no avail.

    These functions do not select any row in the grid.
  7. DJo
    DJo avatar
    23 posts
    Member since:
    Nov 2012

    Posted 28 Mar 2013 Link to this post

    What I'm missing is a means to select a row in the grid based on the known dataSource item or, preferably, its ID. This seems like a common thing to want to do, but there does not seem to be documentation of how to programmatically select a row in a grid that corresponds to a given dataItem. The grid.select() method doesn't seem to take anything that I can build from a given dataItem ID.
  8. Daniel
    Admin
    Daniel avatar
    2118 posts

    Posted 29 Mar 2013 Link to this post

    Hello David,

    The select method accepts an HTML row element. You should find the row with the saved ID and then select it e.g.

    function dataBound(e) {
        var view = this.dataSource.view();
        for (var i = 0; i < view.length; i++) {
            if (view[i].id == id) {
                this.select(this.table.find("tr[data-uid='" + view[i].uid + "']"));
                break;
            }
        }
    }
    Kind regards,
    Daniel
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  9. DJo
    DJo avatar
    23 posts
    Member since:
    Nov 2012

    Posted 02 Apr 2013 Link to this post

    OK, I get it. Thanks.

    I vote for adding the ability to select a data item in the grid's dataSource directly, without having to dig out the HTML. Seems like an obvious and common thing to do and would make the KendoUI "framework" more complete. Something along the lines of:
    var dataItem = grid.dataSource.data[i];
    grid.select(dataItem);
  10. Andrew
    Andrew avatar
    19 posts
    Member since:
    Jan 2013

    Posted 17 Oct 2013 Link to this post

    I agree that the Grid widget would benefit from an API that worked with data objects instead of table rows. To that end, I added this method to the grid's widget prototype:
    kendo.ui.Grid.fn.selectDataItem = function (item) {
        if (item && item.uid) {
            this.select(this.table.find('tr[data-uid="' + item.uid + '"]'));
        }
    };
    Which allowed me to write code like this:
    grid.kendoGrid({
        dataSource: this.options.gridDataSource,
        selectable: true,
        // ... other options ...
        dataBound: function (e) {
            var kendoGrid = e.sender;
     
            // Select a row (if any)
            kendoGrid.selectDataItem(kendoGrid.dataSource.data().find(function (obj) {
                return obj.id === mySelectedId;
            }));
        }
    });
  11. Douglas
    Douglas avatar
    9 posts
    Member since:
    Jul 2013

    Posted 19 Sep 2015 in reply to Andrew Link to this post

    It's been two years since you posted this and I just wanted to say thanks.  Telerik still has not added any methods for making row selection easy and your solution still works with the latest release.
Back to Top
Kendo UI is VS 2017 Ready