This is a migrated thread and some comments may be shown as answers.

Add client side validator to RadGrid

4 Answers 263 Views
Grid
This is a migrated thread and some comments may be shown as answers.
gary
Top achievements
Rank 1
gary asked on 31 Aug 2010, 09:18 PM

Hi,

 


I am trying to add required field validation to 2 fields Tag and Description. When user clicks New or Edit, the EditMode is set to popup. Inside the popup, the user needs to populate the Tag and Description input boxes. If both or one is empty/null, then I want to display a message to the user that Tag/Description is a required field, much like the behavior of RequiredFieldValidator. I have found numerous server side examples but no client side examples to accomplish this.

Any and all suggestions are welcomed.

Thanks in advance...

 

<telerik:RadGrid ID="RadGridTagDetail" runat="server" AllowAutomaticDeletes="True" 
    AllowAutomaticInserts="True" AllowAutomaticUpdates="True" 
    AllowFilteringByColumn="True" AllowPaging="True" 
    DataSourceID="ObjectDataSourceTags" GridLines="None" 
    style="margin-left: 13px" Width="50%" AutoGenerateColumns="False" 
    onitemdeleted="TagDetail_ItemDeleted" oniteminserted="TagDetail_ItemInserted" 
    onitemupdated="TagDetail_ItemUpdated">
<HeaderContextMenu EnableAutoScroll="True"></HeaderContextMenu>
  
    <ClientSettings AllowRowsDragDrop="True">
        <Selecting AllowRowSelect="True" EnableDragToSelectRows="False" />
        <Scrolling AllowScroll="True" UseStaticHeaders="True" />
    </ClientSettings>
      
<MasterTableView CommandItemDisplay="Bottom" 
        DataSourceID="ObjectDataSourceTags" DataKeyNames="Id" EditMode="PopUp">
<CommandItemSettings ExportToPdfText="Export to Pdf"></CommandItemSettings>
    <Columns>
        <telerik:GridBoundColumn DataField="Id" HeaderText="Tag" SortExpression="Id" 
            UniqueName="Id">
        </telerik:GridBoundColumn>
   
        <telerik:GridBoundColumn DataField="Descr" HeaderText="Description" 
            SortExpression="Descr" UniqueName="Descr">
        </telerik:GridBoundColumn>
    </Columns>
    <EditFormSettings InsertCaption="Add new Tag" PopUpSettings-Modal="false"/>
    <CommandItemTemplate>
        <telerik:RadToolBar ID="RadToolBarTags" Runat="server" 
            OnClientButtonClicking="RadToolBarTags_OnClientButtonClicking" 
            onbuttonclick="RadToolBarTags_ButtonClick">
        <Items>
            <telerik:RadToolBarButton runat="server" CommandName="InitInsert" Text="New">
            </telerik:RadToolBarButton>
            <telerik:RadToolBarButton runat="server" CommandName="EditSelected" Text="Edit">
            </telerik:RadToolBarButton>
            <telerik:RadToolBarButton runat="server" CommandName="DeleteSelected" Text="Delete">
            </telerik:RadToolBarButton>
            <telerik:RadToolBarButton runat="server" IsSeparator="true">
            </telerik:RadToolBarButton>
            <telerik:RadToolBarButton runat="server" Text="Close" Value="close">
            </telerik:RadToolBarButton>
        </Items>
        </telerik:RadToolBar>
    </CommandItemTemplate>
</MasterTableView>
</telerik:RadGrid>

4 Answers, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 2
answered on 01 Sep 2010, 06:52 AM
Hi Gary,

You can add RequiredFieldValidator to the TextBox editor of GridBoundColumn in ItemCreated event of grid.

There are four stages which need to be passed:
  1. Check whether the current item is in edit mode;
  2. Obtain reference to the respective GridColumnEditor instance and the editing control inside it;
  3. Create the validator and set its ControlToValidate property to point to the editing control;
  4. Add the validator to the Controls collection of the editing control Parent.

For more information and code, check the link below:
Validation


-Shinu.
0
gary
Top achievements
Rank 1
answered on 01 Sep 2010, 04:27 PM
Thanks...The example you provided showed me what I needed to change. Validation is working fine.
0
Shoshanah
Top achievements
Rank 1
Iron
answered on 22 Feb 2013, 02:59 AM
I have attempted to use the same approach for a MaskedTextBox. 
The Required field validator is added without an error, however when inserting a new record, the MaskedTextbox does not display at all.

Here's a snippet of the grid definition, plus the code for adding the validator.
I have upgraded to the Q1 2013 version, and for various reasons cannot use the new definition-based validation. 

What am I missing?
<telerik:RadGrid
               ID="OperatorPhoneEditableGrid"
               runat="server"
               SkinID="DataEntry"
               DataSourceID="sqlOperatorPhoneNumbers">
 
               <MasterTableView
                 Width="100%"
                 DataKeyNames="Telephone_Number_ID">
 
                 <EditFormSettings
                   CaptionFormatString="Edit Phone Number"
                   InsertCaption="Add New Phone Number"
                   PopUpSettings-Modal="false">
                 </EditFormSettings>
 
                 <CommandItemSettings
                   AddNewRecordText="Add New Phone" />
 
                 <Columns>
 
                    <telerik:GridEditCommandColumn
                     ButtonType="ImageButton"
                     UniqueName="EditCommandColumn"
                     Reorderable="false"
                     Resizable="false"
                     HeaderText="Edit"
                     HeaderTooltip="Edit Phone">
                     <HeaderStyle
                       Width="70px"
                       HorizontalAlign="Center" />
                     <ItemStyle
                       HorizontalAlign="Center"
                       CssClass="MyImageButton" />
                   </telerik:GridEditCommandColumn>
 
                   <telerik:GridCheckBoxColumn
                     UniqueName="GridCheckBoxColumn"
                     DataField="Is_Primary_Number_Flag"
                     HeaderStyle-Width="80px"
                     HeaderText="Primary">
                   </telerik:GridCheckBoxColumn>
 
                   <telerik:GridDropDownColumn
                     UniqueName="Telephone_Type_Desc"
                     DataField="Telephone_Type_Desc"
                     HeaderText="Type"
                     HeaderStyle-Width="100px"
                     DataSourceID="sqlPhoneTypeLookupList"
                     ListValueField="Telephone_Type_Desc"
                     ListTextField="Telephone_Type_Desc"
                     DropDownControlType="RadComboBox" />
 
                   <telerik:GridMaskedColumn
                     Mask="(###) ###-####"
                     UniqueName="TelephoneNumber"
                     SortExpression="Number"
                     HeaderText="Phone"
                     HeaderStyle-Width="120px"
                     DataField="Number"
                     FooterText="Telephone Number footer">
                                        
 
                   </telerik:GridMaskedColumn>
 
                   <telerik:GridBoundColumn
                     UniqueName="Extension"
                     SortExpression="Extension"
                     HeaderText="Extension"
                     HeaderStyle-Width="80px"
                     DataField="Extension"
                     FooterText="Extension footer">
 
 
                   </telerik:GridBoundColumn>
 
                   <telerik:GridBoundColumn
                     SortExpression="Notes"
                     HeaderText="Note"
                     HeaderButtonType="TextButton"
                     DataField="Note"
                     ColumnEditorID="NarrEdit">
                     <ItemStyle
                       Width="400px" />
                   </telerik:GridBoundColumn>
 
  
                   <telerik:GridButtonColumn
                     ConfirmText="Delete this Phone?"
                     ConfirmDialogType="RadWindow"
                     ConfirmTitle="Delete"
                     Reorderable="false"
                     Resizable="false"
                     ButtonType="ImageButton"
                     CommandName="Delete"
                     Text="Delete"
                     HeaderText="Delete"
                     HeaderTooltip="Delete Phone"
                     UniqueName="DeleteCommandColumn">
                     <HeaderStyle
                       Width="70px"
                       HorizontalAlign="Center" />
                     <ItemStyle
                       HorizontalAlign="Center"
                       CssClass="DeleteConfirmPopup" />
                   </telerik:GridButtonColumn>
 
                 </Columns>
 
               </MasterTableView>
 
               <ClientSettings>
 
                 <ClientEvents
                   OnPopUpShowing="AERadAjaxJSManager.RadGridCenterPopUpToSelectedRow" />
 
               </ClientSettings>
 
             </telerik:RadGrid>




Protected Sub RadGrid1_ItemCreated(ByVal sender As Object, ByVal e As Telerik.Web.UI.GridItemEventArgs) Handles OperatorPhoneEditableGrid.ItemCreated
 
  If (TypeOf e.Item Is GridEditableItem AndAlso e.Item.IsInEditMode) Then
 
    Dim item As GridEditableItem = CType(e.Item, GridEditableItem)
    Dim editor As GridMaskedColumnEditor = CType(item.EditManager.GetColumnEditor("TelephoneNumber"), GridMaskedColumnEditor)
    Dim cell As TableCell = CType(editor.MaskedTextBox.Parent, TableCell)
 
    Dim validator As RequiredFieldValidator = New RequiredFieldValidator
    editor.MaskedTextBox.ID = "ID_for_validation"
    validator.ControlToValidate = editor.MaskedTextBox.ID
    validator.ErrorMessage = "*"
 
    cell.Controls.Add(validator)
 
  End If
 
End Sub


0
Shoshanah
Top achievements
Rank 1
Iron
answered on 25 Feb 2013, 07:56 PM
I found my problem - I didn't properly name the validator. :)

In the interest of good karma, here's the end result that worked for me. I also pops up the error message using a Validation Summary.

 

Protected Sub PhoneGrid_ItemCreated(ByVal sender As Object, ByVal e As Telerik.Web.UI.GridItemEventArgs) Handles OperatorPhoneEditableGrid.ItemCreated
 
  If (TypeOf e.Item Is GridEditableItem AndAlso e.Item.IsInEditMode) Then
 
    Dim item As GridEditableItem = CType(e.Item, GridEditableItem)
    Dim editor As GridMaskedColumnEditor = CType(item.EditManager.GetColumnEditor("TelephoneNumber"), GridMaskedColumnEditor)
    Dim cell As TableCell = CType(editor.MaskedTextBox.Parent, TableCell)
 
    RequiredMaskedTextBox(e, "TelephoneNumber", "Telephone Number")
     
    CreateValidationSummaryForGrid(cell, "OperatorPhoneEditableGrid")
 
  End If
 
End Sub
 
Private Sub RequiredMaskedTextBox(ByVal e As GridItemEventArgs, ByVal ControlName As String, ByVal LabelTitle As String)
 
  Dim item As GridEditableItem = CType(e.Item, GridEditableItem)
  Dim editor As GridMaskedColumnEditor = CType(item.EditManager.GetColumnEditor(ControlName), GridMaskedColumnEditor)
  Dim cell As TableCell = CType(editor.MaskedTextBox.Parent, TableCell)
 
  Dim validator As RequiredFieldValidator = New RequiredFieldValidator
  validator.ID = ControlName + "_RequiredValidation"
  validator.ControlToValidate = editor.MaskedTextBox.ID
  validator.ErrorMessage = LabelTitle & " is required."
  validator.Display = System.Web.UI.WebControls.ValidatorDisplay.None
  validator.SetFocusOnError = True
 
  cell.Controls.Add(validator)
 
End Sub
 
Private Sub CreateValidationSummaryForGrid(ByVal cell As TableCell, ByVal GridName As String)
 
  Dim validationsum As New System.Web.UI.WebControls.ValidationSummary()
  validationsum.ID = GridName & "_ValidationSummary"
  validationsum.ShowMessageBox = True
  validationsum.ShowSummary = False
 
  validationsum.DisplayMode = System.Web.UI.WebControls.ValidationSummaryDisplayMode.BulletList
 
  cell.Controls.Add(validationsum)
 
End Sub
Tags
Grid
Asked by
gary
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 2
gary
Top achievements
Rank 1
Shoshanah
Top achievements
Rank 1
Iron
Share this question
or