[Solved] Solution: Using Checkboxes with RadComboBox and LoadOnDemand

[Peter Ebdon]

If like me you've been struggling with using both LoadOnDemand and Checkboxes at the same time, here is my solution.

1.How do you remember what's been ticked as there is no viewstate recorded?

I used a hidden field in my page:

<div style="display:none">
    <input type="text" id="ComboCheck_HiddenField" name="ComboCheck_HiddenField"/>
</div>

Then called a function ComboCheck whenever fields were checked:

<telerik:RadComboBox ID="cbChooseFunds" runat="server" AllowCustomText="true" Width="400px"
    Height="200px" Filter="Contains" EnableLoadOnDemand="true" ShowMoreResultsBox="true"
    HighlightTemplatedItems="true" CheckBoxes="true" ItemRequestTimeout="1000" MinFilterLength="0"
    EnableVirtualScrolling="true"
    EnableEmbeddedSkins="false" Skin="AppSkin" EmptyMessage="Start typing to search for a fund" ZIndex="10000000" OnClientItemChecked="ComboCheck" OnClientItemsRequesting="Combo_OnClientItemsRequesting"  >

</telerik:RadComboBox>

function ComboCheck(sender, eventArgs) {
    var combo = eventArgs._item._parent;
    var newValues = "";
    var items = combo.get_items();
    var hiddenValues = document.getElementById('ComboCheck_HiddenField');
    for (var i = 0; i < items.get_count() ; i++) {
        var item = items.getItem(i);
        var checkbox = item.get_element().getElementsByTagName("input")[0];
        if (checkbox.checked) {
            newValues += item.get_value() + ",";
        }
    }

    hiddenValues.value = newValues;
}

2. How do you stop losing the text when you type and the combo fetches more data?

<telerik:RadComboBox ID="cbChooseFunds" runat="server" AllowCustomText="true" Width="400px"
    Height="200px" Filter="Contains" EnableLoadOnDemand="true" ShowMoreResultsBox="true"
    HighlightTemplatedItems="true" CheckBoxes="true" ItemRequestTimeout="1000" MinFilterLength="0"
    EnableVirtualScrolling="true"
    EnableEmbeddedSkins="false" Skin="AppSkin" EmptyMessage="Start typing to search for a fund" ZIndex="10000000" OnClientItemChecked="ComboCheck" OnClientItemsRequesting="Combo_OnClientItemsRequesting"  >

</telerik:RadComboBox>

The OnClientItemsRequesting event fires when the control needs more data. So we need to check the text at that point and then keep checking for a blank value and replace it when detected:

var ComboText = '';

var ComboInput;

function Combo_OnClientItemsRequesting(sender, eventArgs) {

    var combo = sender;

    ComboText = combo.get_text();

    ComboInput = combo.get_element().getElementsByTagName('input')[0];

    ComboInput.focus = function () { this.value = ComboText };

 

    if (ComboText != '') {

        window.setTimeout(TrapBlankCombo, 100);

    };

}

 

function TrapBlankCombo() {

    if (ComboInput) {

        if (ComboInput.value == '') {

            ComboInput.value = ComboText;

        }

        else {

            window.setTimeout(TrapBlankCombo, 100);

        };

    };

}



 

 

[Nencho]

Hello Peter,

Thank you for sharing your solution with the community.

Regards,
Nencho
Telerik