Gridview Sorting / Filtering Client side.

11 posts, 0 answers
  1. Prince M. Premnath
    Prince M. Premnath avatar
    32 posts
    Member since:
    Oct 2009

    Posted 03 Sep 2010 Link to this post

    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 
     
  2. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 08 Sep 2010 Link to this post

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

    Posted 23 Mar 2011 Link to this post

    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.
  5. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 25 Mar 2011 Link to this post

    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
  6. Vladislav
    Vladislav avatar
    5 posts
    Member since:
    Mar 2011

    Posted 25 Mar 2011 Link to this post

    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
  7. Viz
    Viz avatar
    7 posts
    Member since:
    Mar 2010

    Posted 05 Apr 2011 Link to this post

    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
  8. Vasil
    Admin
    Vasil avatar
    1547 posts

    Posted 08 Apr 2011 Link to this post

    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
  9. John
    John avatar
    43 posts
    Member since:
    Aug 2014

    Posted 18 Aug 2015 in reply to Vasil Link to this post

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

    Posted 19 Aug 2015 Link to this post

    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
  11. John
    John avatar
    43 posts
    Member since:
    Aug 2014

    Posted 19 Aug 2015 in reply to Vasil Link to this post

    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?

     

  12. Vasil
    Admin
    Vasil avatar
    1547 posts

    Posted 20 Aug 2015 Link to this post

    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
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017