[PoojaGumalwarParticipant]

Hi Martin,
By giving you solution now I got button to action but treeview is disturb completely. Its not create treeview in table. Please check,

Thanks and regards,
Pooja Gumalwar

[PoojaGumalwarParticipant]

Hi Martin,
I am use your code again its give on ERROR

Error: Invalid Selector! Please, check whether the used ID or CSS Class name is correct.
Is there I am doing something wrong. Please suggest me.

export class OuManagementComponent{
ngOnInit() {
this.getOUList();
}

getOUList() {
this.apiService
.getOUlist()
.subscribe(
/* happy path */ p => {
this.ouList = p;
console.log( this.ouList);
});
}

source: any =
{
dataType: ‘json’,
datafields: [
{ name: ‘ouId’, type: ‘number’ },
{ name: ‘ouName’ },
{ name: ‘ouCode’ },
// { name: ‘reportTo’, map: ‘reportTo>firstName’ },
{ name: “reportTo”, type: “array”, map: “reportTo > firstName” },
{ name: ‘parentOU’, type: ‘number’ }
],
hierarchy:
{
keyDataField: { name: ‘ouId’ },
parentDataField: { name: ‘parentOU’ }
},
id: ‘ouId’,
localData: this.ouList,
async: true
};

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

columns: any[] = [
{ text: ‘Id’, dataField: ‘ouId’, width: “130px” },
{ text: ‘Name’, dataField: ‘ouName’, width: “350px” },
{ text: ‘Code’, dataField: ‘ouCode’, width: “130px” },
{
text: ‘Edit’, datafield: ‘Edit’, columntype: ‘button’, editable: false, sortable: false,
cellsrenderer: (row: number): string => { return ‘<div class=”editButton” style=” float: left”></div>’ }
}
];

rendered = (): void => {
let editButtons = jqwidgets.createInstance(‘.editButton’, ‘jqxButton’, { width: 60, height: 24, value: ‘Edit’ });
if (!isArray(editButtons)) {
let button = editButtons;
editButtons = [];
editButtons.push(button);
}

let flattenCancelButtons = flatten(editButtons);

function flatten(arr: any[]): any[] {
if (arr.length) {
return arr.reduce((flat: any[], toFlatten: any[]): any[] => {
return flat.concat(Array.isArray(toFlatten) ? flatten(toFlatten) : toFlatten);
}, []);
}
}

for (let i = 0; i < flattenCancelButtons.length; i++) {
flattenCancelButtons[i].addEventHandler(‘click’, (event: any): void => {
this.editClick(event);
});
}
}

rowKey: number;

rowClick(event: any): void {
this.rowKey = event.args.key;
};

editClick(event) {
let row = this.myTreeGrid.getRow(this.rowKey.toString());
console.log(row);
}
}

In HTML:
<jqxTreeGrid #myTreeGrid
(onRowClick)=”rowClick($event)”
[source]=”dataAdapter”
[pageable]=”false”
[sortable]=”false”
[columns]=”columns”
[rendered]=”rendered”
>
</jqxTreeGrid>

[PoojaGumalwarParticipant]

Hi Martin,
As you telling me solution I am call one method in NgOnInit,
ngOnInit() {
this.getOUList();

}

getOUList() {
this.apiService
.getOUlist()
.subscribe(
/* happy path */ p => {
this.ouList = p;
console.log(“OULIST—————–“, this.ouList);

this.source =
{

dataType: ‘json’,
datafields: [
{ name: ‘ouName’ },
{ name: ‘ouCode’ },
{ name: ‘isDisabled’ },
{ name: ‘expanded’ },
{ name: “reportTo”, map: ‘reportTo>completeName’ },
{ name: ‘parentOUName’ },
{ name: ‘ouId’, type: ‘number’ },
{ name: ‘parentOU’, type: ‘number’, map: ‘parentOU>ouId’ }
],
hierarchy:
{
keyDataField: { name: ‘ouId’ },
parentDataField: { name: ‘parentOU’ }
},
id: ‘ouId’,
localData: this.ouList
};

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

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 “<button data-row=’” + row + “‘ style=’font-size: large;’ class=’fa fa-edit custom-fa'(click)=’UpdateButton(oudata)’ ></button> <i margin-left: 15px;’ data-row=’” + row + “‘ style=’font-size: large;’ class=’fa fa-trash-o custom-fa’ (click)=’DeleteButton(oudata)’></i>”;
}
}

];

}, like this where render method is not calling. Please give me proper solution. I am very frustrated by resolving this issue.I am call API for list in this method and set data to column. Till yet its not hard but for calling rendered:()void={} this method not call happend. and there are error crash
Error: Invalid Selector! Please, check whether the used ID or CSS Class name is correct.

[PoojaGumalwarParticipant]

Hi Martin,
I am using TreeGrid and according to grid
text: ‘Edit’, datafield: ‘Edit’, columntype: ‘button’,
cellsrenderer: (): string => {
return ‘Edit’},
button not call any Method and I am try OnClick so its give error “ReferenceError: buttonClick is not defined”. Please check.

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”, cellsformat: ‘c2’ },
{
text: ‘Edit’, datafield: ‘Edit’, columntype: ‘button’,
cellsrenderer: (row): string => {
return “<span style=’font-size: large;’ class=’fa fa-edit custom-fa’ onclick=’buttonClick(” + row + “)’/>”;
},
buttonclick: (row: number): void => {
//get the data and append in to the inputs
this.editrow = row;
let dataRecord = this.myGrid.getrowdata(this.editrow);
console.log(“Records=================”,dataRecord)

}
}

];

Thanks.

[PoojaGumalwarParticipant]

I am using Commandcolumn solution to resolved this issue there is error,
1. Error: Invalid Selector! Please, check whether the used ID or CSS Class name is correct.
2. TypeError: r.columns.records is undefined
I want the solution in Angular5. Please if any body resolve this issues,Post it as soon as possitble.

[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.

[PoojaGumalwarParticipant]

Hi Christopher,

{
“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.

[Author]

Posts