gridview sorting with an image : The Official Microsoft ASP.NET Forums

Reply

jumojer

Member

52 Points

gridview sorting with an image

Jul 05, 2012 07:41 PM|LINK

Hi, I am trying to sort my gridviews columns with an image but I don't want to do a custom sort in code behind. all I want to do is take

the sort target button ( when you click on the header text of your gridview) and replace it with my picture (so when I click on the picture it sorts automaticly as if it was a header text in a normal gridview)

It means I don't want to change the datasource of my gridview for a sorted dataview or datatable created in code behind

I can't find the answer anywhere because they all offer solutions with lost of code behind which a don't want

thanks!

Please mark this post as answer if it helped

Edited by jumojer on Jul 05, 2012 07:41 PM
Edited by jumojer on Jul 05, 2012 07:46 PM

Reply

sjnaughton

All-Star

27330 Points

5459 Posts

MVP

Re: gridview sorting with an image

Jul 06, 2012 10:20 AM|LINK

Hi do you mean you want an imge to indicate which column is sorted and the direction? if so you can now do this with CSS you just need to add

<SortedAscendingHeaderStyle CssClass="DDAscending" />
<SortedDescendingHeaderStyle CssClass="DDDescending" />

to your GridView markup and then create a style in you css like this

TABLE.DDGridView TH.DDAscending
{
    background-image: url(../../DynamicData/Content/Images/SortedAscending.png);
    background-repeat: no-repeat;
    background-position: 99% 50%;
    padding-right: 10px;
}
TABLE.DDGridView TH.DDDescending
{
    background-image: url(../../DynamicData/Content/Images/SortedDescending.png);
    background-repeat: no-repeat;
    background-position: 99% 50%;
    padding-right: 10px;
}

Hope that helps

See my blog C# Bits | Twitter @sjnaughton
Always seeking an elegant solution.

Edited by sjnaughton on Jul 06, 2012 10:20 AM

Reply

jumojer

Member

52 Points

57 Posts

Re: gridview sorting with an image

Jul 06, 2012 12:36 PM|LINK

well yes I want to do this but I also want this very same image to be the trigger so the sort

is that possible?

Please mark this post as answer if it helped

Reply

jumojer

Member

52 Points

57 Posts

Re: gridview sorting with an image

Jul 06, 2012 01:29 PM|LINK

I found the answer My button as to have the commadName property set to "Sort" and the command name set to the name of the column

so that the gridview sort automatically on click

<HeaderTemplate>
               <table width="100%">
                                  <tr>
                                     <td align="center">
                                                    <asp:Image ID="imgTicket" AlternateText="Event"    runat="server" ImageUrl="images/ticket.png" Width="35px" />
                                                    <br />
                                                </td>
                                                <td align="center" rowspan="2">
                                                    <asp:ImageButton ID="Name_even" ImageUrl="~/images/sort-descend.png" CommandName="Sort" CommandArgument="Name_even" runat="server" />
                                                </td>
                                            </tr>
                                            <tr>
                                                <td align="center">
                                                    Events
                                                </td>
                                            </tr>
                                        </table>
                                    </HeaderTemplate>

thanks for your time!

Please mark this post as answer if it helped