Rad Combo box EmptyText for invalid text entered

[jeevitha]

Hi,

I have rad combobox with search functionality implemented. I have selected index change event for that combobox, this is my  code . I applied filter starts with

 

<telerik:RadComboBox ID="dropDownListCategory" MarkFirstMatch="True" EmptyMessage="<--select One-->" 

 

 

AllowCustomText="false" runat="server" Width="200px" Height="200px" CssClass="maarginleft10 textBox200"  

 

 

Skin="Web20" AutoPostBack="true" EnableEmbeddedSkins="false" OnSelectedIndexChanged="dropDownListCategory_SelectedIndexChanged" 

 

 

EnableEmbeddedScripts="true" > 

 

 

</telerik:RadComboBox>

When i type nothing in the combobox the empty message displayed correctly. at the same time i need to validate one  more thing. If i enter the text which is not at all exists there in the dropdown then i need to show the same empty message in tabout. but the postback occurs and taking the invalid text to the server.  I used onblur event but it throws error

 

function OnClientBlur(item) {
//i need the following here

 

if(item.value=="")
// empty message of the combo shd be set if the invalid text typed
// EmptyMessage="<--select One-->" 

 

 

}

how to achieve this. pls help

 

 

Thanks,
Jeevitha

[Princy]

Hello,

Try setting EmptyMessage explicitly from client-side after clearing the combobox text, by using set_emptyMessage() method.

JavaScript:

        var combo = $find('<%= RadComboBox1.ClientID %>');
        combo.clearSelection();
        combo.set_emptyMessage("Select an item");

Also go through the following link: Set RadComboBox to empty clientside

Regards,
Princy.

[jeevitha]

Hi Princy,
Thanks for your reply. but if i type the invalid text i should first get the selected value. if it is empty , then should set the EmptyMessage
like
if(combo.item.selectedValue =="")
{
combo.clearSelection();       
   combo.set_emptyMessage("Select an item");
}

pls give me the correct syntax.

thanks,
Jeevitha

[Kalina]

Hi jeevitha,

Let me suggest you handle OnClientBlur event and check if there is a RadComboBoxItem whose Text property equals to the text entered at RadComboBox input:

<telerik:RadComboBox ID="RadComboBox2" runat="server"
    EmptyMessage="<-- select one -->"
    OnItemsRequested="RadComboBox2_OnItemsRequested"
    EnableLoadOnDemand="true" AllowCustomText="true"
    OnClientBlur="OnClientBlurHandler">
</telerik:RadComboBox>

function OnClientBlurHandler(sender, eventArgs)
{
    var item = sender.findItemByText(sender.get_text());
    if(!item)
    {
        sender.clearSelection();
    }
}

</script>

Please find more details about RadComboBox client-side API at this help article.

All the best,
Kalina
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[jeevitha]

Hi,
thanks for your reply.I have another problem now i have the follog code

 <telerik:RadComboBox ID="dropDownListCategory" MarkFirstMatch="True" EmptyMessage="<--select One-->"  AllowCustomText="true"
                             runat="server" Width="200px" Height="200px" CssClass="maarginleft10 textBox200"
                            Skin="Web20" AutoPostBack="true" OnClientBlur="OnClientBlurHandler" EnableAjaxSkinRendering="false"  EnableEmbeddedSkins="false"
                            OnSelectedIndexChanged="dropDownListCategory_SelectedIndexChanged" EnableEmbeddedScripts="true">
                        </telerik:RadComboBox>

my script function

 function OnClientBlurHandler(sender, eventArgs) {
                var item = sender.findItemByText(sender.get_text());
                if (!item) {
                    sender.clearSelection();
                    return false;
                }
            }

i have a problem like when i click the dropdown and without selecting any value if i click outside somewhere on the page or tab out from the page i loading panel comes. but actually the page not posting back to the server. i dono which is causing this problem. i have wrapped the controls in ajax loading panel. If i remove autopostback then its working fine. I am attaching the sample here. Even though after giving return false in blur event its still happening, Pls help me

Thanks,
Jeevitha

[Kalina]

Hello jeevitha,

We need to inspect the full code of your implementation - could you please paste it here using the "Format Code Block" tool?
Thank you in advance.

Regards,
Kalina
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[jeevitha]

<telerik:RadComboBox ID="dropDownListCategory" MarkFirstMatch="True" EmptyMessage="<--Select One-->"  AllowCustomText="true"
                             runat="server" Width="200px" Height="200px" CssClass="maarginleft10 textBox200"
                            Skin="Web20"   OnClientBlur="OnClientBlurHandler" AutoPostBack="true" EnableAjaxSkinRendering="false"  EnableEmbeddedSkins="false"
                            OnSelectedIndexChanged="dropDownListCategory_SelectedIndexChanged" EnableEmbeddedScripts="true">
                        </telerik:RadComboBox>

function OnClientBlurHandler(sender, eventArgs) {
                var item = sender.findItemByText(sender.get_text());
                if (!item) {
                    sender.clearSelection();
                    }
               }

i have a problem like when i click the dropdown and without selecting any value if i click outside somewhere on the page or tab out from the page i loading panel comes. but actually the page not posting back to the server. i dono which is causing this problem. i have wrapped the controls in ajax loading panel. If i remove autopostback then its working fine. I am attaching the sample here. Even though after giving return false in blur event its still happening, Pls help me

[Kalina]

Hi jeevitha,

I am afraid that the code snippets provided give only partial notion of your implementation – I tried to use them to reproduce the issue but unfortunately without success.

On my side when I tab out of the RadComboBox input without selecting an item, control does not cause postback and there is no loading panel visible.
Maybe I miss something?

I am sending to you the sample page that I used – could you please change the code in order to reproduce the issue and paste it here?

The "Format Code Block" tool will format the code properly no matter how long is it and I will be able to inspect it.

Thank you in advance.

Greetings,
Kalina
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[merikmgrasp]

I think I have a better solution for this problem as I just worked through it myself.

Working from the demo http://demos.telerik.com/aspnet-ajax/combobox/examples/programming/clientevents/defaultcs.aspx that does LoadOnDemand for searching large lists of items and using the client side events.

My situation was similar to the original author of this post.

1. Using the search functionality, I want the user to be able to find items in the list.
2. If the item IS NOT found in the list, I don't want the text saved in the dropdown and eventually posted back, I want an error thrown that the user needs to find a valid item in the list.
3. I am using a classic RequiredFieldValidator control on the RadComboBox control to validate if they chose a valid item in the dropdown.

<telerik:RadComboBox ID="comboLeadSources" Runat="server" Height="200px"
                        Width="300px" EmptyMessage="Select Lead..." EnableLoadOnDemand="True"
                        onitemsrequested="comboLeadSources_ItemsRequested"
                        ShowMoreResultsBox="True" onclientdropdownclosed="onDropDownClosed">
                    </telerik:RadComboBox>
                    <asp:RequiredFieldValidator ID="rfvLeadSources" runat="server"
                        ControlToValidate="comboLeadSources" ErrorMessage="RequiredFieldValidator"
                        Font-Bold="True" Font-Size="Large" ForeColor="Red">*</asp:RequiredFieldValidator>

I use the "OnClientDropdownClosed" client side event to check the value of the RadComboBox and see if its some arbitrary text that does not match any items in the list (I can tell this because the Value property of the RadComboBox.SelectedItem will be empty string). If its an empty string, I just clear out the RadComboBox's selected item:

<script type="text/javascript">
        function onDropDownClosed(combo, eventArgs) {
            var val = combo.get_value();
            if (val == "") {
                combo.clearSelection();
                combo.commitChanges();
            }
            //alert('test');
        }
</script>

SInce I clear out the selection, the "EmptyMessage" property will show and my required field validator will see that theres no value selected and so it will prompt the user to fix it.

I left the alert(); in there so you could test to make sure your client side JS event is actually firing correctly.

Hope this helps others.

Chris

[David McClelland]

Thanks merikmgrasp!  Using OnClientDropDownClosed worked great for me, and I will spread the word to a couple other forum threads.