0% found this document useful (0 votes)
23 views

Data Tutorial 12 Cs

The document discusses using TemplateFields in the GridView control to customize how data is displayed. It describes binding a GridView to a data source to display employee data in BoundFields. It then shows how to use a TemplateField to combine the first and last name fields into a single column. This involves converting the first name BoundField to a TemplateField and adding a Label to display the last name in the ItemTemplate. The TemplateField allows greater customization of the GridView display than BoundFields alone.

Uploaded by

Van Bao Nguyen
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
23 views

Data Tutorial 12 Cs

The document discusses using TemplateFields in the GridView control to customize how data is displayed. It describes binding a GridView to a data source to display employee data in BoundFields. It then shows how to use a TemplateField to combine the first and last name fields into a single column. This involves converting the first name BoundField to a TemplateField and adding a Label to display the last name in the ItemTemplate. The TemplateField allows greater customization of the GridView display than BoundFields alone.

Uploaded by

Van Bao Nguyen
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 17

1of17

Thistutorialispartofaset.FindoutmoreaboutdataaccesswithASP.NETintheWorkingwithDatain
ASP.NET2.0sectionoftheASP.NETsiteathttp://www.asp.net/learn/dataaccess/default.aspx.

WorkingwithDatainASP.NET2.0::Using
TemplateFieldsintheGridViewControl
Downloadthecodeforthissample
Clickherefortheprevioustutorial

Introduction
TheGridViewiscomposedofasetoffieldsthatindicatewhatpropertiesfromtheDataSource aretobe
includedintherenderedoutputalongwithhowthedatawillbedisplayed.Thesimplestfieldtypeisthe
BoundField,whichdisplaysadatavalueastext.OtherfieldtypesdisplaythedatausingalternateHTML
elements.TheCheckBoxField,forexample,rendersasacheckboxwhosecheckedstatedependsonthevalue
ofaspecifieddatafieldtheImageFieldrendersanimagewhoseimagesourceisbaseduponaspecifieddata
field.Hyperlinksandbuttonswhosestatedependsonanunderlyingdatafieldvaluecanberenderedusingthe
HyperLinkFieldandButtonFieldfieldtypes.
WhiletheCheckBoxField,ImageField,HyperLinkField,andButtonFieldfieldtypesallowforanalternateview
ofthedata,theystillarefairlylimitedwithrespecttoformatting.ACheckBoxFieldcanonlydisplayasingle
checkbox,whereasanImageFieldcanonlydisplayasingleimage.Whatifaparticularfieldneedstodisplay
sometext,acheckbox,andanimage,allbasedupondifferentdatafieldvalues?Orwhatifwewantedto
displaythedatausingaWebcontrolotherthantheCheckBox,Image,HyperLink,orButton?Furthermore,
theBoundFieldlimitsitsdisplaytoasingledatafield.Whatifwewantedtoshowtwoormoredatafield
valuesinasingleGridViewcolumn?
ToaccommodatethislevelofflexibilitytheGridViewofferstheTemplateField,whichrendersusinga
template.AtemplatecanincludeamixofstaticHTML,Webcontrols,anddatabindingsyntax.Furthermore,
theTemplateFieldhasavarietyoftemplatesthatcanbeusedtocustomizetherenderingfordifferent
situations.Forexample,theItemTemplate isusedbydefaulttorenderthecellforeachrow,butthe
EditItemTemplate templatecanbeusedtocustomizetheinterfacewheneditingdata.
Inthistutorialwe'llexaminehowtousetheTemplateFieldtoachieveagreaterdegreeofcustomizationwith
theGridViewcontrol.Intheprecedingtutorial wesawhowtocustomizetheformattingbasedonthe
underlyingdatausingtheDataBound andRowDataBound eventhandlers.Anotherwaytocustomizethe
formattingbasedontheunderlyingdataisbycallingformattingmethodsfromwithinatemplate.We'lllookat
thistechniqueinthistutorialaswell.
ForthistutorialwewilluseTemplateFieldstocustomizetheappearanceofalistofemployees.Specifically,
we'lllistalloftheemployees,butwilldisplaytheemployee'sfirstandlastnamesinonecolumn,theirhiredate
inaCalendarcontrol,andastatuscolumnthatindicateshowmanydaysthey'vebeenemployedatthe
company.

2of17

Figure1:ThreeTemplateFieldsareUsedtoCustomizetheDisplay

Step1:BindingtheDatatotheGridView
InreportingscenarioswhereyouneedtouseTemplateFieldstocustomizetheappearance,Ifinditeasiestto
startbycreatingaGridViewcontrolthatcontainsjustBoundFieldsfirstandthentoaddnewTemplateFields
orconverttheexistingBoundFieldstoTemplateFieldsasneeded.Therefore,let'sstartthistutorialbyaddinga
GridViewtothepagethroughtheDesignerandbindingittoanObjectDataSourcethatreturnsthelistof
employees.ThesestepswillcreateaGridViewwithBoundFieldsforeachoftheemployeefields.
OpentheGridViewTemplateField.aspx pageanddragaGridViewfromtheToolboxontotheDesigner.
FromtheGridView'ssmarttagchoosetoaddanewObjectDataSourcecontrolthatinvokesthe
EmployeesBLL class'sGetEmployees() method.

3of17

Figure2:AddaNewObjectDataSourceControlthatInvokestheGetEmployees() Method
BindingtheGridViewinthismannerwillautomaticallyaddaBoundFieldforeachoftheemployeeproperties:
EmployeeID,LastName,FirstName,Title,HireDate,ReportsTo,andCountry.Forthisreportlet'snot
botherwithdisplayingtheEmployeeID,ReportsTo,orCountry properties.ToremovetheseBoundFields
youcan:
UsetheFieldsdialogboxclickontheEditColumnslinkfromtheGridView'ssmarttagtobringup
thisdialogbox.Next,selecttheBoundFieldsfromthelowerleftlistandclicktheredXbuttonto
removetheBoundField.
EdittheGridView'sdeclarativesyntaxbyhandfromtheSourceview,deletethe<asp:BoundField>
elementfortheBoundFieldyouwishtoremove.
AfteryouhaveremovedtheEmployeeID,ReportsTo,andCountry BoundFields,yourGridView'smarkup
shouldlooklike:
<asp:GridViewID="GridView1"runat="server"
AutoGenerateColumns="False"DataKeyNames="EmployeeID"
DataSourceID="ObjectDataSource1">
<Columns>
<asp:BoundFieldDataField="LastName"HeaderText="LastName"
SortExpression="LastName"/>
<asp:BoundFieldDataField="FirstName"HeaderText="FirstName"
SortExpression="FirstName"/>
<asp:BoundFieldDataField="Title"HeaderText="Title"
SortExpression="Title"/>
<asp:BoundFieldDataField="HireDate"HeaderText="HireDate"
SortExpression="HireDate"/>
</Columns>
</asp:GridView>

Takeamomenttoviewourprogressinabrowser.Atthispointyoushouldseeatablewitharecordforeach
employeeandfourcolumns:onefortheemployee'slastname,onefortheirfirstname,onefortheirtitle,and
onefortheirhiredate.

4of17

Figure3:TheLastName,FirstName,Title,andHireDate FieldsareDisplayedforEachEmployee

Step2:DisplayingtheFirstandLastNamesina
SingleColumn
Currently,eachemployee'sfirstandlastnamesaredisplayedinaseparatecolumn.Itmightbenicetocombine
themintoasinglecolumninstead.ToaccomplishthisweneedtouseaTemplateField.Wecaneitheradda
newTemplateField,addtoittheneededmarkupanddatabindingsyntax,andthendeletetheFirstName and
LastName BoundFields,orwecanconverttheFirstName BoundFieldintoaTemplateField,editthe
TemplateFieldtoincludetheLastName value,andthenremovetheLastName BoundField.
Bothapproachesnetthesameresult,butpersonallyIlikeconvertingBoundFieldstoTemplateFieldswhen
possiblebecausetheconversionautomaticallyaddsanItemTemplate andEditItemTemplate withWeb
controlsanddatabindingsyntaxtomimictheappearanceandfunctionalityoftheBoundField.Thebenefitis
thatwe'llneedtodolessworkwiththeTemplateFieldastheconversionprocesswillhaveperformedsomeof
theworkforus.
ToconvertanexistingBoundFieldintoaTemplateField,clickontheEditColumnslinkfromtheGridView's
smarttag,bringinguptheFieldsdialogbox.SelecttheBoundFieldtoconvertfromthelistinthelowerleft
cornerandthenclickthe"ConvertthisfieldintoaTemplateField"linkinthebottomrightcorner.

5of17

Figure4:ConvertaBoundFieldIntoaTemplateFieldfromtheFieldsDialogBox
GoaheadandconverttheFirstName BoundFieldintoaTemplateField.Afterthischangethere'sno
perceptivedifferenceintheDesigner.ThisisbecauseconvertingtheBoundFieldintoaTemplateFieldcreates
aTemplateFieldthatmaintainsthelookandfeeloftheBoundField.Despitetherebeingnovisualdifferenceat
thispointintheDesigner,thisconversionprocesshasreplacedtheBoundField'sdeclarativesyntax
<asp:BoundFieldDataField="FirstName"HeaderText="FirstName"SortExpression="FirstName"
/> withthefollowingTemplateFieldsyntax:
<asp:TemplateFieldHeaderText="FirstName"SortExpression="FirstName">
<EditItemTemplate>
<asp:TextBoxID="TextBox1"runat="server"
Text='<%#Bind("FirstName")%>'></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:LabelID="Label1"runat="server"
Text='<%#Bind("FirstName")%>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>

Asyoucansee,theTemplateFieldconsistsoftwotemplatesanItemTemplate thathasaLabelwhoseText
propertyissettothevalueoftheFirstName datafield,andanEditItemTemplate withaTextBoxcontrol
whoseText propertyisalsosettotheFirstName datafield.Thedatabindingsyntax<%#
Bind("fieldName")%> indicatesthatthedatafieldfieldName isboundtothespecifiedWebcontrol
property.
ToaddtheLastName datafieldvaluetothisTemplateFieldweneedtoaddanotherLabelWebcontrolinthe
ItemTemplate andbinditsText propertyto LastName.Thiscanbeaccomplishedeitherbyhandorthrough
theDesigner.Todoitbyhand,simplyaddtheappropriatedeclarativesyntaxtotheItemTemplate:
<asp:TemplateFieldHeaderText="FirstName"SortExpression="FirstName">
<EditItemTemplate>
<asp:TextBoxID="TextBox1"runat="server"
Text='<%#Bind("FirstName")%>'></asp:TextBox>

6of17

</EditItemTemplate>
<ItemTemplate>
<asp:LabelID="Label1"runat="server"
Text='<%#Bind("FirstName")%>'></asp:Label>
<asp:LabelID="Label2"runat="server"
Text='<%#Bind("LastName")%>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>

ToadditthroughtheDesigner,clickontheEditTemplateslinkfromtheGridView'ssmarttag.Thiswill
displaytheGridView'stemplateeditinginterface.Inthisinterface'ssmarttagisalistofthetemplatesinthe
GridView.SinceweonlyhaveoneTemplateFieldatthispoint,theonlytemplateslistedinthedropdownlist
arethosetemplatesfortheFirstName TemplateFieldalongwiththeEmptyDataTemplate and
PagerTemplate.TheEmptyDataTemplate template,ifspecified,isusedtorendertheGridView'soutputif
therearenoresultsinthedataboundtotheGridViewthePagerTemplate,ifspecified,isusedtorenderthe
paginginterfaceforaGridViewthatsupportspaging.

Figure5:TheGridView'sTemplatesCanBeEditedThroughtheDesigner
ToalsodisplaytheLastName intheFirstName TemplateFielddragtheLabelcontrolfromtheToolboxinto
theFirstName TemplateField'sItemTemplate intheGridView'stemplateeditinginterface.

7of17

Figure6:AddaLabelWebControltotheFirstName TemplateField'sItemTemplate
AtthispointtheLabelWebcontroladdedtotheTemplateFieldhasitsText propertysetto"Label".Weneed
tochangethissothatthispropertyisboundtothevalueoftheLastName datafieldinstead.Toaccomplish
thisclickontheLabelcontrol'ssmarttagandchoosetheEditDataBindingsoption.

Figure7:ChoosetheEditDataBindingsOptionfromtheLabel'sSmartTag
ThiswillbringuptheDataBindingsdialogbox.Fromhereyoucanselectthepropertytoparticipatein
databindingfromthelistontheleftandchoosethefieldtobindthedatatofromthedropdownlistonthe
right.ChoosetheText propertyfromtheleftandtheLastName fieldfromtherightandclickOK.

8of17

Figure8:BindtheText PropertytotheLastName DataField


Note:TheDataBindingsdialogboxallowsyoutoindicatewhethertoperformtwowaydatabinding.Ifyou
leavethisunchecked,thedatabindingsyntax<%#Eval("LastName")%> willbeusedinsteadof<%#
Bind("LastName")%>.Eitherapproachisfineforthistutorial.Twowaydatabindingbecomesimportant
wheninsertingandeditingdata.Forsimplydisplayingdata,however,eitherapproachwillworkequallywell.
We'lldiscusstwowaydatabindingindetailinfuturetutorials.
Takeamomenttoviewthispagethroughabrowser.Asyoucansee,theGridViewstillincludesfour
columnshowever,theFirstName columnnowlistsboththeFirstName andLastName datafieldvalues.

Figure9:BoththeFirstName andLastName ValuesareShowninaSingleColumn


Tocompletethisfirststep,removetheLastName BoundFieldandrenametheFirstName TemplateField's
HeaderText propertyto"Name".AfterthesechangestheGridView'sdeclarativemarkupshouldlooklikethe
following:
<asp:GridViewID="GridView1"runat="server"
AutoGenerateColumns="False"DataKeyNames="EmployeeID"
DataSourceID="ObjectDataSource1">
<Columns>

9of17

<asp:TemplateFieldHeaderText="Name"
SortExpression="FirstName">
<EditItemTemplate>
<asp:TextBoxID="TextBox1"runat="server"
Text='<%#Bind("FirstName")%>'></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:LabelID="Label1"runat="server"
Text='<%#Bind("FirstName")%>'></asp:Label>
<asp:LabelID="Label2"runat="server"
Text='<%#Eval("LastName")%>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundFieldDataField="Title"HeaderText="Title"
SortExpression="Title"/>
<asp:BoundFieldDataField="HireDate"HeaderText="HireDate"
SortExpression="HireDate"/>
</Columns>
</asp:GridView>

Figure10:EachEmployee'sFirstandLastNamesareDisplayedinOneColumn
Step3:UsingtheCalendarControltoDisplaytheHiredDate Field
DisplayingadatafieldvalueastextinaGridViewisassimpleasusingaBoundField.Forcertainscenarios,
however,thedataisbestexpressedusingaparticularWebcontrolinsteadofjusttext.Suchcustomizationof
thedisplayofdataispossiblewithTemplateFields.Forexample,ratherthandisplaytheemployee'shiredate
astext,wecouldshowacalendar(usingtheCalendarcontrol)withtheirhiredatehighlighted.
Toaccomplishthis,startbyconvertingtheHiredDate BoundFieldintoaTemplateField.Simplygotothe
GridView'ssmarttagandclicktheEditColumnslink,bringinguptheFieldsdialogbox.SelecttheHiredDate
BoundFieldandclick"ConvertthisfieldintoaTemplateField."

10of17

Figure11:ConverttheHiredDate BoundFieldIntoaTemplateField
AswesawinStep2,thiswillreplacetheBoundFieldwithaTemplateFieldthatcontainsanItemTemplate
andEditItemTemplate withaLabelandTextBoxwhoseText propertiesareboundtotheHiredDate value
usingthedatabindingsyntax<%#Bind("HiredDate")%>.
ToreplacethetextwithaCalendarcontrol,editthetemplatebyremovingtheLabelandaddingaCalendar
control.FromtheDesigner,selectEditTemplatesfromtheGridView'ssmarttagandchoosetheHireDate
TemplateField'sItemTemplate fromthedropdownlist.Next,deletetheLabelcontrolanddragaCalendar
controlfromtheToolboxintothetemplateeditinginterface.

11of17

Figure12:AddaCalendarControltotheHireDate TemplateField'sItemTemplate
AtthispointeachrowintheGridViewwillcontainaCalendarcontrolinitsHiredDate TemplateField.
However,theemployee'sactualHiredDate valueisnotsetanywhereintheCalendarcontrol,causingeach
Calendarcontroltodefaulttoshowingthecurrentmonthanddate.Toremedythis,weneedtoassigneach
employee'sHiredDate totheCalendarcontrol'sSelectedDateandVisibleDateproperties.
FromtheCalendarcontrol'ssmarttag,chooseEditDataBindings.Next,bindbothSelectedDate and
VisibleDate propertiestotheHiredDate datafield.

Figure13:BindtheSelectedDate andVisibleDate PropertiestotheHiredDate DataField

12of17

Note:TheCalendarcontrol'sselecteddateneednotnecessarilybevisible.Forexample,aCalendarmayhave
August1st,1999astheselecteddate,butbeshowingthecurrentmonthandyear.Theselecteddateand
visibledatearespecifiedbytheCalendarcontrol'sSelectedDate andVisibleDate properties.Sincewe
wanttobothselecttheemployee'sHiredDate andmakesurethatit'sshownweneedtobindbothofthese
propertiestotheHireDate datafield.
Whenviewingthepageinabrowser,thecalendarnowshowsthemonthoftheemployee'shireddateand
selectsthatparticulardate.

Figure14:TheEmployee'sHiredDate isShownintheCalendarControl
Note:Contrarytoalltheexampleswe'veseenthusfar,forthistutorialwedidnotsetEnableViewState
propertytofalse forthisGridView.ThereasonforthisdecisionisbecauseclickingthedatesoftheCalendar
controlcausesapostback,settingtheCalendar'sselecteddatetothedatejustclicked.IftheGridView'sview
stateisdisabled,however,oneachpostbacktheGridView'sdataisreboundtoitsunderlyingdatasource,
whichcausestheCalendar'sselecteddatetobesetbacktotheemployee'sHireDate,overwritingthedate
chosenbytheuser.
Forthistutorialthisisamootdiscussionsincetheuserisnotabletoupdatetheemployee'sHireDate.It
wouldprobablybebesttoconfiguretheCalendarcontrolsothatitsdatesarenotselectable.Regardless,this
tutorialshowsthatinsomecircumstancesviewstatemustbeenabledinordertoprovidecertainfunctionality.

Step4:ShowingtheNumberofDaystheEmployee
HasWorkedfortheCompany

13of17

SofarwehaveseentwoapplicationsofTemplateFields:
Combiningtwoormoredatafieldvaluesintoonecolumn,and
ExpressingadatafieldvalueusingaWebcontrolinsteadoftext
AthirduseofTemplateFieldsisindisplayingmetadataabouttheGridView'sunderlyingdata.Inadditionto
showingtheemployees'hiredates,forexample,wemightalsowanttohaveacolumnthatdisplayshowmany
totaldaysthey'vebeenonthejob.
YetanotheruseofTemplateFieldsarisesinscenarioswhentheunderlyingdataneedstobedisplayed
differentlyinthewebpagereportthanintheformatit'sstoredinthedatabase.ImaginethattheEmployees
tablehadaGender fieldthatstoredthecharacterM orF toindicatethesexoftheemployee.Whendisplaying
thisinformationinawebpagewemightwanttoshowthegenderaseither"Male"or"Female",asopposedto
just"M"or"F".
BothofthesescenarioscanbehandledbycreatingaformattingmethodintheASP.NETpage'scodebehind
class(orinaseparateclasslibrary,implementedasastatic method)thatisinvokedfromthetemplate.Such
aformattingmethodisinvokedfromthetemplateusingthesamedatabindingsyntaxseenearlier.The
formattingmethodcantakeinanynumberofparameters,butmustreturnastring.Thisreturnedstringisthe
HTMLthatisinjectedintothetemplate.
Toillustratethisconcept,let'saugmentourtutorialtoshowacolumnthatliststhetotalnumberofdaysan
employeehasbeenonthejob.ThisformattingmethodwilltakeinaNorthwind.EmployeesRow objectand
returnthenumberofdaystheemployeehasbeenemployedasastring.Thismethodcanbeaddedtothe
ASP.NETpage'scodebehindclass,butmustbemarkedasprotected orpublic inordertobeaccessible
fromthetemplate.
protectedstringDisplayDaysOnJob(Northwind.EmployeesRowemployee)
{
//MakesureHiredDateisnotnull...ifso,return"Unknown"
if(employee.IsHireDateNull())
return"Unknown"
else
{
//Returnsthenumberofdaysbetweenthecurrent
//date/timeandHireDate
TimeSpants=DateTime.Now.Subtract(employee.HireDate)
returnts.Days.ToString("#,##0")
}
}

SincetheHiredDate fieldcancontainNULL databasevalueswemustfirstensurethatthevalueisnot NULL


beforeproceedingwiththecalculation.IftheHiredDate valueisNULL,wesimplyreturnthestring
"Unknown"ifitisnot NULL,wecomputethedifferencebetweenthecurrenttimeandtheHiredDate value
andreturnthenumberofdays.
ToutilizethismethodweneedtoinvokeitfromaTemplateFieldintheGridViewusingthedatabinding
syntax.StartbyaddinganewTemplateFieldtotheGridViewbyclickingontheEditColumnslinkinthe
GridView'ssmarttagandaddinganewTemplateField.

14of17

Figure15:AddaNewTemplateFieldtotheGridView
SetthisnewTemplateField'sHeaderText propertyto"DaysontheJob"anditsItemStyle's
HorizontalAlign propertyto Center.TocalltheDisplayDaysOnJob methodfromthetemplate,addan
ItemTemplate andusethefollowingdatabindingsyntax:
<%#DisplayDaysOnJob((Northwind.EmployeesRow)
((System.Data.DataRowView)Container.DataItem).Row)%>
Container.DataItem returnsaDataRowView objectcorrespondingtotheDataSource recordboundtothe
GridViewRow.ItsRow propertyreturnsthestronglytypedNorthwind.EmployeesRow,whichispassedtothe
DisplayDaysOnJob method.ThisdatabindingsyntaxcanappeardirectlyintheItemTemplate (asshownin
thedeclarativesyntaxbelow)orcanbeassignedtotheText propertyofaLabelWebcontrol.

Note:Alternatively,insteadofpassinginanEmployeesRow instance,wecouldjustpassintheHireDate value


using<%#DisplayDaysOnJob(Eval("HireDate"))%>.However,theEval methodreturnsanobject,so
we'dhavetochangeourDisplayDaysOnJob methodsignaturetoacceptaninputparameteroftypeobject,
instead.Wecan'tblindlycasttheEval("HireDate") calltoaDateTime becausetheHireDate columninthe
Employees tablecancontainNULL values.Therefore,we'dneedtoacceptanobject astheinputparameter
fortheDisplayDaysOnJob method,checktoseeifithadadatabaseNULL value(whichcanbeaccomplished
usingConvert.IsDBNull(objectToCheck)),andthenproceedaccordingly.
Duetothesesubtleties,I'veoptedtopassintheentireEmployeesRow instance.Inthenexttutorialwe'llseea
morefittingexampleforusingtheEval("columnName") syntaxforpassinganinputparameterintoa
formattingmethod.
ThefollowingshowsthedeclarativesyntaxforourGridViewaftertheTemplateFieldhasbeenaddedandthe
DisplayDaysOnJob methodcalledfromtheItemTemplate:
<asp:GridViewID="GridView1"runat="server"
AutoGenerateColumns="False"DataKeyNames="EmployeeID"
DataSourceID="ObjectDataSource1">

15of17

<Columns>
<asp:TemplateFieldHeaderText="Name"
SortExpression="FirstName">
<EditItemTemplate>
<asp:TextBoxID="TextBox1"runat="server"
Text='<%#Bind("FirstName")%>'></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:LabelID="Label1"runat="server"
Text='<%#Bind("FirstName")%>'></asp:Label>
<asp:LabelID="Label2"runat="server"
Text='<%#Eval("LastName")%>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundFieldDataField="Title"HeaderText="Title"
SortExpression="Title"/>
<asp:TemplateFieldHeaderText="HireDate"
SortExpression="HireDate">
<EditItemTemplate>
<asp:TextBoxID="TextBox2"runat="server"
Text='<%#Bind("HireDate")%>'></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:CalendarID="Calendar1"runat="server"
SelectedDate='<%#Bind("HireDate")%>'
VisibleDate='<%#Eval("HireDate")%>'>
</asp:Calendar>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateFieldHeaderText="DaysOnTheJob">
<ItemTemplate>
<%#DisplayDaysOnJob((Northwind.EmployeesRow)
((System.Data.DataRowView)Container.DataItem).Row)%>
</ItemTemplate>
<ItemStyleHorizontalAlign="Center"/>
</asp:TemplateField>
</Columns>
</asp:GridView>

Figure16showsthecompletedtutorial,whenviewedthroughabrowser.

16of17

Figure16:TheNumberofDaystheEmployeeHasBeenontheJobisDisplayed

Summary
TheTemplateFieldintheGridViewcontrolallowsforahigherdegreeofflexibilityindisplayingdatathanis
availablewiththeotherfieldcontrols.TemplateFieldsareidealforsituationswhere:
MultipledatafieldsneedtobedisplayedinoneGridViewcolumn
ThedataisbestexpressedusingaWebcontrolratherthanplaintext
Theoutputdependsontheunderlyingdata,suchasdisplayingmetadataorinreformattingthedata
Inadditiontocustomizingthedisplayofdata,TemplateFieldsarealsousedforcustomizingtheuserinterfaces
usedforeditingandinsertingdata,aswe'llseeinfuturetutorials.
Thenexttwotutorialscontinueexploringtemplates,startingwithalookatusingTemplateFieldsina
DetailsView.Followingthat,we'llturntotheFormView,whichusestemplatesinlieuoffieldstoprovide
greaterflexibilityinthelayoutandstructureofthedata.
HappyProgramming!
Clickhereforthenexttutorial

AbouttheAuthor
ScottMitchell,authorofsixASP/ASP.NETbooksandfounderof4GuysFromRolla.com,hasbeenworking

17of17

withMicrosoftWebtechnologiessince1998.Scottworksasanindependentconsultant,trainer,andwriter,
recentlycompletinghislatestbook,SamsTeachYourselfASP.NET2.0in24Hours.Hecanbereachedat
[email protected] orviahisblog,whichcanbefoundathttp://ScottOnWriting.NET.

SpecialThanksTo
Thistutorialserieswasreviewedbymanyhelpfulreviewers.LeadreviewerforthistutorialwasDanJagers.
InterestedinreviewingmyupcomingMSDNarticles?Ifso,[email protected].

You might also like