RadComboBox Custom Validation

[jfkrueger]

Hi there,

I'm trying to use a custom validator to validate a RadComboBox (to ensure the first item is not selected). I have followed an example on the ASP.NET controls that basically said to do this:

function validateGroup(events, args) {

    var combo = <%=RadComboBoxGroupListing.ClientID%>;

    if(combo.GetText() == combo.Items(0).Text)
    {
        args.IsValid = true;
    }
    else
    {
        args.IsValid = false;
    }

}

However it seems as if the GetText method is not defined anymore. From my reading on the AJAX controls it says it is now get_text, but that doesn't work either.

How can I use a custom validator with client-side validation to ensure that the first item of a RadComboBox is not selected?

Thanks!

[Princy]

Hello Joe,

Try using $find() method for obtaining the client-side object of RadComboBox and then use get_text() method for getting the selected text of RadComboBox. I have tried following code for achieving the scenario. Give a try with this.

[ASPX]

<telerik:radcombobox id="RadComboBoxGroupListing" runat="server">
<Items>
<telerik:RadComboBoxItem runat="server" Text="RadComboBoxItem1" Value="RadComboBoxItem1"></telerik:RadComboBoxItem>
<telerik:RadComboBoxItem runat="server" Text="RadComboBoxItem2" Value="RadComboBoxItem2"></telerik:RadComboBoxItem>
  . . .
</Items>
</telerik:radcombobox>

<asp:CustomValidator ID="CustomValidator1" runat="server" ErrorMessage="Cannot select first item" ClientValidationFunction="validateGroup" ControlToValidate="RadComboBoxGroupListing"></asp:CustomValidator>

[JavaScript]

<script type="text/javascript">
function validateGroup(events, args)
{
    var combo = $find("<%=RadComboBoxGroupListing.ClientID%>");
   items = combo.get_items();
    if(combo.get_text() == items.getItem(0).get_text())
    {
        args.IsValid = false;
    }
    else
    {
        args.IsValid = true;
    }
}
</script>

Thanks,
Princy.

[Berlioz]

i'm trying this out and there seems to be no get_items() method. it doesn't seem to have a get_items() method either. what could I be doing wrong? I have a customvalidator associated to the RADCOMBOBOX and a asp:button that submits the form...Please help!!!

[Berlioz]

My bad... I was tyring to place the script code in the head block of the MasterPage....that was problematic. Instead, I placed the script code in the a asp:Content ID="HeadContent" and then it wasn't having to require a fully qualified path to the control, due to INamingContainer....hitting F11 in IE and inspecting the DOM, those methods that I claimed weren't there ARE there for anyone to inspect and view. Nevermind..

[Berlioz]

When I hit my asp:Button to submit the form, why isn't my clientsidevalidation function being raised??? That is where I am invalidating the FORM if the RADCOMBOBOX hasn't been set to an item with an index other than -1(i believe that is right) or had some free text typed into it...Please help...

[Ivana]

Hello Daniel,

The client validation function of the CustomValidator should be executed before a post-back to the server is made; in fact it determines whether a post-back will occur or it will be canceled.
 
To make sure that the user is typing text in the Combo, which corresponds to some item's text, you could add the following check:

function validateGroup(events, args)
{
    var combo = $find("<%=RadComboBoxGroupListing.ClientID%>");
    items = combo.get_items();
    var comboText = combo.get_text();
    if (comboText == items.getItem(0).get_text() || combo.findItemByText(comboText) == null)
    {
        args.IsValid = false;
    }
    else
    {
        args.IsValid = true;
    }
}

I hope this is helpful.

Greetings,
Ivana
the Telerik team

[Berlioz]

Thank you for your response. One simple question. In a LoadOnDemand scenario, how do you detect that the user has entered a value freehand(TYPE-ING) versus SELECTING it from the LIST? Obviously, I am asking because I have to take that value and submit it to a rigorous REGEX pattern for conformity. I tried using the FindItemByText(radCbox.Text) in the TextChanged event, BUT, it returns null because the "ItemsList" is empty, because I am implementing LoadOnDemand, there is no "ItemsCollectionList". Is this correct?

Thank you!

[Ivana]

Hi Daniel,

The items collection of the RadComboBox when LoadOnDemand mechanism is enabled, is empty when you are trying to access it on the server. More about the items being not accessible when LoadOnDemand is enabled, could be found at: RadComboBox' items are not accessible on the server when loading them on demand.

However, the items currently loaded in the RadComboBox could be accessed at the client,  using JavaScript / jQuery. A  list of all the client-side methods and properties of the client object of the RadComboBox is available at: RadComboBox: Client-side API.

For you scenario, you could either transfer information about the text typed in the input field using the OnClientItemsRequesting client-side event (transferring the information with the requestItem method), or  using the AjaxRequest, server-side event of RadAjaxManager.

Here is an example of an AjaxRequest scenario:

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" OnAjaxRequest="RadAjaxManager1_OnAjaxRequest">
<AjaxSettings>
    <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
    <UpdatedControls>
        <telerik:AjaxUpdatedControl ControlID="RadComboBox1"/>
    </UpdatedControls>
    </telerik:AjaxSetting>
</AjaxSettings>

<telerik:RadComboBox runat="server" AllowCustomText="true" ID="RadComboBox1" EnableLoadOnDemand="true"
    OnItemsRequested="RadComboBox1_ItemsRequested" Width="300px" Height="120px" >
</telerik:RadComboBox>
<input id="Button1" type="button" value="button" OnClick="clientClicking()"/>

function clientClicking()
{
    var ajaxManager = $find('<%=RadAjaxManager1.ClientID %>');
    var combo = $find('<%=RadComboBox1.ClientID %>');
    var comboText = combo.get_text();
    if (combo.findItemByText(comboText))
    {
        ajaxManager.ajaxRequest("item text");
    } else
    {
        ajaxManager.ajaxRequest("free text");
    }
}

protected void RadAjaxManager1_OnAjaxRequest(object sender, AjaxRequestEventArgs e)
{
    var onAjaxRequestText = e.Argument;
}

protected void RadComboBox1_ItemsRequested(object sender, RadComboBoxItemsRequestedEventArgs e)
{
    //Here is where populate the RadComboBox
}

The AjaxRequest is sent to the server upon a button click.

I hope this helps.

Greetings,
Ivana
the Telerik team