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

Grid row deselects on dataSource sync()

9 Answers 441 Views
Grid
This is a migrated thread and some comments may be shown as answers.
DJo
Top achievements
Rank 1
DJo asked on 25 Mar 2013, 07:57 PM
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.

9 Answers, 1 is accepted

Sort by
0
DJo
Top achievements
Rank 1
answered on 26 Mar 2013, 03:53 PM
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?
0
DJo
Top achievements
Rank 1
answered on 26 Mar 2013, 04:28 PM
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?
0
Daniel
Telerik team
answered on 27 Mar 2013, 03:44 PM
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!
0
DJo
Top achievements
Rank 1
answered on 27 Mar 2013, 09:47 PM
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.
0
DJo
Top achievements
Rank 1
answered on 28 Mar 2013, 02:49 PM
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.
0
Daniel
Telerik team
answered on 29 Mar 2013, 02:22 PM
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!
0
DJo
Top achievements
Rank 1
answered on 02 Apr 2013, 03:48 PM
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);
0
Andrew
Top achievements
Rank 1
answered on 17 Oct 2013, 09:33 PM
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;
        }));
    }
});
0
Douglas
Top achievements
Rank 1
answered on 19 Sep 2015, 05:19 AM
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.
Tags
Grid
Asked by
DJo
Top achievements
Rank 1
Answers by
DJo
Top achievements
Rank 1
Daniel
Telerik team
Andrew
Top achievements
Rank 1
Douglas
Top achievements
Rank 1
Share this question
or