How to prevent displaying text when select an item?

[Phuc]

Hi all,

I am using RadCombobox which contains CheckBoxes as its items. When a checkbox item is checked, its Text will be displayed in Combobox's Text with the delimiter is ",".
It's OK. But I get problem when user clicks/selects on an item instead of checking it. Text of Combobox will be replaced by Text of selecting item.
Please tell me how can I prevent this action ?

Thanks in advance

[Jayesh Goyani]

Hello,

Try with this ComboBox / CheckBoxes

let me know if any concern.

Thanks,
Jayesh Goyani

[Phuc]

Hi Jayesh Goyani,

In list of items in RadCombobox, there is an "All" item. This means when user checks/unchecks this item, the other items will be checked/unchecked (and doing some things in code-behind). How can I know which item has been checked/unchecked to determine the next action ?

So in my current case, I use ItemTemplate which contains a CheckBox control but I get the problem with setting (automatically) text for RadCombobox's Text.

Could you give me the solution for my case?
Thanks for your help.

[Jayesh Goyani]

Hello,

sorry for late reply because busy work/job not able to give reply early.

<telerik:RadComboBox ID="RadComboBoxWithCheckbox" runat="server" EmptyMessage="--Select Name--"
           HighlightTemplatedItems="true" AllowCustomText="true" Width="400px">
           <HeaderTemplate>
               <asp:CheckBox ID="chkSelectAll" runat="server" onClick="HeaderCheckChanged(this,'RadComboBoxWithCheckbox');" />
               <asp:Label runat="server" ID="lblClassSelectAll" Text="Select All" AssociatedControlID="chkSelectAll"></asp:Label>
           </HeaderTemplate>
           <ItemTemplate>
               <div onclick="StopPropagation(event)">
                   <asp:CheckBox runat="server" ID="chkddlID" onclick="onCheckBoxClick(this,'RadComboBoxWithCheckbox')"
                       Text='<%#Eval("Name") %>' />
                   <asp:Label runat="server" ID="labelddlID" Text='<%#Eval("ID") %>' Visible="false"></asp:Label>
               </div>
           </ItemTemplate>
       </telerik:RadComboBox>

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <script type="text/javascript">

            function HeaderCheckChanged(chkbx, combo) {

                var headerchk = chkbx.checked;


                combo = $find("<%= RadComboBoxWithCheckbox.ClientID %>");


                cancelDropDownClosing = true;
                //holds the text of all checked items
                var text = "";
                //holds the values of all checked items
                var values = "";
                //get the collection of all items

                //enumerate all items

                var items = combo.get_items();

                for (var i = 0; i < items.get_count(); i++) {
                    var item = items.getItem(i);
                    //get the checkbox element of the current item
                    var chk1 = $get(combo.get_id() + "_i" + i + "_chkddlID");
                    chk1.checked = headerchk;
                    if (chk1.checked) {
                        text += item.get_text() + ", ";
                        values += item.get_value() + ",";
                    }
                }
                //remove the last comma from the string
                text = removeLastComma(text);
                values = removeLastComma(values);

                if (text.length > 0) {
                    //set the text of the combobox
                    combo.set_text(text);

                }
                else {
                    //all checkboxes are unchecked
                    //so reset the controls
                    combo.set_text("");
                }
            }

            function onCheckBoxClick(chk, combo) {

                combo = $find("<%= RadComboBoxWithCheckbox.ClientID %>");


                cancelDropDownClosing = true;

                var text = "";
                var values = "";
                var items = combo.get_items();
                for (var i = 0; i < items.get_count(); i++) {
                    var item = items.getItem(i);
                    var chk1 = $get(combo.get_id() + "_i" + i + "_chkddlID");
                    if (chk1.checked) {
                        text += item.get_text() + ", ";
                        values += item.get_value() + ",";
                    }
                }
                text = removeLastComma(text);
                values = removeLastComma(values);


                if (text.length > 0) {
                    combo.set_text(text);
                }
                else {
                    combo.set_text("");
                }
            }
            function removeLastComma(str) {

                return str.slice(0, -1);
            }
            function StopPropagation(e) {
                e.cancelBubble = true;
                if (e.stopPropagation) {
                    e.stopPropagation();
                }
            }


        </script>
    </telerik:RadCodeBlock>

protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                dynamic data = new[] {
                new { ID = 1, Name ="Name1"},
                new { ID = 2, Name = "Name2"},
                new { ID = 3, Name = "Name3"},
                new { ID = 4, Name = "Name4"},
                new { ID = 5, Name = "Name5"}
            };

                RadComboBoxWithCheckbox.DataSource = data;
                RadComboBoxWithCheckbox.DataTextField = "Name";
                RadComboBoxWithCheckbox.DataValueField = "ID";
                RadComboBoxWithCheckbox.DataBind();
            }
        }

let me know if any concern.

Thanks,
Jayesh Goyani

[Phuc]

Thanks for your code, Jayesh Goyani.

It works fine but there is the same bug (SelectedIndexChanged) when user clicks on (the points in the left of CheckBoxes or the right of Text of CheckBoxes, text of combobox is also changed without ticking CheckBoxes).

You can see the attached file for detail.
P/s : Please try to click on the left-points of CheckBox item, Text of Combobox always changed. But for the right of text of CheckBox item, it not always.

[Phuc]

I found the solution by using CSS and Javascript as below :

.RadComboBoxDropDown .rcbItem,
.RadComboBoxDropDown .rcbHovered,
.RadComboBoxDropDown .rcbDisabled,
.RadComboBoxDropDown .rcbLoading
{
    margin: 0px 0px !important;
    padding: 0px 0px !important;
}

<!--OnClientSelectedIndexChanging="Disable" -- for Firefox-->
<telerik:RadComboBox runat="server" ID="radCmbReportType" Width="200px" HighlightTemplatedItems="true" AllowCustomText="true" OnClientSelectedIndexChanging="Disable">
    <ItemTemplate>
        <div onclick="Disable();"> <!--For IE-->
            <asp:CheckBox runat="server" ID="CheckBox" Text='<%# DataBinder.Eval(Container, "Text") %>' OnCheckedChanged="ReportTypeCheckBoxItem_CheckedChanged" AutoPostBack="true"/>
        </div>
    </ItemTemplate>
</telerik:RadComboBox>

function Disable() {
agent = jQuery.browser;
if (agent.msie) {
    window.event.cancelBubble = true;
} else {
    event.stopPropagation();
    }
}

Regards,
Phuc