Clear out grid

2 Answers 25 Views
Grid
Roy
Top achievements
Rank 1
Iron
Roy asked on 07 Nov 2022, 03:06 PM

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? 

    

2 Answers, 1 is accepted

Sort by
0
Yanislav
Telerik team
answered on 10 Nov 2022, 09:17 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Roy
Top achievements
Rank 1
Iron
commented on 14 Nov 2022, 08:04 PM | edited

(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
Telerik team
commented on 15 Nov 2022, 09:47 AM

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
Top achievements
Rank 1
Iron
commented on 15 Nov 2022, 11:02 AM

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
Telerik team
commented on 18 Nov 2022, 09:48 AM

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:

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


Kind Regards,
Anton Mironov

0
Roy
Top achievements
Rank 1
Iron
answered on 10 Nov 2022, 11:01 AM | edited on 14 Nov 2022, 08:05 PM

 (deleted)

Tags
Grid
Asked by
Roy
Top achievements
Rank 1
Iron
Answers by
Yanislav
Telerik team
Roy
Top achievements
Rank 1
Iron
Share this question
or