Issue on destroy and Re-create the tree grid

[GopiMacParticipant]

Hi Team,

i’m trying to create/recreate the grid based on user selection.

Say If user wants to see either Employee/Director columns in tree grid, and once they click on check box , I can dynamically have the tree grid setting with only selected set of columns. But when I destroy existing tree grid and re-creating it , the tree grid is removed from the DOM object which create the JS error as Element not exist.

Note: We don’t want to Show/Hide columns based on the user selection because it brings auto scroll issue while editing the row in the tree grid . So we want to destroy the grid and recreate it with fewer columns

Can you suggest How to re-create the grid dynamically ?

[Ivo ZhulevParticipant]

Hi GopiMac,

Do I understand you right => the grid is removed from the DOM after you recreate it?

Best Regards,
Ivo

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

[GopiMacParticipant]

Hi Ivo,

Yes, it is removed from DOM and I’m getting the JS error as ERROR TypeError: Cannot read property ‘style’ of undefined

below is the case i’m trying to achieve
this.treeGrid.destroy();
// treesetting is based on user selection
this.treeGrid.createComponent(treeGridSettings);

How can i recreate the tree component with new settings?

[svedavyaParticipant]

Hi Ivo,

When we call this.treegrid.destroy(); // the grid is removed from DOM.

secondly we are trying to recreate grid with fewer columns and data fields using this.treeGrid.createComponent(treeGridSettings);

when we call createComponent, we get above error as ERROR TypeError: Cannot read property ‘style’ of undefined. Seems like its trying to find a DOM element which is removed earlier with destroy

ERROR TypeError: Cannot read property ‘classList’ of undefined
at jqxTreeGridComponent.webpackJsonp…/../../../jqwidgets-framework/jqwidgets-ts/angular_jqxtreegrid.ts.jqxTreeGridComponent.moveClasses (angular_jqxtreegrid.ts:143)
at jqxTreeGridComponent.webpackJsonp…/../../../jqwidgets-framework/jqwidgets-ts/angular_jqxtreegrid.ts.jqxTreeGridComponent.createComponent (angular_jqxtreegrid.ts:162)

[svedavyaParticipant]

Hi Team,

Can you tell us how we can add Div back after calling destroy so when createComponent is called, we do not face issue?

<jqxTreeGrid #treeGridReference [auto-create]=”false”
(onRowSelect)=”rowSelect($event)”
(onRowUnselect)=”rowUnselect($event)”
(onRowEndEdit)=”rowEndEdit($event)”
(onRowBeginEdit)=”rowBeginEdit($event)”
[width]=”‘100%'”
[height]=”‘640px'”
[columnsHeight]=”’50′”
[editable]=”true”
[showToolbar]=”true”
[toolbarHeight]=”60″
[altRows]=”true”
[theme]='”metro”‘
[autoRowHeight]=”true”>
</jqxTreeGrid>
</div>

I have to add above treeGird back after calling destroy , Please guide us.

[ritesh955Participant]

Hi Team,

Any suggestions about this?

Thanks
Ritesh

[Ivo ZhulevParticipant]

Hi gyes,

In the beginning, create the widget inside a div =>

<div id="widgetContaner">
    <jqxTreeGrid......></jqxTreeGrid>
</div>

That way when you destroy it the widgetContaner div will remain. Then when you need to recreate the widget use the typescript way:
const myWidget: jqwidgets.jqxTreeGrid = jqwidgets.createInstance('#widgetContaner', 'jqxTreeGrid ', options);

Awaiting your response!

Best Regards,
Ivo

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

[ritesh955Participant]

Hi Ivo,

Thanks for the reply, I tried following the approach but what I see is the upon calling the destroy it deletes the div’s inside the <jqxTreeGrid> tag and not the jqxTreeGrid component. Same is illustrated in the below images if you carefully analyse the highlighted sections.

Before Calling destroy img url: https://ibb.co/jo6OV6

After Calling destroy img url: https://ibb.co/b4NK3R

Thanks
Ritesh

[svedavyaParticipant]

Hi Ivo,

Is there any js fiddle or an example code, for destroying and re-create available which we can have a look at? kindly share with us, this is one of the important features of our project which is blocking us to these issues?

Appreciate your support.

Thanks
Sandeep

[svedavyaParticipant]

Hi

this.treeGrid.destroy(); is deleting the div’s inside but keeps <jqxTreeGrid……></jqxTreeGrid> as it is in DOM.

as per the documentation we are calling this.treeGrid.createComponent(treeGridSettings); // which internally calls below method angular_jqxrtreegrid.ts of the jqxwidget
createComponent(options?: any): void {
if (options) {
JQXLite.extend(options, this.manageAttributes());
}
else {
options = this.manageAttributes();
}
this.host = JQXLite(this.elementRef.nativeElement.firstChild);

this.moveClasses(this.elementRef.nativeElement, this.host[0]); // this gives below error as after destroy the host is becoming null.
this.moveStyles(this.elementRef.nativeElement, this.host[0]);

this.__wireEvents__();
this.widgetObject = jqwidgets.createInstance(this.host, ‘jqxTreeGrid’, options);// this is not required to call explicity as you suggested

this.__updateRect__();
}

This error occurs due to moveClass called and which doesnt exists after destroy called
core.es5.js:1020 ERROR TypeError: Cannot read property ‘classList’ of undefined
at jqxTreeGridComponent.webpackJsonp…/../../../jqwidgets-framework/jqwidgets-ts/angular_jqxtreegrid.ts.jqxTreeGridComponent.moveClasses (angular_jqxtreegrid.ts:143)
at jqxTreeGridComponent.webpackJsonp…/../../../jqwidgets-framework/jqwidgets-ts/angular_jqxtreegrid.ts.jqxTreeGridComponent.createComponent (angular_jqxtreegrid.ts:162)
at DashboardComponent.webpackJsonp…/../../../../src/app/dashboard/dashboard.component.ts.DashboardComponent.createAndLoadGrid (dashboard.component.ts:1176)

Another major problem am facing with destroy is treeGrid setting with have settings so we can get it set easily but how can we set methods like (onRowSelect)=”rowSelect($event)” (onRowUnselect)=”rowUnselect($event)”(onRowEndEdit)=”rowEndEdit($event)(onRowBeginEdit)=”rowBeginEdit($event)” from typescript code which are actually part of html

like below

<div class=”gridContainer”>
<jqxTreeGrid class=”treeGird” #treeGridReference [auto-create]=”false”
(onRowSelect)=”rowSelect($event)”
(onRowUnselect)=”rowUnselect($event)”
(onRowEndEdit)=”rowEndEdit($event)”
(onRowBeginEdit)=”rowBeginEdit($event)”
[width]=”‘100%'”
[height]=”‘640px'”
[columnsHeight]=”’50′”
[editable]=”true”
[showToolbar]=”true”
[toolbarHeight]=”60″
[altRows]=”true”
[theme]='”metro”‘
[autoRowHeight]=”true”>
</jqxTreeGrid>
</div>

[Ivo ZhulevParticipant]

Hi Sandeep Vedavyas,

As I said after destroying the widget use the typescript way of creating the widget and binding events to it:
https://www.jqwidgets.com/jquery-widgets-documentation/documentation/typescript/typescript.htm

As for the leftover tag in the DOM after destroying we’ll look into that.

Best Regards,
Ivo

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

[Author]

Posts