Hide the sketches?

Put simply the ListView control is used to display a set of data in a structure defined by templates. There are many templates to choose from, and while some are required, many are optional. The templates needed will be determined by the goal of your design. It is best understood by defining what the templates are and how they work. This post will focus on the control’s attributes, and the templates. Further posts will go into more detail on binding data and using events.

The Basic Control

The basic markup for a ListView is fairly straight forward. We have opening and closing tags, and two attributes. The ID attribute is required to use the control in the code behind, and the runat attribute tells the server to process the control prior to serving up the XHTML. These attributes are standard on all asp.Net controls.

The Templates

The templates are used to define how the control will render it’s XHTML markup.
The LayoutTemplate

The LayoutTemplate is required for the control to work, you would probably get a runtime error if you try to run your web form without it. It is also important to note that the LayoutTemplate requires a control with runat=”server” and the ID “groupPlaceholder” if using a group template or “itemPlaceholder” if only using the item template. These ID attributes can be specified with the GroupPlaceHolderID or ItemPlaceHolderID attributes on the ListView Control itself. The Layout Template will encapsulate either the items themselves or the groups, depending on whether we use a GroupTemplate.

GroupTemplate

The GroupTemplate is not actually required. We could skip this template and just use the ItemTemplate. The GroupTemplate requires a control with runat=”server” and the ID of “itemPlaceholder”. Again the ID can be specified with the ItemPlaceholderID attribute of the ListView control. The GroupTemplate encapsulates X number of ItemTemplates where X is specified by the GroupItemCount attribute of the ListView control. This template will REPLACE the control with the id “groupPlaceholder” and be listed as many times as necessary to display the entire set of records. (Unless we’re using paging, but that’s for another blog post…)

GroupSeparatorTemplate

The GroupSeparatorTemplate is not required, and most often is not used. Anything inside this template would be displayed between each group. No separator will show before the first group or after the last group. I haven’t used this template much myself, but I can see there would be a use for it in certain design scenarios.

ItemTemplate

The ItemTemplate is the real meat and potatoes of the ListView control, this is where record specific data will show. The ItemTemplate will repeat for each record in the data. If used in conjunction with the GroupTemplate this template will REPLACE the element with the id of “itemPlaceholder” X number of times per GroupTemplate, where X is equal to the number specified by the GroupItemCount attribute of the ListView control. Otherwise it will REPLACE the control inside of the LayoutTemplate with the id “itemPlaceholder”. It is important to remember that the id “itemPlaceholder” can be specified by the ItemPlaceHolderID attribute of the ListView. Also note that this template is required.

The section of the markup that displays <%# Eval(“Name”) %> is the standard code to pull the Name property of the current data item. This method can be used to pull any existing property from the data item. The literal control will be used in a later tutorial to show how we can use the events of a ListView to display information not readily accessible from the data item itself.

AlternatingItemTemplate

The AlternatingItemTemplate is not required. Essentially this template is identical to the ItemTemplate. If specified, this template will replace every other ItemTemplate. This is usually used to show an alternating row color, but could be used in other creative ways I’m sure. You can see in our example the only difference from the ItemTemplate is the background color and the class.

ItemSeparatorTemplate

The ItemSeparatorTemplate works very much like the GroupSeparatorTemplate. It will appear between each ItemTemplate, or each ItemTemplate and AlternatingItemTemplate. If no GroupTemplate is specified then this template will not show before the first item or after the last item. If a GroupTemplate is specified, then no ItemSeparatorTemplate will show before the first and last items of each group. This template is only required if you need it for design purposes.

EmptyItemTemplate

If you have not specified a GroupTemplate then the EmptyItemTemplate will never be used. In the event that you’ve specified a GroupTemplate and the last group in your listview has fewer items than your GroupItemCount attribute, the EmptyItemTemplate will be used to fill the remaining ItemTemplates needed to complete the group. This template is only required if your design calls for this functionality.

EmptyDataTemplate

The EmptyDataTemplate will be displayed in place of the LayoutTemplate in the event that the ListView contains 0 items. While this template is not required, and I often forget to define it, it is recommended for usability. This template will often resemble the LayoutTemplate with a message indicating 0 records returned.

Final Control

Most of the code in the final version is exactly what was shown in the individual template explanations above. The only thing that has changed are the attributes for the ListView control itself. I have specified the IDs for GroupPlaceholderID and ItemPlaceholderID even though I kept them their defaults. I have also set the GroupItemCount to 3.

And here is a screen shot of the ListView in action with 7 Groups.

• LayoutTemplate – Gray Outline
• GroupTemplate – Black Outline
• GroupSeparatorTemplate – Greenish Bar
• ItemTemplate – Yellow Box
• AlternatingItemTemplate – Pink Box
• ItemSeparatorTemplate – Cyan/Blue Line
• EmtyItemTemplate – Red Box

And that’s that! I realize this is totally useless if you don’t know how to retrieve the data and assign it to the ListView, but we will go into that in the next blog post.