Grid row deselects on dataSource sync()

[DJo]

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.

[DJo]

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?

[DJo]

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?

[Daniel]

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

[DJo]

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.

[DJo]

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.

[Daniel]

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

[DJo]

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);

[Andrew]

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;
        }));
    }
});

[Douglas]

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.