How to prevent displaying text when select an item?

6 posts, 0 answers
  1. Phuc
    Phuc avatar
    47 posts
    Member since:
    Aug 2011

    Posted 12 Sep 2011 Link to this post

    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
  2.
  3. Jayesh Goyani
    Jayesh Goyani avatar
    2733 posts
    Member since:
    May 2010

    Posted 12 Sep 2011 Link to this post

    Hello,

    Try with this ComboBox / CheckBoxes

    let me know if any concern.

    Thanks,
    Jayesh Goyani
  5. Phuc
    Phuc avatar
    47 posts
    Member since:
    Aug 2011

    Posted 12 Sep 2011 Link to this post

    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.
  7. Jayesh Goyani
    Jayesh Goyani avatar
    2733 posts
    Member since:
    May 2010

    Posted 12 Sep 2011 Link to this post

    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
  8.
  9. Phuc
    Phuc avatar
    47 posts
    Member since:
    Aug 2011

    Posted 12 Sep 2011 Link to this post

    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.
  11. Phuc
    Phuc avatar
    47 posts
    Member since:
    Aug 2011

    Posted 15 Sep 2011 Link to this post

    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
Back to Top