Filter ComboBox with CheckBoxes support enabled

Thread is closed for posting
2 posts, 0 answers
  1. 63F75A2C-1F16-4AED-AFE8-B1BBD57646AD
    63F75A2C-1F16-4AED-AFE8-B1BBD57646AD avatar
    1572 posts
    Member since:
    Oct 2004

    Posted 22 Jul 2016 Link to this post

    Requirements

    Telerik Product and Version

    		 UI for ASP.NET AJAX R2 2016 607

    Supported Browsers and Platforms

    		  IE8+, Chrome current and previous, Firefox current and previous

    Components/Widgets used (JS frameworks, etc.)

    		 .NET 4.0/4.5  C#


    PROJECT DESCRIPTION 

    The ComboBox filtering and MarkFirstMatch functionalities are not supported when CheckBoxes are enabled. This example demonstrates a custom approach that enables filtering through a TextBox embedded in the ComboBox' Header Template.




    <telerik:RadComboBox ID="RadComboBox1" runat="server" CheckBoxes="true" CheckedItemsTexts="DisplayAllInInput" Width="300px"
        DataTextField="Name" DataValueField="ID" 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;
        var originalFunction = $T.RadComboBox.prototype.highlightAllMatches;
        var textBox;
     
        function OnLoad(sender, args) {
            var comboBox;
     
            Sys.Application.add_load(function () {
                textBox = sender;
                comboBox = $find("RadComboBox1");
            });
     
            $telerik.$(sender.get_element()).on("keyup", function (e) {
                comboBox.highlightAllMatches(sender.get_textBoxValue());
            })
        }
     
        function OnClientDropDownClosing(sender, args) {
            sender.get_items().forEach(function (item) {
                item.clearEmTags();
            });
            sender.setAllItemsVisible(true);
            textBox.clear();
        }
     
        $T.RadComboBox.prototype.highlightAllMatches = function (text) {
            this.set_filter($T.RadComboBoxFilter.Contains);
            originalFunction.call(this, text);
            this.set_filter($T.RadComboBoxFilter.None);
        };
    </script>

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            RadComboBox1.DataSource = CreateItems();
            RadComboBox1.DataBind();
        }
    }
     
    protected List<Person> CreateItems()
    {
        List<Person> data = new List<Person>();
        data.Add(new Person(1, "Anna"));
        data.Add(new Person(2, "Bob"));
        data.Add(new Person(3, "Colin"));
        data.Add(new Person(4, "Daniel"));
        data.Add(new Person(5, "Ellen"));
     
        return data;
    }
     
    public class Person
    {
        public int ID { get; set; }
        public string Name { get; set; }
     
        public Person(int id, string name)
        {
            ID = id;
            Name = name;
        }
    }


  3. 73AB4FDB-9F60-4E95-94E8-05C89D609656
    73AB4FDB-9F60-4E95-94E8-05C89D609656 avatar
    912 posts
    Member since:
    Apr 2022

    Posted 06 Feb 2019 Link to this post

    In order to enable the checkbox filtering on a single RadComboBox instance on the page, you can change the implementation as follows: 

    <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.
Back to Top

This Code Library is part of the product documentation and subject to the respective product license agreement.