Row not highlighted after click and change event is subscribed

[Ralf]

Hi all,

I have defined three grids on a page configured declarative way, and do data binding with a viewmodel. When I click a row in the first grid (master), the event will be handled by my custom function. This function gets the selected row and it's DataItem and sets the DataItem to a property in viewmodel. This property is bound to the second grid (details). The change event of the second grid is bound to a custom function also. When selecting a row in second grid, the function gets the selected row and it's DataItem. The DataItem will be set to a property in viewmodel, and this property is bound to the third grid.
All data lists in the viemodel are defined as kendo.dataSource, and the viewmodel is defined as kendo.obersvable.

The bindings are working fine, but the selected row in each grid are not highlighted.When I not set the properties in the custom functions, the hightlighting works.

Here are some snippets of my code (in Html and TypeScript):

First grid definition:

1.<div id="headerDataTabsGrid" style="height: 500px; width: 150px;"
2.    data-role="grid"
3.    data-bind="source: configJson.Tabs, events: { change: configJson.SelectedTabChange }"
4.    data-selectable="row"
5.    data-scrollable="true"
6.    data-columns="[{ 'field': 'UniqueName', title: ' ' }]">
7.</div>

Second grid definition:

01.<div id="headerDataColumnDefinitionsGrid" style="height: 180px; width: 800px;"
02.    data-role="grid"
03.    data-bind="source: configJson.SelectedTab.ColumnDefinitions,
04.        events: { change: configJson.SelectedColumnDefinitionChange, save: configJson.DataSaved }"
05.    data-selectable="row"
06.    data-scrollable="true"
07.    data-editable="{ mode: 'popup' }"
08.    data-columns="[{ 'field': 'InternalFieldName', title: 'Interner Feldname' },
09.        { 'field': 'CustomControl', title: 'BenutzerSteuerelement' },
10.        { 'field': 'OptionalText', title: 'Optionaler Text' },
11.        { 'field': 'DataProvider', title: 'Datenverbindung' }]">
12.</div>

Third grid definition:

01.<div id="headerDataColumnDefinitionStatesGrid" style="height: 180px; width: 800px;"
02.    data-role="grid"
03.    data-bind="source: configJson.SelectedColumnDefinition.States,
04.        events: { change: configJson.SelectedStateChange }"
05.    data-selectable="row"
06.    data-scrollable="true"
07.    data-editable="{ mode: 'popup' }"
08.    data-columns="[{ 'field': 'Name', title: 'Name', 'width': 300 },
09.        { 'field': 'IsVisible', title: 'Sichtbar' },
10.            { 'field': 'IsEditable', title: 'Änderbar' },
11.                { 'field': 'IsRequired', title: 'Erforderlich' }]">
12.</div>

The viewmodel creation:

01.private _createViewModel(jsonObj: any): any {
02.                    var self = this;
03.
04.                    var viewModel = {
05.                        Tabs: [
06.                        ],
07.                        SelectedTab: null,
08.                        SelectedColumnDefinition: null,
09.                        SelectedState: null,
10.                        SelectedTabChange: (e) => { self._onSelectedTabChanged(e); },
11.                        SelectedColumnDefinitionChange: (e) => { self._onSelectedColumnDefinitionChanged(e); },
12.                        SelectedStateChange: (e) => { self._onSelectedStateChanged(e); },
13.                        AddNewColumnDefinition: (e) => { self._onAddNewColumnDefinition(e); },
14.                        EditColumnDefinition: (e) => { self._onEditColumnDefinition(e); },
15.                        DeleteColumnDefinition: (e) => { self._onDeleteColumnDefinition(e); },
16.                        DataSaved: (e) => { self._onDataSaved(e); },
17.                        AddNewState: (e) => { self._onAddNewState(e); },
18.                        EditState: (e) => { self._onEditState(e); },
19.                        DeleteState: (e) => { self._onDeleteState(e); },
20.                        Store: () => { self._onStoreConfig(viewModel); },
21.                        CanAddColumnDefinition: false,
22.                        CanEditColumnDefinition: false,
23.                        CanDeleteColumnDefinition: false,
24.                        CanAddState: false,
25.                        CanEditState: false,
26.                        CanDeleteState: false,
27.                        CanDeleteTab: false,
28.                        CanSave: true
29.                    };
30.
31.                    var tempTabs = jsonObj.Tabs[0].Tab;
32.
33.                    for (var index = 0; index < tempTabs.length; index++) {
34.                        var tab = tempTabs[index];
35.                        var newTap = {
36.                            Title: tab.title,
37.                            DisplayName: tab.title,
38.                            UniqueName: tab.UniqueName,
39.                            OptionalText: "",
40.                            DataProvider: "",
41.                            ColumnDefinitions: self._createColumnDefinitionsDataSource(self._getColumnsFromSource(tab.Columns[0]))
42.                        }
43.                        viewModel.Tabs.push(newTap);
44.                    }
45.
46.                    return kendo.observable(viewModel);
47.                }

The change event handling functions:

01.private _onSelectedTabChanged(e: any) {
02.                    var selectedTab = e.sender.dataItem(e.sender.select());
03.                    var config = this.data.get("configJson");
04.                    config.set("CanDeleteTab", true);
05.                    config.set("CanAddColumnDefinition", true);
06.                    config.set("CanEditColumnDefinition", false);
07.                    config.set("CanDeleteColumnDefinition", false);
08.                    config.set("CanAddState", false);
09.                    config.set("CanEditState", false);
10.                    config.set("CanDeleteState", false);
11.
12.                    var lastSelectedTab = config.get("SelectedTab"); // If comment out, highlighting works.
13.                    if (lastSelectedTab == null || (lastSelectedTab != null && lastSelectedTab.UniqueName != selectedTab.UniqueName)) {
14.                        config.set("SelectedTab", selectedTab);
15.                        config.set("SelectedColumnDefinition", this._createColumnDefinitionsDataSource([]));
16.                        config.set("SelectedState", this._createStatesDataSource([]));
17.                    }
18.                }

01.private _onSelectedColumnDefinitionChanged(e: any) {
02.    var selectedColumnDefinition = e.sender.dataItem(e.sender.select());
03.    var config = this.data.get("configJson");
04.    config.set("SelectedColumnDefinition", selectedColumnDefinition); // If comment out, highlighting works.
05.    config.set("SelectedState", this._createStatesDataSource([]));
06.    config.set("CanEditColumnDefinition", true);
07.    config.set("CanDeleteColumnDefinition", true);
08.    config.set("CanAddState", selectedColumnDefinition.States.length > 0);
09.    config.set("CanEditState", false);
10.    config.set("CanDeleteState", false);
11.}

What's wrong and how to solve?
I'm using the latest version of Kendo UI (v2014.3.1316)

Regards,
Ralf

[Alexander Popov]

Hi Ralf,

Updating the value of the field that is used as a DataSource for the Grid will cause the widget to be redrawn, which in turn will clear any selection. I would suggest either using a setup which stores the desired information in separate fields or persisting the row selection using the dataBound event.

Regards,
Alexander Popov
Telerik

 

 

[Ralf]

Hello Alexander,

Thank you for information. I sum up. 
The ViewModel will be bound declarative (MVVM) to a DIV (ID=Main) containing two DIVS representing grids (Master/Details).
The change event of the first grid will be handled in ViewModel, and set "SelectedTab" to the selected item:

data-bind="source: configJson.Tabs, events: { change: configJson.SelectedTabChange }"
and
config.set("SelectedTab", selectedTab);

SelectedTab item is an object containing some fields and a kendo.dataSource holding the details. These details will be bound declarative (MVVM) to the second grid. This is working fine. Only the selection in first grid is lost. 

As you explained, when setting the field "SelectedTab" the selections in both grids will be cleared, right?
When defining the field "SelectedTab" outside the ViewModel I cannot bind it. So how to update the second grid datasource then?
Using a controller then is not MVVM like.

Regards,
Ralf

[Ralf]

Hello Alexander,

I have tested your second solution, but an error comes up when loading the page. See my example: Dojo Example

Is there a solution?

Regards,
Ralf

[Ralf]

Ups, forget my last post. It was my fault.

Regards,
Ralf

[Alexander Popov]

Hello Ralf,

As I mentioned in my previous reply, using separate root-level fields (instead of nesting them inside the configJson field) should help.

Regards,
Alexander Popov
Telerik

 

 

[Ralf]

Hello Alexander,

you are right. My mystake was to re-assign a new kendo.dataSource object after selecting a row in the master grid. The right way is to change only the "data" of the current bound dataSource.
My fault...

Thank you very much for information.

Kind regards,
Ralf

[Ralf]

Hello Alexander,

you are right. My mystake was to re-assing a new kendo.dataSource object after selecting a row in master grid. I only have to assign new data to the "data" field of current bound dataSource and using root-level fields otuside the kendo.observable.

Thank you very much for information.

Kind regards,
Ralf