client side paging and sorting of RadGrid

13 posts, 0 answers
  1. Jas
    Jas avatar
    40 posts
    Member since:
    Mar 2008

    Posted 04 Dec 2008 Link to this post

    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
  2. Vlad
    Admin
    Vlad avatar
    11100 posts

    Posted 04 Dec 2008 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 04 Dec 2008 Link to this post

    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


  5. Crescent
    Crescent avatar
    20 posts
    Member since:
    Jul 2008

    Posted 04 Dec 2008 Link to this post

    > 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.
  6. Jas
    Jas avatar
    40 posts
    Member since:
    Mar 2008

    Posted 04 Dec 2008 Link to this post

    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
  7. Jas
    Jas avatar
    40 posts
    Member since:
    Mar 2008

    Posted 05 Dec 2008 Link to this post

    Can someone please address my problem ?
    I'll be grateful.

    Thanks in advance
  8. Jas
    Jas avatar
    40 posts
    Member since:
    Mar 2008

    Posted 08 Dec 2008 Link to this post

    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
  9. Yavor
    Admin
    Yavor avatar
    11 posts

    Posted 08 Dec 2008 Link to this post

    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.
  10. Crescent
    Crescent avatar
    20 posts
    Member since:
    Jul 2008

    Posted 08 Dec 2008 Link to this post

    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).
  11. Jeffrey Wang
    Jeffrey Wang avatar
    1 posts
    Member since:
    Apr 2005

    Posted 01 Nov 2010 Link to this post

    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"?
  12. Dan
    Dan avatar
    9 posts
    Member since:
    Feb 2011

    Posted 18 Feb 2011 Link to this post

    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.
  13. Sebastian
    Admin
    Sebastian avatar
    9934 posts

    Posted 21 Feb 2011 Link to this post

    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
  14. Satish
    Satish avatar
    10 posts
    Member since:
    Oct 2013

    Posted 25 Sep 2014 Link to this post

    unable to achieve the client side pagination , the 2nd page request should not hit database. how i can do ? please suggest me
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017