Heirarchy json value in children not appending to treegrid.

[PoojaGumalwarParticipant]

Please any body know how to solve this:
{
“ouId”: 1,
“ouCode”: “AM”,
“ouLevels”: 1,
“ouName”: “Area Managements”,
“createdBy”: {
“userId”: 1,
“email”: “aditi@gmail.com”,
“firstName”: “Aditi”,
“lastName”: “D”
},
“backupReportTo”: {
“userId”: 1,
“email”: “aditi@gmail.com”,
“firstName”: “Aditi”,
“lastName”: “D”
},
“reportTo”: {
“userId”: 2,
“email”: “yuga@gmail.com”,
“firstName”: “Yuga”,
“lastName”: “K”
},
“parentOU”: null,
“children”: [
{
“ouId”: 4,
“ouCode”: “AdM”,
“ouLevels”: 1,
“ouName”: “Admin Management”,
“createdBy”: {
“userId”: 2,
“email”: “yuga@gmail.com”,
“firstName”: “Yuga”,
“lastName”: “K”
},
“backupReportTo”: {
“userId”: 3,
“email”: “abhijeet@gmail.com”,
“firstName”: “Abhijeet”,
“lastName”: “D”
},
“reportTo”: {
“userId”: 4,
“email”: “neha@gmail.com”,
“firstName”: “neha”,
“lastName”: “j”
},
“parentOU”: 1,
“children”: [],
“parent”: null
},
{
“ouId”: 22050,
“ouCode”: “SM”,
“ouLevels”: 1,
“ouName”: “siddhatech Managements”,
“createdBy”: {
“userId”: 4,
“email”: “neha@gmail.com”,
“firstName”: “neha”,
“lastName”: “j”
},
“backupReportTo”: {
“userId”: 1,
“email”: “aditi@gmail.com”,
“firstName”: “Aditi”,
“lastName”: “D”
},
“reportTo”: {
“userId”: 4,
“email”: “neha@gmail.com”,
“firstName”: “neha”,
“lastName”: “j”
},
“parentOU”: 1,
“children”: [
{
“ouId”: 2,
“ouCode”: “DM”,
“ouLevels”: 1,
“ouName”: “Division Management”,
“createdBy”: {
“userId”: 4,
“email”: “neha@gmail.com”,
“firstName”: “neha”,
“lastName”: “j”
},
“backupReportTo”: {
“userId”: 4,
“email”: “neha@gmail.com”,
“firstName”: “neha”,
“lastName”: “j”
},
“reportTo”: {
“userId”: 1,
“email”: “aditi@gmail.com”,
“firstName”: “Aditi”,
“lastName”: “D”
},
“parentOU”: 22050,
“children”: [],
“parent”: null
}
],
“parent”: null
}
],
“parent”: null
}

This is my response I want reportTo,backupReportTo and createdBy show to treegrid
this.source =
{
dataType: ‘json’,
datafields: [
{ name: ‘ouName’ },
{ name: ‘ouCode’ },
// { name: ‘reportTo’, map: ‘reportTo>firstName’ },
{ name: ‘isDisabled’ },
{ name: ‘children’ },
{ name: ‘expanded’ },
{ name: “reportTo”, type: “array”, map:”reportTo>firstName” },
],
hierarchy:
{
root: ‘children’
},
id: ‘ouId’,
localData: this.ouList
};

this.dataAdapter = new jqx.dataAdapter(this.source);

this.columns =
[
{ text: ‘Name’, dataField: ‘ouName’, width: “350px” },
{ text: ‘Code’, dataField: ‘ouCode’, width: “130px” },
{ text: ‘Is Disable’, dataField: ‘isDisabled’, width: “110px” },
{ text: ‘Report To’, dataField: ‘reportTo’,width: “250px” },
{
text: ‘Action’,width: “110px”, cellsAlign: ‘center’, align: “center”, columnType: ‘none’, editable: false, sortable: false, dataField: null, cellsRenderer: function (row, column, value) {
// render custom column.
return “<button data-row=’” + row + “‘ class=’editButtons fa fa-edit custom-fa’ (click)=’UpdateButton(oudata)’></button><i margin-left: 15px;’ data-row=’” + row + “‘ class=’fa fa-trash-o custom-fa’ (click)=’DeleteButton(oudata)’></i>”;
}
}
];

On first reportTo proper data coming but on children data not getting properly.[Object Object] shows in tablegrid.

[MartinParticipant]

Hello PoojaGumalwar,

I created a Demo using your code.

You should use:

hierarchy:
     {
         keyDataField: { name: 'ouId' },
         parentDataField: { name: 'parentOU' }
     }

,
instead of nesting the children in the json object.

Best Regards,
Martin

jQWidgets Team
http://www.jqwidgets.com/

[PoojaGumalwarParticipant]

Hello Martin,
Thank you for solution,
I am working with Treegrid cell button action for Edit and delete.
this.columns =
[
{ text: ‘Name’, dataField: ‘ouName’, width: “258px” },
{ text: ‘Code’, dataField: ‘ouCode’, width: “130px” },
{ text: ‘Is Disable’, dataField: ‘isDisabled’, width: “110px” },
{ text: ‘Parent OU Name’, dataField: ‘parentOUName’,width: “195px” },
{ text: ‘Report To Name’, dataField: ‘reportTo’,width: “195px” },
{
text: ‘Action’,width: “70px”, cellsAlign: ‘center’, align: “center”, columnType: ‘none’, editable: false, sortable: false, dataField: null, cellsRenderer: function (row, column, value) {
// render custom column.
return “<i data-row='” + row + “‘ style=’font-size: large;’ class=’removeButtons fa fa-edit custom-fa’ #buttonReference ></i> <i margin-left: 15px;’ data-row='” + row + “‘ style=’font-size: large;’ class=’fa fa-trash-o custom-fa’ (click)=’DeleteButton(oudata)’></i>”;
}
}
];

/*
* DELETE API Call for OU delete data.
*/
deleteOUData(oudata) {
this.apiService
.deleteOUData(oudata.ouId)
.subscribe(
result => {
if (result) {
//window.location.href = “/administration/ou-management”;
this.refresh();
}
},
e => {
this.errorMessage = e;
this.erroralert(this.errorMessage)
},
() => this.isLoading = false
);
}

UpdateButton(oudata) {
console.log(“I am call to update”);
this.router.navigate([${NavigationConstants.ROUTE_TO_UPDATEOU_URL}${NavigationConstants.BACKSLASH} + oudata.ouId]);
}

I want to call this Methods on Edit and delete button. Can you please help me how to work with such method.Instead of Button I want Fa image so I am using i for it.

[MartinParticipant]

Hello PoojaGumalwar,

I answered your question on the other topic that you have opened.

Best Regards,
Martin

jQWidgets Team
http://www.jqwidgets.com/

[Author]

Posts