Rad Combo box EmptyText for invalid text entered

10 posts, 0 answers
  1. jeevitha
    jeevitha avatar
    63 posts
    Member since:
    Sep 2008

    Posted 29 Apr 2010 Link to this post

    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

  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 30 Apr 2010 Link to this post

    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.
  3. jeevitha
    jeevitha avatar
    63 posts
    Member since:
    Sep 2008

    Posted 03 May 2010 Link to this post

    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

  4. Kalina
    Admin
    Kalina avatar
    918 posts

    Posted 03 May 2010 Link to this post

    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.
  5. jeevitha
    jeevitha avatar
    63 posts
    Member since:
    Sep 2008

    Posted 05 May 2010 Link to this post

    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

  6. Kalina
    Admin
    Kalina avatar
    918 posts

    Posted 10 May 2010 Link to this post

    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.
  7. jeevitha
    jeevitha avatar
    63 posts
    Member since:
    Sep 2008

    Posted 10 May 2010 Link to this post

    <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
  8. Kalina
    Admin
    Kalina avatar
    918 posts

    Posted 13 May 2010 Link to this post

    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.
  9. merikmgrasp
    merikmgrasp avatar
    4 posts
    Member since:
    May 2007

    Posted 26 Aug 2010 Link to this post

    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

  10. David McClelland
    David McClelland avatar
    9 posts
    Member since:
    Oct 2012

    Posted 15 Oct 2012 Link to this post

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