Filter ComboBox with CheckBoxes support enabled

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


Back to Top