Description:
No doubt, you know that DevExpress editors have their own validation mechanism. This mechanism supports client-side and server-side types of validation. In addition, you can skip validation of invisible editors and validate only visible ones.
Almost each DevExpress ASP.NET control can be hidden both on the server side and on the client side. In spite of a very similar terminology, these mechanisms (and their results) are totally different.
When you hide a control on the client side, the 'display:none' and/or 'visibility:hidden' CSS styles are assigned to an HTML element. A browser hides the element and its child elements, but the elements exists on the client side.
In case of server-side hiding (Control.Visible = false), the server does not render HTML markup of a hidden control. The control exists only on the server side, and the client side knows nothing about it.
This can cause an issue in a complex scenario.
Let's imagine the following situation. You have an ASPxPageControl with several TabPages in the ASPxCallbackPanel. Every TabPage contains several editors. The last tab is active and contains the following editors:
An ASPxComboBox with items:
-- Item 1
-- Item 2
ASPxTextBox1_1
ASPxTextBox1_2
ASPxTextBox2_1
ASPxTextBox2_2
All ASPxTextBoxes are initially empty and the required field validation is enabled. Validate them, and you will get error messages.
If a user selects "Item 1", a callback is sent to the server and the ASPxTextBox2_X.Visible property is set to 'false'. So, the ASPxTextBox2_X becomes invisible, and the ASPxTextBox1_X is visible. A similar scenario takes place if "Item 2" is selected.
When several controls are hidden on the server side, their markup is not rendered, and a client-side JavaScript object is not updated after a postback. Nevertheless, the controls' JavaScript objects still exist. If a user validates all visible editors, these controls will still be invalid since their HTML 'input' elements do not exist, but the ASPxClientEditor.value property is empty.
See the the 'Issue.aspx' page in the How to solve validation issues related to invisible editors example.
Answer:
A solution (as validation before) includes two (client-side and server-side) parts.
To hide an editor on the server side during a callback, use the ASPxEditBase.ClientVisible property as demonstrated below:
C#int comboBoxValue = Convert.ToInt32(ASPxComboBox1.Value);
ASPxTextBox1_1.ClientVisible = comboBoxValue != 2;
ASPxTextBox1_2.ClientVisible = comboBoxValue != 2;
ASPxTextBox2_1.ClientVisible = comboBoxValue != 1;
ASPxTextBox2_2.ClientVisible = comboBoxValue != 1;
(a code snippet demonstrates a particular solution for the attached example, but you can use a similar scenario in any application.)
The client-side part:
To solve the issue on the client side, enable custom validation (ValidationSettings.EnableCustomValidation), handle the client-side ASPxClientEdit.Validation event, and check if an editor is visible. If so, do not change the e.isValid property. However, if the editor is invisible, set the e.isValid property equal to true:
ASPx<dx:ASPxTextBox ID="ASPxTextBox1_1" runat="server" Width="170px" NullText="Editor 1" OnValidation="ASPxTextBox_Validation"> <ValidationSettings ValidationGroup="submit"> <RequiredField ErrorText="text1 is required" IsRequired="true" /> </ValidationSettings> <ClientSideEvents Validation="Validation" /> </dx:ASPxTextBox>
JavaScriptfunction Validation(s, e) {
if (!s.GetVisible()) {
e.isValid = true;
}
}
This makes all invisible editor values valid on the client side and can be considered as if their client-side validation is skipped.
The server-side part:
Handle the server-side ASPxEdit.Validation event of any ASPxTextBox and check the control's visibility in its handler:
C#protected void ASPxTextBox_Validation(object sender, DevExpress.Web.ASPxEditors.ValidationEventArgs e) {
ASPxTextBox tb = sender as ASPxTextBox;
if(!tb.ClientVisible){
e.IsValid = true;
}
}
Please note that this solution makes sense only if all the following conditions are true:
- editor validation is enabled;
- editor can be hidden on the server side via a callback (or an async postback);
- in your scenario, you also need to validate other editors that are not hidden directly, but can be invisible if their container is invisible (i.e. if they are placed on an inactive tab);
If one of these conditions is false, you can skip this solution and use a more simple (default) approach.
See the 'Solution.aspx' page in the How to solve validation issues related to invisible editors example.