In this article, I will demonstrate how to present data for
school classes with their related student numbers using a DataGrid. Figure 1
shows the DataGrid in design mode in Visual Studio .NET 2003.
Figure 1
The relevant data is stored in an XML file named
GridData.xml
Listing 1 : XML Code GridData.xml
<?xml version="1.0"encoding="utf-8" ?>
<Classes>
<Class>
<Name>Class A</Name>
<Students>120</Students>
</Class>
<Class>
<Name>Class B</Name>
<Students>150</Students>
</Class>
<Class>
<Name>Class C</Name>
<Students>220</Students>
</Class>
<Class>
<Name>Class D</Name>
<Students>100</Students>
</Class>
<Class>
<Name>Class E</Name>
<Students>320</Students>
</Class>
</Classes>
In the Page_Load event I have applied a function entitled
LoadGrid().
Listing 2 : DataGrid.aspx.cs
void LoadGrid()
{
DataSet dsGrid=new DataSet ();
dsGrid.ReadXml(Server.MapPath(@"GridData.xml"),XmlReadMode.Auto);
dgDisplay.DataSource=dsGrid;
dgDisplay.DataBind ();
}This function loads data from the XML file and binds it to
the DataGrid. In DataGrid binding, we have 3 columns (2 bound columns and 1 for
template columns).
Listing 3 : HTML Code in DataGrid.aspx
<asp:BoundColumn DataField="Name"HeaderText="Class Name"></asp:BoundColumn>
<asp:TemplateColumn HeaderText="StudentsPercentage">
<ItemTemplate>
<Table width="100%" >
<tr width="100%"height="10" ><td class=GTitleBack
width='<%#((int.Parse(DataBinder.Eval(Container.DataItem,"Students").ToString())*100)/nStudent) %>%' ></td>
<td width=' <% #100-((int.Parse(DataBinder.Eval(Container.DataItem,"Students").ToString())*100)/nStudent)%>%' ></td>
</tr>
</Table>
</ItemTemplate>
</asp:TemplateColumn>
In the template column we have an HTML table with one row
and two columns. Its width changes according to the relevant student number
and its percentage to the whole student number
First column width=
int.Parse(DataBinder.Eval(Container.DataItem,"Students").ToString())*100/nStudent
Second column width=
100- (int.Parse(DataBinder.Eval(Container.DataItem,"Students").ToString())*100/nStudent)
The width for columns is in a percentage and to give the
appearance of charting we use a style sheet class called GTitleBack
Listing 4 : Style Sheet Code in style.css
.GTitleBack
{ filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff,EndColorStr=#F7B611);
}If you do not want use an ingredient filter, you can use a background
color for the column. To be able to see all styles for your page, do not
forget to link the style sheet with your page.
Listing 5 : HTML Code in DataGrid.aspx
<LINK href="style.css"type="text/css" rel="stylesheet"/>
The final output will be as shown in the Figure given below.
Figure 2
Downloads
[Download Sample]
Conclusion
In this article, you have learned how to graphically display
data using a DataGrid with the help of relevant code samples.
