Validate user input in RadCombobox with AllowCustomText="True" Filter="Contains"

[Vladimir Gosic]

Hello,

I have a requirement to have RadComboBox that has AllowCustomText="True" Filter="Contains" but I would like to disable the user to enter some value that is not in the combo box list. Also is the RequiredFieldValidator the right control to use, when validating empty combo box text value.

Thank you in advance,
Vladimir

[Kalina]

Hi Vladimir Gosic,

Regarding the issue that you describe I can suggest you to use a  CustomValidator control to validate the text that user types at RadComboBox input,  and a RequiredFieldValidator to validate if the input is empty.

<telerik:RadComboBox Width="250px" ID="RadComboBox1"
    runat="server" AllowCustomText="true"
    Filter="Contains">
    <Items>
        <telerik:RadComboBoxItem Text="John Smith" Value="1" />
        <telerik:RadComboBoxItem Text="Mary Pickford" Value="2" />
        <telerik:RadComboBoxItem Text="Steven King" Value="3" />
    </Items>
</telerik:RadComboBox>
 <asp:Button ID="btnValidate" runat="server" Text="Submit"
    CausesValidation="true" />
 <br />
<asp:CustomValidator ID="CustomValidator1" runat="server"
    ControlToValidate="RadComboBox1"
    ClientValidationFunction="validateCombo"
    ErrorMessage="You can submit only existing name">
</asp:CustomValidator>
<br />
<asp:RequiredFieldValidator ID="RequiredFieldValidator1"
    runat="server" ControlToValidate="RadComboBox1"
    Text="Please select or enter name">
</asp:RequiredFieldValidator>

<script type="text/javascript">
    function validateCombo(source, args) {

        args.IsValid = false;
        var combo = $find("<%= RadComboBox1.ClientID %>");
        var text = combo.get_text();
        if (text.length < 1) {
            args.IsValid = false;

        }
        else {
            var node = combo.findItemByText(text);
            if (node) {
                args.IsValid = true;
            }
            else {
                args.IsValid = false;
            }
        }
    }
</script>

Feel free to contact us if you need additional assistance.

All the best,
Kalina
the Telerik team

[Vladimir Gosic]

Hello Kalina,

Thank you for your answer. Your code perfectly covers validation that I needed. But I would need to extend it not to contain the ClientId of one specific ComboBox in JavaScript code, so that I could use it in validating Input in my GridTemplateColumn that has ComboBox in it. I know I could set the ClientId of the Combo when item enters edit mode and then add the Script to the Page, but I have a grid that has all Items on the current page editable, because my GridTemplateColumn.ItemTemplate renders the ComboBoxes and other column controls editable, and I am handling updating the values entered to the Data layer. So my question is: Is there a way to get the instance of the ComboBox that resides in the same GridCell as the CustomValidator by using the sender event argumet of the validateCombo function?

Regards,
Vladimir

[Kalina]

Hi Vladimir Gosic,

Please excuse me for the delayed reply.

You can retrieve the RadComboBox ClientID from the source parameter of the client-side validation function:

<script type="text/javascript">
    function validateCombo(source, args) {
        args.IsValid = false;

        var combo = $find(source.controltovalidate);
        var text = combo.get_text();

        if (text.length < 1 ) {
            args.IsValid = false;

        }
        else {
            var node = combo.findItemByText(text);
            if (node) {
                args.IsValid = true;
            }
            else {
                args.IsValid = false;
            }
        }
    }
</script>

<EditFormSettings EditFormType="Template">
    <FormTemplate>
        <telerik:RadComboBox ID="RadComboBox1"
            runat="server" Height="70px"
            DataTextField="CategoryName" ItemsPerRequest="5"
            AllowCustomText="true"
            ShowMoreResultsBox="true" DataValueField="CategoryID"
            DataSourceID="SqlDataSource2">
        </telerik:RadComboBox>
        <asp:RequiredFieldValidator ID="RequiredFieldValidator1"
            runat="server" ControlToValidate="RadComboBox1"
            Text="*"></asp:RequiredFieldValidator>
        <asp:CustomValidator  ID="CustomValidator1"
            runat="server"
            ControlToValidate="RadComboBox1"
            ClientValidationFunction="validateCombo"
            ErrorMessage="You can submit only existing name">
        </asp:CustomValidator>

I hope this helps.

Regards,
Kalina
the Telerik team