Always visible sort icon

8 posts, 0 answers
  1. Tiju
    Tiju avatar
    8 posts
    Member since:
    Sep 2010

    Posted 19 Dec 2011 Link to this post


    Is it possible to show a sort icon on columns when the grid initially loads even though the grid has not been sorted yet. I want to show   sort icons in all columns at first time.Please help

    Tiju
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 19 Dec 2011 Link to this post

    Hello,

    Take a look into the following forum thread which discussed the same.
    Possible to show sort icon regardless sort status

    Thanks,
    Princy
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 19 Dec 2011 Link to this post

    Hi Tiju,

    In order to display image when the column is not sorted, you can add an image to the header of the column when the sort order is none. After that you should remove it for the ascending/descending sort orders. The attached example demonstrates this scenario.

    Greetings,
    Pavlina
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  5. Tiju
    Tiju avatar
    8 posts
    Member since:
    Sep 2010

    Posted 19 Dec 2011 Link to this post

    Thanks for quick reply.
    The sample code u provided is for adding image for one column.I want to display the sort arrow for more than one column on page load.Pleas help

    Tiju
  6. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 20 Dec 2011 Link to this post

    Hello Tiju,

    If you want to add sort arrow image for more than one column, you can loop through each column in grid and add image like below.

    C#:
    protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
      {
          if (e.Item is GridHeaderItem)
          {
              GridHeaderItem header = (GridHeaderItem)e.Item;
              Image img = new Image();
              img.ID = "Image1";
              img.ImageUrl = "~/Images/sort arrow.gif";
              foreach (GridBoundColumn col in RadGrid1.Columns)//loops though each BoundCOlumn in RadGrid
              {
                  header[col.UniqueName].Controls.AddAt(1, img);
                  if (RadGrid1.MasterTableView.SortExpressions.Count != 0 && RadGrid1.MasterTableView.SortExpressions[0].FieldName == col.UniqueName)
                  {
                      if (RadGrid1.MasterTableView.SortExpressions[0].SortOrder != GridSortOrder.None)
                      {
                          header[col.UniqueName].Controls.Remove(img);
                      }
                  }
              }
              
          }

    -Shinu.
  7. Nimmy
    Nimmy avatar
    3 posts
    Member since:
    Oct 2014

    Posted 13 Nov 2014 in reply to Pavlina Link to this post

    How this can be done using html & javascript?
    I want the sort icon should be displayed always and when I sort using one column that should be highlighted.
    Please help.
  8. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 18 Nov 2014 Link to this post

    Hello,

    You can use a similar approach to the one shown below:
    http://www.telerik.com/forums/radgrid-custom-sort---jquery

    Regards,
    Pavlina
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  9. gary
    gary avatar
    1 posts
    Member since:
    Jul 2016

    Posted 28 Jul in reply to Tiju Link to this post

    I had same problem when the grid loads initially the column header is in null state column header  has no icon user was unable to recognize there is a sort by feature,

    i want to place a sort icon beside column header.

    can you provide me sample code for adding sort icon for one column using **typescript** or java-script.

    Thank you

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017