I recently developed a drag and drop tree list inspired by the tutorial on IgniteUI website. The main tree list functions properly, but I encountered an issue with the child nodes displaying as undefined, as illustrated in the image below:
This is my TypeScript code snippet:
this.settings = {
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;
}
}
};
The JSON data structure of this.ServiceCounterPointRelations looks like:
"ServiceCounterPointRelations": [
{
"ServiceCounterId": 2,
"ServiceCounter": "Main Counter",
"ServicePoints": [
{
"ServicePointId": 2,
"ServicePoint": "Service Point 1"
}
]
},
...
]
After investigating, I identified that the problem lies in binding only the parent node's textKey as 'ServiceCounter' and valueKey as 'ServiceCounterId'. As the child nodes have different keys, I am currently exploring solutions to address this mismatch. Any guidance or suggestions on how to handle this situation would be greatly appreciated. Thank you.