How To Validate a Devexpress Textbox inside an Devexpress Gridview in Javasacript

Question

i am not able to figure out why the focusout validation that uses the assigned regex is not working in the devex textbox. when i am using the textbox out of the grid it starts working as required. Kindly suggest the solution.

@Html.DevExpress().GridView(settings =>
{
    settings.Columns.Add(column =>
        {
            column.FieldName = "InYear";
            column.Caption = "In Year";
            column.Width = 100;
            column.ColumnType = MVCxGridViewColumnType.TextBox;
            column.SortOrder = DevExpress.Data.ColumnSortOrder.Ascending; // Default
            column.SortIndex = 1;
            column.CellStyle.HorizontalAlign = HorizontalAlign.Left;
            var txtProperties = column.PropertiesEdit as TextBoxProperties;
            txtProperties.Width = Unit.Percentage(100);
            txtProperties.MaxLength = 4;
            txtProperties.DisplayFormatInEditMode = true;
            txtProperties.ValidationSettings.RequiredField.IsRequired = true;
            txtProperties.ValidationSettings.ValidateOnLeave = true;
            txtProperties.ValidationSettings.RegularExpression.ValidationExpression = @"\d{4}";
            txtProperties.ValidationSettings.RegularExpression.ErrorText = "Expected format is: YYYY";
            txtProperties.ClientSideEvents.ValueChanged = String.Format("function (s, e) {{ OnValueChanged(s, e, '{0}', {1}); }}", "InYear", "0");
            column.SetDataItemTemplateContent(c =>
            {
                if (!(bool)DataBinder.Eval(c.DataItem, "ReadOnly"))
                {
                    Html.DevExpress().TextBox(txtSettings =>
                    {

                        txtSettings.Name = "txtInYear_" + c.KeyValue.ToString();
                        txtSettings.Width = Unit.Percentage(100);
                        txtSettings.Properties.MaxLength = 4;
                        txtSettings.Properties.DisplayFormatInEditMode = true;
                        txtSettings.Properties.ValidationSettings.ValidateOnLeave = true;
                        txtSettings.Properties.ValidationSettings.ValidationGroup = c.KeyValue.ToString();
                        txtSettings.Properties.ValidationSettings.RegularExpression.ValidationExpression = @"[0-9]{4}";
                        txtSettings.Properties.ValidationSettings.RegularExpression.ErrorText = "Expected format is: YYYY";
                        txtSettings.Properties.ClientSideEvents.ValueChanged = String.Format("function (s, e) {{ OnValueChanged(s, e, '{0}', {1}); }}", c.Column.FieldName, c.KeyValue);
                    }).Bind(DataBinder.Eval(c.DataItem, c.Column.FieldName)).Render();


                }
                else
                    Html.DevExpress().Label(lblSettings =>
                    {
                        lblSettings.Name = "lblInYear_" + c.KeyValue.ToString();
                        lblSettings.Width = Unit.Percentage(100);
                    }).Bind(DataBinder.Eval(c.DataItem, c.Column.FieldName).ToString()).Render();
            });
        });
}).Bind(Model).GetHtml()

EDIT : I am using a button out of the gridview to trigger the update command. How can i trigger only validate event of the EditRow. Please view attached image.

Thanks in advance

Answer 1

After a long struggle i got the following answer :

• Assign a validation group property to the nested controls as below

  txtSettings.Properties.ValidationSettings.ValidationGroup = c.KeyValue.ToString();

• Iterate through the keyvalues on client side and call the devexpress validate function ASPxClientEdit.ValidateEditorsInContainer as following, i represent validation group name

  var isValid =!ASPxClientEdit.ValidateEditorsInContainer(GridName.GetMainElement(), i)

My approach might not be the best but it helped me a lot, i think this would also be helpful for others having the same issue.

Thanks.....