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

Solution: Using Checkboxes with RadComboBox and LoadOnDemand

1 Answer 142 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
Peter Ebdon
Top achievements
Rank 1
Peter Ebdon asked on 04 Mar 2014, 11:03 AM
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);
        };
    };
}



 
 

1 Answer, 1 is accepted

Sort by
0
Nencho
Telerik team
answered on 07 Mar 2014, 07:57 AM
Hello Peter,

Thank you for sharing your solution with the community.

Regards,
Nencho
Telerik

DevCraft Q1'14 is here! Join the free online conference to see how this release solves your top-5 .NET challenges. Reserve your seat now!

Tags
ComboBox
Asked by
Peter Ebdon
Top achievements
Rank 1
Answers by
Nencho
Telerik team
Share this question
or