dropdown only responds to mouse click where there is text

[Kieran]

Hi

A combo box dropdown has a set width. In most cases the text is less to then the full width of the dropdown. However the items in the dropdown only respond to mouse clicks (ie to be selected) when the mouse is clicked on text. If the mouse is clicked somewhere on the dropdown that doesn't contain text the click is not picked up

Any ideas?
Thanks

[Paul]

Hi Kieran,

We tried to reproduce the reported issue using the code below, but to no avail. Let us know what's different in your case.

<telerik:RadComboBox ID="RadComboBox1" runat="server" DropDownWidth="450px">
       <Items>
           <telerik:RadComboBoxItem runat="server" Text="RadComboBoxItem1" Value="RadComboBoxItem1" />
           <telerik:RadComboBoxItem runat="server" Text="RadComboBoxItem2" Value="RadComboBoxItem2" />
           <telerik:RadComboBoxItem runat="server" Text="RadComboBoxItem3" Value="RadComboBoxItem3" />
           <telerik:RadComboBoxItem runat="server" Text="RadComboBoxItem4" Value="RadComboBoxItem4" />
           <telerik:RadComboBoxItem runat="server" Text="RadComboBoxItem5" Value="RadComboBoxItem5" />
           <telerik:RadComboBoxItem runat="server" Text="RadComboBoxItem6" Value="RadComboBoxItem6" />
       </Items>
   </telerik:RadComboBox>

Kind regards,
Paul
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Attila Gál]

Hi,

I have the same issue!
The strange, that some of my combos are working well, some of them are not, BUT they are instantiated and populated in the same way!
Now I'm trying to make the simplest reproduction of the issue, Paul's snippet is working well for me.

[Kieran]

Hi

The combo boxes are populated using a form of the following code. This demonstrates quite clearly the problem as once mouse isn't over text there is no response from the combo box. the sample you supplied works fine

Hope this is of some assistance

function AddNewItem(combo, id, text) {
    var comboItem = new Telerik.Web.UI.RadComboBoxItem();
    comboItem.set_text(Text);
    comboItem.set_value(id);
    combo.trackChanges();
    combo.get_items().add(comboItem);
    combo.commitChanges();
}
function SetItems() {
    var combo = $find("RadComboBox1");
    var st = "Code";
    AddNewItem(combo, "1", "");
    for (var i = 0; i < 20; i++) {
        st = st + i + "Code";
        AddNewItem(combo, i, st);
    }
}

[Kieran]

Hi Folks

Any update on this?

[Simon]

Hello Kieran,

This happens because the text of the Items is one long word.

Please consider breaking it into smaller words with space between them to allow the browser to automatically wrap the text.

Sincerely yours,
Simon
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Adam Lindsay]

I am having this same issue.  The text of my combo box has spaces and is not continuous text.  I am populating the combo box with the following code:

cbxDefaultSiteId.DataSource = siteList;

cbxDefaultSiteId.DataTextField =

"Description";

 

cbxDefaultSiteId.DataValueField =

"SiteNumber";

 

cbxDefaultSiteId.DataBind();

siteList contains a list of objects where SiteNumber is a string similar to "001" and Description is "001-Test Site"

Thoughts?

[Simon]

Hi Adam Lindsay,

Are you referring to the same issue? Could you please provide a screenshot showing the issue?

Best wishes,
Simon
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Kieran]

Hi

Back again to this issue.
I have expanded the javascript function as below

function AddNewItem(combo, id, text) {
    var comboItem = new Telerik.Web.UI.RadComboBoxItem();
    comboItem.set_text(Text);
    comboItem.set_value(id);
    combo.trackChanges();
    combo.get_items().add(comboItem);
    combo.commitChanges();
}
function SetItems() {
    var combo = $find("RadComboBox1");
    var st = "Code";
    AddNewItem(combo, "1", "");
    AddNewItem(combo, "a", "London Tower");
    AddNewItem(combo, "b", "London Tower is");
   AddNewItem(combo, "c", "London Tower is falling down");
   AddNewItem(combo, "d", "London Tower is");


AddNewItem(combo, "1", "");
     for (var i = 0; i < 20; i++) {
        st = st + i + "Code";
        AddNewItem(combo, i, st);
    }
} 

This example can be set up by adding a radcombobox to a web page and calling the function follows
<body onload="SetItems()">. Set the combo box width to 500 to really see this effect.

Once this is done run the page and drop down the combo box. You will notice that there is not response in the combo box unless the mouse is actually over a bit of the word or sentence. If the text is not as long as the box is wide there is white space there that does not respond to the mouse - ie the current hovered over rowm is not highlighted until the mouse goes over the text. This also makes it impossibe to select the first blank entry row.

If you actually try this this should become obvious immediately

Any ideas?

Kieran

[Simon]

Hello Kieran,

Thank you for the clarifications.

This has been an issue with the Skins for some time and we fixed it in recent versions of Telerik.Web.UI. Please download the latest and upgrade.

Regards,
Simon
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Techmonster13]

Hi There,

We are having similar issue at our end. Even after upgrading to latest Skin, unless we click on the actual text in the dropdown, the option is not selected. Although the mouse over colour change is visible on the text as well as on the whitespace, clicking on the whitespace collapses the combobox and shows the selected text (confusing users to be selected) but when you expand the combobox the option is not selected (checked).

Refer the attached screenshots where a value although appears selected is not actually selected.

Thank you in advance...

[Dimitar Terziev]

Hi,

Could you open a support ticket and provide a sample reproducing the issue so we could verify whether the bug mentioned earlier in this thread still exists or the experienced problem is caused by a new one?

Regards,
Dimitar Terziev
the Telerik team