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

client side paging and sorting of RadGrid

12 Answers 1041 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Jas
Top achievements
Rank 1
Jas asked on 04 Dec 2008, 06:46 AM
How can I enable the client side sorting (single column I guess is valid here) and paging without refreshing the page.
I mean whatever the grid gets from the bound datatable, it should be able to enable sorting on the client side and paging as well depending upon what page size I specify.
I don't want to refresh my page while sorting the grid or changing the page.

Thanks
Hary

12 Answers, 1 is accepted

Sort by
0
Vlad
Telerik team
answered on 04 Dec 2008, 07:41 AM
Hello Hary,

Please check these demos for more info:
http://demos.telerik.com/aspnet-ajax/Grid/Examples/Client/DeclarativeDataBinding/DefaultCS.aspx
http://demos.telerik.com/aspnet-ajax/Grid/Examples/Client/Caching/DefaultCS.aspx

Sincerely yours,
Vlad
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
Shinu
Top achievements
Rank 2
answered on 04 Dec 2008, 07:41 AM
Hi Jas,

You can enable client side sorting  using the following approach.

CS:
 protected void RadGrid1_PreRender(object sender, EventArgs e) 
    { 
        foreach (GridColumn col in RadGrid1.MasterTableView.RenderColumns) 
        { 
            foreach (GridHeaderItem header in RadGrid1.MasterTableView.GetItems(GridItemType.Header)) 
            { 
                header[col.UniqueName].Attributes.Add("OnClick", "return SortColumn('"+ col.UniqueName+ "');"); 
            } 
        } 
  } 

JS:
<script type="text/javascript"
        function SortColumn(ColumnName) 
        { 
         var masterTable = $find("<%= RadGrid1.ClientID %>").get_masterTableView(); 
          masterTable.sort(ColumnName); 
        } 
        </script> 

One another suggestion will be to ajaxify the RadGrid using RadAjaxPanel or RadAjaxManager to prevent filckering on clicking the sort header/pager.

Regards
Shinu


0
Crescent
Top achievements
Rank 1
answered on 04 Dec 2008, 02:34 PM
> How can I enable the client side sorting (single column I guess is valid here) and paging without refreshing the page.

If by "refreshing the page" you mean "postback" then Shinu's example will NOT do what you want. That is, it will do a post-back to get the sorted data (with or without UpdatePanels). Or if the user is using clientside databinding it will fire the Sort command to refetch the [sorted] data.
0
Jas
Top achievements
Rank 1
answered on 05 Dec 2008, 01:50 AM
Hi Shinu,
With this approach, when I click on any on the column headers, the whole grid just goes away.
Also, on clicking on any of the column headers, it does a postback. So things are not happening as desired.
Can you suggest something more to help me out here.

My requirement is that when my grid gets bound to a datatable, it should never refresh or postback for paging or sorting purpose.
Whatever copy of the datatable it has,it should use the same while sorting or paging the grid

Thanks
0
Jas
Top achievements
Rank 1
answered on 06 Dec 2008, 12:25 AM
Can someone please address my problem ?
I'll be grateful.

Thanks in advance
0
Jas
Top achievements
Rank 1
answered on 08 Dec 2008, 07:31 AM
Hello,

I was wondering if someone now could address my issue and check what is going wrong.
I am not able to implement client side sorting. I followed shinu suggested but it always refreshes the page doing a postback and my grid is gone. Nothing happens on the client side.

I have to demo something in next 3 hours and was wondering if you guys could be of any type of help before that.
Thanks
0
Yavor
Telerik team
answered on 08 Dec 2008, 12:16 PM
Hello Jas,

With client side databinding, the sort command will trigger a client side event event, which would allow you to pass the correct data. This example contains a fully functional implementation of the functionality in question, including sorting.
I hope it helps.

Greetings,
Yavor
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
Crescent
Top achievements
Rank 1
answered on 08 Dec 2008, 01:03 PM
Jas, if what you want is to fetch the data ONCE (either in the code-behind or in the client via client-side data binding), and allow sorting and paging on the client thereafter without fetching the data again, you simply cannot achieve this.

Yavor's example performs paging and sorting on the server via client-side binding. It is NOT the same as performing paging or sorting ON THE CLIENT.

With that aside, I'm curious as to why you would want paging to be done 100% clientside? One of paging's purpose is to only fetch the subset of data you need so as not to bog down memory (either in the browser or in the ViewState).
0
Jeffrey Wang
Top achievements
Rank 1
answered on 01 Nov 2010, 05:25 PM
Is it possible "to fetch the data ONCE (either in the code-behind or in the client via client-side data binding), and allow sorting and paging on the client thereafter without fetching the data again"?
Is it true that "you simply cannot achieve this"?
0
Dan
Top achievements
Rank 1
answered on 19 Feb 2011, 04:15 AM
I'm trying to do the same thing.  The data I am grabbing is a snapshot of rapidly changing data, and I want it paged rather than scrolled.  If it went and grabbed new data each time, it would be completely random what it returned if it was sorted on one of the columns that is changing.
0
Sebastian
Telerik team
answered on 21 Feb 2011, 10:04 AM
Hello Dan,

In addition to the solutions posted in this thread, you may be interested utilizing client-side binding with live data as illustrated in this example. I hope that you will find one of these implementations accurate for your scenario.

Best regards,
Sebastian
the Telerik team
0
Satish
Top achievements
Rank 1
answered on 25 Sep 2014, 08:53 AM
unable to achieve the client side pagination , the 2nd page request should not hit database. how i can do ? please suggest me
Tags
Grid
Asked by
Jas
Top achievements
Rank 1
Answers by
Vlad
Telerik team
Shinu
Top achievements
Rank 2
Crescent
Top achievements
Rank 1
Jas
Top achievements
Rank 1
Yavor
Telerik team
Jeffrey Wang
Top achievements
Rank 1
Dan
Top achievements
Rank 1
Sebastian
Telerik team
Satish
Top achievements
Rank 1
Share this question
or