This is a migrated thread and some comments may be shown as answers.

Multiselect Combobox

1 Answer 382 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
Igor
Top achievements
Rank 1
Igor asked on 31 Jul 2016, 11:28 PM

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);
}
}

1 Answer, 1 is accepted

Sort by
0
Dimitar
Telerik team
answered on 03 Aug 2016, 08:08 AM
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
Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
Tags
ComboBox
Asked by
Igor
Top achievements
Rank 1
Answers by
Dimitar
Telerik team
Share this question
or