Monday, May 21, 2007

Populating the GridView Control

HTML code of the GridView control so that you will have the idea of what the GridView looks like:

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" OnRowCancelingEdit="GridView1_RowCancelingEdit" OnRowEditing="GridView1_RowEditing" OnRowUpdating="GridView1_RowUpdating" OnRowDataBound="GridView1_RowDataBound" Font-Names="Verdana" Font-Size="Small">

<Columns>

<asp:BoundField DataField="CategoryID" HeaderText="CategoryID" />

<asp:BoundField DataField="CategoryName" HeaderText="CategoryName" />

<asp:TemplateField HeaderText="Description">

<ItemTemplate>

<asp:Label ID="Label1" Text='<%# Eval("Description") %>' runat="server" Font-Names="Verdana">asp:Label> <br />

<br />

ItemTemplate>

<EditItemTemplate>

<asp:RequiredFieldValidator ErrorMessage="This field cannot be blank" ControlToValidate="TextBox1" ID="RequiredFieldValidator1" runat="server">asp:RequiredFieldValidator>

<asp:TextBox ID="TextBox1" Width="98%" Text='<%# Eval("Description") %>' runat="server">asp:TextBox>

EditItemTemplate>

asp:TemplateField>

<asp:TemplateField HeaderText="Choose">

<ItemTemplate>

<asp:DropDownList ID="DropDownList1" DataSource='<%# PopulateDropDownList() %>' DataTextField="CategoryName" DataValueField="CategoryName" runat="server" Width="116px">

asp:DropDownList><br />

<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="DropDownList1"

ErrorMessage="Please Select the Item" InitialValue="Select an item">asp:RequiredFieldValidator>

ItemTemplate>

asp:TemplateField>

<asp:CommandField ShowEditButton="True" />

Columns>

asp:GridView>

As you can see that two BoundColumns and two TemplateColumns. The CategoryID and Category Name are the Bound columns which are bound to the "CategoryID" and "CategoryName" fields in the Categories table in Northwind Database. The "Description" and "Choose" columns are template columns. The GridView looks something like this:

If you carefully read the HTML code of the GridView which I have posted above then you will notice one very special thing. The RequiredFieldValidator for the TextBox control in the Description column is placed in the EditItemTemplate of the GridView control. This is because the TextBox is in the EditItemTemplate and that is what we need to validate. If you put the RequiredFieldValidator in any ItemTemplate or any other Template supported by GridView you will recieve an error saying that GridView is unable to find the control to validate.

I have done the same thing with the DropDownList. Since the DropDownList is in the ItemTemplate of the GridView control so I placed the RequiredFieldValidator inside the ItemTemplate right beneath the DropDownList control.

It is a common scenario that you want the first item of the DropDownList to be some message saying "Please select an item". For this you can add the item dynamically inside the GridView_RowDataBound event.

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)

{

if (e.Row.RowType == DataControlRowType.DataRow)

{

DropDownList ddList = (DropDownList)e.Row.FindControl("DropDownList1");

ddList.Items[0].Text = "Select an item";

ddList.Items[0].Value = "Select an item";

}

}


Don't forget to assign the value property of the DropDownList to "Select an item" or any other text you like. It is this value that is compared against a RequiredFieldValidator. Now, you can easily set the RequiredFieldValidator's InitialValue property to "Select an item" or whatever your text was which means that you cannot leave the control whose value or text property is "Select an item" or the text set by you.

<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="DropDownList1"

ErrorMessage="Select the Item" InitialValue="Select an item">asp:RequiredFieldValidator>


You will also notice that when you loose focus from the control the validation control event will be fired. This is because the validation controls have a property "EnableClientScript" which means that the validation will be fired on the client side first and then on the server side. If you set EnableClientScript = false then client validation won't be fired and the validation control will wait for Page.Validate event to occur. If Page.Validate does not occur then no validation will be fired.

It is a good idea to keep EnableClientScript enabled so validation can be fired both on the client side as well as the server side.

No comments: