EmptyMessage, AllowCustomText and RadComboBox Validation (Request) in UI for ASP.NET AJAX ComboBox

Laird Rixford

5 posts

Member since:
Aug 2005

Posted 18 Feb 2010 Link to this post

When attempting to validate input in a RadComboBox you should be able to display the EmpyText property without setting AllowCustomText to true.

The control should allow the placing of "Select a Following..." in the EmptyMessage
The AutoCustomText should be able to be set to False
The MarkFirstMatch should be able to be set to True.
A standard .NET validator should be able to validate that nothing is selected (the EmpyMessage is being displayed).

A sample of what ideal code would look like would look something like this:

    
                            Dim drp As New Telerik.Web.UI.RadComboBox  
        
                            drp.ID = input_name  
        
                            drp.Skin = "Vista" 
        
                            drp.Width = Unit.Percentage(75)  
        
                            drp.AllowCustomText = False 
        
                            drp.MarkFirstMatch = True 
        
                            drp.EmptyMessage = "Select State" 
        
                            Dim li As New Telerik.Web.UI.RadComboBoxItem  
        
                            li.ForeColor = Color.DarkGray  
        
                            li.Font.Italic = True 
        
                            li.Text = "Texas" 
        
                            li.Value = "TX" 
        
                            drp.Items.Add(li)

(the code below worked great, BTW)

Thanks, Laird Rixford
Insurance Website Builder

Shinu

17764 posts

Member since:
Mar 2007

Posted 19 Feb 2010 Link to this post

Hi Laird,

One suggestion to achieve the required functionality is by setting the AllowCustomText property to True in order to show the EmptyMessage and prevent typing in textbox by using client code.

Try the following approach and see if it suits your needs.
VB:

    
            Dim drp As New Telerik.Web.UI.RadComboBox() 
        
            drp.ID = "name" 
        
            drp.Skin = "Vista" 
        
            drp.Width = Unit.Percentage(75) 
        
            drp.AllowCustomText = True 
        
            drp.MarkFirstMatch = True 
        
            drp.EmptyMessage = "Select State" 
        
            drp.OnClientLoad = "OnLoad" 
        
            Dim li As New Telerik.Web.UI.RadComboBoxItem() 
        
            li.ForeColor = Color.DarkGray 
        
            li.Font.Italic = True 
        
            li.Text = "Texas" 
        
            li.Value = "TX" 
        
            drp.Items.Add(li) 
        
            Me.form1.Controls.Add(drp) 
        
            Dim rValidator As New RequiredFieldValidator() 
        
            rValidator.ControlToValidate = "name" 
        
            rValidator.ErrorMessage = "Required" 
        
            rValidator.InitialValue = "" 
        
            Me.form1.Controls.Add(rValidator)

JavaScript:

    
            <script type="text/javascript"> 
        
                function OnLoad(sender, args) { 
        
                    var combo = sender; 
        
                    var input = combo.get_inputDomElement(); 
        
                    input.onkeydown = onKeyDownHandler; 
        
                } 
        
                function onKeyDownHandler(e) { 
        
                    if (!e) 
        
                        e = window.event; 
        
                    e.returnValue = false; 
        
                    if (e.preventDefault) { 
        
                        e.preventDefault(); 
        
                    } 
        
                }  
        
            </script>

-Shinu.

Laird Rixford

5 posts

Member since:
Aug 2005

Posted 19 Feb 2010 Link to this post

Understood. This is the "solution" I am using for now, however, it disables the MarkFirstMatch functionality and kills other keys (like tab). I would like to see if future releases could allow this.

Below you can find my implementation that allows tabbing out of the drop down.

                            <script type="text/javascript">         
                     
                    function OnLoad(sender, args) {         
                     
                        var combo = sender;         
                        var input = combo.get_inputDomElement();         
                        input.onkeydown = onKeyDownHandler;         
                    }         
                             
                    function onKeyDownHandler(e) {         
                        if (!e)         
                            e = window.event;         
                            // handle all keys except tab (keycode 9) other keys can be captured         
                            if (e.keyCode != '9') {         
                                e.returnValue = false;         
                                if (e.preventDefault) {         
                                e.preventDefault();         
                                }         
                            }         
                    }           
                     
                    </script>         

Simon

Admin

2281 posts

Posted 19 Feb 2010 Link to this post

Hi Laird Rixford,

We have this feature logged and will consider implementing it for the upcoming Q1 release.

Best wishes,
Simon
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.

Joel Reinford

32 posts

Member since:
Sep 2004

Posted 10 Mar 2010 Link to this post

I hope this is in Q1 because this is a big miss for me. The point of using RadControls is to make it easier, not to write a bunch of script for validation.

Simon

Admin

2281 posts

Posted 11 Mar 2010 Link to this post

Hi Joel Reinford,

The feature did not make it for the Q1 2010 release and we planned it for the next Service Pack, so please stay tuned.

Sincerely yours,
Simon
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.

Michael Pullella

16 posts

Member since:
Jul 2010

Posted 28 Jul 2010 Link to this post

Hi..

Did the "fix" for this make it into the Q2 release? I looked at the release notes and it doesn't seem to indicate that it did.

Simon

Admin

2281 posts

Posted 29 Jul 2010 Link to this post

Hello Michael Pullella,

No. We decided that if we want to fix this, we would want to redesign the 'Empty Message' to exist as a separate element, so we left the task for this Q in order to carefully test the feature before integrating it into the official release.

Please bear with us until we have some concrete and solid results.

Best wishes,
Simon
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

Justyn

13 posts

Member since:
Sep 2010

Posted 29 Mar 2011 Link to this post

How about Q1 2011 release?

Nevermind - found it in PITS - its pushed back again untill Q2.....

Karthik

1 posts

Member since:
Mar 2011

Posted 08 Apr 2011 Link to this post

Hi Guys,

I had the same problem with the RadComboBox not showing the EmptyMessage when the AllowCustomText is set to False. I was not satisfied with the solution that was given in this forum which kind of disables the user from typing any value in the combobox (MarkFirstMatch does not work). So, I tried this solution and it seems to work for me.

The aspx code looks like this

<telerik:RadComboBox ID="RadComboBox1" runat="server" MarkFirstMatch="True" AllowCustomText="false"



OnClientLoad="OnLoad" AppendDataBoundItems="true" OnClientDropDownOpening="OnClientDropDownOpening"

OnClientBlur="OnClientBlur">

<Items

<telerik:RadComboBoxItem runat="server" Text="Pick" />

telerik:RadComboBoxItem runat="server" Selected="false" Text="Mr" Value="Mr"

/>

<telerik:RadComboBoxItem runat="server" Selected="false" Text="Ms" Value="Ms"

/>

<telerik:RadComboBoxItem runat="server" Selected="false" Text="Mrs" Value="Mrs"

/>

<telerik:RadComboBoxItem runat="server" Selected="false" Text="Miss" Value="Miss" />

</

Items

</telerik:RadComboBox>

The RadComboBox will have the first item as the EmptyMessage Text (In this case it will be "Pick"). This empty message text item will not show on the list of items to pick from the combo box, since it is made hidden on the OnClientDropDownOpening javascript event. If no element is picked from the combo dropdown, then the empty message text item will again show up on the combobox using the OnClientBlur event. The "rcbEmptyMessage" class will give the empty message text item the kind of inline data feel to the combobox (rcbEmptyMessage is the class used by Telerik to show empty message text)

For instances where you need to bind the RadComboBox with a datasource, you can add the first element to combobox in the server side OnDataBound event like this

protected void RadComboBox1_DataBound(object sender, EventArgs e) 
{ 
    var combo = (RadComboBox)sender; 
    combo.Items.Insert(0, new RadComboBoxItem("Pick", string.Empty)); 
}

The javascript needed to do this

function

OnLoad(sender, args) {

var

combo = sender;

var

input = combo.get_inputDomElement();

     input.className +=

" rcbEmptyMessage"

;

}



function

OnClientDropDownOpening(sender, eventArgs) {

var

combo = sender;

var comboItem = combo.findItemByText('Pick'

);

if

(comboItem) {

         comboItem.set_visible(

false

);

     } 

}

function

OnClientBlur(sender, eventArgs) {

var

combo = sender;

if (combo.get_text() == ''

) {

	 var item = combo.findItemByText('Pick');

	 if (item) {

		 item.set_visible(true);

                 item.select();

                 var input = combo.get_inputDomElement();

                 input.className += " rcbEmptyMessage";

         }

    }

}

Vijay

12 posts

Member since:
Oct 2010

Posted 04 Aug 2011 Link to this post

Hi Folks,

Code Given by Karthik Works Fine ..we can use it as an option until the until the Telerik Quarter 2 Release Which Contains Radcombox with inbuilt checkbox option.

Thanks,
Vijay.

Santosh

4 posts

Member since:
Feb 2013

Posted 07 Feb 2013 Link to this post

Actually i am using this javascript function . my work has been done successfully.thank for that.
but i am facing one more issue my tabindexing is not working properly.
please give me suggesation or code as soon as possible.

Santosh

4 posts

Member since:
Feb 2013

Posted 07 Feb 2013 Link to this post

lots of thanks

Santosh

4 posts

Member since:
Feb 2013

Posted 07 Feb 2013 Link to this post

but it is not working in IE 9.
Give me suggesation as soon as possible.its works on chrome as well as mozila.

Santosh

4 posts

Member since:
Feb 2013

Posted 07 Feb 2013 Link to this post

not working on IE -9

Cat Cheshire

128 posts

Member since:
Jun 2010

Posted 07 Feb 2013 Link to this post

You should paste here the code of your implementation using the "Format Code Block" tool, and explain what you mean by "my tabindexing is not working properly".