This is a migrated thread and some comments may be shown as answers.

How to prevent displaying text when select an item?

5 Answers 80 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
Phuc
Top achievements
Rank 1
Phuc asked on 12 Sep 2011, 07:37 AM
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

5 Answers, 1 is accepted

Sort by
0
Jayesh Goyani
Top achievements
Rank 2
answered on 12 Sep 2011, 09:05 AM
Hello,

Try with this ComboBox / CheckBoxes

let me know if any concern.

Thanks,
Jayesh Goyani
0
Phuc
Top achievements
Rank 1
answered on 12 Sep 2011, 10:14 AM
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.
0
Jayesh Goyani
Top achievements
Rank 2
answered on 12 Sep 2011, 06:25 PM
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
0
Phuc
Top achievements
Rank 1
answered on 13 Sep 2011, 04:52 AM
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.
0
Phuc
Top achievements
Rank 1
answered on 15 Sep 2011, 07:50 AM
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
Tags
ComboBox
Asked by
Phuc
Top achievements
Rank 1
Answers by
Jayesh Goyani
Top achievements
Rank 2
Phuc
Top achievements
Rank 1
Share this question
or