Data entry validation

[Herman Gouw]

I have a web application using RadGrid and the data entry is done using in-line editing mode.

I would like to implement the following when the data entered is outside a predetermined range:
- pop up a warning message
or
- change the colour of the corresponding data entry cell

Can you please show me how to do this (or point me to the examples)?

[Shinu]

Hello Herman,

Check the following help documentation which explains how to add a RequiredFieldValidator in edit mode.
Validation

-Shinu.

[Herman Gouw]

Hi Shinu,

It is not clear to me how to display the pop up message or to change the cell colour from the corresponding documentation.

Is there any examples on these or any documentation about client side validation on RadGrid data entry validation?

Regards,
Herman

[Shinu]

Hello,

To pop up a message you can add  validationsummary control.Here is the sample code.

CS:

 RequiredFieldValidator validator = new RequiredFieldValidator();
 editor.TextBoxControl.ID = "GridTextBoxRoleName";
 validator.ControlToValidate = editor.TextBoxControl.ID;
 validator.ErrorMessage = "Enter ContactName";
 validator.SetFocusOnError = true;
 validator.Display = ValidatorDisplay.None;
 ValidationSummary validationsum = new ValidationSummary();
 validationsum.ID = "ValidationSummary1";
 validationsum.ShowMessageBox = true;
 validationsum.ShowSummary = false;
 validationsum.DisplayMode = ValidationSummaryDisplayMode.SingleParagraph;
 cell.Controls.Add(validator);
 cell.Controls.Add(validationsum);

-Shinu.

[Herman Gouw]

I have tried your sample code but it does not seem to work:

ASPX:

<telerik:RadGrid ID="RadGrid1" CssClass="CustomGrid" AllowSorting="false" AutoGenerateColumns="false" GridLines="Vertical" OnItemCommand="rgOutages_ItemCommand" OnItemCreated="rgOutages_ItemCreated" OnNeedDataSource="rgOutages_NeedDataSource" runat="server">
    <ClientSettings AllowKeyboardNavigation="true" EnablePostBackOnRowClick="true">
        <Scrolling UseStaticHeaders="true" />
        <Selecting AllowRowSelect="true" />
    </ClientSettings>
    <MasterTableView EditMode="InPlace" Width="100%">
        <Columns>
            <telerik:GridDateTimeColumn DataField="StartDate" DataFormatString="{0:dd/MM/yyyy}" DataType="System.DateTime" HeaderText="Start Date" HeaderStyle-Font-Bold="true" HeaderStyle-HorizontalAlign="Left" HeaderStyle-Width="13%" ItemStyle-HorizontalAlign="Left" UniqueName="StartDate" />
            <telerik:GridDateTimeColumn DataField="EndDate" DataFormatString="{0:dd/MM/yyyy}" DataType="System.DateTime" HeaderText="End Date" HeaderStyle-Font-Bold="true" HeaderStyle-HorizontalAlign="Left" HeaderStyle-Width="13%" ItemStyle-HorizontalAlign="Left" UniqueName="EndDate" />
            <telerik:GridNumericColumn DataField="UnitOutage" NumericType="Number" DataFormatString="{0:N0}" DataType="System.Int32" HeaderText="Unit Count" HeaderStyle-Font-Bold="true" HeaderStyle-HorizontalAlign="Left" HeaderStyle-Width="8%" ItemStyle-HorizontalAlign="Left" UniqueName="UnitOutage" />
            <telerik:GridBoundColumn DataField="OutageExplanation" ColumnEditorID="gridTextBoxColumnEditor" DataType="System.String" HeaderText="Explanation" HeaderStyle-Font-Bold="true" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left" MaxLength="1000" UniqueName="OutageExplanation" />
        </Columns>
    </MasterTableView>
</telerik:RadGrid>

C#:

protected void rgOutages_ItemCreated(object sender, GridItemEventArgs e)
{
    if (e.Item is GridEditableItem && e.Item.IsInEditMode)
    {
        GridEditableItem item = (GridEditableItem)e.Item;
        RadDatePicker picker = (RadDatePicker)item["StartDate"].Controls[0];
        picker.DateInput.Enabled = false;
        picker = (RadDatePicker)item["EndDate"].Controls[0];
        picker.DateInput.Enabled = false;

        GridNumericColumnEditor editor = (GridNumericColumnEditor)item.EditManager.GetColumnEditor("UnitOutage");
        editor.NumericTextBox.ID = "UnitOutage";

        RangeValidator rangeValidator = new RangeValidator();
        rangeValidator.ControlToValidate = editor.NumericTextBox.ID;
        rangeValidator.Display = ValidatorDisplay.None;
        rangeValidator.ErrorMessage = "Invalid Outage Unit";
        rangeValidator.MaximumValue = "100";
        rangeValidator.MinimumValue = "1";
        rangeValidator.Type = ValidationDataType.Integer;
        rangeValidator.SetFocusOnError = true;

        ValidationSummary validationSummary = new ValidationSummary();
        validationSummary.ID = "ValidationSummary1";
        validationSummary.ShowMessageBox = true;
        validationSummary.ShowSummary = false;
        validationSummary.DisplayMode = ValidationSummaryDisplayMode.SingleParagraph;
        editor.Controls.Add(rangeValidator);
        editor.Controls.Add(validationSummary);

        TextBox textbox = (TextBox)item["OutageExplanation"].Controls[0];
        textbox.Width = Unit.Percentage(100);
    }
}

protected void rgOutages_ItemCommand(object sender, GridCommandEventArgs e)
{
    if (e.CommandName == "RowClick")
    {
        GridDataItem gridDataItem = (GridDataItem)e.Item;
        gridDataItem.Edit = true;
        gridDataItem.Selected = true;

        this.rgOutages.Rebind();
    }
}

protected void rgOutages_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
{
    this.rgOutages.DataSource = GelfServer.GetOutages();
}

It is supposed to display a pop up error message when I type in a value outside the range of 1 upto 100 in the Unit Count column but it does not do this.

Herman

[Mira]

Hello Herman,

If you want the validation summary to appear in a pop up window, please examine the following resources:
ValidatorCallout
Showing Validation ErrorMessages in Modal Popup
Custom Validation Summary in ASP.NET

I hope this helps.

Greetings,
Mira
the Telerik team

[Herman Gouw]

Hi Mira,

How can I apply this to validate cells in a RadGrid?

Do you have any working samples for this?

Herman

[Veli]

Hi Herman,

The approach you have taken in your previous post is correct, only you need to add the validation controls to your item cell, not the editor control:

protected void rgOutages_ItemCreated(object sender, GridItemEventArgs e)
{
    if (e.Item is GridEditableItem && e.Item.IsInEditMode)
    {
        GridEditableItem item = (GridEditableItem)e.Item;
        RadDatePicker picker = (RadDatePicker)item["StartDate"].Controls[0];
        picker.DateInput.Enabled = false;
        picker = (RadDatePicker)item["EndDate"].Controls[0];
        picker.DateInput.Enabled = false;

        GridNumericColumnEditor editor = (GridNumericColumnEditor)item.EditManager.GetColumnEditor("UnitOutage");
        editor.NumericTextBox.ID = "UnitOutage";

        RangeValidator rangeValidator = new RangeValidator();
        rangeValidator.ControlToValidate = editor.NumericTextBox.ID;
        rangeValidator.Display = ValidatorDisplay.None;
        rangeValidator.ErrorMessage = "Invalid Outage Unit";
        rangeValidator.MaximumValue = "100";
        rangeValidator.MinimumValue = "1";
        rangeValidator.Type = ValidationDataType.Integer;
        rangeValidator.SetFocusOnError = true;

        ValidationSummary validationSummary = new ValidationSummary();
        validationSummary.ID = "ValidationSummary1";
        validationSummary.ShowMessageBox = true;
        validationSummary.ShowSummary = false;
        validationSummary.DisplayMode = ValidationSummaryDisplayMode.SingleParagraph;
        item["UnitOutage"].Controls.Add(rangeValidator);
        item["UnitOutage"].Controls.Add(validationSummary);

        TextBox textbox = (TextBox)item["OutageExplanation"].Controls[0];
        textbox.Width = Unit.Percentage(100);
    }
}

Let me know how this works for you.

Veli
the Telerik team

[Herman Gouw]

Hi Veli,

Thanks for your reply. It still does not work (i.e. the error message is not popped up).

For your information, I am working on a web application which I completed in 2009.

The web application (which uses RadGrids) works fine but the users requested a few new features.

One of the new features involves implementing validation as the value is entered on each cell of the RadGrid.

The users requested that when the value entered is outside a predetermined range then either
1. a popup error message is displayed and the focus remains on the cell
or
2. the colour of the data entry cell changes.

I haven't decided which way to choose.

Besides solving the popup message problem, can you please let me know if the 2nd way (change the colour of the cell) is feasible.
If it is, please let me know the example.

Thanks a lot,
Herman

[Veli]

Hi Herman,

Attached is a small test page demonstrating how the numeric textbox in RadGrid's edit cell can hook up to a range validator.

As for changing the color of the cell that contains invalid value,  that can be implemented too. In fact, RadNumerictextBox has an error style you can use. You can try it in the test page I attached. Simply add the following javascript somewhere after your grid:

var originalValidateFunction = RangeValidatorEvaluateIsValid;
RangeValidatorEvaluateIsValid = function(val)
{
    var valid = originalValidateFunction(val);
    if (!valid)
    {
        var input = $find(val.controltovalidate);
        input._invalid = true;
        input.updateCssClass();
        input.add_focus(function()
        {
            input._invalid = false;
            input.updateCssClass();
            input.remove_focus(arguments.callee);
        })
    }

    return valid;
}

This function replaces the original range validator evaluate function and updates RadNumericTextBox's invalid style if the validator returns false. The result is both a validator text, as well as highlighted input:



Veli
the Telerik team

[Herman Gouw]

Hi Veli,

Can you please attach the small test page again?

I was not able to find it in your last reply.

Thanks,
Herman

[Veli]

It must have failed to get uploaded. Sorry for that. Here is the file.

Veli
the Telerik team

[Herman Gouw]

Hi Veli,

Thanks for the attachment. Your test page works fine except for the Javascript. What changes will be done by the given Javascript?

I have modified your test page to resemble closely to the web application that I am working on:

ASPX

<form id="form2" runat="server">
<div>
    <telerik:RadScriptManager ID="RadScriptManager2" runat="server" />

    <telerik:RadGrid ID="RadGrid2" runat="server" Width="800px"
        OnNeedDataSource="RadGrid1_NeedDataSource"
        OnItemCreated="RadGrid1_ItemCreated"
        OnItemCommand="RadGrid1_ItemCommand"
        AutoGenerateEditColumn="false">
        <ClientSettings EnablePostBackOnRowClick="true">
            <Selecting AllowRowSelect="true" />
        </ClientSettings>
        <MasterTableView EditMode="InPlace" Width="100%" />
    </telerik:RadGrid>
</div>

C#

protected void Page_Load(object sender, EventArgs e)
{
}

protected void RadGrid1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
{
    RadGrid1.DataSource = GelfServer.GetData().Take(7);
}

protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
{
    if (e.Item is GridEditableItem && e.Item.IsInEditMode)
    {
        GridEditableItem item = (GridEditableItem)e.Item;

        GridNumericColumnEditor editor = (GridNumericColumnEditor)item.EditManager.GetColumnEditor("Quantity");
        RangeValidator rangeValidator = new RangeValidator();

        item["Quantity"].Controls.Add(rangeValidator);
        item["Quantity"].Width = Unit.Pixel(5000);

        rangeValidator.ControlToValidate = editor.NumericTextBox.ID;
        //rangeValidator.Display = ValidatorDisplay.None;
        rangeValidator.ErrorMessage = "Invalid Quantity Unit";
        rangeValidator.MaximumValue = "100";
        rangeValidator.MinimumValue = "1";
        rangeValidator.Type = ValidationDataType.Integer;
        rangeValidator.SetFocusOnError = true;

        ValidationSummary validationSummary = new ValidationSummary();
        validationSummary.ID = "ValidationSummary1";
        validationSummary.ShowMessageBox = true;
        validationSummary.ShowSummary = false;
        validationSummary.DisplayMode = ValidationSummaryDisplayMode.List;
        item["Quantity"].Controls.Add(validationSummary);
    }
}


protected void RadGrid1_ItemCommand(object sender, GridCommandEventArgs e)
{
    if (e.CommandName == "RowClick")
    {
        GridDataItem gridDataItem = (GridDataItem)e.Item;
        gridDataItem.Edit = true;
        gridDataItem.Selected = true;

        this.RadGrid1.Rebind();
    }
}

In my web application:
- to edit a row on the RadGrid, click on the corresponding row which will change the row into edit mode.
- to save the changes on the RadGrid, click on a different row.

Can you please show me how to:
- display a pop up error message after an invalid quantity is entered
- disallow the users from entering any other values if there is already an invalid quantity.

Thanks,
Herman

[Veli]

Hi Herman,

I have modified the test page according to your needs. Let me know how this works for you. Note that the focus does not stay on the input when it is invalid, but the grid cannot be updated if the page is not valid. You can also implement persisting the focus in the invalid field, but most of the time this does not work well across different browsers. A cross-browser solution is harder to implement.

Veli
the Telerik team

[Herman Gouw]

Hi Veli,

Can you please send me the modified test page?

Thanks,
Herman

[Veli]

Sorry about that. It seems there is an issue with uploading files, as I'm sure I uploaded the modified test page to my previous post. I have notified the responsible people.

Veli
the Telerik team

[Ida]

Hi,

Would it be possible to show the VB.NET code for creating a new rangeValidator for a textbox control in a grid please?

Thank you, Ida

[Shinu]

Hi Ida,

Please try the following code snippet for range validation.

VB:

Protected Sub RadGrid1_ItemCreated(sender As Object, e As GridItemEventArgs)
    If TypeOf e.Item Is GridEditableItem AndAlso e.Item.IsInEditMode Then
        Dim item As GridEditableItem = DirectCast(e.Item, GridEditableItem)
        Dim editor As GridNumericColumnEditor = DirectCast(item.EditManager.GetColumnEditor("Quantity"), GridNumericColumnEditor)
        Dim rangeValidator As New RangeValidator()
        item("Quantity").Controls.Add(rangeValidator)
        item("Quantity").Width = Unit.Pixel(300)
        rangeValidator.ControlToValidate = editor.NumericTextBox.ID
        rangeValidator.ErrorMessage = "Invalid Quantity Unit"
        rangeValidator.MaximumValue = "100"
        rangeValidator.MinimumValue = "1"
        rangeValidator.ForeColor = Color.Red
        rangeValidator.Type = ValidationDataType.[Integer]
        rangeValidator.SetFocusOnError = True
    End If
End Sub

Thanks,
Shinu

[Ida]

Thanks Shinu.

Though, the validation event does not seem to be firing for me.

My VB.NET code is:

Protected

 

 

Sub RDHauls_ItemCreated(sender As Object, e As Telerik.Web.UI.GridCommandEventArgs) 'Handles RDHauls.ItemCreated

 

 

 

If TypeOf e.Item Is GridEditableItem AndAlso e.Item.IsInEditMode Then

 

 

 

Dim item As GridEditableItem = DirectCast(e.Item, GridEditableItem)

 

 

 

Dim editor As GridNumericColumnEditor = DirectCast(item.EditManager.GetColumnEditor("CodEnd"), GridNumericColumnEditor)

 

 

 

Dim rvCodEnd As New RangeValidator

 

item(

 

"CodEnd").Controls.Add(rvCodEnd)

 

rvCodEnd.ControlToValidate = editor.NumericTextBox.ID

rvCodEnd.ErrorMessage =

 

"Invalid Quantity Unit"

 

rvCodEnd.MaximumValue =

 

"100"

 

rvCodEnd.MinimumValue =

 

"1"

 

rvCodEnd.Type =

 

ValidationDataType.[Integer]

 

rvCodEnd.SetFocusOnError =

 

True

 

 

 

End If

 

 

 

End Sub

 

And the textbox is set up as:

<

 

 

telerik:GridBoundColumn DataField="CodEnd" HeaderText="Cod End (mm)" UniqueName="CodEnd" Visible="false" DataType="System.Int32" ConvertEmptyStringToNull="true"></telerik:GridBoundColumn>

 

Can you advise please?

Thank you, Ida

[Shinu]

Hi Ida,

I see that you are using a bound column and in the validation you are setting the GridNumericColumnEditor,please set it to GridTextBoxColumnEditor.Try the following code snippet.Please note that the validations are visible in the editmode.

VB:

Protected Sub RadGrid1_ItemCreated(sender As Object, e As GridItemEventArgs)
    If TypeOf e.Item Is GridEditableItem AndAlso e.Item.IsInEditMode Then
        Dim item As GridEditableItem = DirectCast(e.Item, GridEditableItem)
        Dim editor As GridTextBoxColumnEditor = DirectCast(item.EditManager.GetColumnEditor("CodEnd"), GridTextBoxColumnEditor)
        Dim rvCodEnd As New RangeValidator()
        item("CodEnd").Controls.Add(rvCodEnd)
        rvCodEnd.ControlToValidate = editor.TextBoxControl.ID
        rvCodEnd.ErrorMessage = "Invalid CodEnd Unit"
        rvCodEnd.MaximumValue = "100"
        rvCodEnd.MinimumValue = "1"
        rvCodEnd.Type = ValidationDataType.[Integer]
        rvCodEnd.SetFocusOnError = True
    End If
End Sub

Thanks,
Shinu

[Ida]

Hi Shinu - unfortunately when I use the VB.NET code below, the event still isn't firing in Edit mode.

When I enter in a wrong value to the "CodEnd" textbox, then click the Update link, the ItemCreated event is not triggered.

Any advice please?

Thank you, Ida

[Shinu]

Hi Ida,

Please try adding the following line of code to your validation and see if it helps.

VB:

If TypeOf e.Item Is GridEditableItem AndAlso e.Item.IsInEditMode Then
    Dim item As GridEditableItem = DirectCast(e.Item, GridEditableItem)
    Dim editor As GridTextBoxColumnEditor = DirectCast(item.EditManager.GetColumnEditor("CodEnd"), GridTextBoxColumnEditor)
    Dim rvCodEnd As New RangeValidator()
    item("CodEnd").Controls.Add(rvCodEnd)
    'Add this line of code
    editor.TextBoxControl.ID = "ID_for_validation"
    rvCodEnd.ControlToValidate = editor.TextBoxControl.ID
    rvCodEnd.ErrorMessage = "Invalid CodEnd Unit"
    rvCodEnd.MaximumValue = "100"
    rvCodEnd.MinimumValue = "1"
    rvCodEnd.Type = ValidationDataType.[Integer]
    rvCodEnd.SetFocusOnError = True
End If

Thanks,
Shinu

[Ida]

    If TypeOf e.Item Is GridEditableItem AndAlso e.Item.IsInEditMode Then
        Dim item As GridEditableItem = DirectCast(e.Item, GridEditableItem)
        Dim editor As GridTextBoxColumnEditor = DirectCast(item.EditManager.GetColumnEditor("CodEnd"), GridTextBoxColumnEditor)
        Dim rvCodEnd As New RangeValidator()
        item("CodEnd").Controls.Add(rvCodEnd)
        'Add this line of code
        editor.TextBoxControl.ID = "ID_for_validation"
        rvCodEnd.ControlToValidate = editor.TextBoxControl.ID
        rvCodEnd.ErrorMessage = "Invalid CodEnd Unit"
        rvCodEnd.MaximumValue = "100"
        rvCodEnd.MinimumValue = "1"
        rvCodEnd.Type = ValidationDataType.[Integer]
        rvCodEnd.SetFocusOnError = True
    End If
End Sub

Hi Shinu,

The VB.NET code still unfortunately is not being fired. I put a break point at the start of this code and it isn't stopping at it.

Could it be the version of .NET that I am using. It is 4.0.

The textbox is set up as

<telerik:GridBoundColumn DataField="CodEnd" HeaderText="Cod End (mm)" UniqueName="CodEnd" Visible="false" DataType="System.Int32" ConvertEmptyStringToNull="true"></telerik:GridBoundColumn>

[Shinu]

Hi Ida,

Make sure that you have added the ItemCreated event to the radgrid, if you have, try adding it once again. I'm placing the complete code snippet which worked fine at my end. If this doesn't help, please provide your full code snippet.

ASPX:

<telerik:RadGrid ID="RadGrid1" runat="server" DataSourceID="SqlDataSource1"
    OnItemCreated="RadGrid1_ItemCreated" AutoGenerateEditColumn="true" AutoGenerateColumns="false">
    <MasterTableView>
        <Columns>
            <telerik:GridBoundColumn DataField="Quantity" HeaderText="Quantity" UniqueName="Quantity"
                Visible="false" DataType="System.Int32" ConvertEmptyStringToNull="true">
            </telerik:GridBoundColumn>
        </Columns>
    </MasterTableView>
</telerik:RadGrid>

VB:

If TypeOf e.Item Is GridEditableItem AndAlso e.Item.IsInEditMode Then
    Dim item As GridEditableItem = DirectCast(e.Item, GridEditableItem)
    Dim editor As GridTextBoxColumnEditor = DirectCast(item.EditManager.GetColumnEditor("Quantity"), GridTextBoxColumnEditor)
    Dim rvCodEnd As New RangeValidator()
    item("Quantity").Controls.Add(rvCodEnd)
    editor.TextBoxControl.ID = "ID_for_validation"
    rvCodEnd.ControlToValidate = editor.TextBoxControl.ID
    rvCodEnd.ErrorMessage = "Invalid Quantity Unit"
    rvCodEnd.MaximumValue = "100"
    rvCodEnd.MinimumValue = "1"
    rvCodEnd.Type = ValidationDataType.[Integer]
    rvCodEnd.SetFocusOnError = True
End If

Thanks,
Shinu

[Ida]

Hi Shinu

Ah yes, I had left out the  ItemCreated event on the RadGrid.

The event is firing now, though I get the following error message:

Editor cannot be initialized for column: CodEnd at Telerik.Web.UI.GridEditManager.GetColumnEditor(IGridEditableColumn column)

[Shinu]

Hi Ida,

Remove this line of code and check if the issue exists.
editor.TextBoxControl.ID = "ID_for_validation"

Thanks,
Shinu

[Ida]

Great! That's the event firing now.

Thanks Shinu!