Filter ComboBox with CheckBoxes support enabled

2 posts, 0 answers
  1. Telerik Admin
    Telerik Admin avatar
    1591 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;
        }
    }


  2. Peter Milchev
    Admin
    Peter Milchev avatar
    552 posts

    Posted 06 Feb 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