This is a migrated thread and some comments may be shown as answers.

How to Provide an Image to click for Sorting.

5 Answers 249 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Uttam Dhakal
Top achievements
Rank 1
Uttam Dhakal asked on 02 Nov 2012, 01:07 AM
Right now when i click on the header then it sorts the data automatically.
But is there a way i can change it and assign it to the background image of the header so that when the image is clicked it sorts the row. and also change the image behavior.
Right now i have images for sorting and they appear correctly.

But my client wants a image like an drop down arrow at the left of each header so that user don't need to hover over the header to see the click here to sort.

Is there a way we can make it done...

5 Answers, 1 is accepted

Sort by
0
Accepted
Shinu
Top achievements
Rank 2
answered on 02 Nov 2012, 04:24 AM
Hi,

Please take a look into the following code snippet I tried to give an image next to the HeaderText of a column indicating the column can be sorted and removing it on sorting.

C#:
protected void RadGrid1_ItemCreated(object sender, Telerik.Web.UI.GridItemEventArgs e)
{
    if (e.Item is GridHeaderItem)
    {
        GridHeaderItem header = (GridHeaderItem)e.Item;
        Image img = Image();    
        img.ID = "Image1";
        img.ImageUrl = "~/Images/Sort.gif";
        header["ColumnUniqueName"].Controls.AddAt(1, img);
        if (RadGrid1.MasterTableView.SortExpressions.Count > 0 && RadGrid1.MasterTableView.SortExpressions[0].FieldName == "ColumnFieldName")
        {
            if (RadGrid1.MasterTableView.SortExpressions[0].SortOrder == GridSortOrder.Ascending || RadGrid1.MasterTableView.SortExpressions[0].SortOrder == GridSortOrder.Descending)
            {
                header["ColumnUniqueName"].Controls.Remove(img);
            }
        }
    }
}

Thanks,
Shinu.
0
Uttam Dhakal
Top achievements
Rank 1
answered on 21 Nov 2012, 04:08 PM
this is not what i was asking.
i am not looking a way to add image to the header columns i know how to add the image.
my concerns is once i added the image i want the sort functionality to work when i click on the image not on the titlee.
right now it works as when i click on the title, then it sorts the data.
so when i add the image i want the image be click able for sorting not the Title.
0
Shinu
Top achievements
Rank 2
answered on 22 Nov 2012, 04:02 AM
Hi,

Please take a look into the following code snippet to make the column sort on clicking the Image(ImageButton) and not in the HeaderText.

C#:
protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
{
    if (e.Item is GridHeaderItem)
    {
        GridHeaderItem header = (GridHeaderItem)e.Item;
        LinkButton lnk = (LinkButton)header["UniqueName"].Controls[0];//access the HeaderText and make it disable to click
        lnk.Enabled = false;
 
        ImageButton img =new ImageButton();//providing an ImageButton and giving CommandName and CommandArgument
        img.ID = "Image1";          
        img.CommandName = "Sort";
        img.CommandArgument = "ColumnFieldName";
        img.ImageUrl = "~/Images/Sort.gif";
        header["OrderID3"].Controls.AddAt(1, img);
        if (RadGrid1.MasterTableView.SortExpressions.Count > 0 && RadGrid1.MasterTableView.SortExpressions[0].FieldName == "ColumnFieldName")
        {
            if (RadGrid1.MasterTableView.SortExpressions[0].SortOrder == GridSortOrder.Ascending || RadGrid1.MasterTableView.SortExpressions[0].SortOrder == GridSortOrder.Descending)
            {
                //change the image url or remove the image
            }
        }
    }
}

Thanks,
Shinu.
0
Uttam Dhakal
Top achievements
Rank 1
answered on 22 Nov 2012, 01:12 PM
Do i have to rewrite this code for al my coumn headers.
if i have 10 columns than i have to write this 10 times, is that feasibe to do.
it looks like the code provided is good for one column header only....
0
Shinu
Top achievements
Rank 2
answered on 23 Nov 2012, 04:07 AM
Hi,

You can add sort image for all the BoundColumns as follows.

C#:
protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
{
    if (e.Item is GridHeaderItem)
    {       
        foreach (GridBoundColumn col in RadGrid1.Columns)
        {           
                GridHeaderItem header = (GridHeaderItem)e.Item;
                ImageButton img = new ImageButton();
                img.ID = col.UniqueName;
                img.CommandName = "Sort";
                img.ImageUrl = "~/Images/sort arrow.gif";
                img.ID = col.UniqueName;
                LinkButton lnk = (LinkButton)header[col.UniqueName].Controls[0];
                lnk.Enabled = false;
                header[col.UniqueName].Controls.AddAt(1, img);
                img.CommandArgument = col.DataField;
                if (RadGrid1.MasterTableView.SortExpressions.Count != 0 && RadGrid1.MasterTableView.SortExpressions[0].FieldName == col.DataField)
                {
                    if (RadGrid1.MasterTableView.SortExpressions[0].SortOrder != GridSortOrder.None)
                    {
                        header[col.UniqueName].Controls.Remove(img);      
                    }
                }              
        }
    }
}

Thanks,
Shinu.
Tags
Grid
Asked by
Uttam Dhakal
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 2
Uttam Dhakal
Top achievements
Rank 1
Share this question
or