[Solved] Custom Sorting with GridTemplateColumn, show Sort Image.

[Eric]

Lets say I have the following GridTemplateColumn, I use a LinkButton for Custom Sorting and I handle that sorting in the ItemCommand event of the Grid (CommandName="cmdSortBySender")

   <telerik:GridTemplateColumn HeaderStyle-Width="160px" ShowSortIcon="true"  >
    <HeaderTemplate>
        <asp:LinkButton ID="lnkSortBySender" runat="server" CommandName="cmdSortBySender" >
        </asp:LinkButton>
    </HeaderTemplate>
    <ItemTemplate>
        <asp:Label Text='<%# DataBinder.Eval(Container,"DataItem.SenderName") %>' runat="server" />
    </ItemTemplate>
   </telerik:GridTemplateColumn>

Since I'm clicking on the LinkButton the Sort Image is not showing up, Is there anyway I can make the Sort Image appear the way I'm doing this custom sorting?

Thank you.

[Eric]

My only problem with this is showing the sort image in custom sorting.

[Shinu]

Hi,

One suggestion is to add image to the HeaderTemplate next to the Linkbutton. Please check the code.

C#:

protected void rad_ItemCreated(object sender, GridItemEventArgs e)
{
    if (e.Item is GridHeaderItem)
    {
        GridHeaderItem header = (GridHeaderItem)e.Item;
        Image asc = new Image();
        asc.ID = "asc";
        img.ImageUrl = "Images/sortasc.gif";

        Image dsc = new Image();
        dsc.ID = "dsc";
        dsc.ImageUrl = "Images/sortdsc.gif";

        header["UniqueName"].Controls.AddAt(2, dsc);
        header["UniqueName"].Controls.AddAt(2, asc);

        if (rad.MasterTableView.SortExpressions.Count != 0 && rad.MasterTableView.SortExpressions[0].FieldName == "DataField")
        {
            if (rad.MasterTableView.SortExpressions[0].SortOrder != GridSortOrder.None)
            {
                header["UniqueName"].Controls.Remove(asc);
                header["UniqueName"].Controls.Remove(dsc);
            }
            if (rad.MasterTableView.SortExpressions[0].SortOrder == GridSortOrder.Ascending)
            {
                header["UniqueName"].Controls.Remove(dsc);
            }
            if (rad.MasterTableView.SortExpressions[0].SortOrder == GridSortOrder.Descending)
            {
                header["UniqueName"].Controls.Remove(asc);
            }
        }
    }
}

Thanks,
Shinu

[Eric]

Hello Shinu
Is there any way to make this process work with multiple columns ?
I have 5 columns that use custom sorting and having to create a code like that for each one of them is repetitive.

[Shinu]

Hi,

I suppose you are having 5 GridTemplateColumn. Please try the following code snippet to show an image while sorting.

C#:

protected void RadGrid1_ItemCreated(object sender, Telerik.Web.UI.GridItemEventArgs e)
{
    if (e.Item is GridHeaderItem)
    {
        foreach (GridTemplateColumn col in RadGrid1.Columns)
        {

            if (e.Item is GridHeaderItem)
            {
                GridHeaderItem header = (GridHeaderItem)e.Item;
                Image asc = new Image();
                asc.ID = "asc";
                img.ImageUrl = "Images/sortasc.gif";

                Image dsc = new Image();
                dsc.ID = "dsc";
                dsc.ImageUrl = "Images/sortdsc.gif";

                header["col.UniqueName"].Controls.AddAt(2, dsc);
                header["col.UniqueName"].Controls.AddAt(2, asc);

                if (rad.MasterTableView.SortExpressions.Count != 0 && rad.MasterTableView.SortExpressions[0].FieldName == col.DataField)
                {
                    if (rad.MasterTableView.SortExpressions[0].SortOrder != GridSortOrder.None)
                    {
                        header["col.UniqueName"].Controls.Remove(asc);
                        header["col.UniqueName"].Controls.Remove(dsc);
                    }
                    if (rad.MasterTableView.SortExpressions[0].SortOrder == GridSortOrder.Ascending)
                    {
                        header["col.UniqueName"].Controls.Remove(dsc);
                    }
                    if (rad.MasterTableView.SortExpressions[0].SortOrder == GridSortOrder.Descending)
                    {
                        header["col.UniqueName"].Controls.Remove(asc);
                    }
                }
            }
        }
    }
}

Thanks,
Shinu.

[Min-Jie]

Do you have any sample code if I need to implement the sorting images on the client side?