Always visible sort icon

[Tiju]

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

[Princy]

Hello,

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

Thanks,
Princy

[Pavlina]

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

[Tiju]

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

[Shinu]

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.

[Nimmy]

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.

[Pavlina]

Hello,

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

Regards,
Pavlina
Telerik

 

 

[gary]

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

[David]

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 {
    width:10px;
    height:10px;
    padding-left:10px;
}

 

01.protected Image getNoSortIcon(string Id)
02.{
03.    Image img = new Image();
04.    img.ID = Id;
05.    img.ImageUrl = "~/Images/icon_NoSort.png";
06.    img.CssClass = "rgSortNoSort";
07.    return img;
08.
09.}
10.protected void grdOrderList_ItemCreated(object sender, GridItemEventArgs e)
11.{
12.    if (e.Item is GridHeaderItem)
13.    {
14.        GridHeaderItem header = (GridHeaderItem)e.Item;
15.
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.    }
41.}