Using validation controls with asp.net gridview when editing data - Part 22

Suggested Videos 
Part 19 - Using optimistic concurrency when editing data in gridview
Part 20 - Keep gridview in edit mode when update fails due to data conflict 
Part 21 - GridView TemplateField in asp.net



Please watch Part 21 of the asp.net gridview tutorial before proceeding. We want to make "Gender" required field. When editing data in the gridview control, if a user has selected "Select Gender", then the user should not be able to submit the page. We should get "Gender is a required field" error message as shown in the screen shot below.




At the moment we do not have any validation in place when editing data in gridview control. If you have selected "Select Gender" from dropdownlist and submit the page, we get a crash with error message - String or binary data would be truncated.

This is because "Gender" column length in the database is nvrahcar(10). This size is not enough to store the word "Select Gender". To get rid of the error change the length to nvarchar(20) using the sql script below.
ALTER TABLE tblemployee
ALTER COLUMN Gender nvarchar(20)

Now, if you have selected "Select Gender" from dropdownlist and submit the page, the word "Select Gender" will be stored in the database table. We want to avoid this. We only want the page to be submitted, if the user has selected the gender - Male or Female.

Since we are already using a TemplateField to display Gender in the GridView control, this should be very easy to achieve. All we need to do is drag and drop a "RequiredFieldValidator" control next to the dropdownlist in EditItemTemplate. Then configure "RequiredFieldValidator" as shown below.
<asp:TemplateField HeaderText="Gender" SortExpression="Gender">
    <EditItemTemplate>
        <asp:DropDownList ID="DropDownList1" runat="server" 
                          SelectedValue= '<%# Bind("Gender") %>'>
            <asp:ListItem>Select Gender</asp:ListItem>
            <asp:ListItem>Male</asp:ListItem>
            <asp:ListItem>Female</asp:ListItem>
        </asp:DropDownList>
        <asp:RequiredFieldValidator ID="RequiredFieldValidator1" 
            runat="server" ErrorMessage="Gender is a required field" 
            ControlToValidate="DropDownList1" InitialValue="Select Gender" 
            Text="*" ForeColor="Red" >
        </asp:RequiredFieldValidator>
    </EditItemTemplate>
    <ItemTemplate>
        <asp:Label ID="Label1" runat="server" Text='<%# Bind("Gender") %>'>
        </asp:Label>
    </ItemTemplate>
</asp:TemplateField>

Finally drag and drop a "ValidationSummary" control on the webform, after the closing tag of GridView. Set ForeColor="Red" on "ValidationSummary" control. 
<asp:ValidationSummary ID="ValidationSummary1" runat="server" ForeColor="Red" />

That's it. We are done. Run the application, and when you try to submit the page without selecting "Gender", you get a validation error message as expected. If you are new to validation controls, please watch videos on  validation controls from asp.net video tutorial.