Solution: Using Checkboxes with RadComboBox and LoadOnDemand

2 posts, 0 answers
  1. Peter Ebdon
    Peter Ebdon avatar
    1 posts
    Member since:
    Apr 2010

    Posted 04 Mar 2014 Link to this post

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



     
     
  2. Nencho
    Admin
    Nencho avatar
    1457 posts

    Posted 07 Mar 2014 Link to this post

    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!

  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top