How To Validate a Devexpress Textbox inside an Devexpress Gridview in Javasacript - asp.net-mvc-4

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

When do you need to validate the TextBox? In browser mode or when editing? Currently your TextBox is required when you edit a row. Try to set the IsRequired property for your TextBox in the template as well.
txtSettings.Properties.ValidationSettings.RequiredField.IsRequired = true;
It should work.

Answer 2

Go through this thread - MVC GridView - Client validation in default EditForm.
In case if you are working with ajax form then i suggest you use
built-in validation instead:GridView - How to use Microsoft
validation with an AJAX form to validate the Model properties on the
client side.
More References:
GridView - How to enable the client-side validation in the Edit Form
How to correctly enable Model, Unobtrusive or jQuery Client validation
Client Validation in MVC3 with Gridview Template Form

Answer 3

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.....