This is a migrated thread and some comments may be shown as answers.

RadCombox filtering with checkboxes

3 Answers 559 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
Jack
Top achievements
Rank 1
Jack asked on 10 May 2017, 10:06 AM

I know from previous posts that this "feature isn't supported" out of the box from telerik.

I was wondering if it was possible to get the filter being applied to the combobox from the client side and allow it be cleared from a button click. I want to try and customize the behaviour of the combobox so that I can filter items in the list which can then be checked individually or JUST the filtered items to be selected by the check all. However I find it bit clunky at present to clear the filter out of the combobox after selecting items.

 

Another alternative idea is to add a search textbox as the first item in combobox (similar as seen in kendo grid filters), is this level of customization available in radcombobox control?

 

Any help appreciated!

3 Answers, 1 is accepted

Sort by
0
Peter Milchev
Telerik team
answered on 15 May 2017, 09:10 AM
Hello Jack,

Generally, the ComboBox filtering and MarkFirstMatch functionalities are not supported when CheckBoxes are enabled.

Nevertheless, the example in the Filter ComboBox with CheckBoxes support enabled code library project demonstrates a custom approach that enables filtering through a TextBox embedded in the ComboBox' Header Template.

Regards,
Peter Milchev
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
GTL Dev
Top achievements
Rank 2
answered on 05 Feb 2019, 04:38 PM

I have used the code from the "Filter ComboBox with CheckBoxes support enabled" example but have an issue with it affecting other Radcomboboxes on the same page to there there built in filter which is being used is now non-functional.

Is there a way to prevent this?

0
Peter Milchev
Telerik team
answered on 06 Feb 2019, 03:36 PM
Hello,

We have updated the Code Library to include a version that applies to a single RadComboBox instance instead of all on the page.

<telerik:RadComboBox ID="RadComboBox1" runat="server" CheckBoxes="true" CheckedItemsTexts="DisplayAllInInput" Width="300px"
    DataTextField="Name" DataValueField="ID" OnClientLoad="OnClientLoadComboBox" OnClientDropDownClosing="OnClientDropDownClosing">
    <HeaderTemplate>
        <telerik:RadTextBox runat="server" ID="RadTextBox1" Width="100%" ClientEvents-OnLoad="OnLoad">
        </telerik:RadTextBox>
    </HeaderTemplate>
</telerik:RadComboBox>

<script type="text/javascript">
    var $T = Telerik.Web.UI;
    function OnLoad(sender, args) {
        // #region Add ComboBox reference to TextBox
        function getComboBoxReference() {
            var comboBox = $telerik.$(sender.get_element()).closest(".RadComboBox")[0].control;
            //add a reference of the containing combo box to the RadTextBox instance
            sender.__containingComboBox = comboBox;
  
            //add a reference of the RadTextBox instance to the containing combo box
            comboBox.__filterTextBox = sender;
  
            Sys.Application.remove_load(getComboBoxReference);
        }
        Sys.Application.add_load(getComboBoxReference);
        // #endregion
  
        $telerik.$(sender.get_element()).on("keyup", function (e) {
            sender.__containingComboBox.highlightAllMatches(sender.get_textBoxValue());
        })
    }
  
    function OnClientLoadComboBox(sender, args) {
        var originalFunction = $T.RadComboBox.prototype.highlightAllMatches;
        // override the highlightAllMatches only on this RadComboBox instance
        sender.highlightAllMatches = function (text) {
            this.set_filter($T.RadComboBoxFilter.Contains);
            originalFunction.call(this, text);
            this.set_filter($T.RadComboBoxFilter.None);
        };
    }
  
    function OnClientDropDownClosing(sender, args) {
        sender.get_items().forEach(function (item) {
            item.clearEmTags();
        });
  
        sender.setAllItemsVisible(true);
        sender.__filterTextBox.clear();
    }
</script>


Regards,
Peter Milchev
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Emmanuel
Top achievements
Rank 1
commented on 01 Jun 2021, 08:48 PM | edited

First of all, thank you Peter Milchev, this works great.

But I see a detail, is there a way to show the count of the checked items just like the original behavior? With this solution, the combobox shows all the checked items concatenated by commas instead of "10 items checked".

UPDATE

I just removed CheckedItemsTexts property
Peter Milchev
Telerik team
commented on 04 Jun 2021, 11:03 AM

For clarity, I am also linking the documentation article where this CheckedItemsTexts property and its values are described: https://docs.telerik.com/devtools/aspnet-ajax/controls/combobox/functionality/checkbox-support#checkbox-support-related-properties 
Tags
ComboBox
Asked by
Jack
Top achievements
Rank 1
Answers by
Peter Milchev
Telerik team
GTL Dev
Top achievements
Rank 2
Share this question
or