Custom Checkbox Treeview JSON update "Items" to replace with "children"

4 posts, 0 answers
  1. Harish
    Harish avatar
    2 posts
    Member since:
    Aug 2016

    Posted 26 Apr 2017 Link to this post

    Hi,

    Facing issue with TreeView with  angular1. PSB code.

    Problem: When i try to model my JSON for Checkbox Tree doesn't bind my attribute named "children" may be because the property name same!

    Expected: As we change kendo default "text" property to custom "dataTextField", How can i replace "items" to "children"

     

    HTML:

    <div kendo-tree-view="tree"  k-data-source="dataSource"   k-options="options"   k-on-change="selecteditem=dataItem"> </div>

     

    Angular:

     var schemaTree = {
            model: {
              //children: "items"
                children: "children"
              }
            };

            $scope.options = {
             dataTextField: "name",
              
              checkboxes: {
                checkChildren: true,
                template: "<input id='checkbox_#:item.uid#' ng-model='dataItem.isChecked' type='checkbox' class='k-checkbox'/><label for='checkbox_#:item.uid#' class='k-checkbox-label'></label>"
              },
              
              template: "#: item.name #"
            };

            $scope.treeData = [
              {
                "name": "Alex's family tree",
                "isChecked":true,
                "id": 44,
                "items": [
                  {
                    "id": 1,
                    "name": "Reef",
                    "isChecked": true
                  },
                  {
                    "id": 2,
                    "name": "Coraline",
                    "isChecked": true
                  }
                ],
                "children": [
                  {
                    "id": 1,
                    "name": "Reef",
                    "isChecked": true
                  },
                  {
                    "id": 2,
                    "name": "Coraline",
                    "isChecked": true
                  }
                ]
              }
            ];
            
            $scope.dataSource = new kendo.data.HierarchicalDataSource({
            data : $scope.treeData,
              schema: schemaTree
            });

     

    Please let me know if you need more info on the same. Any help will be appreciated.

     

    Regards,

    Harish

  2. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    1201 posts

    Posted 28 Apr 2017 Link to this post

    Hi Harish,

    The sample code, that you have provided looks appropriate for the described case. On the following Dojo you will notice, that the TreeView DataSource schedma.model.children is properly assigned to the children field from the TreeView DataItems.

    Could you, please, modify the above, so it reproduces the problem observed and send it back to us?

    Regards,
    Veselin Tsvetanov
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Harish
    Harish avatar
    2 posts
    Member since:
    Aug 2016

    Posted 28 Apr 2017 in reply to Veselin Tsvetanov Link to this post

    Thanks for the reply! If you see in mentioned Dojo, treeData has "items" attribute and "children" attribute as well it prints  Items only where as i want to print data of Children attribute. Please see JSFiddle https://jsfiddle.net/HarishBoke/4ryapo8t/ 

     

    Kindly let me know if you need any further info.

  4. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    1201 posts

    Posted 02 May 2017 Link to this post

    Hello Harish,

    Thank you for the additional clarifications and for the sample sent. As mentioned in our Documentation, "​'children' cannot be used as a field name because the model already has a children property - the child data source." Therefore, you will need to use another field name for the collection of child elements of an item.

    Regards,
    Veselin Tsvetanov
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top