Grid View for ASP.NET Web Forms - Display a custom error message in a detail row on the client

This example demonstrates how to create a detail row template and add a label to the template to display an error message when the cell value is invalid.

Overview

Follow the steps below to display a custom error message in a detail row:

1. Specify the grid's Templates.DetailRow property and add a label to the template. Handle the grid's server-side HtmlRowCreated event and hide the detail row in the handler.

   <Templates>
       <DetailRow>
           <dx:ASPxLabel ID="lblError" runat="server" ClientInstanceName="lbl"></dx:ASPxLabel>
       </DetailRow>
   </Templates>

   protected void gv_HtmlRowCreated(object sender, ASPxGridViewTableRowEventArgs e) {
       if (e.RowType == GridViewRowType.Detail) {
           e.Row.Attributes.Add("name", "errorArea");
           e.Row.Style.Add("display", "none");
       }
   }

2. For validated columns, specify their ValidationSettings properties and handle client-side Validation events. If the column value is invalid, display the detail row and assign an error text string to the label.

   <dx:GridViewDataTextColumn FieldName="CategoryName" VisibleIndex="2">
       <PropertiesTextEdit>
           <ClientSideEvents Validation="OnValidation" />
           <ValidationSettings ErrorDisplayMode="None">
               <RequiredField IsRequired="true" ErrorText="CategoryName Is Required" />
           </ValidationSettings>
       </PropertiesTextEdit>
   </dx:GridViewDataTextColumn>

   function OnValidation(s, e) {
       if (!e.isValid) {
           document.getElementsByName("errorArea")[0].style.display = "table-row";
           lbl.SetText(e.errorText);
       }
       else {
           document.getElementsByName("errorArea")[0].style.display = "none";
       }
   }

Files to Review

• Default.aspx (VB: Default.aspx)
• Default.aspx.cs (VB: Default.aspx.vb)

Documentation

• Grid View Templates
• Validate Grid Data

Does this example address your development requirements/objectives?

(you will be redirected to DevExpress.com to submit your response)