We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Grid clear or Grid reset

Thread ID:

Created:

Updated:

Platform:

Replies:

144758 May 21,2019 11:35 AM UTC May 30,2019 12:12 PM UTC JavaScript - EJ 2 7
loading
Tags: Grid
Travis
Asked On May 21, 2019 11:35 AM UTC

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 [Syncfusion]
Replied On 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. 


Travis
Replied On 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)

Thavasianand Sankaranarayanan [Syncfusion]
Replied On 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. 


Travis
Replied On 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

Thavasianand Sankaranarayanan [Syncfusion]
Replied On 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. 


Travis
Replied On 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?



Thavasianand Sankaranarayanan [Syncfusion]
Replied On 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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon