Enable/Disable Radcombobox with checkboxes

3 posts, 0 answers
  1. Raja Rajeswari Mohan Venkataraman
    Raja Rajeswari Mohan Venkataraman avatar
    14 posts
    Member since:
    Nov 2009

    Posted 08 Nov 2011 Link to this post

    Hi,

    I have a radcombobox named radComboSource. In the javascript I have some functions.  I am calling SRC_Changed()  on
    OnClientDropDownClosing event. In the function I'm checking for some condition.  In that condition I have to enable/disable other two radcomboxes(radSTT, radTYP)  that has checkboxes in it. 

    In the SRC_Changed()  event I am able to enable the radSTT and radTYP. But still the items and checkboxes in it are still disabled. I want the items and the checkboxes also to be enabled in the SRC_Changed() javascript event. Could you please help me achieve this.

    Thanks,
    Raji

    <telerik:RadComboBox ID="radComboSource" runat="server" AllowCustomText="true"                                                                                    
                                                                                    EnableLoadOnDemand="True" OnClientBlur="OnClientBlur"
    OnClientDropDownClosing="SRC_Changed"
                                                                                        OnClientDropDownOpening="OnClientDropDownOpening" OnClientSelectedIndexChanging="OnClientSelectedIndexChanging"
                                                                                        Width="300px" onkeypress="return false;" Font-Size="X-Small" OnClientLoad="OnClientLoadHandler" >
                                                                                        <Items>
                                                                                            <telerik:RadComboBoxItem runat="server" Text="PENDING" Value="APP" />
                                                                                            <telerik:RadComboBoxItem runat="server" Text="FAA GMF" Value="FAA" />
                                                                                            <telerik:RadComboBoxItem runat="server" Text="NTIA GMF" Value="NTIA" />
                                                                                            <telerik:RadComboBoxItem runat="server" Text="CANADA" Value="CAN" />
                                                                                            <telerik:RadComboBoxItem runat="server" Text="CARSAM" Value="CSM" />
                                                                                            <telerik:RadComboBoxItem runat="server" Text="FCC AM" Value="AM" />
                                                                                            <telerik:RadComboBoxItem runat="server" Text="FCC FM" Value="FM" />
                                                                                            <telerik:RadComboBoxItem runat="server" Text="FCC TV" Value="TV" />
                                                                                            <telerik:RadComboBoxItem runat="server" Text="ARINC" Value="ARI" />
                                                                                            <telerik:RadComboBoxItem runat="server" Text="UNICOM" Value="UNI" />
                                                                                            <telerik:RadComboBoxItem runat="server" Text="AGENDA" Value="AGN" />
                                                                                        </Items>
                                                                                        <ItemTemplate>
                                                                                            <asp:CheckBox ID="chkSource" runat="server" onclick="collectSelectedItems();" Text='<%# DataBinder.Eval(Container, "Text") %>' />
                                                                                        </ItemTemplate>
                                                                                    </telerik:RadComboBox>

    Javascript:

    function collectSelectedItems() {
                var combo = $find("<%= radComboSource.ClientID%>");
                var items = combo.get_items();

                var selectedItemsTexts = "";
                var selectedItemsValues = "";

                var itemsCount = items.get_count();
                for (var itemIndex = 0; itemIndex < itemsCount; itemIndex++) {
                    var item = items.getItem(itemIndex);
                    var checkbox = getItemCheckBox(item);
                    if (checkbox.checked) {
                        selectedItemsTexts += item.get_text() + ", ";
                        selectedItemsValues += item.get_value() + ", ";
                    }
                }
                selectedItemsTexts = selectedItemsTexts.substring(0, selectedItemsTexts.length - 2);
                selectedItemsValues = selectedItemsValues.substring(0, selectedItemsValues.length - 2);
                //Set the text of the RadComboBox with the texts of the selected Items, separated by ','.
                combo.set_text(selectedItemsValues);
                document.getElementById("<%= radComboSource.ClientID%>").value = selectedItemsValues;           
            }

            function getItemCheckBox(item) {
                //Get the 'div' representing the current RadComboBox Item.
                var itemDiv = item.get_element();
                //alert(itemDiv);

                //Get the collection of all 'input' elements in the 'div' (which are contained in the Item).
                var inputs = itemDiv.getElementsByTagName("input");

                for (var inputIndex = 0; inputIndex < inputs.length; inputIndex++) {
                    var input = inputs[inputIndex];

                    //Check the type of the current 'input' element.
                    if (input.type == "checkbox") {
                        return input;
                    }
                }

                return null;
            }

    function SRC_Changed(item) {
                var combo = $find("<%= radComboSource.ClientID%>");
                var items = combo.get_items();

                var itemsCount = items.get_count();
                for (var itemIndex = 0; itemIndex < itemsCount; itemIndex++) {
                    var item = items.getItem(itemIndex);
                    var checkbox = getItemCheckBox(item);
                    if (checkbox.checked) {
                        var comboSTT = $find("<%= radComboSTT.ClientID %>");
                        var comboTYP = $find("<%= radComboTYP.ClientID %>");
                        var lblSTT = document.getElementById("<%= lblSTT.ClientID %>");
                        var lblTYP = document.getElementById("<%= lblTYP.ClientID %>");
                        var lblDAT = document.getElementById("<%= lblDAT.ClientID %>");
                       
                        if ((item.get_value() == "FAA") || (item.get_value() == "NTIA") || (item.get_value() == "CAN") || (item.get_value() == "CSM") || (item.get_value() == "AM") || (item.get_value() == "FM") || (item.get_value() == "TV") || (item.get_value() == "ARI") || (item.get_value() == "UNI")) {
                            comboSTT.set_enabled(false);
                            document.getElementById('<%= txtSTT.ClientID%>').disabled = true;
                            lblSTT.style.background = 'LightGray'
                            
                            var itemsSTT = comboSTT.get_items();

                            var itemsCountSTT = itemsSTT.get_count();
                            for (var itemIndSTT = 0; itemIndSTT < itemsCountSTT; itemIndSTT++) {
                                var itemSTT = itemsSTT.getItem(itemIndSTT);
                                var checkboxSTT = getItemCheckBox(itemSTT);
                                if (checkboxSTT.checked) {
                                    checkboxSTT.checked = false;
                                }
                            }
                            comboSTT.set_text("");

                            comboTYP.set_enabled(false);
                            document.getElementById('<%= txtTYP.ClientID%>').disabled = true;
                            lblTYP.style.background = 'LightGray'
                           
                            var itemsTYP = comboTYP.get_items();

                            var itemsCountTYP = itemsTYP.get_count();
                            for (var itemIndTYP = 0; itemIndTYP < itemsCountTYP; itemIndTYP++) {
                                var itemTYP = itemsTYP.getItem(itemIndTYP);
                                var checkboxTYP = getItemCheckBox(itemTYP);
                                if (checkboxTYP.checked) {
                                    checkboxTYP.checked = false;
                                }
                            }
                            comboTYP.set_text("");

                                               }
                        else if ((item.get_value() == "APP") || (item.get_value() == "AGN")) {

                            comboSTT.set_enabled(true);
                            document.getElementById('<%= txtSTT.ClientID%>').disabled = false;
                            lblSTT.style.background= 'white';

                            comboTYP.set_enabled(true);
                            document.getElementById('<%= txtTYP.ClientID%>').disabled = false;
                            lblTYP.style.background = 'white';
                           
                         }
                    }
                }
            }

  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 09 Nov 2011 Link to this post

    Hello,

    You can try the following javascript.
    JS:
    <script type="text/javascript">
        function OnClientDropDownClosing(sender, args)
        {
           var radcombo1 = $find("<%=RadComboBox2.ClientID%>");
           radcombo1.enable(true);
           var radcombo2 = $find("<%=RadComboBox3.ClientID%>");
           radcombo2.enable(true);
        }
    </script>

    Thanks,
    Princy.
  3. Dimitar Terziev
    Admin
    Dimitar Terziev avatar
    1268 posts

    Posted 14 Nov 2011 Link to this post

    Hello Raja,

    What you experience as a behavior is the expected one. In general when there are template controls in the RadComboBox and this ComboBox is disabled,these controls are disabled as well. On other hand if you then enable the control on the client, its items are not enabled. You have to make a post-back and enable the RadComboBox on the server in order its items to be enabled.

    Another approach is to use the built-in check box functionality which is provided by the RadComboBox.

    All the best,
    Dimitar Terziev
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
Back to Top