Grid destroy() does not appear to clean up completely

[Chris Williams]

I have a page where I need to recreate grids in response to user interaction. This does not seem to be a case where replacing the data source and refreshing makes sense as the structure and settings could be different each time.

In my code I'm trying to get a reference to the grid so I can destroy it before creating the new grid.  Based on examples I'm using:

var gridObj = document.getElementById('grid').ej2_instances;
        if (gridObj) {
            gridObj[0].destroy();
        }

I note that gridObj contains more than 1 element.  After this call executes my grid creates fine but I note that event handles for row selection are now called multiple times. If I keep running the above code it starts to error and gridObj array gets larger.

Clearly I'm not destroying correctly but I can't find any other examples that show how to do 

[Chris Williams]

After further experimentation I've added the following before I re-create my grid.  This seems to resolve the problem I was seeing with duplication in event handlers.  Would be useful to hear if this is the correct approach or there's a more efficient option.

 // check if an earlier grid needs destorying first.
 var gridObj = document.getElementById('grid').ej2_instances;
 if (gridObj) {
     gridObj[0].destroy();
     $('#grid').html('');
 }

[Santhosh Iruthayaraj]

Hi Chris Williams,

Greetings from Syncfusion Support.

Based on the details you provided, we have prepared a sample to destroy and re-create the Grid component on button click and bind the rowSelected event. However, every time we tested the sample by destroying and recreating the Grid control, the gridObj array only contained 4 elements, and the rowSelected event also triggered only once, no matter how many times we destroyed and re-created the Grid. Please find the attached sample below for your reference:

Sample: https://stackblitz.com/edit/wp4b4i-f9evjd?file=index.js

However, we understand that you are facing difficulties when destroying and re-creating the Grid. Could you please try reproducing the issue in the provided sample or share with us an issue-reproducible sample of your own?

Since the issue has not been replicated on our side, we cannot confirm whether the solution you implemented will be efficient without validation. Therefore, we kindly request that you share the requested details to further validate the issue and provide you with a suitable solution.

Regards,

Santhosh I

[Chris Williams]

Thanks Santhosh

Having tested your sample I agree it works as I'd expected.  I've retested the code that was causing issues last week & it is now behaving correctly too.

I have to assume that there was some other bug in my code that was causing the inconsistent destruction as it's working fine now on every page where I have a grid.

[Santhosh Iruthayaraj]

Hi Chris Williams,

We are glad to hear that you have resolved the issue and that the provided solution was helpful. Please feel free to reach out to us if you require any further assistance.

Regards,
Santhosh I