jqxTreeGrid unable to add button in cellsRenderer

[smithaParticipant]

Hello,

I’m facing issue while trying to add a button in the cellsRenderer. I’m using Angular 6 framework components and jqwidgets-framework version – 5.7.2.
I tried doing the same as mentioned in https://www.jqwidgets.com/angular/angular-treegrid/angular-treegrid-commandcolumn.htm but i’m getting below error –
“Error: Invalid Selector – .editButton! Please, check whether the used ID or CSS Class name is correct”.

I need to add a button in a cell under the jqxtreegrid and onclick of button a pop-up should be displayed.

columns: any[] = [{
text: ‘Edit’, cellsAlign: ‘center’, align: ‘center’, columnType: ‘none’, width: 150,
editable: false, sortable: false, dataField: null,
cellsRenderer: (row: number, column: any, value: any): string => {
return ‘<div data-row=’ + row + ‘ class=”editButton” style=”margin-left: 4em; float: left”></div>’;
}
}];
rendered = (): void => {
let uglyEditButtons = jqwidgets.createInstance(‘.editButton’, ‘jqxButton’, { width: 160, height: 240, value: ‘Edit’ });
let flattenEditButtons = flatten(uglyEditButtons);
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);
}, []);
}
}

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

Appreciate the help!
Thank You.

[MartinParticipant]

Hello smitha,

This error means that the buttons are not yet rendered when you try executing jqwidgets.createInstance(‘.editButton’, ‘jqxButton’, { width: 160, height: 240, value: ‘Edit’ });

I would suggest you to use a flag at the beginning of the rendered method, for example:

if (!this.dataLoaded){
            return;
        } 

, and set the flag to true once you load and bound your TreeGrid data.

You can also look at the last provided solution in this forum Topic

Best Regards,
Martin

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

[smithaParticipant]

Thank You Martin.
This resolved my issue, i’m able to get the button now.

Is it possible to display the button only in child row and not in parent row in jqxtreegrid, i.e the button should be visible only when i expand the parent row.

Appreciate the help!
Thank You.

[MartinParticipant]

Hello smitha,

In cellsRenderer in the columns property you can use getRow method to get the current row info and check if it has parent or what is its level.
So you can render the cell depending on this. Here is an example:

columns: any[] =
   [
      {
                text: 'Edit', cellsAlign: 'center', align: 'center', columnType: 'none', editable: false, sortable: false, dataField: null,
                cellsRenderer: (row: number, column: any, value: any): string => {
                    const rowInfo = this.myTreeGrid.getRow(row.toString());
                    if (rowInfo.parent) {
                        return <code><div data-row=' + row + ' class=&quot;editButton&quot; style =&quot;margin-left: 4em; float: left&quot;> </div></code>;
                    } else {
                        return '<div></div>'
                    }
                }
      }
   ]

Best Regards,
Martin

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

[smithaParticipant]

Thanks a lot Martin. That worked

[smithaParticipant]

Hello,

I’m trying to create chart in the rendered method based on the rowid or rowdata.
Is there any way to get the rowdata in the rendered method ?

cellsRenderer: (row: any, column: any, value: any, rowData: any) => {
let div = ‘<div id=”sparklineContainerMDF’ + row + ‘” style=”margin: 0; margin-bottom: 0; width: 100%; height: 40px;”>MDF</div><div id=”sparklineContainerSellout’ + row + ‘” style=”margin: 0; margin-bottom: 0; width: 100%; height: 40px;”>Sellout</div>’;
if (rowData.IsEditable == true) {
this.IsSparkline = ‘Yes’;
return value + div;
}
else {
this.IsSparkline = ‘No’;
return value;
}
}
}

rendered = (): void => {
if (this.dataSource != undefined && this.IsSparkline != ‘No’) {
let sparklineMDF = [];
let sparklineSellout = [];
for (let i = 0; i < this.dataSource.length; i++) {
if (this.dataSource[i].HistoryMDF != undefined && this.dataSource[i].HistoryMDF.length > 0) {
for (let j = 0; j < this.dataSource[i].HistoryMDF.length; j++) {
sparklineMDF.push(this.dataSource[i].HistoryMDF[j].MDF_1H);
sparklineMDF.push(this.dataSource[i].HistoryMDF[j].MDF_2H);
}
}
if (this.dataSource[i].HistorySellout != undefined && this.dataSource[i].HistorySellout.length > 0) {
for (let j = 0; j < this.dataSource[i].HistorySellout.length; j++) {
sparklineSellout.push(this.dataSource[i].HistorySellout[j].SellOut_Q1);
sparklineSellout.push(this.dataSource[i].HistorySellout[j].SellOut_Q2);
sparklineSellout.push(this.dataSource[i].HistorySellout[j].SellOut_Q3);
sparklineSellout.push(this.dataSource[i].HistorySellout[j].SellOut_Q4);
}
}
if (this.dataSource[i].IsEditable == true) {
this.createSparkline(‘sparklineContainerMDF’ + this.dataSource[i].PartnerBudgetID, sparklineMDF, ‘line’);
this.createSparkline(‘sparklineContainerSellout’ + this.dataSource[i].PartnerBudgetID, sparklineSellout, ‘line’);
sparklineMDF = [];
sparklineSellout = [];
}
else {
sparklineMDF = [];
sparklineSellout = [];
}
}
}
};
Appreciate the help!
Thank You.

[MartinParticipant]

Hello smitha,

The “rendered” method is called once the jqxGrid’s render function is called either internally or not.
To create a widget there you should use “createInstance” as in the above example with the buttons.

To get the rowdata in the rendered method, in the cellsRenderer method you can try to set the class of the cell element to contain the rowid and also save the rowdata in some object in a property corresponding to the id:

cellsRenderer: (row: any, column: any, value: any, rowData: any) => {
     const rowInfo = this.myTreeGrid.getRow(row.toString());
     this.rowsData[row] = rowInfo;

Then, in the rendered method you get the specific row’s data using the id in the class of the cell where you want to create the chart.

Best Regards,
Martin

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

[Author]

Posts