Ignite UI TreeList binding two names and values

Question

I created a drag and drop tree list based on this IgniteUI tutorial. The tree list is working great, but the problem is with the child. I'm getting undefined in the child as shown in the image

Here is my ts code:

this.options = {
  checkboxMode: 'triState',
  singleBranchExpand: true,
  dataSource: jQuery.extend(true, [], this.ServiceCounterPointRelations),
  dataSourceType: 'json',
  initialExpandDepth: 2,
  pathSeparator: '.',
  bindings: {
    textKey: 'ServiceCounter',
    valueKey: 'ServiceCounterId',
    childDataProperty: 'ServicePoints'
  },
  dragAndDrop: true,
  dragAndDropSettings: {
    allowDrop: true,
    customDropValidation: function (element) {
      var valid = true,
        droppableNode = jQuery(this);
      if (droppableNode.is('a') && droppableNode.closest('li[data-role=node]').attr('data-value') === 'File') {
        valid = false;
      }

      return valid;
    }
  }
};

this.ServiceCounterPointRelations contains the following json

"ServiceCounterPointRelations": [
    {
        "ServiceCounterId": 2,
        "ServiceCounter": "Main Counter",
        "ServicePoints": [
            {
                "ServicePointId": 2,
                "ServicePoint": "Service Point 1"
            }
        ]
    },
    {
        "ServiceCounterId": 3,
        "ServiceCounter": "Counter 1",
        "ServicePoints": []
    },
    {
        "ServiceCounterId": 4,
        "ServiceCounter": "Test for 2",
        "ServicePoints": []
    },
    {
        "ServiceCounterId": 5,
        "ServiceCounter": "ASD",
        "ServicePoints": [
            {
                "ServicePointId": 1,
                "ServicePoint": "DER"
            },
            {
                "ServicePointId": 3,
                "ServicePoint": "ER"
            }
        ]
    },
    {
        "ServiceCounterId": 6,
        "ServiceCounter": "ASD",
        "ServicePoints": []
    },
    {
        "ServiceCounterId": 7,
        "ServiceCounter": "EEE",
        "ServicePoints": []
    },
    {
        "ServiceCounterId": 8,
        "ServiceCounter": "With New Tog",
        "ServicePoints": []
    }
]

I found the issue but i'm still searching for the fix. The issue is i'm binding only the parent textKey as 'ServiceCounter' and valueKey as 'ServiceCounterId'. But the child has different textKey and valueKey. I have no idea how to do this. Any advice would be helpful. Thanks.

Answer 1

The child bindings are defined in a hierarchical fashion. In your example the only binding layer is the top data layer, and thus the tree is looking for the same text and value keys as in the top data layer. Here's how to define it:

bindings: {
    textKey: 'ServiceCounter',
    valueKey: 'ServiceCounterId',
    childDataProperty: 'ServicePoints',
    bindings: {
        textKey: 'ServicePoint',
        valueKey: 'ServicePointId'
    }
},