I have a dropdownlist with autopostback enabled and a RequiredFieldValidator. I would like that when the User selects a color, through a label, the HTML color code appears next to it and when the User pick "Select" the word "Required" appears.
Here is the code:
<dx:LayoutItem ColSpan="1" FieldName="Color">
<LayoutItemNestedControlCollection>
<dx:LayoutItemNestedControlContainer runat="server"
<div style="display: flex; column-gap: 10px;">
<dx:LayoutItemNestedControlContainer runat="server">
<asp:DropDownList ID="cboColor" runat="server" Width="90px" AutoPostBack="True">
<asp:ListItem>Select</asp:ListItem>
<asp:ListItem>Black</asp:ListItem>
<asp:ListItem>Yellow</asp:ListItem>
<asp:ListItem>Red</asp:ListItem>
<asp:ListItem>Blue</asp:ListItem>
</asp:DropDownList>
</dx:LayoutItemNestedControlContainer>
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" ErrorMessage="Required" ControlToValidate="cboColor" InitialValue="Select" runat="server" ForeColor="Red" Font-Bold="true" Display="Dynamic" />
<dx:ASPxLabel ID="lblCompleteColor" runat="server" Text="" Font-Bold="true"></dx:ASPxLabel>
</div>
</dx:LayoutItemNestedControlContainer>
</LayoutItemNestedControlCollection>
</dx:LayoutItem>
and code behide:
Protected Sub cboColor_SelectedIndexChanged(sender As Object, e As EventArgs) Handles cboColor.SelectedIndexChanged
lblCompleteColor.Text = GetCodeColor(cboColor.SelectedValue)
End Sub
Private Function GetCodeColor(ByVal sCodeColor As String) As String
Dim sResult As String = ""
Dim conSQL As New System.Data.SqlClient.SqlConnection(ConfigurationManager.ConnectionStrings("ETConnectionString").ConnectionString)
Dim cmdSQL As New System.Data.SqlClient.SqlCommand("SELECT CodiceColore FROM COLORI WHERE NomeColore='" & sCodeColor & "'", conSQL)
Try
conSQL.Open()
sResult = cmdSQL.ExecuteScalar()
Catch ex As Exception
sResult = ""
Finally
conSQL.Close()
End Try
Return sResult
End Function
The problem is that the word "Required" disappears quickly when selected. Instead If I add to the DropDownList the CausesValidation property, the word "Required" remains but with the previously selected color next to it.
<asp:DropDownList ID="cboColor" runat="server" Width="90px" AutoPostBack="True" CausesValidation="true">
...
</asp:DropDownList>
Any solutions?
The CausesValidation="True" should be there in order of validator to work correctly.
The cause of problem is that the validator checks on the client-side before the post-back, so the text of label still is the assigned value from last post-back.
You need to clear the label text on the client-side before post-back:
1- Add the ClientIDMode="Static" attribute to the label to ensure the client-side ID is same as ID="lblCompleteColor":
<dx:ASPxLabel ID="lblCompleteColor" runat="server"
ClientIDMode="Static"
Text=""
Font-Bold="true">
</dx:ASPxLabel>
2- Add an onchane attribute to the dropdown list with a value of a function to clear the label text:
<asp:DropDownList ID="cboColor" runat="server"
Width="90px"
AutoPostBack="True"
CausesValidation="True"
onchange="document.getElementById('lblCompleteColor').innerText='';">
...
...
</asp:DropDownList>