I would like to know how to customize the "X items checked" text when I set CheckedItemsTexts="FitInInput" and have multiple items checked.
Thanks
Rumen
Telerik team
commented on 06 Dec 2023, 11:33 AM
You can use the OnClientItemChecked event of the RadComboBox and some custom JavaScript to modify the string as shown below. In addition, you can also customize the string that is populated when all items are checked via the Localization AllItemsCheckedString property.
functionclientItemChecked(sender, args) {
var combo = sender;
if (combo._checkedItemsTextOverflows) {
combo.set_text("multiple);
//or create a custom string based on the checked indices
//combo.set_text("Checked " + combo._checkedIndices.length + " elements");
}
}
For fine-tuning you can also override the _updateComboBoxText method of RadCombobox:
Here you are the solution applicable for multiple comboboxes which shows only the first selected item name. If you get more selections it will show N Sources:
You can use the OnClientItemChecked event of the RadComboBox and some custom JavaScript to modify the string as shown below. In addition, you can also customize the string that is populated when all items are checked via the Localization AllItemsCheckedString property.
<telerik:RadComboBox ID="RadComboBox1" runat="server" RenderMode="Lightweight" CheckBoxes="true" OnClientItemChecked="clientItemChecked"> <Localization AllItemsCheckedString="Everything checked" />
JavaScript
You can also set the AllItemsCheckedString and ShowMoreFormatString localization property to change the localization text of this functionality: https://docs.telerik.com/devtools/aspnet-ajax/controls/combobox/accessibility-and-internationalization/localization and https://www.telerik.com/forums/radcombobox-localization#2565236.
For fine-tuning you can also override the _updateComboBoxText method of RadCombobox:
Here you are the solution applicable for multiple comboboxes which shows only the first selected item name. If you get more selections it will show N Sources:
<script> var $ = $telerik.$, $T = Telerik.Web.UI $T.RadComboBox.prototype._updateComboBoxText = function () { if (!this._checkBoxes) { return; } var text = "", items = this.get_items(), itemsCount = items.get_count(), localization = this.get_localization(); for (var i = 0, length = this.get_checkedIndices().length; i < length; i++) { var item = this._children.getItem(this._checkedIndices[i]); text += item.get_text() + ", "; } var checkedItemTexts = text.replace(/,$/, ""); checkedItemTexts = checkedItemTexts.substring(0, checkedItemTexts.length - 2); if (this._checkedIndices.length == itemsCount && itemsCount > 0 && this._checkedItemsTexts == $T.RadComboBoxCheckedItemsTexts.FitInInput) { this.set_text(localization.AllItemsCheckedString); } else if (this._checkedItemsTexts == $T.RadComboBoxCheckedItemsTexts.FitInInput && this._checkedIndices.length > 1) { this._checkedItemsTextOverflows = true; this.set_text(this._checkedIndices.length + " " + localization.ItemsCheckedString); } else if (itemsCount === 0 || this._checkedIndices.length === 0) { this.set_text(""); this._applyEmptyMessage(); } else { this._checkedItemsTextOverflows = false; this.set_text(checkedItemTexts); } }; </script> <telerik:RadComboBox RenderMode="Lightweight" ID="cboTopics" runat="server" Width="300" AllowCustomText="false" CheckBoxes="true" EnableCheckAllItemsCheckBox="true" EmptyMessage="Topic" Skin="Bootstrap" EnableEmbeddedSkins="False"> <Localization AllItemsCheckedString="All Sources" /> <Localization ItemsCheckedString=" Sources" /> <Items> <telerik:RadComboBoxItem Text="Special Reports" Value="9" /> <telerik:RadComboBoxItem Text="Catastrophes" Value="10" /> <telerik:RadComboBoxItem Text="COVID-19" Value="66" /> <telerik:RadComboBoxItem Text="Cyber" Value="67" /> <telerik:RadComboBoxItem Text="Finance" Value="18" /> <telerik:RadComboBoxItem Text="Health" Value="22" /> <telerik:RadComboBoxItem Text="Innovation " Value="63" /> <telerik:RadComboBoxItem Text="Insurance-Linked Securities" Value="33" /> <telerik:RadComboBoxItem Text="Investments " Value="5" /> <telerik:RadComboBoxItem Text="Legislation " Value="27" /> <telerik:RadComboBoxItem Text="Life/Annuity" Value="5" /> <telerik:RadComboBoxItem Text="Property/Casualty (Non-Life)" Value="42" /> <telerik:RadComboBoxItem Text="Regulation " Value="44" /> <telerik:RadComboBoxItem Text="Reinsurance " Value="45" /> <telerik:RadComboBoxItem Text="Technology " Value="51" /> </Items> </telerik:RadComboBox> <telerik:RadComboBox RenderMode="Lightweight" ID="RadComboBox1" runat="server" Width="155" AllowCustomText="false" CheckBoxes="true" EnableCheckAllItemsCheckBox="true" EmptyMessage="Topic" Skin="Bootstrap" EnableEmbeddedSkins="False"> <Localization AllItemsCheckedString="All Sources" /> <Localization ItemsCheckedString=" Sources" /> <Items> <telerik:RadComboBoxItem Text="Special Reports" Value="9" /> <telerik:RadComboBoxItem Text="Catastrophes" Value="10" /> <telerik:RadComboBoxItem Text="COVID-19" Value="66" /> <telerik:RadComboBoxItem Text="Cyber" Value="67" /> <telerik:RadComboBoxItem Text="Finance" Value="18" /> <telerik:RadComboBoxItem Text="Health" Value="22" /> <telerik:RadComboBoxItem Text="Innovation " Value="63" /> <telerik:RadComboBoxItem Text="Insurance-Linked Securities" Value="33" /> <telerik:RadComboBoxItem Text="Investments " Value="5" /> <telerik:RadComboBoxItem Text="Legislation " Value="27" /> <telerik:RadComboBoxItem Text="Life/Annuity" Value="5" /> <telerik:RadComboBoxItem Text="Property/Casualty (Non-Life)" Value="42" /> <telerik:RadComboBoxItem Text="Regulation " Value="44" /> <telerik:RadComboBoxItem Text="Reinsurance " Value="45" /> <telerik:RadComboBoxItem Text="Technology " Value="51" /> </Items> </telerik:RadComboBox>