Currently, the behavior on selection is to highlight the selected item, so modifying the appearance of a selected item would affect the appearance of hovered items as well.
In the meantime, a custom CSS class can be added/removed to the selected item as in the snippet below:
<script>
function OnClientLoad(sender, args) {
var selectedItem = sender.get_selectedItem();
if (selectedItem) {
$telerik.$(selectedItem.get_element()).addClass("rcbSelected");
}
}
function OnClientSelectedIndexChanged(sender, args) {
$telerik.$(sender.get_dropDownElement()).find(".rcbSelected").removeClass("rcbSelected");
var selectedItem = sender.get_selectedItem();
if (selectedItem) {
$telerik.$(selectedItem.get_element()).addClass("rcbSelected");
}
}
</script>
<style>
div.RadComboBoxDropDown .rcbSelected {
color: red;
background-color: lightgreen;
}
</style>
<telerik:RadComboBox ID="RadComboBox1" runat="server" RenderMode="Lightweight" OnClientSelectedIndexChanged="OnClientSelectedIndexChanged" OnClientLoad="OnClientLoad" MaxHeight="150">
<Items>
<telerik:RadComboBoxItem Text="Item 1" />
<telerik:RadComboBoxItem Text="Item 2" />
<telerik:RadComboBoxItem Text="Item 3" Selected="true" />
<telerik:RadComboBoxItem Text="Item 4" />
</Items>
</telerik:RadComboBox>
The German resource file for the RadComboBox does not contain all strings in English resource file.
This is causing problems when we upgrade to the latest version and the German resource file is overwritten.
See attached screenshots.
Thanks
John
Accessibility Management Platform (AMP) reports that the Telerik Web Forms ComboBox has an attribute mismatch
This element has a mismatch between the value of its readonly and aria-readonly attributes
The following structure replicates the error
<telerik:RadComboBox ID="RadComboBox1" runat="server" EmptyMessage="Empty Message" EnableAriaSupport="true">
<Items>
<telerik:RadComboBoxItem Text="Item 1" />
<telerik:RadComboBoxItem Text="Item 2" />
<telerik:RadComboBoxItem Text="Item 3" />
<telerik:RadComboBoxItem Text="Item 4" />
</Items>
</telerik:RadComboBox>
I am receiving the following ADA Compliance errors, when running a page scan for WCAG 2.1 AA:
Buttons must have discernible text: button.rcbActionButton
<button class="rcbActionButton" tabindex="-1" type="button">select</button>
Form elements must have labels: input.rcbInput.radPreventDecorate
<input name="ctl00$MainContent$MyCombo" type="text" class="rcbInput radPreventDecorate rcbEmptyMessage" id="ctl00_MainContent_MyCombo_Input" value="Search..." autocomplete="off"></input>
This is the component:
After upgrade an infinite "Loading..." is displayed when using load on demand:
<telerik:RadComboBox
ID="ddlOldValues"
runat="server"
Filter="Contains"
AllowCustomText="true"
ShowMoreResultsBox="true"
EnableLoadOnDemand="true"
ItemsPerRequest="10"
EnableVirtualScrolling="true"
DataTextField="USERFULLNAME"
DataValueField="USERFULLNAME">
<WebServiceSettings Method="GetDynamicUsersUS" Path="WebService.asmx" />
</telerik:RadComboBox>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
[System.Web.Script.Services.ScriptService]
public class WebService : System.Web.Services.WebService
{
[WebMethod(EnableSession = true)]
public RadComboBoxData GetDynamicUsersUS(RadComboBoxContext context)
{
RadComboBoxData comboData = new RadComboBoxData();
try
{
DataTable data = GetUsersData();
string filter = "USERFULLNAME LIKE '%" + context.Text + "%'";
data.DefaultView.RowFilter = filter;
DataTable dtData = data.DefaultView.ToTable();
if (dtData == null || dtData.Rows.Count == 0)
{
dtData = data;
}
// Exact same GetComboData logic as frmBRMultipleUpdate.aspx.vb
int itemsPerRequest = 10;
int itemOffset = context.NumberOfItems;
int endOffset = itemOffset + itemsPerRequest;
if (endOffset > dtData.Rows.Count)
{
endOffset = dtData.Rows.Count;
}
// When data is exhausted, set EndOfItems to true
if (itemOffset >= dtData.Rows.Count)
{
comboData.EndOfItems = true;
comboData.Items = new RadComboBoxItemData[0];
return comboData;
}
comboData.EndOfItems = (endOffset >= dtData.Rows.Count);
var result = new List<RadComboBoxItemData>();
for (int i = itemOffset; i < endOffset; i++)
{
var item = new RadComboBoxItemData();
item.Text = dtData.Rows[i]["USERFULLNAME"].ToString();
item.Value = dtData.Rows[i]["USERFULLNAME"].ToString();
result.Add(item);
}
comboData.Items = result.ToArray();
comboData.Message = string.Format("Items <b>{0}</b>-<b>{1}</b> out of <b>{2}</b>",
itemOffset + 1, endOffset, dtData.Rows.Count);
}
catch (Exception ex)
{
comboData.Message = "No matches";
}
return comboData;
}
private static DataTable GetUsersData()
{
DataTable dt = new DataTable();
dt.Columns.Add(new DataColumn("USERFULLNAME", typeof(string)));
dt.Columns.Add(new DataColumn("EMAIL", typeof(string)));
for (int i = 0; i < 200; i++)
{
int index = i + 1;
DataRow row = dt.NewRow();
row["USERFULLNAME"] = "User" + index;
row["EMAIL"] = "user" + index + "@example.com";
dt.Rows.Add(row);
}
return dt;
}
}To work-around it, set a Height to the ComboBox:
<telerik:RadComboBox
Height="300px"
ID="ddlOldValues"
...