Practical ASP.NET

Extending the ListView

Peter moves beyond the basics of setting up a ListView to add databound controls, control headers and footers and turn on updating.

In my previous column (Working with the ListView) I made the claim that the ListView was the most powerful control because, like a GridView, it allowed you to display multiple rows but, like a FormView, allowed you complete freedom in the format for each row. In that column I looked at setting up the ListView by leveraging the options on the ListView's SmartTag.

In this column I'm going to go beyond those basics.

For instance, you may want to add a databound control, like a DropDownList, to your templates. The first step is to add a DataSource to fill your DropDownList. Fortunately, you can add the DataSource to the page outside of the ListView where you can work with it in a visual designer.

Once you've added the DataSource, you can drag the DropDownList onto a template in the ListView. After the DropDownList is added, you'll need to set at least three properties on the DropDownList: the Text property (to have the correct item in the list highlighted) and the properties for DataSourceId and DataTextField (to have the list filled from the DataSource). You'll have to set all the properties without the benefit of IntelliSense (and, with the Text property, you'll need to use the Bind function) so careful typing is required.

The result would look like this:

<asp:DropDownList ID="CompanyNameCheckBoxList" runat="server" 
                  Text='<%# Bind("CompanyName") %>'
                  DataSourceID="ObjectDataSource2" 
			DataTextField="CompanyName"  />

In addition to the templates for displaying data, your ListView also includes a LayoutTemplate that allows you to specify a header and footer for your ListView. The LayoutTemplate must include a control with its id set to itemPlaceHolder (uppercase letters are optional). Each of the other templates are inserted into this control, which is repeated once for each row retrieved.

The simplest possible LayoutTemplate looks like this:

<LayoutTemplate>
  <span id="itemPlaceholder" runat="server"></span>
</LayoutTemplate>

The LayoutTemplate allows you to place a header and footer around your templates. Your ListView may not require any headings. If, for instance, you're using each template as a mini-form, then column headings won't make sense. But, if you're using a column-based format, you will want to have headings. And, regardless of the format of your rows, if you're allowing the user to page through data, then you'll want a footer with a Pager control. If you're supporting paging, your simplest LayoutTemplate looks like this:

<LayoutTemplate>
   <span ID="itemPlaceholder" runat="server"/>
   <asp:DataPager ID="DataPager1" runat="server">
      <Fields>
        <asp:NextPreviousPagerField ButtonType="Button" 
            ShowFirstPageButton="True" 
            ShowLastPageButton="True" />
      </Fields>
   </asp:DataPager>
</LayoutTemplate>

At this point, you're probably ready to start thinking about updates, inserts and deletes. The most important point is that you should either enable updating before you make any changes to the templates or be prepared to do some typing in Source View. Of course, if you're working with the ListView, you've already resigned yourself to typing in the Source View.

The reason that you don't want to enable editing after you made changes to the templates is that enabling editing (or deleting or inserting) is that all of the templates are regenerated, wiping out any customizations you've made. However, you can turn on editing by inserting an edit button into the ItemTemplate. The key item is that the button's CommandName must be set to "Edit" (with or without the uppercase "E"), as in this example:

<ItemTemplate>
  <tr style="background-color:#DCDCDC;color: #000000;">
    <td>
      <asp:Button ID="MyButton" runat="server" CommandName="Edit"
                  Text="Change" />
    </td>
    ... rest of ItemTemplate... 

If this all seems like a lot more work than using the GridView, the good news is that the event model for the ListView is virtually identical to the GridView with ItemUpdating/ItemUpdated and other events. So, once you've got the ListView set up, you can return to the coding that you're used to.

About the Author

Peter Vogel is a system architect and principal in PH&V Information Services. PH&V provides full-stack consulting from UX design through object modeling to database design. Peter tweets about his VSM columns with the hashtag #vogelarticles. His blog posts on user experience design can be found at http://blog.learningtree.com/tag/ui/.

comments powered by Disqus

Featured

  • Hands On: New VS Code Insiders Build Creates Web Page from Image in Seconds

    New Vision support with GitHub Copilot in the latest Visual Studio Code Insiders build takes a user-supplied mockup image and creates a web page from it in seconds, handling all the HTML and CSS.

  • Naive Bayes Regression Using C#

    Dr. James McCaffrey from Microsoft Research presents a complete end-to-end demonstration of the naive Bayes regression technique, where the goal is to predict a single numeric value. Compared to other machine learning regression techniques, naive Bayes regression is usually less accurate, but is simple, easy to implement and customize, works on both large and small datasets, is highly interpretable, and doesn't require tuning any hyperparameters.

  • VS Code Copilot Previews New GPT-4o AI Code Completion Model

    The 4o upgrade includes additional training on more than 275,000 high-quality public repositories in over 30 popular programming languages, said Microsoft-owned GitHub, which created the original "AI pair programmer" years ago.

  • Microsoft's Rust Embrace Continues with Azure SDK Beta

    "Rust's strong type system and ownership model help prevent common programming errors such as null pointer dereferencing and buffer overflows, leading to more secure and stable code."

  • Xcode IDE from Microsoft Archrival Apple Gets Copilot AI

    Just after expanding the reach of its Copilot AI coding assistant to the open-source Eclipse IDE, Microsoft showcased how it's going even further, providing details about a preview version for the Xcode IDE from archrival Apple.

Subscribe on YouTube

Upcoming Training Events