CODEDIGEST
Home » Articles
Search
 

Technologies
 

Sponsored links
 

CodeDigest Navigation
 

Technology News
No News Feeds available at this time.
 

Community News
No News Feeds available at this time.
 
Sorting in ListView control in Asp.Net - Using DataSource controls

By Bala Murugan
Posted On Sep 22, 2011
Article Rating:
Be first to rate
this article.
No of Comments: 0
Category: ASP.Net
Print this article.

Sorting in ListView control in Asp.Net - Using DataSource controls

ListView control is one of the most preferred and powerful databound controls when it comes to displaying data. ListView control allows developers to customize the data display to any layout in addition to its inbuilt capabilities like CRUD support, sorting and paging with very less code. With ListView control, developer can take full control on the HTML rendered for the data display and it emits no additional html tags. It is due to these flexibilities, ListView control has become most successful databound control after the release of ASP.Net 3.5. Read the article ListView Control in ASP.Net 3.5 to know more about the basics of ListView control.

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.

Sorting in Asp.Net ListView control

 

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.

Sorting in Asp.Net ListView control

 




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,

Sorting in Asp.Net ListView control

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.

 

Downloads

Download Source

 

Conclusion

Thus, providing sorting on the data displayed will enable user in finding and narrow down their target row. I have demonstrated sorting in ListView control when using datasource controls in this article.

Download the attachment in this article and see it in action.

To do the same without using data source control, refer the below article,

Sorting in Asp.Net ListView control - DataBinding in CodeBehind

Similar Articles
You can contribute to CodeDiget.Com:
Donate to CodeDigest.com
Article Feedback
Comments