Client-side TreeView does not retrive children when id property is camelCase

3 posts, 0 answers
  1. Colin
    Colin avatar
    2 posts
    Member since:
    Apr 2016

    Posted 27 Apr Link to this post

    We are trying to bind the TreeView to an object that has camelCase properties. We have noticed a number of incompatibilities when trying to do this.

    For example the property "level" seems to be defined by the dataItem object and if you map to that property it overrides that value, causing an exception in the code.

    We have renamed properties to get around this but we seem to have an issue with the id mapping used to retrieve children elements. If the property is camel case the tree fails to call the Web service we have bound to it. If we change it to have the id mapping to be uppercase everything works as expected.

    No error is thrown in the console but no children are returned because the TreeView doesn't attempt to contact the web service.

    We would like all of our web apis to return JSON in camel case to conform to convention. This limitation is causing us some issues with consistency.

    JS Code:
    var statuteTreeDataSource: kendo.data.HierarchicalDataSource = new kendo.data.HierarchicalDataSource({
                    transport: {
                        read: {
                            url: kendo.format("/api/StatutesTree/")
                        }
                    },
                    schema: {
                        model: {
                            id: "statuteKey",
                            fields: {
                                "statuteName": {
                                    type: "string"
                                },
                                "statuteLevel": {
                                    type: "string"
                                }
                            },
                            hasChildren: "statuteHasChildren"
                        }
                    }
                });

                this.statuteTreeOptions = {
                    dataSource: statuteTreeDataSource,
                    dataTextField: "statuteName",
                    select: function(e) {
                        this.expand(e.node);
                    }
                };


    HTML:

    <md-sidenav class="md-sidenav-right"
                md-component-id="right"
                md-is-locked-open="$mdMedia('gt-md')"
                md-whiteframe="4"
                layout-fill>
        <div ng-controller="StatuteTreeController as vm">
            <md-toolbar>
                <div class="md-toolbar-tools" layout-align="center center">
                    <h1>Statute Tree</h1>
                </div>
            </md-toolbar>
            <md-content class="nav-content" >
                <div kendo-treeview="tree" k-options="vm.statuteTreeOptions" k-on-change="vm.selectedItem = dataItem" ng-click="vm.nodeClick($event)">
                    <span k-template="itemTemplate">{{ dataItem.text }}</span>
                </div>
            </md-content>
        </div>
    </md-sidenav>


    JSON:

    [
      {
        "statuteKey": "Code,AG,Agriculture Code",
        "statuteHasChildren": true,
        "expirationDate": "9999-12-31T23:59:59",
        "selected": false,
        "code": "AG",
        "statuteName": "Agriculture Code",
        "children": null,
        "statuteLevel": "Code"
      },
      {
        "statuteKey": "Code,AL,Alcoholic Beverage Code",
        "statuteHasChildren": true,
        "expirationDate": "9999-12-31T23:59:59",
        "selected": false,
        "code": "AL",
        "statuteName": "Alcoholic Beverage Code",
        "children": null,
        "statuteLevel": "Code"
      }
    ]
  2. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 29 Apr Link to this post

    Hello Colin,
    > For example the property "level" seems to be defined by the dataItem object and if you map to that property it overrides that value, causing an exception in the code.
    Yes, methods and properties of the Node class cannot be overridden, as they are used by the TreeView for proper operation. This includes the children field that holds the child datasource. It is likely that serializing children: null causes the problem. The casing of the id field has no effect on the datasource functionality.

    Regards,
    Alex Gyoshev
    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. Colin
    Colin avatar
    2 posts
    Member since:
    Apr 2016

    Posted 30 Apr in reply to Alex Gyoshev Link to this post

    Thanks Alex. I'll give that a crack. 
Back to Top