Change sorting image button in gridview

StackOverflow https://stackoverflow.com/questions/7188689

Question 

  <asp:ImageButton ID="lnkEmpIdUp" runat="server" ImageUrl="~/Images/upArrow.png" CommandName="EMP_ID_NO" OnClick="lnkSorting_Click" />
 &nbsp;
 <asp:ImageButton ID="lnkEmpIdDown" runat="server" ImageUrl="~/Images/downArrow.png" CommandName="EMP_ID_NO" OnClick="lnkSorting_Click" />

As the above code says, there are 2 images button (Kept in Gridview header template) which clicked, would perform sorting. Close look would result that both the controls have same command name and same onClick Event.

The OnClick Event handles the column to be sorted through command name and the sorting direction is handled through hidden field. See below code

    protected void lnkSorting_Click(object sender, EventArgs e)
            {
                // Initialize variables
                //Get Dataset values here for the grid.
                var imgSort = sender as ImageButton;
                string colName = imgSort.CommandName;

                if (imgSort.ImageUrl.Trim().ToUpper().Contains(("up").ToUpper())) // If Up(Ascending)arrow is clicked.
                {
                    if (hdnSortDir.Value.Equals(string.Empty) || hdnSortDir.Value.ToString().Equals("desc"))
                    {
                        hdnSortDir.Value = "asc";
                        //imgSort.ImageUrl = "~/Images/ascending.gif";
                    }
                }
                else if (imgSort.ImageUrl.Trim().ToUpper().Contains(("down").ToUpper()))
                {
                    hdnSortDir.Value = "desc";
                }

.....Sorting Logic...

}

My Doubt: How can i change the image at run time when the sorting is performed in gridview? Say after sorting the column "Employee Name" ascending, the ascending image for that column should change to some other image so that user could identify as to which column is sort and in which direction.

Please help!!!

Thanks!

Was it helpful?

Solution 2

The same can be done in rowdatabound by setting the sort expression and sort direction values in hidden field.

OTHER TIPS

Typically for sorting, when you set AllowSorting="true", you can click on column header to sort. Repeated clicking will toggle the sort direction. For sorting indication, before ASP.NET 4, you have to write custom code to insert an image in column header to indicate sorted direction. However, with ASP.NET 4, you can use SortedAscendingHeaderStyle & SortedDescendingHeaderStyle properties to associate some style or css class to headers (you also have properties for styling sorted cells - see SortedAscendingCellStyle & SortedDescendingCellStyle) - so typically, you can have css that sets the background image to show sort direction in column header.

Look at these articles to understand the approach better:

EDIT: As said above, for ASP.NET 2.0-3.5, you need to write custom code to push those sort icons into column headers. For example, see this article where a grid-view in extended to do the same OR see this where RowDataBound event is used to apply the css class to column header (classes will set back-ground sort image) OR see this that uses RowCreated event to actually add image control into header cell. There are quite a few alternate but similar variations possible - personally, I prefer 2nd approach of applying CSS classes.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top