RacComboBox with checkboxes - Customize the "X items checked"

[ghini]

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]

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

function clientItemChecked(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");
    }
}

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>