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

Gridview Sorting / Filtering Client side.

10 Answers 102 Views
Dock
This is a migrated thread and some comments may be shown as answers.
Prince M. Premnath
Top achievements
Rank 2
Prince M. Premnath asked on 03 Sep 2010, 02:22 PM
Hello All,
 
   Default behavior of the RadGrid sorting triggers a postback action , while  I am using the same Grid in RadDock ( Loaded Dynamically ) causes the dynamic contents flushes out. is there any possibilities to sort / filter the RadGrid in client side , so that i can avoid postback ?


Thanks
-Prince 
 

10 Answers, 1 is accepted

Sort by
0
Pero
Telerik team
answered on 08 Sep 2010, 01:38 PM
Hi Prince,

The RadGrid control does not provide sorting and filtering on the client-side. A postback is needed in order for the respective action to occur.
For your scenario I would suggest to place the grid in an AjaxPanel and then add this ajax panel to the dock. This way Ajax request, instead of postback, will occur.

Best wishes,
Pero
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Vladislav
Top achievements
Rank 1
answered on 23 Mar 2011, 05:21 PM
I've been evaluating RadGrid and encountered "missing client-side sorting" problem as well.

And to me it seems the proposed solution is totally weird.
Client-side sorting should be as easy as doing ClientSort="true" or something along these lines.

It has nothing to do with "Ajax requests", "AjaxPanels", postbacks, etc...
Just a simple Javascript function internally.

It seems you are hitting nails with a screwdriver.
0
Pero
Telerik team
answered on 25 Mar 2011, 12:40 PM
Hello Vladislav,

Client-side filtering and sorting is not supported for one main reason - you don't have access to all the records on the client, so you can sort them using JavaScript. Assume this scenario, you have a RadGrid control bound to, let say, 10.000 records which are not sorted. Only 10 records will be displayed (we assume the page size is 10) and available on the client. The rest 99 990 records will be on the server. If we want to sort the records, we will not sort only the 10 records on the client, but we will need a trip to the server to perform the sorting on all items.
That's why the client-side filtering/sorting/paging is not possible.

Best wishes,
Pero
the Telerik team
0
Vladislav
Top achievements
Rank 1
answered on 25 Mar 2011, 12:44 PM
Pero,

You are right stating that client-sorting is not applicable for ~10,000 records.
I understand it fully, but I have scenarios where I have only ~100 records, and I load them all at once.
In this scenario, client-sorting makes total sense.
It's more-or-less minor issue though, I can live without that.

/Vladislav
0
Viz
Top achievements
Rank 1
answered on 06 Apr 2011, 02:08 AM
Pero,

Is there a way to do some type of client-side caching do achieve a sort without a postback?  I'm having a similar scenario where I load up a radgrid on client-side and wish to sort without a postback.

Thx
0
Vasil
Telerik team
answered on 08 Apr 2011, 01:04 PM
Hi Viz,

RadGrid needs to rebind to show the new data. It is a data bound control that uses sorting capabilities of the data sources to do the sorting. You will see this in the examples with client-side binding that sorting is happening on client side(without post-back): http://demos.telerik.com/aspnet-ajax/grid/examples/client/declarativedatabinding/defaultcs.aspx.
However the service is still called and I believe you want to avoid that.

It is possible to sort it entirely on the client, but such functionality is not provided out of the box and you will need to write it yourself. You will probably need an object that holds the data after calling to the service. Then you will need to bind the grid to this object and when you need to sort it, sort this object without calling the service.

Here is some very basic example for sorting the grid entirely on the client:
<form id="form1" runat="server">
<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
</telerik:RadScriptManager>
<script type="text/javascript">
 
  Array.prototype.swap = function (a, b) {
    var temp = this[a];
    this[a] = this[b];
    this[b] = temp;
  }
 
  function pageLoad() {
    loadData();
  }
  var data = [{ "ID": 1, "Text": "To" }, { "ID": 2, "Text": "Be" }, { "ID": 3, "Text": "Or" }, { "ID": 4, "Text": "Not" }, { "ID": 5, "Text": "To" }, { "ID": 6, "Text": "Be"}];
 
  function loadData() {
    var grid = $find('<%=RadGrid1.ClientID %>');
    var mtv = grid.get_masterTableView();
    mtv.set_dataSource(data);
    mtv.dataBind();
  }
 
  function compareID(a, b) {
    return a.ID - b.ID;
  }
 
  function compareText(a, b) {
    var nameA = a.Text.toLowerCase();
    var nameB = b.Text.toLowerCase();
    if (nameA < nameB) { return -1 }
    if (nameA > nameB) { return 1 }
    return 0;
  }
 
  function sortColumn(ColumnName) {
    var masterTable = $find("<%= RadGrid1.ClientID %>").get_masterTableView();
    if (ColumnName == "Text") {
      data.sort(compareText);
    }
    if (ColumnName == "ID") {
      data.sort(compareID);
    }
    loadData();
  }
</script>
<script runat="server" type="text/C#">
  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 + "');");
      }
    }
  }</script>
<div>
  <telerik:RadGrid ID="RadGrid1" Width="200px" runat="server" OnPreRender="RadGrid1_PreRender">
    <ClientSettings>
      <ClientEvents OnCommand="function(){}" />
    </ClientSettings>
    <MasterTableView AutoGenerateColumns="false">
      <Columns>
        <telerik:GridBoundColumn DataField="ID" HeaderText="ID">
        </telerik:GridBoundColumn>
        <telerik:GridBoundColumn DataField="Text" HeaderText="Text">
        </telerik:GridBoundColumn>
      </Columns>
    </MasterTableView>
  </telerik:RadGrid>
</div>
</form>
I hope this helps.

Regards,
Vasil
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
John
Top achievements
Rank 1
answered on 18 Aug 2015, 07:30 PM
So, contrary to Telerik's marketing, it is not possible to quickly retrieve, filter, & sort hundreds-of-thousands of rows on a grid.
0
Vasil
Telerik team
answered on 19 Aug 2015, 07:18 AM
Hello John,

It is not contrary, this forum thread is 4-5 years old and there have been more than 12 newer versions of the controls since then.

Currently you can use the ClientDataSource to effectively perform client side binding operations and also the grid supports virtualization for both server and client side binding.

Regards,
Vasil
Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
John
Top achievements
Rank 1
answered on 19 Aug 2015, 06:53 PM

Ok, I'm using version Q3 2014; but, could potentially upgrade to the latest version, if needed.  Does RadGrid allow for filtering and sorting on the client-side; where, I would only load my RadGrid once, then filter and sort without having to go back to the server?  If so, would ClientDataSource do the job?

 

0
Vasil
Telerik team
answered on 20 Aug 2015, 06:52 AM
Hello John,

You may use the RadClientDataSource for filtering and sorting client side. Here is example demo that shows integration of ClientDataSource and RadGrid. The filtering, sorting and paging happens entirely in the browser in the demo. Please see the markup and code of the demo, and if you have further questions, let us know.

Regards,
Vasil
Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Tags
Dock
Asked by
Prince M. Premnath
Top achievements
Rank 2
Answers by
Pero
Telerik team
Vladislav
Top achievements
Rank 1
Viz
Top achievements
Rank 1
Vasil
Telerik team
John
Top achievements
Rank 1
Share this question
or