DataGrid, DataList, Repeater Controls
ADDING ITEMS TO DATAGRID, DATALIST, and REPEATER CONTROLS
Use data binding to add items to the DataGrid, DataList, and Repeater controls. These three controls use templates to define
their appearance at run time. A "template" is a set of HTML elements or server controls, or both, that will be repeated
for each data item in the control.
To add items, follow these steps:
1. Define the data souce
2. Draw the DataGrid, DataList, or Repeater control and bind to the data source
3. Edit the templates in the control to add HTML elements or server controls that will be repeated within the list or grid
4. Set the properties of the server controls contained in the list or grid to bind to data items in the container's data source
The following example shows how to add template columns to a DataGrid control and how to bind the controls in those columns
to a simple data source:
1. Create a public data souce in your application (e.g. string array)
// Public data item for DataGrid
public string[] arrData = new string[] {"This", "that", "and", "the", "other"};
2. Draw a DataGrid control on the WebForm
3. Add template columns to the control by selecting the DataGrid control and then clicking the Property Builder link at the bottom of the
Properties window.
4. in the Properties dialog box, select Columns, and then select Template Column in the Columns list and click the Add (>) button
to ad a template column to the DataGrid control. For this example, add two templat columns and click 'OK'.
5. In the Properties window, select the "DataSource" property and specify the data source for the control. For this example,
type arrData, the array created in step 1
6. Create the template used to display data in the control:
right-click the DataGrid cotnrol
point to Edit Template, and
select Columns[0] from the shortcut menu.
The control's appearance changes to Edit mode
7. Draw other controls on the Web form, and then drag them onto the template to add them to the DataGrid control. For this example,
draw a TextBox control and drag it on to the template for column 0
8. In the Properties window, select the "DataBindings" property of the control you just added to the template, and click the button
that appears. Visual Studio displays the DataBindings dialog box
9. In the Bindable Properties list, select the property to receive the data item. For this example, selet "Text". Select Simple
Binding, and then expand Container and select Dataitem to specify which data item to put into the selected property. Click 'OK'.
10. Edit the second template column. To do this, right-click the DataGrid control, select Edit Template, and then select Columns[1]
11. Repeat steps 4 through 7 for Column(1). For this example, draw a Button control and drag it onto the Column(1) template in the DataGrid
12. Close the template when you've finished. To do this, right-click the template and select End Template Editing from the shortcut menu.
Visual Studio displays the contained controls. To change any of the contained control's properties, edit the template as we did in the
preceding steps