I am having a weird issue with the tree grid and a remote datasource. It has taken forever to get the grid to display correctly just because how the data is, but none the less, its finally working except for some reason it is duplicating the rows when rendered. The data looks like when you expand the company which has id of 0:
var treeGridObj_dataManager = new ej.data.DataManager({
url: '/wp-json/lor/v1/Team/list',
crudUrl: '/wp-json/lor/v1/Team/crud',
adaptor: new ej.data.UrlAdaptor(),
crossDomain: true,
headers: [{"X-WP-Nonce": "<?=$nonce?>"}]
});
var reportsTo_dataManager = new ej.data.DataManager({
url: '/wp-json/lor/v1/Team/ReportsTo/list',
adaptor: new ej.data.UrlAdaptor(),
crossDomain: true,
headers: [{"X-WP-Nonce": "<?=$nonce?>"}]
});
var treeGridObj = new ej.treegrid.TreeGrid({
dataSource: treeGridObj_dataManager,
idMapping: 'id',
parentIdMapping: 'reports_to',
height: 500,
treeColumnIndex: 1,
allowPaging: false,
editSettings: { allowEditing: true, allowAdding: false, allowDeleting: false, mode: 'Dialog' },
toolbar: ['Edit','Update','Cancel'],
columns: [
{ field: 'id', headerText: 'ID', isPrimaryKey: true, visible: false },
{ field: 'team_name', headerText: 'Team Name', textAlign: 'Left' },
{ field: 'reportsTo', headerText: 'Reports To', textAlign: 'Left', dataSource: reportsTo_dataManager, foreignKeyField: 'id', foreignKeyValue: 'display_name', width:1, },
{ field: 'display_name', headerText: 'Employee Name', textAlign: 'Left', allowEditing: false, },
{ field: 'roles', headerText: 'Role', textAlign: 'Left', edit: {
create: function(){
elem = document.createElement('input');
return elem;
},
read: function() {
return roleMultiSelect.value;
},
destroy: function() {
roleMultiSelect.destroy();
},
write: function(args){
roleMultiSelect = new ej.dropdowns.MultiSelect({
dataSource: roles,
mode: 'CheckBox',
showSelectAll: true,
fields: {text: 'text', value: 'value'},
floatLabelType: 'Always', placeholder: 'Role',
value: (args.rowData[args.column.field])?args.rowData[args.column.field].split(','):[],
});
roleMultiSelect.appendTo(elem);
}
},
},
{ field: 'report_order', headerText: 'Report BEFORE Members', textAlign: 'Center', clipMode: 'EllipsisWithTooltip', editType: 'booleanedit', type: 'boolean', displayAsCheckBox: true },
{ field: 'lor_order', headerText: 'Display Order', textAlign: 'Center', editType: 'numericedit', edit: {params:{format: 'N0', decimals:0, step: 1, min: 1},}, },
],
queryCellInfo: function(args){
if(!args.data.roles && args.column.field=='report_order'){
args.cell.querySelector('.e-checkbox-wrapper.e-css').style.visibility="hidden";
}
},
actionComplete: function(args){
switch(args.requestType){
case 'beginEdit':
args.dialog.headerContent.innerText = 'Edit '+args.rowData.display_name;
break;
case 'save':
this.refresh();
break;
}
},
});
treeGridObj.appendTo('#grid');
As you can see, the teams get duplicated with the one individual. They all are indented correctly the first time, but the second set is not indented. Any thoughts as to what is wrong?
