I like doing things the quick, easy (and lazy) way to achieve certain functionalities. For me, what better way to this than program something declaratively? I had a development scenario I had to create an efficient navigation for a directory of country codes while at the same time maintaining visual appeal given the limitation of a fixed height. I was developing a kiosk system that’s locked to a 800 x 600 screen resolution.
The choice for using xml as the data storage had some obvious benefits: the implementation would save me resources in hitting the databases and country codes don’t often change much (so far at least in my lifetime.
I used the handy AjaxControlToolkit:TabContainer in grouping my country codes. Inside was a TabPanel that contained a 2-column asp:GridView that will contain country code information. The gridview supports sorting and pagination. I used an asp:XmlDataSource as my lightweight datasource with a straightforward declaration.
<asp:XmlDataSource ID="xml_AE" runat="server" DataFile="ae.xml" />
Adding more tabs would be just adding additional xml files of the same format declared above,
e.g. “fj.xml”, a new tab panel and another gridview. I’ve included the style declarations so the grid colors can be easily reproducible. The pagination settings use the following images:
An interesting property declaration of the grid is to set this property to true:
EnableSortingAndPagingCallbacks
MSDN defines this property as “Gets or sets a value indicating whether client-side callbacks are used for sorting and paging operations.” This is a handy property so that achieving sorting and pagination in a gridview can be done declaratively instead of programmatically. This property however only works if the corresponding gridview has a DataSourceId hooked to it. If I programmatically set the datasource of the gridview in the following manner:
gv_CountryCodes.DataSource = xml_AE;
gv_CountryCodes.DataBind();
A template field column cannot also support this property.
This seemingly complex functionality has been achieved declaratively without writing a piece of c# or vb.net code.
The xml file (for countries ‘a’ to ‘e’) has been made intuitive enough:
<?xml version="1.0" encoding="utf-8" ?>
<country_codes>
<code country="Afghanistan" cc="93" />
<code country="Albania" cc="355" />
<code country="Algeria" cc="213" />
<code country="American Samoa" cc="684" />
<code country="Andorra" cc="376" />
<code country="Angola" cc="244" />
It was now a matter of bringing it all together, below is a complete declaration for a single pane:
<AjaxControlToolkit:TabContainer
runat="server" ID="myTabContainer_countryCodes" Height="300"
BackColor="Aqua" ActiveTabIndex="0" ScrollBars="None"Width="505px">
<%-- A - E --%>
<AjaxControlToolkit:TabPanel
runat="server" BackColor="Azure"
ID="tab_AE"
HeaderText="A to E" >
<ContentTemplate>
<asp:GridView
ID="gv_CountryCodes"
runat="server"
EnableSortingAndPagingCallbacks="true"
AutoGenerateColumns="False"
BackColor="#DEBA84"
BorderColor="#DEBA84"
BorderWidth="0px"
CellPadding="3"
DataSourceId="xml_AE"
AllowSorting="True"
AllowPaging="True"
BorderStyle="None"
CellSpacing="1"
Font-Names="Arial"
Font-Size="Small"
GridLines="None"
Width="100%" PageSize="10">
<FooterStyle
BackColor="#C0C0FF"
ForeColor="#8C4510" />
<PagerStyle
ForeColor="#8C4510"
HorizontalAlign="Center"
Font-Size="XX-Small" />
<HeaderStyle
BackColor="#A55129"
Font-Bold="True"
ForeColor="White" />
<RowStyle
ForeColor="#8C4510"
BackColor="#FFF7E7" />
<Columns>
<asp:BoundField
SortExpression="country"
DataField="country"
HeaderText="Country">
<ItemStyle Font-Bold="True" Width="250px" />
</asp:BoundField>
<asp:BoundField
SortExpression="cc"
DataField="cc"
HeaderText="Country Code">
<ItemStyle HorizontalAlign="center" />
</asp:BoundField>
</Columns>
<PagerSettings
Mode="NextPreviousFirstLast"
PageButtonCount="7"
FirstPageText="First Page"
LastPageText="Last Page"
NextPageText="Next"
PreviousPageText="Previous"
NextPageImageUrl="~/Images/pager_next.jpg"
PreviousPageImageUrl="~/Images/pager_previous.jpg"
FirstPageImageUrl="~/Images/pager_gotoFirst.jpg"
LastPageImageUrl="~/Images/pager_gotoLast.jpg"/>
</asp:GridView>
<asp:XmlDataSource
ID="xml_AE"
runat="server"
DataFile="CC_ae.xml" />
</ContentTemplate>
</AjaxControlToolkit:TabPanel>
Which would already achieve:
