RadComboBox with Checkboxes AJAX problem

Question

I have created radcombobox with list of checkboxes. User can select multiple checkboxes and when he check some item label on page must be updated (this.label.text += someValue). I added Ajax:UpdatePanel with async trigger on that radcombobox but problem is when user check item dropdown list close it self :( How can I prevent closing dropdown list? Here what I have tried:

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<telerik:RadComboBox runat="server" ID="rcb" Width="200px" HighlightTemplatedItems="true" 
    AllowCustomText="true" Text="Select Item" MaxHeight="250px" EnableTextSelection="false" AutoPostBack="true"
    OnClientSelectedIndexChanging="OnClientSelectedIndexChanging()">
    <Items>
        <telerik:RadComboBoxItem Value="0" Text="Select..." />
        <telerik:RadComboBoxItem Value="1" Text="Small" />
        <telerik:RadComboBoxItem Value="2" Text="Medium" />
        <telerik:RadComboBoxItem Value="3" Text="Large" />
    </Items>
    <ItemTemplate>        
            <asp:CheckBox onclick="stopPropagation(event);" ID="chk_Category" runat="server" Text="test" AutoPostBack="true" OnCheckedChanged="CheckBox1_CheckedChanged" />       
    </ItemTemplate>    
</telerik:RadComboBox>

<dnn:label ID="lbl" runat="server" Text="nothing" />

</ContentTemplate>
<Triggers>
    <asp:AsyncPostBackTrigger ControlID="rcb"/>    
</Triggers>
</asp:UpdatePanel>

<script type="text/javascript" language="javascript">
        // <![CDATA[
    function stopPropagation(e) {        
        e.cancelBubble = true;
        if (e.stopPropagation) {
            e.stopPropagation();
        }
    }
    function OnClientSelectedIndexChanging(item) {       
        return false;
    }

                // ]]>
</script>

score 1 · Accepted Answer · answered Jun 09 '11 at 12:07

1

Typically, the drop down closes when you click on the item; we use a checkbox in the combo box template, and only experienced the closing when clicking on the item itself (which selects the item, and that becomes confusing).

The issue here is that each checkbox posts back to the server, so that is the most likely cause. Do you have to send the checkbox response back to the server after clicking it? An alternative approach is to read the checkbox controls from each item in bulk, or every time an item is checked, store the values of the checked items in a hidden control.

Alternatively, as an FYI, for the Q2 release of 2011, upcoming is this feature: Multiple select with checkboxes mode. So checkboxes will be a default feature of the combo box. If you have support, you can upgrade shortly.

HTH.

answered Jun 09 '11 at 12:07

Brian Mains

50,520
35
148
257

"Do you have to send the checkbox response back to the server after clicking it?", yes. Because each check box is ID for some value which is ind database. – 1110 Jun 09 '11 at 12:17
Hey, OK, then though you may always have that issue. Because what happens is that the response comes back and wipes the original response, where the new response has the drop down closed. What you need to look to do is programmably open the drop down. Don't know if you can do that server side. Alternatively, wouldn't capturing the ID's and building a list that's stored in a hidden field, all done by client-side JavaScript, also work in this scenario? – Brian Mains Jun 09 '11 at 12:24
In the end I choose to use check box list. Maybe switch it when that new telerik version come out. Thanks anyway. – 1110 Jun 09 '11 at 12:58
NP, I also used the Telerik RadListBox inside the RadComboBox, that worked well... – Brian Mains Jun 09 '11 at 13:04

RadComboBox with Checkboxes AJAX problem

1 Answers1