Remove checkbox from first item in combobox

5 posts, 0 answers
  1. Craig Wallace
    Craig Wallace avatar
    118 posts
    Member since:
    Jan 2005

    Posted 13 Jan 2014 Link to this post

    Hi,

    Telerik.Web.UI v2013.3.1015.40

    I have a simple usage scenario for a RadComboBox:

    <telerik:RadComboBox ID="cbProducts" runat="server" Width="250px"
                        DataSourceID="dsProducts" DataTextField="ProductName"
                        DataValueField="ProductID" AppendDataBoundItems="true" CheckBoxes="True"
                        onitemchecked="dlProducts_ItemChecked" AutoPostBack="true">
                            <Items>
                                <telerik:radcomboboxitem Text="-- Select --" Value="" />
                            </Items>
                    </telerik:RadComboBox>

    This allows the user to select multiple products by using the checkboxes.  The problem is, it also allows the user to check the default '-- Select --' item that I have added as it also shows a checkbox, and there seems to be no 'ShowCheckbox' property on RadComboBoxItem that I can toggle.

    How can I remove the checkbox on my first item in the RadComboBox?

    Thanks.
  2. Genady Sergeev
    Admin
    Genady Sergeev avatar
    1596 posts

    Posted 13 Jan 2014 Link to this post

    Hello Craig,

    You can use the following JavaScript code to accomplish this:

    <script type="text/javascript">
        function comboLoad(sender) {
            var item = sender.get_items().getItem(0),
                checkBoxElement = item.get_checkBoxElement(),
                itemParent = checkBoxElement.parentNode;
     
                itemParent.removeChild(checkBoxElement);
        }
     
    </script>
     
    <telerik:RadComboBox runat="server" CheckBoxes="true" ID="ComboBox1" OnClientLoad="comboLoad">
        <Items>
            <telerik:RadComboBoxItem Text="Select" />
            <telerik:RadComboBoxItem Text="Text1" />
        </Items>
    </telerik:RadComboBox>

    I hope that this helps.

    Regards,
    Genady Sergeev
    Telerik
    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 the blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Craig Wallace
    Craig Wallace avatar
    118 posts
    Member since:
    Jan 2005

    Posted 14 Jan 2014 Link to this post

    Hi Genady,

    Thanks.  There were a couple of typos in your code but I cleaned them up and the checkbox is removed.

    function comboLoad(sender) {
                var item = sender.get_items().getItem(0);
                checkBoxElement = item.get_checkBoxElement();
                itemParent = checkBoxElement.parentNode;
                itemParent.removeChild(checkBoxElement);
            }

    There is an additional problem now.  If I click on '-- Select --', it is shown as the dropdown text.  If I then tick one of the checkboxes, the control says that 2 items have been selected.  It's as if clicking on the first item still checks the checkbox.

    Any ideas?

    Craig
  5. Genady Sergeev
    Admin
    Genady Sergeev avatar
    1596 posts

    Posted 16 Jan 2014 Link to this post

    Hi Craig,

    I am not reproducing the problem with the latest version of the controls therefore this might be a bug in the version that you use. Which one is it?


    Regards,
    Genady Sergeev
    Telerik
    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 the blog feed now.
  6. jackson
    jackson avatar
    4 posts
    Member since:
    Nov 2015

    Posted 13 Jan in reply to Craig Wallace Link to this post

    get the Separator Text and  set_checked as false.

    function disableCheckOptionForSeparator() {
                    var comboBox = $find("<%=RadComboBoxSites.ClientID %>");
                     
                    var itemSiteSeparator = comboBox.findItemByText("-- Select --");
                    if (itemSiteSeparator.get_isSeparator()) {
                        itemSiteSeparator.set_checked(false)
                    }
     
                    return true;
                }

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