After my last blog post on how to layout a different UI design instead of a normal tabular format, I had quite a few comments on how you would add sorting, paging and filtering and so on. That is one of the best parts about using the GridView control, you can still use all the normal sorting, paging and filtering that you would with a normal tabular GridView. If you take a look at Figure 1 you can see that I sorted the data using the SqlDataSource object, then applied paging and added a Search/Filtering mechanism. I also added a drop down list of field names so you can sort the grid using any field from the table you want. All of this was done and you will only have to add 1 line of code to perform the sorting!

To make this form work, here is what I had to do.

I added a Label, TextBox and Button at the top of the page. I also added a DropDownList control and hard coded the collection of items with “CompanyName”, “LastName”, and “EmailAddress”.

The TextBox I named txtCompany and set its AutoPostBack property to true. The button is really just a placeholder and has no code behind it whatsoever. This allows me to tab off the TextBox which will cause a post back to occur, which in turn will force the SqlDataSource object that controls the grid to re-bind and apply the filter from the value typed into the TextBox.

To the GridView control, I added the following attributes:

• AllowPaging="True"
• PageSize="2"
• AllowSorting="True"

To the SqlDataSource I then added modified the SelectCommand to add an ORDER BY on CompanyName to sort the data. I then added a FilterExpression with the expression “CompanyName LIKE ‘{0}’’. The {0} placeholder will be filled in with whatever value you type into the txtCompany text box.

Next I created a FilterParameters element within the SqlDataSource and created a ControlParameter element which specifies the name of the parameter, the control to use (txtCompany) and the property on the control that I wish to get the value for the parameter (Text).

<asp:SqlDataSource ID="custData"
   runat="server"
   ConnectionString="<%$
        ConnectionStrings:AdvWorksConnectionString %>"
    SelectCommand="SELECT * FROM SalesLT.Customer
                   ORDER BY CompanyName "
  FilterExpression="CompanyName LIKE '{0}%'">
  <FilterParameters>
    <asp:ControlParameter Name="CompanyName"
                          ControlID="txtCompany"
                          PropertyName="Text" />
  </FilterParameters>
</asp:SqlDataSource>

That is all there is to it! No code behind, just using normal GridView and SqlDataSource parameters.

Styling the Buttons

Another enhancement I added to this ASP.NET page is I styled the buttons a little so we did not have the default button look. This was easy to do by just adding a .CSS file and added the following class.

input.submit {
  color:#050;
  font: bold 84% 'trebuchet ms',helvetica,sans-serif;
  background-color:#fed;
  border:1px solid;
  border-color: #696 #363 #363 #696;
}

I added a <link> reference to the aspx page that referenced this style and set the CssClass=”submit” to each button control on the page.

Sorting the GridView

To sort the GridView control, you first set the AutoPostBack property to True on the DropDownList so when you change the value, a post back will occur and the SelectedIndexChanged event will fire. In this event you can then pass the selected value from the drop down list to the Sort method on the GridView.

protected void sortFields_SelectedIndexChanged(object sender,
  EventArgs e)
{
  grdCust.Sort(sortFields.SelectedValue.ToString(),
               SortDirection.Ascending);
}

Summary

In this blog you learned how to add paging, sorting and filtering to your grid view control. You also learned to apply a little styling to your buttons. I hope these two blog posts will help you to think about alternate UI designs other than the typical tabular format. I know your users will thank you. We have found that our users find user interfaces that are not so busy and show important data in a larger font size easier to use. Have fun!

NOTE: You can download this article and many samples like the one shown in this blog entry at my website. http://www.pdsa.com/downloads. Select “Tips and Tricks”, then “An Alternate Approach to a GridView-Part 2” from the drop down list.

Good Luck with your Coding,
Paul Sheriff

** SPECIAL OFFER FOR MY BLOG READERS **
We frequently offer a FREE gift for readers of my blog. Visit http://www.pdsa.com/Event/Blog for your FREE gift!