Wednesday, October 24, 2007

Custom Format in Datagrid - Multiple Rows and Columns

I needed to display data in Datagrid with a custom format - 3 rows X 4 Column instead of the default single row.

It was done by first adding layouts in a webuser control. Webuser control helps to make maintenance easy, playing in the templates of datagrid. Added the webuser control into the datagrid in a template column. Then bind the data. Let me elaborate it.

1. Add a UserControl and create its layout:

a) Design the layout - I made a three row, 3 column table table and placed label control in the cells.

b)Assign Values to the Controls - I had used labels to display data and used Databinder.Eval to display it in the Text property
< id="lblCountry" runat="server" text="'< %#">'> < /asp:Label >

2. Create DataGrid in the webform and add webusercontrol to the datagrid
So the Webusergrid is done, and created a datagrid in the Webform. In the datagrid, created a template column with autogenerate columns as false. The following is the markup
< id="dbgSearch" runat="server" autogeneratecolumns="False">
<><>< id="MyProvider1" runat="server">< /itemtemplate >< /asp:TemplateColumn >< /columns >
< /asp:DataGrid >
3. Binding Data to the Datagrid
And in the code of webform ( .aspx.vb), done the following code to bind the data

dbgSearch.DataSource = FillCountries
dbgSearch.DataBind()

Note: The datafield passed from to the datasource must match the property defined in the webusercontrols property.

No comments: