Row not highlighted after click and change event is subscribed

8 posts, 2 answers
  1. Ralf
    Ralf avatar
    77 posts
    Member since:
    Jun 2012

    Posted 26 Jan 2015 Link to this post

    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








  2. Answer
    Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 28 Jan 2015 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Ralf
    Ralf avatar
    77 posts
    Member since:
    Jun 2012

    Posted 29 Jan 2015 in reply to Alexander Popov Link to this post

    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







  5. Ralf
    Ralf avatar
    77 posts
    Member since:
    Jun 2012

    Posted 29 Jan 2015 in reply to Alexander Popov Link to this post

    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
  6. Ralf
    Ralf avatar
    77 posts
    Member since:
    Jun 2012

    Posted 29 Jan 2015 in reply to Ralf Link to this post

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

    Regards,
    Ralf
  7. Answer
    Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 02 Feb 2015 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  8. Ralf
    Ralf avatar
    77 posts
    Member since:
    Jun 2012

    Posted 02 Feb 2015 in reply to Alexander Popov Link to this post

    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
  9. Ralf
    Ralf avatar
    77 posts
    Member since:
    Jun 2012

    Posted 02 Feb 2015 in reply to Alexander Popov Link to this post

    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
Back to Top
Kendo UI is VS 2017 Ready