Sort arrows always showing

[Amy]

I would like to have the arrow that shows up when a column is sorted to always show up.  That way people will know that they can click on the header and sort the column.  I have looked at a bunch of posts, but what happens is a sort image arrow shows on the last column I define, not all of them.  one of the posts I looked at

Thanks, Amy

[Shinu]

Hi Amy,

You can add one image to header row(when the sorting order is 'None') to make user aware of sorting. Here is the sample code I tried to achieve the same scenario.

Aspx:

<telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="false" AllowSorting="true"
        DataSourceID="SqlDataSource1"
        onitemcreated="RadGrid1_ItemCreated" onprerender="RadGrid1_PreRender"
        onsortcommand="RadGrid1_SortCommand">
        <MasterTableView CommandItemDisplay="Top" DataKeyNames="EmployeeID">
            <Columns>
                <telerik:GridBoundColumn DataField="EmployeeID" UniqueName="EmployeeID" HeaderText="EmployeeID">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="FirstName" UniqueName="FirstName" HeaderText="FirstName">
                </telerik:GridBoundColumn>
            </Columns>
        </MasterTableView>
    </telerik:RadGrid>
</div>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString3 %>"
    SelectCommand="SELECT top 5  * FROM [Employees] " UpdateCommand="Update Employees set LastName=@LastName where EmployeeID=@EmployeeID"
    InsertCommand="INSERT INTO Employees (EmployeeID,FirstName) values(@EmployeeID,@FirstName)"
    DeleteCommand="Delete from Employees where EmployeeID=@EmployeeID">
    <UpdateParameters>
        <asp:Parameter Name="FirstName" />
        <asp:Parameter Name="EmployeeID" />
    </UpdateParameters>
    <DeleteParameters>
        <asp:Parameter Name="EmployeeID" />
    </DeleteParameters>
    <InsertParameters>
        <asp:Parameter Name="EmployeeID" />
        <asp:Parameter Name="FirstName" />
    </InsertParameters>
</asp:SqlDataSource>

C#:

public static string colname = string.Empty;
public static string sortOrder = string.Empty;
protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
{
    if (e.Item is GridHeaderItem)
    {
        GridHeaderItem header = (GridHeaderItem)e.Item;
        foreach (GridColumn col in RadGrid1.Columns)
        {
            Image img = new Image();
            img.ImageUrl = "Images/index.jpg";
            img.ID = col.UniqueName;

            header[col.UniqueName].Controls.Add(img);

        }
    }
}
protected void RadGrid1_PreRender(object sender, EventArgs e)
{
    if (IsPostBack)
    {
        GridHeaderItem headerItem = (GridHeaderItem)RadGrid1.MasterTableView.GetItems(GridItemType.Header)[0];
        Image img = (Image)headerItem[colname].FindControl(colname);

        if (sortOrder != "None")
        {

            img.Visible = false;
        }
        else
        {

            img.Visible = true;
        }

    }
}
protected void RadGrid1_SortCommand(object sender, GridSortCommandEventArgs e)
{

     colname = e.CommandArgument.ToString();
     if (e.NewSortOrder == GridSortOrder.Ascending || e.NewSortOrder == GridSortOrder.Descending)
     {
       sortOrder = "Ascending/Descending";
     }
     else
     {
       sortOrder = "None";
     }

}

Hope this helps.
Thanks,
Shinu.

[Amy]

Thanks!  Works perfectly and very easy to follow.  Really appreciate the quick reply and perfect code solution to my problem!
Amy

[Renee]

I find that the RadGrid1_SortCommand function is not necessary.  You can leave the RadGrid1_ItemCreated the same, delete the colname and sortOrder variables, and edit RadGrid1_PreRender as follows:

        protected void RadGrid1_PreRender(object sender, EventArgs e)
        {
            if (IsPostBack)
            {
                GridHeaderItem headerItem = (GridHeaderItem)AppsGrid.MasterTableView.GetItems(GridItemType.Header)[0];

                foreach (GridSortExpression sortExpression in AppsGrid.MasterTableView.SortExpressions)
                {
                    string colname = sortExpression.ToString().Split(' ').First();
                    Image img = (Image)headerItem[colname].FindControl(colname);
                    img.Visible = false;
                }
            }
        }

This technique works even when using grids with AllowMultiColumnSorting="True".  Note that it will add the sort arrows to pdfs that you export from the grid and can crash when exporting Excel spreadsheets from the grid.  It can also crash if you are using detailtables.  This requires some extra code to prevent.  Also you may want to use a .gif file with a transparent background in case the text in your columns wraps.