client side paging and sorting of RadGrid

[Jas]

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

[Vlad]

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.

[Shinu]

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

[Crescent]

> 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.

[Jas]

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

[Jas]

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

Thanks in advance

[Jas]

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

[Yavor]

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.

[Crescent]

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).

[Jeffrey Wang]

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"?

[Dan]

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.

[Sebastian]

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

[Satish]

unable to achieve the client side pagination , the 2nd page request should not hit database. how i can do ? please suggest me