Clear out grid

[Roy]

I want to have a "reset" button that sets all filters to blank and removes all rows from the grid, without calling the server.  I thought it would be able to do this by just saying:

 

grid.dataSource.data(new Array());

But this seems to mess up the paging.  The records are cleared, but when I reload the grid with new data, it keeps the old page number, even if that was greater than the current max pages, leaving the user with a blank grid.

 

Is there a recognized way to clear out a grid? 

    

[Yanislav]

Hello Roy,

Generally speaking, the data() method of the DataSource changes the data of the DataSource but it is not supposed to affect the other options of the DataSource like the paging, filtering, etc. With that said, what I can recommend is to reset the Grid paging index :

grid.data("kendoGrid").dataSource.data([]);
grid.data("kendoGrid").dataSource.data(newData);
grid.data("kendoGrid").dataSource.page(1);

Note that if the server operations are enabled "ServerOperation(true)" the page() method will send an AJAX request to query the data from the respective page. With that said, you should disable the server operation in order to preserve the new data to which you bound the Grid before resetting the page index. 

As an alternative, you can reset the DataSource by applying a new DataSource. This could be done, as in the following example, by using the setDataSource() method of the Grid.
https://netcorerepl.telerik.com/cGvllEaC28yrQiQC19

I hope this helps. 

Regards,
Yanislav
Progress Telerik

[Roy]

(realized I posted my question as an answer when it should have been a comment)

 

Hi Yanislav,

 

Thanks! But how can I disable the server operation?  This grid is using Ajax binding.  The ServerOperation method is something I can only call at initialization. 

 

I was hoping the online(false) method would work, and it did prevent the server from being called.  But if I then call online(true) again, the server does not start getting called again. 

 

I am trying to get to a state where there is no data in the grid, but when the user again hits the search button, everything behaves normally. 

[Yanislav]

Hello Roy,

In general, if you want to change the ServerOperation state, you will need to use the setOptions method and change the options of the DataSource of the Grid: 

    $(document).ready(function(){
        var opt = $("#Grid").data("kendoGrid").getOptions();
        console.log(opt)
        opt.dataSource.serverPaging = false;
        $("#Grid").data("kendoGrid").setOptions(opt)
    })

However, such implementation might be fragile and unreliable, since toggling the ServerOperation might cause problems if not applied correctly. With that said, may I ask you, is there a reason to not use the setDataSource method? 

[Roy]

Only the fact that I don't know how to put the data source back in the correct state when the user next performs a search.  

[Anton Mironov]

Hi Roy,

In order to get and set the options of the Grid, I would recommend using the "getOptions" and "setOptions" methods.

The following demo represents the implementation and the result using the pointed methods:

• https://demos.telerik.com/aspnet-mvc/grid/persist-state

Give a try to the approach above and let me know if further assistance is needed.

Kind Regards,
Anton Mironov

[Roy]

 (deleted)