This is a migrated thread and some comments may be shown as answers.

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

11 Answers 580 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Kevin
Top achievements
Rank 1
Kevin asked on 27 Mar 2017, 04:50 PM

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?

11 Answers, 1 is accepted

Sort by
0
Preslav
Telerik team
answered on 29 Mar 2017, 02:13 PM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Kevin
Top achievements
Rank 1
answered on 29 Mar 2017, 05:04 PM

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?

0
Preslav
Telerik team
answered on 30 Mar 2017, 01:33 PM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Kevin
Top achievements
Rank 1
answered on 30 Mar 2017, 03:46 PM

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([]);
});

0
Preslav
Telerik team
answered on 03 Apr 2017, 03:14 PM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Kevin
Top achievements
Rank 1
answered on 03 Apr 2017, 04:08 PM
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.
0
Preslav
Telerik team
answered on 05 Apr 2017, 10:44 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Phani
Top achievements
Rank 1
answered on 22 Jun 2017, 02:23 PM

Hi Preslav,

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

Best Regards,

Phani 

0
Preslav
Telerik team
answered on 23 Jun 2017, 06:58 AM
Hello Phani,

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

Regards,
Preslav
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Neil
Top achievements
Rank 1
answered on 25 Mar 2020, 10:06 AM

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.

0
Preslav
Telerik team
answered on 26 Mar 2020, 09:21 AM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Tags
Grid
Asked by
Kevin
Top achievements
Rank 1
Answers by
Preslav
Telerik team
Kevin
Top achievements
Rank 1
Phani
Top achievements
Rank 1
Neil
Top achievements
Rank 1
Share this question
or