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

[Colin]

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"
  }
]

[Alex Gyoshev]

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

 

 

[Colin]

Thanks Alex. I'll give that a crack.