Question

How to go about adding one arrow image (up or down) to a list view’s header so that when you click on it it sorts the column by ascending/descending order?

Currently I just have a link that does the sorting:

<asp:LinkButton runat="server" ID="sortPosition" CommandName="Sort" CommandArgument="Position" >Position</asp:LinkButton>

Answer 1

There are many ways to do it. One is to do it on client side using jquery. You could add a span or div or image and toggle it with jquery depending on the sorting state.

<style>
    .sortNotSelected
    {
        background-image: none;
        width: 15px;
        height: 15px;
    }
    .sortAscending
    {
        background-image: url('down.png');
        width: 15px;
        height: 15px;
    }
    .sortDescending
    {
        background-image: url('up.png');
        width: 15px;
        height: 15px;
    }

</style>

<asp:LinkButton runat="server" ID="sortPosition" CommandName="Sort" CommandArgument="Position" OnClientClick="changeSortState();">Position</asp:LinkButton>
<span id="imgSortPosition" class="sortNotSelected"></span>

<script>
    function changeSortState(){
        if ($('#imgSortPosition').attr('class') == 'sortNotSelected'){
            $('#imgSortPosition').removeClass();
            $('#imgSortPosition').addClass('sortAscending');
        }  
        else if ($('#imgSortPosition').attr('class') == 'sortAscending'){
            $('#imgSortPosition').removeClass();
            $('#imgSortPosition').addClass('sortDescending');
        }  
        else 
            $('#imgSortPosition').removeClass();
            $('#imgSortPosition').addClass('sortNotSelected');
        }  

    }
</script>

Another way to do it on the server side. You could add control and change ImageUrl property depending on the sort state on Command Sort

<asp:ImageUrl ID="imgSort" runat="server" />

Code behind

if (sortAsc)
{
    imgSort.ImageUrl = "up.png";
}

// and so on

You would add this image to the layout template of the listview