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

Validating page before Insert/update button click.

5 Answers 519 Views

Grid

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

Shoshanah asked on 20 Feb 2013, 03:32 AM

I have a radgrid placed on a web form that uses PeterBlum's RequiredValidator and CustomValidator to validate some data on the page.
I would like to validate the web form data before performing an Insert or Update on the grid.
I am using radgrid's automatic insert and update actions.

The following approach succeeds in preventing the insert form from loading if the validation fails, but doesn't continue on to displaying the validation messages.
Any suggestions?

Protected Sub Grid_ItemCommand(source As Object, e As GridCommandEventArgs) Handles PreferredMediaEditableGrid.ItemCommand

Select Case e.CommandName

Case RadGrid.InitInsertCommandName

PeterBlum.DES.Globals.Page.Validate()

If Not PeterBlum.DES.Globals.Page.IsValid Then

' cancel automatic insert.

e.Canceled = True

End If

End Select

End Sub

5 Answers, 1 is accepted

answered on 22 Feb 2013, 09:18 PM

Re-reading my earlier post, I realize I didn't do a good job communicating my issue. :)

The automatic CRUD for the grid is working great. What I am really struggling with is how to validate data *outside* the grid, before Insert or Update actions are taken.

Here's the scenario:
1. I have a web page for inserting a new person into our system.
2. On this page, there's a grid for adding the person's preferred contact methods.
3. Before the user can enter a preferred contact method in the grid, I need to validate the web page, and insert the Person record.

I can use the ItemCommand to validate and save the page before initializing Insert or Update. If there are no errors, this works great. However, if the page doesn't validate (some client-side validation fails), I don't know how to display the validation messages.

If the "Insert New Record" link on the grid was an actual button, I could set it's "CausesValidation" property to True, and then the client-side web form validation would fire before initializing any action.

Is there a way to achieve the same effect with the Insert Record and EditCommand actions?

Here's the grid, along with one of the web form fields that I am validating (email address):

<tr>

<td>

<des:LocalizableLabel

ID="EmailAddress"

runat="server"

Text="E-Mail Address">

</des:LocalizableLabel>

</td>

<td colspan="4">

<aec:TelerikTextBox

ID="Operator__buOperator__Email_Address"

runat="server"

MaxLength="50"

Columns="50"

DefiningTitle="Email Address. Example: bob@aol.com.">

</aec:TelerikTextBox>

</td>

</tr>

</table>

<br />

<aec:SectionHead

ID="SectionHead7"

runat="server"

SubHeading="True"

Title="Preferred Media" />

<table>

<tr>

<td>

<telerik:RadAjaxPanel

ID="RadAjaxGridPanel"

runat="server"

ClientEvents-OnRequestStart="AERadAjaxJSManager.PanelRequestStarted">

<telerik:RadGrid

ID="PreferredMediaEditableGrid"

SkinID="DataEntry"

runat="server"

AllowAutomaticDeletes="true"

AllowAutomaticInserts="true"

AllowAutomaticUpdates="true"

DataSourceID="sqlOperatorPreferredMedia"

ShowStatusBar="True"

AutoGenerateColumns="False"

AllowSorting="True"

AllowPaging="True"

AllowMultiRowEdit="False">

<MasterTableView

Width="100%"

EditMode="PopUp"

CommandItemDisplay="Top"

DataKeyNames="Operator_Preferred_Media_Assign_ID"

ItemStyle-VerticalAlign="Top"

AllowMultiColumnSorting="True">

<EditFormSettings

CaptionFormatString="Edit Preferred Media"

InsertCaption="Add New Preferred Media"

PopUpSettings-Modal="false">

</EditFormSettings>

<CommandItemSettings

AddNewRecordText="Add New Preferred Media" />

<Columns>

<%-- Logic for Edit record icon --%>

<telerik:GridEditCommandColumn

ButtonType="ImageButton"

UniqueName="EditCommandColumn"

Reorderable="false"

Resizable="false"

HeaderText="Edit"

HeaderTooltip="Edit Vending Machine">

<HeaderStyle

Width="70px"

HorizontalAlign="Center" />

<ItemStyle

HorizontalAlign="Center"

CssClass="MyImageButton" />

</telerik:GridEditCommandColumn>

<telerik:GridNumericColumn

UniqueName="Priority"

DataField="Priority"

HeaderText="Priority"

DecimalDigits="0"

DefaultInsertValue="1"

NumericType="Number"

DataType="System.Int32"

SortExpression="Priority">

<HeaderStyle

Width="70px"

HorizontalAlign="Center" />

</telerik:GridNumericColumn>

<telerik:GridDropDownColumn

UniqueName="Media_Type_Desc"

DataField="Media_Type_Desc"

HeaderText="MediaType"

DataSourceID="sqlMediaTypeLookupList"

ListValueField="Media_Type_Desc"

ListTextField="Media_Type_Desc"

DropDownControlType="RadComboBox">

</telerik:GridDropDownColumn>

<%-- Logic for delete record icon --%>

<telerik:GridButtonColumn

ConfirmText="Delete this Preferred Media?"

ConfirmDialogType="RadWindow"

ConfirmTitle="Delete"

Reorderable="false"

Resizable="false"

ButtonType="ImageButton"

CommandName="Delete"

Text="Delete"

HeaderText="Delete"

HeaderTooltip="Delete Preferred Media"

UniqueName="DeleteCommandColumn">

<HeaderStyle

Width="70px"

HorizontalAlign="Center" />

<ItemStyle

HorizontalAlign="Center"

CssClass="DeleteConfirmPopup" />

</telerik:GridButtonColumn>

</Columns>

</MasterTableView>

<ClientSettings>

<ClientEvents

OnPopUpShowing="AERadAjaxJSManager.RadGridCenterPopUpToSelectedRow" />

</ClientSettings>

</telerik:RadGrid>

</telerik:RadAjaxPanel>

answered on 27 Feb 2013, 06:25 PM

Hello Shoshanah,

Actually you can set the CausesValidation property for the insert and edit buttons. In order to achieve this you will have to intercept the OnItemCreated event. A sample demonstration of this is shown in the code snippet below:

protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)

{

if(e.Item is GridCommandItem)

{

Button newRecordButton = ((e.Item as GridCommandItem).FindControl("AddNewRecordButton") as Button);

newRecordButton.CausesValidation = true;

LinkButton linkButton = ((e.Item as GridCommandItem).FindControl("InitInsertButton") as LinkButton);

linkButton.CausesValidation = true;

}

if (e.Item is GridDataItem)

{

ImageButton editButton=((e.Item as GridDataItem)["EditCommandColumn"].FindControl("EditButton") as ImageButton);

editButton.CausesValidation=true;

}

Using this code snippet you should be able to achieve your goal.

Kind regards,
Angel Petrov
the Telerik team

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.