1. Home
  2. Forum
  3. JavaScript - EJ 2
  4. Grid clear or Grid reset

Grid clear or Grid reset

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");

7 Replies
TS Thavasianand Sankaranarayanan Syncfusion Team May 22, 2019 11:25 AM UTC

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 ?
  1. Please share some more details regarding your requirement.
  2. Share Grid code example.
  3. Share screen shot or video demonstration of the issue ?

Regards, 
Thavasianand S. 


TR Travis May 22, 2019 03:18 PM UTC


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)

TS Thavasianand Sankaranarayanan Syncfusion Team May 23, 2019 09:29 AM UTC

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  


Refer our API for your reference 


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. 


TR Travis May 28, 2019 11:06 PM UTC

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

TS Thavasianand Sankaranarayanan Syncfusion Team May 29, 2019 11:26 AM UTC

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.  


Refer our API documentation for your reference 




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

Regards, 
Thavasianand S. 


TR Travis May 29, 2019 11:59 PM UTC

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?



TS Thavasianand Sankaranarayanan Syncfusion Team May 30, 2019 12:12 PM UTC

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. 



Regards, 
Thavasianand S. 


Loader.
Up arrow icon