Multiselect Combobox

[Igor]

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

 

Igor

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

 

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);
originalFunction.call(this, text);
this.set_filter($T.RadComboBoxFilter.None);
};

comboBox.highlightAllMatches(textBox.get_textBoxValue());
}

 

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++)
checkedItems[i].set_checked(false);

for (var v = 0; v < visibleItems.length; v++)
visibleItems[v].set_checked(true);
}
}

[Dimitar]

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) {
                checkedItems[i].set_checked(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.

Regards,
Dimitar
Telerik by Progress