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:
Second grid definition:
Third grid definition:
The viewmodel creation:
The change event handling functions:
What's wrong and how to solve?
I'm using the latest version of Kendo UI (v2014.3.1316)
Regards,
Ralf
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