Posts tagged: Binding label in gridview

Oct 07 2009

Binding xml data to gridview Template field

With ASP.NET data binding, you can bind any server control to simple properties, collections, expressions and/or methods. When you use data binding, you have more flexibility when you use data from a database or other means.

Data binding essentials

<%# %> Syntax
ASP.NET introduces a new declarative syntax, <%# %>. This syntax is the basis for using data binding in an .aspx page. All data binding expressions must be contained within these characters.

let us start Binding XML data to Gridview Template Field using dataset

ReadXml method is used to fill it with schema and data.

using order.xml file to bind the data into gridview template field

<?xml version=”1.0″?>
<orderReport>
<report>
<orderCode>1234</orderCode>
<Date>21321</Date>
<Location>dada</Location>
<Content>asad</Content>
<Count>12</Count>
</report>
<report>
<orderCode>1002</orderCode>
<Date>09-02-2009</Date>
<Location>chennai</Location>
<Content>plasma</Content>
<Count>5</Count>
</report>
<report>
<orderCode>1003</orderCode>
<Date>06-03-2008</Date>
<Location>pune</Location>
<Content>Bikes</Content>
<Count>10</Count>
</report>
</orderReport>

step1: Open visual studio –> File –> New –> Website –>choose visual studio template asp.net website–>ok

step2: Drag the Gridview control into default.aspx page
keep Gridview AutoGeneratecolumns property is false

step3: goto gridview Tasks –> click Edit columns.. –> choose TemplateField –>click add button (templateField is added to

gridview) –>click OK  see below figures

gridview_edit_template

gridview_edit_template

now again goto Gridview Tasks click Edit Templates see below figure

gridview Item Template choosing

gridview Item Template choosing

step4: now add table with 1 row and 4 columns inside item template of gridview add four labels to that columns of the table
inside item template.

gridview label binding

gridview label binding

step5: Bind xml values (ordercode,location,content binding 3 column fields only out of 5 you can bind 5 fields ). To bind
values  (  see above figure click label edit DataBindings)

gridview_DataBinding

gridview_DataBinding

similarly bind location field, content field. There are three labels in my gridview

label1 is binded as Eval(”orderCode”)

label2 is binded as Eval(”Loaction”)

label3 is binded as Eval(”Content”)

above binding names must be same as xml data i.e

<report>
<orderCode>1234</orderCode> // this orderCode is Eval(”orderCode”)
<Date>21321</Date>
<Location>dada</Location> //this Location is Eval(”Location”)
<Content>asad</Content> //this content is Eval(”Content”)
<Count>12</Count>
</report>

step 6: After binding all values click End Template Editing.

gridview EndTemplateField

gridview EndTemplateField

now see the design view of gridview

<asp:GridView ID=”GridView1″ runat=”server” AutoGenerateColumns=”False” >
<Columns>
<asp:TemplateField>
<ItemTemplate>
<table>
<tr>
<td>
<asp:Label ID=”Label1″ runat=”server” Text=’<%# Eval(”orderCode”) %>’></asp:Label>
</td>
<td>
<asp:Label ID=”Label2″ runat=”server” Text=’<%# Eval(”Location”) %>’></asp:Label>
</td>
<td>
<asp:Label ID=”Label3″ runat=”server” Text=’<%# Eval(”Content”) %>’></asp:Label>
</td>
</tr>
</table>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>

Write the code to display the data

Note:1) my xml file name is order.xml it doesn’t contain any     folders.so give the path as Server.MapPath(”order.xml”)

2) If the order.xml inside the folder name of orderDetails then         change the path as

Server.MapPath(”orderDetails/order.xml”)

sample code look like in Default.aspx.cs

protected void Page_Load(object sender, EventArgs e)
{

DataSet objDs = new DataSet();

//it does not contain any folder
objDs.ReadXml(Server.MapPath(”order.xml”));

//Inside orderDetails is foldername contain order.xml file
//objDs.ReadXml(Server.MapPath(”orderDetails/order.xml”));

GridView1.DataSource = objDs.Tables[0].DefaultView;
GridView1.DataBind();

}

Alibi3col theme by Themocracy