In Lightweight rendering mode, the drop-down arrow has cursor type 'text' instead of 'default' in Internet Explorer (11). Example: http://demos.telerik.com/aspnet-ajax/combobox/examples/functionality/rendermode/defaultcs.aspx?skin=Default
In ComboBox If somehow focus is moved to dropdown element (e.g. when user clicks on a header, or on load more items button) then arrow keys and keyboard support won't work anymore. It can be fixed by simply setting dropdown tabindex to say 1 and attaching ComboBox's own _onKeyDown handler to dropdown keydown too.
For the time being the following CSS workaround can be used: CSS: <style type="text/css"> .RadButton.rbSkinnedButton input { padding-left: 6px; padding-right: 10px; margin: 0; } </style> ASPX: <telerik:RadComboBox ID="RadComboBoxDateTimeFilter" runat="server"> <ItemTemplate> <telerik:RadButton ID="RadButtonApply" Text="Apply" AutoPostBack="false" runat="server" /> <telerik:RadButton ID="RadButtonClear" Text="Clear" AutoPostBack="false" runat="server" /> </ItemTemplate> <Items> <telerik:RadComboBoxItem Text="" Value="" Selected="true" /> <telerik:RadComboBoxItem Text="" Value="" /> </Items> </telerik:RadComboBox>
When EnableAutomaticLoadOnDemand="true" is set and no Height is specified, the first time RadComboBox is expanded only the topmost 3 or 4 items are visible. The rest of the items become visible when they are hovered or if the ComboBox is expanded again.
Having a RadCombobox on a form and assign a EmptyMessage later containing a diacritical character, the EmptyMessage is treated like it has been entered as a value. So it will make a call to the webservice using that value which it should not do. Code example: protected void TestLinkButton_Click(object sender, EventArgs e) { this.CountryComboBoxControl.EmptyMessage = "Bitte wählen Sie ein Land*"; }
When combo popups to the top of the page it goes out of the browser viewport. Reproduce: A RadComboBox on the bottom of your page and the page height is larger than the viewport. When you scroll down the page to the RadComboBox and open it the itembox (100+ items) height will be higher than the view port. See attachment 'RadComboBox.png' Also the auto shrink doesn’t work in this situation see attachment RadComboBox2.png
Selecting an item from the RadComboBox and then pressing Enter key, does not trigger the default button(if set) of the form/panel in IE and Chrome. The workaround is to handle the client-side OnClientKeyPressing event of the RadComboBox and manually trigger the clicking of the default button.For example: ASPX: <asp:Panel ID="Panel1" runat="server" DefaultButton="RadButton1"> <telerik:RadTextBox ID="RadTextBox1" runat="server"> </telerik:RadTextBox> <asp:Label ID="Label1" Text="" runat="server" /> <telerik:RadButton ID="RadButton1" runat="server" OnClick="OnClick1" Text="Click" /> <telerik:RadComboBox ID="RadComboBox1" runat="server" OnClientKeyPressing="OnClientKeyPressing"> <Items> <telerik:RadComboBoxItem Text="text1" Value="val1" /> <telerik:RadComboBoxItem Text="text2" Value="val2" /> <telerik:RadComboBoxItem Text="text3" Value="val3" /> </Items> </telerik:RadComboBox> </asp:Panel> JavaScript: <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server"> <script type="text/javascript"> function OnClientKeyPressing(sender, args) { if (args.get_domEvent().keyCode == 13) { $find("<%=RadButton1.ClientID %>").click(); } } </script> </telerik:RadCodeBlock>
Using the .get_value() in the OnClientDropDownClosed event of RadComboBox, produces empty value. The OnClientSelectedIndexChanged event works fine, but I need to be able to kick off the javascript even if the selected index doesn't change. My RadComboBox element: <telerik:RadComboBox ID="CustomerSearch" runat="server" Width="180" Height="160" MarkFirstMatch="true" AllowCustomText="true" CssClass="CustomerSearch" AutoPostBack="false" EnableLoadOnDemand="true" EnableVirtualScrolling="true" OnItemsRequested="CustomerSearch_ItemsRequested" OnClientDropDownClosed="searchnav" EmptyMessage="Select a customer" DataSourceID="dsCustomer" DataTextField="CustomerName" DataValueField="NavPath" BackColor="White" Skin="Forest" /> My SQLDataSource element: <asp:SqlDataSource ID="dsCustomer" runat="server" SelectCommand="CustomerSearchName" SelectCommandType="StoredProcedure"> </asp:SqlDataSource> My Javascript: <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server"> <script type="text/javascript"> function searchnav(sender, args) { var iframe = document.getElementById('ctl00_iMainPages'); iframe.src = sender.get_value(); } </script> </telerik:RadScriptBlock>
In the meantime you can use the following css workaround that will fix the issue: .rcbAutoWidthResizer .rcbScroll { overflow: visible !important; } /*To target IE 6, 7 and 8*/ @media \0screen\,screen\9 { .rcbAutoWidthResizer .rcbScroll { overflow: auto !important; } } /*To target IE 9 and 10*/ @media screen and (min-width:0\0) { .rcbAutoWidthResizer .rcbScroll { overflow: auto !important; } }
If we dynamically remove highlighted item from a ComboBox at clientside, afterwards get_highlightedItem still returns that deleted item. ComboBox takes care of deleting selected item at like 497 of RadComboBox.js. Highlighted item should be taken care of too.
Hello, I have a resize problem for Radcombobox .I can't change the height of default textbox of combobox. Could you please help me?
We are using the combo box drop down: <telerik:RadComboBox ID="rcbAccounts" runat="server" Width="360" DropDownWidth="810" OffsetX="-200" DataValueField="AcctNumber" DataTextField="DisplayString" AutoPostBack="True" AllowCustomText="True" Filter="Contains" ExpandDelay="0" CollapseDelay="0" MaxHeight="300" OnClientDropDownOpening="OnRcbAccountsOpening" Skin="CustomTelerikSkin" EnableEmbeddedSkins="false" EnableViewState="false" EnableScreenBoundaryDetection="true" > <HeaderTemplate> <ul> <li class="rcbColumn" style="width: 330px">Name</li> <li class="rcbColumn" style="width: 70px">Acct #</li> <li class="rcbColumn" style="width: 90px">Type</li> <li class="rcbColumn" style="width: 150px">Address</li> <li class="rcbColumn" style="width: 110px">City</li> </ul> </HeaderTemplate> <ItemTemplate> <ul> <li class="rcbColumn" style="width: 330px"> <%#DataBinder.Eval(Container.DataItem, EC.ACCT_NAME).ToString()%></li> <li class="rcbColumn" style="width: 70px"> <%#DataBinder.Eval(Container.DataItem, EC.ACCT_NO).ToString()%></li> <li class="rcbColumn" style="width: 90px"> <%#DataBinder.Eval(Container.DataItem, EC.ACCT_TYPE).ToString()%></li> <li class="rcbColumn" style="width: 150px"> <%#DataBinder.Eval(Container.DataItem, EC.ACCT_ADDR1).ToString()%></li> <li class="rcbColumn" style="width: 110px"> <%#DataBinder.Eval(Container.DataItem, EC.ACCT_CITY).ToString()%></li> </ul> </ItemTemplate> </telerik:RadComboBox> It looks like the attached at runtime. My question is: Can we align the dropdown area to be left-aligned with the control? In some cases, the left part of the data gets cut off by the browser window.
RadComboBox will open up in case that ScreenBoundaryDetection is enabled and there is not enough space below even if the space above is much less than below. Like in a vertically narrow frame with the ComboBox being at the top of the page. It seems better to compare the space below with above and put it where there is more space.
There is no RTL boundary detection in ComboBox, e.g. no _elementOverflowsLeftScreenBorder in RadComboBox.DropDown.js