Using TemplateFields in ASP.NET

If you’ve been developing with ASP.Net for a while, you probably are at least thinking ‘TemplateFields‘ sound familiar. That’s because in other controls (v1.1 era), we had ‘TemplateColumns‘. TemplateFields are and do the same general things in newer v2.0 controls, like the GridView, DetailsView and FormsView.

Like the subtitle says, if you haven’t used them yet, you will, sooner or later, so you might as well learn about them now.

Everyone knows that, using the BoundFields (BouldColumns with the DataGrid) are very powerful, however, if you haven’t found out yet, you will eventually find out that BoundFields don’t exactly fit for every purpose in ASP.Net. We’ll present only two scenarios here, one with a GridView and one with a DetailsView control. The first one, with the GridView control will inlcude a ‘State’ field in the database table. Now, for pure data display, a BoundField fits the job perfectly, but if you need to edit the data, would you rather trust the end user to type in the exact two letter state code every time, or would you rather have a DropDownList, which allows the user to choose from a finite list?

Naturally, the latter solution would be better. Here, we can populate the DropDownList with only those State codes that you or your company actually deal with, either manually, with a User Control, or populate it from a database. Whichever way you choose, will still entail creating a TemplateField section. You’ll need one TemplateField section for each field in the database that needs to look differently or be displayed differently than the default. The base TemplateField will look like this:

<asp:TemplateField>
</asp:TemplateField>

What you will probably want to address here, at a bare minimum is the ‘HeaderText‘ property. All your display properties for that field. If you want a different font, font color, etc – here’s where you’d put it.

Now, in between the open and close tags for the TemplateField, is where the magic happens. Generally, what is needed, is a different control, or specifically-sized textboxes, to keep the width of the GridView from spreading out as wide as it does, by default. So, the first thing we’d need would be an ItemTemplate. That’s the ‘default’ area. It the section that shows up when the GridView first appears. Here, you could create or add any control you want, however, for our purposes, since it’s just going to display the text, we’re going to add a label control to the ItemTemplate.

<ItemTemplate>
	<asp:Label ID="label1" Runat="server" />
</ItemTemplate>

Now – at this point, nothing is actually shown. As you’ll notice, there’s nothing assigned to the ‘Text‘ property of the label. Since we’re retrieving data from a database (in this scenario), we’ll assign the data from that particular field:

Text='<%# Bind("YourFieldName") %>'

As you probably notice, the syntax here is abbreviated somewhat, from ASP.Net v1.1 syntax. Notice, that, since we’re putting doublequotes around the fieldname, inside the parentheses, we put single quotes around the definition, for the Text property. Now, it looks like this:

<ItemTemplate>
<asp:Label ID="label1" Text='<%# Bind("YourFieldName") %>' Runat="server" />
</ItemTemplate>

Now, the last thing we need to do is add an EditItemTemplate area, and add a DropDownlist to that section:

<EditItemTemplate>
      <asp:DropDownList id="ddlStates" runat="server"
		DataSourceID="sqlDS2"
         	DataTextField="StAbbr" DataValueField="StAbbr"
         	SelectedValue='<%# Bind("Region") %>' />
</EditItemTemplate>

In this example, we’re using an external table to populate the DropDownList with State abbreviations, however, since the table that’s populating the Gridview (again – in this example) is a different table, the actual fieldname in that table, for the State, is called ‘Region‘. That’s why, in this example, the field name is set to ‘Region’. To see a working code sample , click here

.

Naturally, we’re just showing the uses of TemplateFields in a GridView, but they can also be easily used in other Data Display controls, like the DetailsView. In fact, it’s possible to then create an InsertItemTemplate, when it is used for Inserting data. This way, you can add a MultiLine Textbox for Notes fields, or as with the GridView, add a DropDownlist for other field types. There are many uses and possibities.

This tutorial has covered the basic of TemplateFields, and it should allow you to now easily understand the working concepts concerning the use of TemplateFields. You should now be well on the road to using TemplateFields in your every day coding.

Related Posts:

• No Related Posts