Redo multiple selection of checkboxes with in combo box

1 posts, 0 answers
  1. james
    james avatar
    1 posts
    Member since:
    Sep 2010

    Posted 23 Sep 2010 Link to this post

    Hai Telerik,

    i have a Employee combo box, with in which i bind checkboxes dynamically with employee name as text . used Item Template to do this.
     
    <telerik:RadComboBox ID="cmbEmployee" Height="150px" DropDownWidth="150px" DataTextField="employee_name"
                                                    DataValueField="employee_name" runat="server" Skin="Office2007" Width="150px"
                                                    TabIndex="8" HighlightTemplatedItems="True" meta:resourcekey="cmbTechnicianResource1">
                                                    <HeaderTemplate>
                                                        <table style="font-family: Verdana; font-size: xx-small">
                                                            <tr>
                                                                <td>
                                                                    Employee
                                                                </td>
                                                            </tr>
                                                        </table>
                                                    </HeaderTemplate>
                                                    <ItemTemplate>
                                                       <div onclick="stopProp(event)">
                                                        <asp:CheckBox ID="chk" runat="server" onClick="onClick(event)" Text='<%#  
    DataBinder.Eval(Container.DataItem, "employee_name") %>' meta:resourcekey="chkResource2" />
                                                       </div>                                                            
                                                                 
                                                    </ItemTemplate>
                                                    <CollapseAnimation Duration="200" Type="OutQuint" />
                                                </telerik:RadComboBox>

    i learned multi selecting check boxes with in combo box from the forum.
    My combo box is having 'Select All' check box as a first item and other combo box items(list of employees) as check boxes. Now when i check 'Select All' check box, all employees (check boxes) should be checked. And when i uncheck 'Select All'  check box, all employees must be unchecked. Also after unchecking 'Select All', i should be able to check selected employees. Finally, text of all checked check boxes (except 'Select All') should be set as text to Employee combo box.

    My java script is as below,

    function StopProp(e) {
                e.cancelBubble = true;
                            if (e.stopPropagation) {
                                e.stopPropagation();
                            }
            }
     
    function onClick(e) {
                
                var combo = $find("<%= cmbEmployee.ClientID %>");
                var newText = "";
                var items = combo.get_items();
     
                for (var i = 0; i < items.get_count(); i++) {
                    var item = items.getItem(i);
                    var checkbox = item.get_element().getElementsByTagName("input")[0];
     
                    if (item.get_text() != "Select All" && checkbox.checked) {
                        newText += item.get_text() + ", ";
                    }
                    if (item.get_text() == "Select All" && checkbox.checked == true) {
                        var newText1 = "";
                        newText = "";
                        for (var i = 0; i < items.get_count(); i++) {
                            var item = items.getItem(i);
                            var checkbox = item.get_element().getElementsByTagName("input")[0];
                            newText1 = item.get_text();
                            checkbox.checked = true;
                            if (newText1 != "Select All") {
                                newText += item.get_text() + ", ";
                            }
                        }
                    }
                    
                }
                combo.set_text(newText);
            }

    Now the behavior is like,

    1. When Click on 'Select All' All the employees are checked and text of those check boxes (employees) set as text to combo box. Now i am not able to uncheck employees.
    2. when i uncheck 'Select All', now i am able to check or uncheck employees and corresponding checked employee name (check box text) is set to combo box.
    3. Now i need to uncheck all the employees with unchecking 'Select All' check box. For this i have added the following code as another condition with in 'for' loop.


    if (item.get_text() == "----Select----" && checkbox.checked == false) {
                                       var newText1 = "";
                                       newText = "";
                                       for (var i = 0; i < items.get_count(); i++) {
                                           var item = items.getItem(i);
                                           var checkbox = item.get_element().getElementsByTagName("input")[0];
                                           newText1 = item.get_text();
                                           checkbox.checked = false;
                                           newText = "----Select----";
                                       }
                                   }

    Now, when i check 'Select All' all the employees are checked and when i uncheck 'Select All' all the employees are unchecked. Setting text to combo box is also fine. But now i am not able to check/uncheck selected employees. How can i achieve this?
    Please reply me.
Back to Top