Gridview Sorting / Filtering Client side.

[Prince M. Premnath]

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 
 

[Pero]

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

[Vladislav]

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.

[Pero]

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

[Vladislav]

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

[Viz]

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

[Vasil]

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

[John]

So, contrary to Telerik's marketing, it is not possible to quickly retrieve, filter, & sort hundreds-of-thousands of rows on a grid.

[Vasil]

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

[John]

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?

 

[Vasil]

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