Grid clear or Grid reset

[Travis]

I am having trouble finding an answer in the forum or documentation...How can I reset my grid in javascript?  Below is my snippet. If my grid have been loaded and displayed, but now I want to clear/reset before appending to my html grid, how is that done?

var gridObj = new ej.grids.Grid({

          dataSource: _gridObj,   

          ...

});

gridObj.appendTo("#myGrid");

[Thavasianand Sankaranarayanan]

Hi Travis, 

Greetings from Syncfusion support. 

Before proceeding to your query please provide the following details. 

1. Do you want to reset the Grid state after you did some action performed in Grid ?
2. Do you enable enablePersistence in Grid ?
3. Do you want to clear the filtering, sorting, selection from the Grid ?

Link: https://ej2.syncfusion.com/javascript/documentation/api/grid/#clearfiltering 

Link: https://ej2.syncfusion.com/javascript/documentation/api/grid/#clearselection 

Link: https://ej2.syncfusion.com/javascript/documentation/api/grid/#clearsorting 

4. Please share some more details regarding your requirement.
5. Share Grid code example.
6. Share screen shot or video demonstration of the issue ?

Regards, 

Thavasianand S. 

[Travis]

In this case, i need to clear the gridObj - all values in that variable.  Right now, it appears that when i call the javascript function to load the grid

var gridObj = new ej.grids.Grid({

          dataSource: _gridObj,   

          ...

});

Then I appendTo my grid

gridObj.appendTo("#myGrid");

It appends to existing data.  What i need todo is clear or reset #myGrid.

I dont want persistence and I want to reset the grid after it loses focus (display different tab, then click original tab and see updated grid)

[Thavasianand Sankaranarayanan]

Hi Travis,  

Thanks for the update. 

Query: “I don’t want persistence and I want to reset the grid after it loses focus (display different tab, then click original tab and see updated grid)” 

From your query, we understand that you want to update the dataSource of Grid. We have achieved your requirement by updating the dataSource using dataSource method of Grid. Refer the below code example 

button = new ej.buttons.Button({}); 

    button.appendTo('#normalbtn'); 

      button.element.addEventListener("click", function(){ 

        grid.dataSource =  window.orderData.splice(4,4); // updated the dataSource of Grid 

    }); 

    var grid = new ej.grids.Grid({ 

        dataSource: window.orderData.splice(0,4), 

        ……………………………………….. 

    }); 

    grid.appendTo('#Grid'); 

Note: we have achieved the requirement using button click, similarly you can update the dataSource when navigating the tab.  

For your convenience we have prepared a sample which can be downloaded from below link  

Sample: https://stackblitz.com/edit/ncyufb?file=index.js  

Refer our API for your reference 

https://ej2.syncfusion.com/documentation/api/grid#datasource  

If above solution does not resolve your query, please get back to us with following details  

1. Can you please share the information about your dataSource.(i.e) old dataSource and updated dataSource has same columns or different columns.
2. You have mentioned that you need to clear the Grid obj. Do you want to refresh the Grid?
3. Or do you want to modify the dataSource based on external value?

Regards, 

Thavasianand S. 

[Travis]

Sorry for the delay, but here is the requested information:

1. Can you please share the information about your dataSource.(i.e) old dataSource and updated dataSource has same columns or different columns
2. You have mentioned that you need to clear the Grid obj. Do you want to refresh the Grid?
3. Or do you want to modify the dataSource based on external value?

1) the dataSource has the same number of columns

2) need to refresh the grid; clear all data and reload. would like todo something like:

3) no modifcation to dataSource

[Thavasianand Sankaranarayanan]

Hi Travis,  

Thanks for the update.  

Query: “need to refresh the grid; clear all data and reload. would like todo something like” 

From your query, we understand that you need to refresh the Grid. So we suggest you to achieve your requirement using refresh() method of ejs-grid.  

Refer the below code example 

button = new ej.buttons.Button({}); 

    button.appendTo('#normalbtn'); 

      button.element.addEventListener("click", function(){ 

        grid.refresh(); // to refresh the content 

        grid.refreshColumns(); // to refresh the refreshColumns 

        grid.refreshHeader(); // to refresh the header content 

    }); 

    var grid = new ej.grids.Grid({ 

        dataSource: window.orderData, 

        allowPaging: true, 

        columns: [ 

…………………………………….. 

        ], 

        pageSettings: { pageCount: 5 } 

    }); 

    grid.appendTo('#Grid'); 

Refer the modified sample.  

https://stackblitz.com/edit/ncyufb-ht8eld?file=index.js  

Refer our API documentation for your reference 

https://ej2.syncfusion.com/documentation/api/grid/#refresh  

https://ej2.syncfusion.com/documentation/api/grid/#refreshcolumns  

https://ej2.syncfusion.com/documentation/api/grid/#refreshheader  

If above solution does not resolve your query, please get back to us with exact details of your requirement. 

Regards, 

Thavasianand S. 

[Travis]

Sort of, but not fully...

Query: “clear all data” 

How to I clear all the data for '#Grid'?  Where is the documentation to clear the grid data?

[Thavasianand Sankaranarayanan]

Hi Travis, 

Based on your query we suspect that you want to empty the Grid data. We suggest you to use the dataSource property of Grid.  

Refer the below code example. 

document.getElementById('EmptyDataSource').addEventListener('click', function(){ 

      var gridObj = document.getElementById('Grid').ej2_instances[0]; 

      var gridData = []; 

      gridObj.dataSource = gridData; // Binding empty dataSource to Grid  

    }); 

We have prepared a simple sample in the following stackblitz link. 

Link: https://stackblitz.com/edit/di9v3q?file=index.js 

Link: https://ej2.syncfusion.com/javascript/documentation/api/grid#datasource 

Regards, 

Thavasianand S.