Always visible sort icon

9 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

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

    Posted 19 Dec 2011 Link to this post


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

  3. Pavlina
    Pavlina avatar
    6187 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.

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

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

    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)

  6. 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.
  7. Pavlina
    Pavlina avatar
    6187 posts

    Posted 18 Nov 2014 Link to this post


    You can use a similar approach to the one shown below:


    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.

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

    Posted 28 Jul 2016 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

  9. David
    David avatar
    41 posts
    Member since:
    Aug 2014

    Posted 02 Nov 2017 in reply to Shinu Link to this post

    Shinu's post from Dec 2011 has a couple of bugs in it, specifically it only adds the image to the last column in the grid.
     Here is a corrected method that is working for me.

    Note: I am using Web20 skin

    /* Fit No-Sort icon in Grid Header*/
    .rgSortNoSort {


    01.protected Image getNoSortIcon(string Id)
    03.    Image img = new Image();
    04.    img.ID = Id;
    05.    img.ImageUrl = "~/Images/icon_NoSort.png";
    06.    img.CssClass = "rgSortNoSort";
    07.    return img;
    10.protected void grdOrderList_ItemCreated(object sender, GridItemEventArgs e)
    12.    if (e.Item is GridHeaderItem)
    13.    {
    14.        GridHeaderItem header = (GridHeaderItem)e.Item;
    16.        foreach (GridColumn col in grdOrderList.Columns)//loops though each BoundCOlumn in RadGrid
    17.        {
    18.            if (col is GridBoundColumn)
    19.            {
    20.                GridBoundColumn boundCol = (GridBoundColumn)col;
    21.                if (boundCol.AllowSorting)
    22.                {
    23.                    string imageId = "Image_" + boundCol.UniqueName;
    24.                    if (grdOrderList.MasterTableView.SortExpressions.Count > 0 && grdOrderList.MasterTableView.SortExpressions.ContainsExpression(boundCol.SortExpression))
    25.                    {
    26.                        GridSortExpression sort = new GridSortExpression();
    27.                        if(grdOrderList.MasterTableView.SortExpressions.TryGetExpression(boundCol.SortExpression,out sort))
    28.                        {
    29.                            if(sort.SortOrder == GridSortOrder.None)
    30.                            header[boundCol.UniqueName].Controls.AddAt(1, getNoSortIcon(imageId));
    31.                        }
    32.                    }
    33.                    else
    34.                    {
    35.                        header[boundCol.UniqueName].Controls.AddAt(1, getNoSortIcon(imageId));
    36.                    }
    37.                }
    38.            }
    39.        }
    40.    }
Back to Top