New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Flexible Server-Side Validation

Next database reset in 0 hours, 12 minutes, 10 seconds
 IDProductNameSupplierCategoryUnitPrice 
12345...
Page size:
 18 items in 6 pages
812Things  222.00
813ShooesFormaggi Fortini s.r.l.Beverages0.01
824647834ghh Dairy Products4.00

Enter value which doesn't start with '4'

 
FormValidationGroup
City:
State:
SearchValidationGroup
Enter criteria:
  • Demo Configurator
  • Validation options
  • Choose validation groupNo group chosen

This example demonstrates the flexible server-side validation mechanism of the Telerik RadGrid edit form.

There are three properties available under the ValidationSettings section of the control which can fine-tune the validation behavior of the grid edit form, namely:

  • EnableValidation - boolean property specifying whether the data entered in the edit form will be validated server-side or not. The default value of this property is true and if the server validation fails the row will remain in edit mode.
  • ValidationGroup - property of type string specifying to which validation group the buttons with CausesValidation = true from the edit form belong. This property is empty by default, however you can define outer validation group and fire the server code of its validators if needed. The edited item once again will retain its edit state - choose a validation group of your choice from the dropdown to see this in reality
  • CommandsToValidate - array of strings designating on what type of command the edited row will be kept in edit regime if the server validation fails. The default items added to the array are PerformInsert and Update, however you can include your own command as well. Keep in mind that this property has a meaning only when EnableValidation is set to true

Furthermore, there is a custom validator attached to the Reorder level field which triggers server validation for the new entry. When the value in the textbox starts with '4', Page.IsValid will return false and the row will not be updated.

The same logic will work with ajax enabled for the grid with the limitation that the error messages for the outer validators will not be displayed. To do that you will need to disable the built-in AJAX for the grid and ajaxify the controls on the page through RadAjaxManager/RadAjaxPanel.

Instructions

To test the functionality on this example:
  • Switch the edit modes using the Edit options menu at the top
  • Enable/disable the validation for the grid using the checkbox from the Validation options menu
  • Choose a validation group for the grid edit form controls by selecting an option from the dropdown list from the Validation options menu
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.GridExamplesCSharp.DataEditing.Validation.DefaultCS" %>

<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadGrid1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid1"></telerik:AjaxUpdatedControl>
                    <telerik:AjaxUpdatedControl ControlID="RequiredFieldValidator3"></telerik:AjaxUpdatedControl>
                    <telerik:AjaxUpdatedControl ControlID="RequiredFieldValidator4"></telerik:AjaxUpdatedControl>
                    <telerik:AjaxUpdatedControl ControlID="RequiredFieldValidator5"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="CheckBox2">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid1"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="DropDownList1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid1"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadFormDecorator RenderMode="Lightweight" runat="server" DecorationZoneID="demo" DecoratedControls="All" EnableRoundedCorners="false" />
    <div id="demo" class="demo-container size-wide">
        <telerik:RadGrid RenderMode="Lightweight" ID="RadGrid1" runat="server" AllowAutomaticDeletes="True" AllowAutomaticInserts="True"
            PageSize="3" AllowSorting="true" AllowAutomaticUpdates="True" AllowPaging="True"
            AutoGenerateColumns="False" DataSourceID="SqlDataSource1" OnItemUpdated="RadGrid1_ItemUpdated"
            OnDataBound="RadGrid1_DataBound" OnItemDeleted="RadGrid1_ItemDeleted" OnItemInserted="RadGrid1_ItemInserted"
            ShowStatusBar="true" OnPreRender="RadGrid1_PreRender">
            <PagerStyle Mode="NextPrevAndNumeric" PageButtonCount="5"></PagerStyle>
            <MasterTableView Width="100%" CommandItemDisplay="TopAndBottom" DataKeyNames="ProductID"
                DataSourceID="SqlDataSource1" HorizontalAlign="NotSet">
                <Columns>
                    <telerik:GridEditCommandColumn >
                        <HeaderStyle Width="20px"></HeaderStyle>
                        <ItemStyle CssClass="MyImageButton"></ItemStyle>
                    </telerik:GridEditCommandColumn>
                    <telerik:GridBoundColumn DataField="ProductID" HeaderText="ID" ReadOnly="True" SortExpression="ProductID"
                        UniqueName="ProductID">
                        <HeaderStyle Width="20px" ForeColor="Silver"></HeaderStyle>
                        <ItemStyle ForeColor="Silver"></ItemStyle>
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="ProductName" HeaderText="ProductName" SortExpression="ProductName"
                        UniqueName="ProductName">
                    </telerik:GridBoundColumn>
                    <telerik:GridDropDownColumn DataField="SupplierID" DataSourceID="SqlDataSource2"
                        HeaderText="Supplier" ListTextField="CompanyName" ListValueField="SupplierID"
                        UniqueName="SupplierID">
                    </telerik:GridDropDownColumn>
                    <telerik:GridDropDownColumn DataField="CategoryID" DataSourceID="SqlDataSource3"
                        HeaderText="Category" ListTextField="CategoryName" ListValueField="CategoryID"
                        UniqueName="CAtegoryID">
                    </telerik:GridDropDownColumn>
                    <telerik:GridBoundColumn HeaderText="UnitPrice" DataField="UnitPrice" SortExpression="UnitPrice" UniqueName="TemplateColumn"
                        EditFormColumnIndex="1">
                        <HeaderStyle Width="80px"></HeaderStyle>
                        <ColumnValidationSettings EnableRequiredFieldValidation="true">
                            <RequiredFieldValidator ErrorMessage="This field is required!" Display="Dynamic"></RequiredFieldValidator>
                        </ColumnValidationSettings>
                    </telerik:GridBoundColumn>
                    <telerik:GridTemplateColumn HeaderText="Reorder level" SortExpression="ReorderLevel"
                        UniqueName="ReorderLevelColumn" EditFormColumnIndex="1" Visible="false">
                        <HeaderStyle Width="80px"></HeaderStyle>
                        <ItemTemplate>
                            <asp:Label runat="server" ID="lblReorderLevel" Text='<%# Eval("ReorderLevel", "{0:C}") %>'></asp:Label>
                        </ItemTemplate>
                        <EditItemTemplate>
                            <br />
                            <asp:TextBox runat="server" ID="tbReorderLevel" Text='<%# Bind("ReorderLevel") %>'></asp:TextBox>
                            <div style="color: #e93100;">
                                Enter value which doesn't start with '4'
                            </div>
                            <asp:CustomValidator ID="CustomValidator1" runat="server" ErrorMessage="Invalid input"
                                ControlToValidate="tbReorderLevel" OnServerValidate="CustomValidator1_ServerValidate">
                            </asp:CustomValidator>
                        </EditItemTemplate>
                    </telerik:GridTemplateColumn>
                    <telerik:GridButtonColumn ConfirmText="Delete this product?"
                        CommandName="Delete" Text="Delete" UniqueName="DeleteColumn">
                        <HeaderStyle Width="20px"></HeaderStyle>
                        <ItemStyle HorizontalAlign="Center" CssClass="MyImageButton"></ItemStyle>
                    </telerik:GridButtonColumn>
                </Columns>
                <EditFormSettings ColumnNumber="2" CaptionDataField="ProductName" CaptionFormatString="Edit properties of Product {0}">
                    <FormTableItemStyle Wrap="False"></FormTableItemStyle>
                    <FormCaptionStyle CssClass="EditFormHeader"></FormCaptionStyle>
                    <FormMainTableStyle CellPadding="3" CssClass="editTable"
                        Width="100%"></FormMainTableStyle>
                    <FormTableStyle CellPadding="2" CssClass="module" Height="110px"></FormTableStyle>
                    <FormTableAlternatingItemStyle Wrap="False"></FormTableAlternatingItemStyle>
                    <EditColumn InsertText="Insert Order" UpdateText="Update an Order"
                        UniqueName="EditCommandColumn1" CancelText="Cancel edit">
                    </EditColumn>
                    <FormTableButtonRowStyle HorizontalAlign="Right" CssClass="EditFormButtonRow"></FormTableButtonRowStyle>
                </EditFormSettings>
            </MasterTableView>
            <ValidationSettings CommandsToValidate="PerformInsert,Update"></ValidationSettings>
        </telerik:RadGrid>
        
        <div class="demo-container no-bg">
            <table width="100%">
                <tr>
                    <td>
                        <fieldset>
                            <legend>FormValidationGroup</legend>
                            <dl>
                                <dd>
                                    <asp:Label runat="server" Text="City:"></asp:Label>
                                    <br />
                                    <asp:TextBox runat="server" ID="city" Label="City:" Width="200px"></asp:TextBox>
                                    <asp:RequiredFieldValidator runat="server" ID="RequiredFieldValidator4" ControlToValidate="city"
                                        Display="Dynamic" ErrorMessage="City is required" ValidationGroup="FormValidationGroup"></asp:RequiredFieldValidator>
                                </dd>
                                <dd>
                                    <asp:Label ID="Label1" runat="server" Text="State:"></asp:Label>
                                    <br />
                                    <asp:TextBox runat="server" ID="state" Label="State:" Width="200px"></asp:TextBox>
                                    <asp:RequiredFieldValidator runat="server" ID="RequiredFieldValidator5" ControlToValidate="state"
                                        Display="Dynamic" ErrorMessage="State is required" ValidationGroup="FormValidationGroup"></asp:RequiredFieldValidator>
                                </dd>
                                <dd style="margin-top: 11px;">
                                    <asp:Button CausesValidation="true" runat="server" ID="Button1" Text="PostBack" ValidationGroup="FormValidationGroup"></asp:Button>
                                </dd>
                            </dl>
                        </fieldset>
                    </td>
                    <td valign="top">
                        <fieldset>
                            <legend>SearchValidationGroup</legend>
                            <dl>
                                <dd>
                                    <asp:Label ID="Label2" runat="server" Text="Enter criteria:"></asp:Label>
                                    <br />
                                    <asp:TextBox runat="server" ID="name" Label="Enter criteria:" Width="200px"></asp:TextBox>
                                </dd>
                                <dd style="margin-top: 11px;">
                                    <asp:Button ID="btnSearch" runat="server" Text="PostBack" ValidationGroup="SearchValidationGroup"></asp:Button>
                                    <asp:RequiredFieldValidator runat="server" ID="RequiredFieldValidator3" ControlToValidate="name"
                                        Display="Dynamic" ErrorMessage="Criteria is required" ValidationGroup="SearchValidationGroup"></asp:RequiredFieldValidator>
                                </dd>
                            </dl>
                        </fieldset>
                    </td>
                </tr>
            </table>
        </div>
    </div>
    <asp:SqlDataSource ID="SqlDataSource1" runat="server"
        ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString35 %>"
        DeleteCommand="DELETE FROM [Products] WHERE [ProductID] = @ProductID"
        InsertCommand="INSERT INTO [Products] ([ProductName], [SupplierID], [CategoryID], [UnitPrice]) VALUES (@ProductName, @SupplierID, @CategoryID, @UnitPrice)"
        SelectCommand="SELECT * FROM [Products]"
        UpdateCommand="UPDATE [Products] SET [ProductName] = @ProductName, [SupplierID] = @SupplierID, [CategoryID] = @CategoryID, [UnitPrice] = @UnitPrice WHERE [ProductID] = @ProductID">
        <DeleteParameters>
            <asp:Parameter Name="ProductID" Type="Int32"></asp:Parameter>
        </DeleteParameters>
        <InsertParameters>
            <asp:Parameter Name="ProductName" Type="String"></asp:Parameter>
            <asp:Parameter Name="SupplierID" Type="Int32"></asp:Parameter>
            <asp:Parameter Name="CategoryID" Type="Int32"></asp:Parameter>
            <asp:Parameter Name="QuantityPerUnit" Type="String"></asp:Parameter>
            <asp:Parameter Name="UnitPrice" Type="Decimal"></asp:Parameter>
        </InsertParameters>
        <UpdateParameters>
            <asp:Parameter Name="ProductName" Type="String"></asp:Parameter>
            <asp:Parameter Name="SupplierID" Type="Int32"></asp:Parameter>
            <asp:Parameter Name="CategoryID" Type="Int32"></asp:Parameter>
            <asp:Parameter Name="QuantityPerUnit" Type="String"></asp:Parameter>
            <asp:Parameter Name="UnitPrice" Type="Decimal"></asp:Parameter>
            <asp:Parameter Name="ProductID" Type="Int32"></asp:Parameter>
        </UpdateParameters>
    </asp:SqlDataSource>
    <asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString35 %>"
        ProviderName="System.Data.SqlClient" SelectCommand="SELECT [SupplierID], [CompanyName] FROM [Suppliers]"></asp:SqlDataSource>
    <asp:SqlDataSource ID="SqlDataSource3" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString35 %>"
        ProviderName="System.Data.SqlClient" SelectCommand="SELECT [CategoryID], [CategoryName] FROM [Categories]"></asp:SqlDataSource>
    <qsf:ConfiguratorPanel ID="ConfiguratorPanel1" runat="server" Expanded="true" Height="260px">
        <Views>
            <qsf:View Title="Validation options">
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" runat="server" Size="Narrow">
                    <ul class="fb-group">
                        <li>
                            <span class="checkbox">
                                <asp:CheckBox ID="CheckBox2" AutoPostBack="True" Text="Enable/disable validation"
                                    runat="server" Checked="True" OnCheckedChanged="CheckBox2_CheckedChanged"></asp:CheckBox></span></li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn2" runat="server" Size="Narrow">
                    <ul class="fb-group">

                        <li>
                            <qsf:DropDownList ID="DropDownList1" runat="server" Width="160px" AutoPostBack="True" Label="Choose validation group" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">
                                <Items>
                                    <telerik:DropDownListItem Text="No group chosen" Value="NoGroup" Selected="true" />
                                    <telerik:DropDownListItem Text="FormValidationGroup" Value="FormGroup" />
                                    <telerik:DropDownListItem Text="SearchValidationGroup" Value="SearchGroup" />
                                </Items>
                            </qsf:DropDownList>
                        </li>

                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance