Moving forward, let’s understand how to develop sorting feature in the ListView control when using DataSource control along with ListView control. This article will demonstrate sorting in two ways listed below,

1.      Sort by clicking the header

2.      Sort by clicking up and down arrow image

To understand this article, we will use SqlDataSource control and a simple Employee table created in the App_Data folder of our solution. Refer the below figure which shows the Employee table opened in Server Explorer.

I will use visual studio 2008 and C# as the development language for the sample application in this article.

Sort by clicking the header

1.      Drag a SqlDataSource control from the data tab of your visual studio 2008.Configure the data source control to query the data from the Employee table in our sql express database. Refer the code below,

ASPX

<asp:SqlDataSource ID="SqlDataSource1" runat="server"

        ConnectionString="<%$ ConnectionStrings:DatabaseConnectionString %>"

        SelectCommand="SELECT * FROM [Employee]"></asp:SqlDataSource>

Web.Config

<connectionStrings>

              <add name="DatabaseConnectionString" connectionString="Data Source=.\SQLEXPRESS;AttachDbFilename=|DataDirectory|\Database.mdf;Integrated Security=True;Connect Timeout=30;User Instance=True" providerName="System.Data.SqlClient"/>

       </connectionStrings>

2.      Next, drag a ListView control from the data tab of your visual studio 2008. Configure the LayoutTemplate and ItemTemplate of ListView control to display the data. I will use tabular format in this article. You can choose your own format and define LayoutTemplate accordingly. Read the article ListView Control in ASP.Net 3.5 if you are new to ListView control. To make a column sortable, we need to define the header as a LinkButton by setting its CommandArgument property to the database column name and CommandName to “Sort”. When this setting in place, it will fire onsorting event of ListView control whenever the header is clicked. Refer the below code,

<asp:ListView ID="lvEmployees" runat="server" DataSourceID="SqlDataSource1" ItemPlaceholderID="itemPlaceholder">

<LayoutTemplate>         

       <table ID="itemPlaceholderContainer" border="1">

            <tr id="Tr2">

                <th id="Th1">                                   

                <asp:LinkButton ID="lbEmpID" CommandArgument="EMPID" CommandName="Sort" Text="EmpID" runat="server" />

                </th>

                <th id="Th2">                                   

                <asp:LinkButton ID="lbEmpName" CommandArgument="EMPNAME" CommandName="Sort" Text="EmpName" runat="server" />

                </th>

                <th id="Th3">

                Department</th>

                <th id="Th4">

                Age</th>

                <th id="Th5">

                Address</th>

             </tr>

            <tr ID="itemPlaceholder" runat="server">

            </tr>

       </table>                            

 </LayoutTemplate>

<ItemTemplate>

               <tr>

                <td>

                    <asp:Label ID="EmpIDLabel" runat="server" Text='<%# Eval("EmpID") %>' />

                </td>

                <td>

                    <asp:Label ID="EmpNameLabel" runat="server" Text='<%# Eval("EmpName") %>' />

                </td>

                <td>

                    <asp:Label ID="DepartmentLabel" runat="server"

                        Text='<%# Eval("Department") %>' />

                </td>

                <td>

                    <asp:Label ID="AgeLabel" runat="server" Text='<%# Eval("Age") %>' />

                </td>

                <td>

                    <asp:Label ID="AddressLabel" runat="server" Text='<%# Eval("Address") %>' />

                </td>

            </tr>

</ItemTemplate>

</asp:ListView>

In the above code, I have made the columns EmpID and EmpName as sortable in the ListView control. That’s it! Execute the application and see it in action. Refer the below screen shot.

Sort by clicking up and down arrow image

It will be better and user friendly if we can display up and down arrow image to indicate the sort direction instead of making the ListView header clickable as demonstrated in the previous section. Something like below,

To do this, we need to replace the LinkButton to ImageButton and provide the header text separately.  To toggle between up and down arrow image, we will use the onsorting event raised by the ListView control. Again, similar to previous approach, we need to set CommandArgument property of the ImageButton to the database column name and CommandName to “Sort” in order to fire the onsorting event.  The below code does that,

ASPX

<asp:ListView ID="lvEmployees" runat="server" DataSourceID="SqlDataSource1" ItemPlaceholderID="itemPlaceholder" onsorting="lvEmployees_Sorting">

<LayoutTemplate>          

 <table ID="itemPlaceholderContainer" border="1">

    <tr id="Tr1">

       <th id="Th1">

       EmpID

       <asp:ImageButton ID="imEmpID" CommandArgument="EMPID" CommandName="Sort" ImageUrl="~/img/asc.png" runat="server" />

       </th>

       <th id="Th2">

       EmpName

       <asp:ImageButton ID="imEmpName" CommandArgument="EMPNAME" CommandName="Sort" ImageUrl="~/img/asc.png" runat="server" />

       </th>

       <th id="Th3">

       Department</th>

       <th id="Th4">

       Age</th>

       <th id="Th5">

       Address</th>

       </tr>

    <tr ID="itemPlaceholder" runat="server">

    </tr>

 </table>                   

</LayoutTemplate>

<ItemTemplate>

  <tr>

      <td>

            <asp:Label ID="EmpIDLabel" runat="server" Text='<%# Eval("EmpID") %>' />

      </td>

      <td>

           <asp:Label ID="EmpNameLabel" runat="server" Text='<%# Eval("EmpName") %>' />

      </td>

      <td>

            <asp:Label ID="DepartmentLabel" runat="server" Text='<%# Eval("Department") %>' />

      </td>

      <td>

            <asp:Label ID="AgeLabel" runat="server" Text='<%# Eval("Age") %>' />

      </td>

      <td>

            <asp:Label ID="AddressLabel" runat="server" Text='<%# Eval("Address") %>' />

      </td>

  </tr>

</ItemTemplate>

</asp:ListView>

    <asp:SqlDataSource ID="SqlDataSource1" runat="server"

        ConnectionString="<%$ ConnectionStrings:DatabaseConnectionString %>"

        SelectCommand="SELECT * FROM [Employee]"></asp:SqlDataSource>

CodeBehind

protected void lvEmployees_Sorting(object sender, ListViewSortEventArgs e)

    {

        ImageButton imEmpID = lvEmployees.FindControl("imEmpID") as ImageButton;

        ImageButton imEmpName = lvEmployees.FindControl("imEmpName") as ImageButton;

        string DefaultSortIMG = "~/img/asc.png";

        string imgUrl = "~/img/desc.png";

        if (e.SortDirection == SortDirection.Descending)

        {

            imgUrl = DefaultSortIMG;

        }

         switch (e.SortExpression)

         {

             case "EMPID":

                 if (imEmpName != null)

                     imEmpName.ImageUrl = DefaultSortIMG;

                 if (imEmpID != null)

                     imEmpID.ImageUrl = imgUrl;

                 break;

             case "EMPNAME":

                 if (imEmpID != null)

                     imEmpID.ImageUrl = DefaultSortIMG;

                 if (imEmpName != null)

                     imEmpName.ImageUrl = imgUrl;

                 break;

         }

    }

In the above code, I am swapping the images based on the value of e.SortDirection property in onsorting event.

Download the source code attached in this article and see it in action.