Multiselect Combobox

2 posts, 0 answers
  1. Igor
    Igor avatar
    13 posts
    Member since:
    Oct 2010

    Posted 31 Jul Link to this post

    I have EnableCheckAllItemsCheckBox property set to true.

    I have javascript function which highlight all matches in the combobox when user starts typing.

    For example I have combobox populated with 100 items.  5 are highlighted and visible after user stsrts typing.

    When user clicks on Check All check box all 100 items are checked.  But I need only 5 to be checked.

    I have implemented OnClientCheckAllChecked function see below.  It is working ok for the small sets of items.

    But in some cases I have 550+ item in the combobox and it takes some time to finish procedure.

    Is there any wau to get control of the Check All check box and check all visible items without the need to first uncheck all checked items and then check visible ones.


    Please advise



    <telerik:RadComboBox ID="cb" runat="server" Skin="Metro" CheckBoxes="True" CheckedItemsTexts="DisplayAllInInput" DropDownAutoWidth="Enabled"
    EnableCheckAllItemsCheckBox="True" OnClientCheckAllChecked="OnClientCheckAllChecked" MaxHeight="200px" OnClientDropDownClosing="OnClientDropDownClosing">
    <telerik:RadTextBox runat="server" ID="txt" Width="100%" />


    function HighlightAllMatches(textBoxId, comboBoxId)
    var $T = window.Telerik.Web.UI;
    var originalFunction = $T.RadComboBox.prototype.highlightAllMatches;

    var comboBox = window.$find(comboBoxId);
    var textBox = window.$find(textBoxId);

    $T.RadComboBox.prototype.highlightAllMatches = function(text)
    this.set_filter($T.RadComboBoxFilter.StartsWith);, text);



    function OnClientCheckAllChecked(sender, args)
    var checkedItems = sender.get_checkedItems();
    var visibleItems = sender.get_visibleItems();

    if (args.get_checked() && (checkedItems.length != visibleItems.length))
    for (var i = 0; i < checkedItems.length; i++)

    for (var v = 0; v < visibleItems.length; v++)

  2. Dimitar
    Dimitar avatar
    276 posts

    Posted 03 Aug Link to this post

    Hi Igor,

    I've just replied to you in your other thread concerning this issue. I post the same answer here to share it with the community as well. However, in order to avoid threads duplication, I would suggest you to continue our conversation, if needed, in only one of the threads.

    You could avoid looping two times by checking if the checked item is visible or not and checking/unchecking it accordingly. Here is the optimized snippet:

    function OnClientCheckAllChecked(sender, args) {
        var checkedItems = sender.get_checkedItems();
        var visibleItems = sender.get_visibleItems();
        if (args.get_checked() && (checkedItems.length != visibleItems.length)) {
            for (var i = 0; i < checkedItems.length; i++) {
                if (checkedItems[i].get_visible() === false) {

    It should perform faster than the current approach. I hope it would help you to achieve the desired behavior.

    Note that although all visible items are checked, the CheckAll checkbox gets unchecked by this approach, which is expected, as indeed not all items are checked.

    Telerik by Progress
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  3. DevCraft R3 2016 release webinar banner
Back to Top