Empty the grid and clear column filtering/sorting without calling service layer?

[Kevin]

I have a grid where the display criteria is set by another control on the page, therefore sometimes I need to present an empty grid with all column filtering and sorting cleared. The only way I have been able to do this is with the following code:

grid.dataSource.query({
                filter: {},
                sort: {},
                take: grid.dataSource.take(),
                page: grid.dataSource.page(),
                pageSize: grid.dataSource.pageSize(),
                skip: grid.dataSource.skip()
            }).then(function (e) {
                grid.dataSource.data([]);
});

The problem with this code is the grid.dataSource.query causes a call to the service layer, which is extra traffic in the network, and seems unecessary since I am not presenting any data in the grid. Is there any other way of presenting an empty grid with column filtering/sorting cleared, that would not involve a call to the service layer?

[Preslav]

Hi Kevin,

One of the possible solutions is setting the grid autoBind configuration to false.

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-autoBind

With this configuration, the grid will not call the fetch method of the data source. After that, you could manually bind the data based on the display criteria.

I hope the above helps. Do not hesitate to write back if you have any further questions.


Regards,
Preslav
Telerik by Progress

[Kevin]

You wrote that if I set the grid autoBind configuration to false, the grid will not call the fetch method of the data source, but I do have the grid autoBind configuration set to false, and apparently the grid does call the fetch method of the data source, as I can see the query to the service layer in the network traffic.

Is there no way to indicate with the grid.dataSource.data([]) that the column filtering/sorting should be cleared at the same time?

[Preslav]

Hi Kevin,

I was not able to reproduce the described behavior.

I tested the scenario with the following Dojo: http://dojo.telerik.com/exURa On my side, no requests regarding the data were sent.

Could you please, prepare and share a sample that clearly isolates and reproduces the problem? I will use it to investigate the issue further.

I look forward to hearing from you.


Regards,
Preslav
Telerik by Progress

[Kevin]

I don't see how your Dojo tests the scenario. Your Dojo sets up a grid, but I don't see where it does anything like my code:

grid.dataSource.query({
                filter: {},
                sort: {},
                take: grid.dataSource.take(),
                page: grid.dataSource.page(),
                pageSize: grid.dataSource.pageSize(),
                skip: grid.dataSource.skip()
            }).then(function (e) {
                grid.dataSource.data([]);
});

[Preslav]

Hi Kevin,

Based on the information in your posts, I assume that the grid is already populated with data and after that, it might need to be presented with all column filtering and sorting cleared. Please, correct me if I am wrong.

A possible solution might be changing the DataSource of the grid with an empty one. For example, check this Dojo: http://dojo.telerik.com/exURa/4

Another possible solution is hiding the data, filtering, and sorting with CSS until new data is requested. 

On a side note, regarding the query method, please keep in mind that all data operations will initiate a request if server operations are enabled (including clearing filter, sort or group expressions).


Regards,
Preslav
Telerik by Progress

[Kevin]

Yes, I do need to present the grid empty with column filtering and sorting cleared, both before populating it with data and after populating it with data. I was already aware of using an empty data source to clear the grid, but was trying to find a way to clear the column filtering/sorting without doing a server request. It looks like there is no way of doing this.

[Preslav]

Hi Kevin,

In the Dojo example from my previous response, I am changing the data source of the grid with a new one. The second data source is empty. With this operation, the grid is cleared as well as the filtering and the sorting without a server request.

Furthermore, once the display criteria changes, you could swap the data sources once again in order to show the requested data in the grid.


Regards,
Preslav
Telerik by Progress

[Phani]

Hi Preslav,

The Dojo example is not showing any code. I am looking for similar solution. could you please help.

Best Regards,

Phani 

[Preslav]

Hello Phani,

We are experiencing temporary issues with our code services. You could follow the status for the Telerik Backend Cloud Code Services here:

• http://status.telerik.com/

Regards,
Preslav
Progress Telerik

[Neil]

I am not sure if I have the same issue with the above.

But I have two grids, the left one has AutoBind:True, and the right grid has AutoBind:False .
Everytime the page loads, i had to wait for right grid to render(or the grid headers to show),
else the "dataSource" not define will appear in the console.

[Preslav]

Hi Neil,

Based on the provided description and picture, I am not sure what is causing this issue.

Could you please share a runnable page with me that replicates the problem? Examining this page will help me better understand the scenario, and I will be able to assist you to the best of my abilities.

I look forward to your reply.

 

Regards,
Preslav
Progress Telerik