Looping through the comboBox with checkbox inside in javascript

21 posts, 0 answers
  1. sanjeev
    sanjeev avatar
    6 posts
    Member since:
    Apr 2008

    Posted 21 Apr 2008 Link to this post

    I have a combobox which contains   check boxes  .i want to validate in the client side that the user had selected  at least one checkbox in the combobox,i m not able to naviagate to the child controls of the combobox in javascript.

    plz sent me a solution as soon as possible.

    VERY URGENT
    regards
    sanjeev
  2. Simon
    Admin
    Simon avatar
    2281 posts

    Posted 23 Apr 2008 Link to this post

    Hi sanjeev,

    Here is a sample implementation of the approach:

            function getItemCheckBox(item) 
            { 
                //Get the 'div' representing the current RadComboBox Item. 
                var itemDiv = document.getElementById(item.ClientID); 
                 
                //Get the collection of all 'input' elements in the 'div' (which are contained in the Item). 
                var inputs = itemDiv.getElementsByTagName("input"); 
                 
                for (var inputIndex = 0; inputIndex < inputs.length; inputIndex++) 
                {    
                    var input = inputs[inputIndex]; 
                     
                    //Check the type of the current 'input' element. 
                    if (input.type == "checkbox"
                    { 
                        return input; 
                    } 
                } 
                 
                return null
            } 
             
            function iterateThroughCheckBoxes(combobox) 
            { 
                var items = combobox.Items; 
                 
                var itemsCount = items.length; 
                 
                for (var itemIndex = 0; itemIndex < itemsCount; itemIndex++) 
                { 
                    var item = items[itemIndex]; 
                    
                    var checkbox = getItemCheckBox(item); 
                     
                    if (checkbox) 
                    { 
                        //Check whether the Item's CheckBox) is checked. 
                        if (checkbox.checked) 
                        { 
                            //Perform necessary operations... 
                        } 
                        /*
                        else
                        {
                            //Perform necessary operations...
                        }
                        */ 
                    } 
                } 
            } 

    I hope it is useful.

    Sincerely yours,
    Simon
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  3. sanjeev
    sanjeev avatar
    6 posts
    Member since:
    Apr 2008

    Posted 12 May 2008 Link to this post

    Hi Simon,
    Thanks for the reply ,
    But i have a issue in the    IterateThroughCheckBox     function.
    First  r u Passing the ClientId of the RadCombobox in the Aspx.cs Page ,
    Second i am not getting the

    var items=combobox.Items.

    This "combobox.Items"  is not recognised in javascript.
    so the function is not proceeding further , plz suggest an aleternative.

    Very Urgent ,
    Right now i am using the client id generated by the server in the HTML page to get the reference,but it may cause issue in future.

    regards
    sanjeev

  4. Simon
    Admin
    Simon avatar
    2281 posts

    Posted 12 May 2008 Link to this post

    Hi sanjeev,

    The combobox argument in the iterateThroughCheckBoxes function is a reference to the RadComboBox client-side object. You can obtain this reference in the caller function like this (where the "RadComboBox1" would be the ClientID of the control):

    function caller() 
        .... 
        var combobox = $find("<%= RadComboBox1.ClientID %>"); 
     
        iterateThroughCheckBoxes(combobox); 
        .... 

    Most probably the reason for the invalid Items collection is that the reference to the RadComboBox is also invalid. Please check whether you had retrieved it correctly and let me know how it goes.

    Kind regards,
    Simon
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  5. sanjeev
    sanjeev avatar
    6 posts
    Member since:
    Apr 2008

    Posted 15 May 2008 Link to this post

    Hi Simon,
    Any post Back is clearing the checked items of the checkBox in the Rad ComboBox.How To Retain it.
    Very URGENT

    regards sanjeev
  6. Simon
    Admin
    Simon avatar
    2281 posts

    Posted 16 May 2008 Link to this post

    Hello sanjeev,

    Assuming that you have bound the RadComboBox to a data source, you should manually store the states of the CheckBoxes in the data source. This you could do through AJAX callbacks to the server whenever the user clicks on a CheckBox. Finally, you need to bind the RadComboBox on every postback to restore the states.

    I have attached a sample project which illustrates how the states can be persisted in an Access Data Base. You could use a Data Base Server or a Session Data Source instead without any complications.

    I hope this helps.

    Regards,
    Simon
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  7. Hugo
    Hugo avatar
    1 posts
    Member since:
    Jun 2008

    Posted 30 Jun 2008 Link to this post

    Hi,

    I've tried several examples from the website now, all about how to inherate through the checkboxes if they are in a template of a DropDrownBox.

    All worked fine until I've put the code into a web user control.

    As soon as I do this, the Javascript cannot reference the Radcombo1 anymore.

    Can someone help please ?

    Regards,
    Hugo
  8. Simon
    Admin
    Simon avatar
    2281 posts

    Posted 01 Jul 2008 Link to this post

    Hi Hugo,

    Since the RadComboBox is nested inside a WebUserControl you need to first find its instance properly before getting its ClientID.

    Please see in this help article how this can be done (the approach is basically the same for WebUserControls).

    I hope this helps.

    Regards,
    Simon
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  9. MStarr13
    MStarr13 avatar
    5 posts
    Member since:
    Oct 2006

    Posted 16 Sep 2009 Link to this post

    Alright guys, this flat out does not work.

    I have tried every single method to can to get into the items collection. It does not load it. I can call the "Set_Text" function so I know I am in the control on the client site. "Items" or "get_Items()" returns null objects.

    There are contradicting examples all over this site. Is there a method to access the Items collection for a radcombobox from within the OnClientDropDownClosing(item) function or not? ClientID is not returned and when I hard code it to get the object these items are still not there.
  10. MStarr13
    MStarr13 avatar
    5 posts
    Member since:
    Oct 2006

    Posted 16 Sep 2009 Link to this post

    You guys really need to go into http://www.telerik.com/help/aspnet-ajax/ and do some MAJOR updating of your samples and UI object reference.

    With these samples I would have no way to really do what they are specifying here. No mention of the get_Items, get_count, get_id, getitem, functions at all. Without these items it was virtually impossible for me to traverse the combo box, access its items collection, cycle through that collection or get values from checkboxes within those collections.

    This translated to hundreds of dollars in extra consulting costs for my client as we had to guess on what you guys had here as the documentation provided was inaccurate. I love your control suite, I really do, but this documentation issue needs to be resolved guys.
  11. Veselin Vasilev
    Admin
    Veselin Vasilev avatar
    2992 posts

    Posted 17 Sep 2009 Link to this post

    Hi,

    Actually the topics are there:


    Sincerely yours,
    Veselin Vasilev
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  12. Esther Nirmala
    Esther Nirmala avatar
    19 posts
    Member since:
    Apr 2010

    Posted 13 Apr 2010 Link to this post

    Hi,

        I used the sample u gave for looping thru the checkboxes in rad combo.. it was not working.. i did som changes..
      var combobox = $find(Obj);  
      var items = combobox.get_items();  
     
        var itemsitemsCount = items._array.length;  
     
        for (var itemIndex = 0; itemIndex < itemsCount; itemIndex++) {  
            var item = items._array[itemIndex];  
     
            var checkbox = getItemCheckBox(item);  
     
            if (checkbox) {  
                //Check whether the Item's CheckBox) is checked.    
                if (checkbox.checked) {  
                    //Perform necessary operations...    
                }  
                /*   
                else   
                {   
                //Perform necessary operations...   
                }   
                */  
            }  
        }  
     
    ---------  
     
    function getItemCheckBox(item) {  
        //Get the 'div' representing the current RadComboBox Item.    
        var itemDiv = document.getElementById(item.ClientID);  
     
        //Get the collection of all 'input' elements in the 'div' (which are contained in the Item).    
        var inputs = itemDiv.getElementsByTagName("input");  
     
        for (var inputIndex = 0; inputIndex < inputs.length; inputIndex++) {  
            var input = inputs[inputIndex];  
     
            //Check the type of the current 'input' element.    
            if (input.type == "checkbox") {  
                return input;  
            }  
        }  
     
        return null;  
    }       
     

    Am getting error in this line :  var itemDiv = document.getElementById(item.ClientID);
    item is object.. for that no client Id property is there..
    How to validate atleast one check box is checked in javascript..

    Thanks
    Nimmi
  13. Megan Vee
    Megan Vee avatar
    40 posts
    Member since:
    Mar 2010

    Posted 16 Aug 2010 Link to this post

    I am new to javascript and telerik.
    Trying to iterate thru a radcombobox with checkboxes like the above, but I can't even get past the first step.
    I am trying to call this code:

    function iterateThroughCheckBoxes(combobox) 
            { 
                var items = combobox.Items; 
    or
    function iterateThroughCheckBoxes(combobox) 
            { 
    var combobox = $find(Obj);

    from the RadComboBox (e.g. RadComboBox1)
    using:
    OnClientDropDownClosed="OnClientDropDownClosed"
    or
    OnClientDropDownClosed="OnClientDropDownClosed(this)"

    but using either of the above methods, combobox is null.

    What am I doing wrong?

    Thanks for any help.
    -Megan

  14. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 16 Aug 2010 Link to this post

    Hello Megan,

    I am not sure about how you are calling the function "iterateThroughCheckBoxes()". The client object for the RadComboBox can be accessed directly from the event arguements. Check out the following client code.

    ASPX:
    <telerik:RadComboBox ID="RadComboBox1" runat="server" OnClientDropDownClosed="OnClientDropDownClosed">
        <ItemTemplate>
            <asp:CheckBox ID="CheckBox1" runat="server" />
        </ItemTemplate>
        <Items>
           . . . . . .
        </Items>
    </telerik:RadComboBox>

    Java Script:
    <script type="text/javascript">
         function OnClientDropDownClosed(sender,args) {
            var combobox = sender;
            iterateThroughCheckBoxes(combobox);
        }
    </script>

    Thanks,
    Princy.
  15. Megan Vee
    Megan Vee avatar
    40 posts
    Member since:
    Mar 2010

    Posted 16 Aug 2010 Link to this post

    Thanks Princy - 
    But this is not recognized at all:

    var combobox = sender;

    combobox = null
    Am I missing something?
    -M
  16. Simon
    Admin
    Simon avatar
    2281 posts

    Posted 16 Aug 2010 Link to this post

    Hi Megan Vee,

    Please make also sure you are using OnClientDropDownClosed="OnClientDropDownClosed" instead of OnClientDropDownClosed="OnClientDropDownClosed(this)", which is incorrect.

    Best wishes,
    Simon
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  17. Megan Vee
    Megan Vee avatar
    40 posts
    Member since:
    Mar 2010

    Posted 16 Aug 2010 Link to this post

    Thanks Simon - 
    I have tried it both ways and neither way works.
    boo.
  18. Simon
    Admin
    Simon avatar
    2281 posts

    Posted 16 Aug 2010 Link to this post

    Hi Megan Vee,

    This is strange; the event works fine on my side.

    Perhaps there is something else in your code that I am missing. Can you please paste here the definition of the RadComboBox that you are using as well as the relevant JS event handlers and functions?

    Sincerely yours,
    Simon
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  19. Megan Vee
    Megan Vee avatar
    40 posts
    Member since:
    Mar 2010

    Posted 16 Aug 2010 Link to this post

    Thanks for the help Simon.

    <telerik:RadComboBox ID="RadComboBox3"
        runat="server"
        Skin="Outlook"
        HighlightTemplatedItems="true"
        AllowCustomText = "true"
        Text = ""
        EnableVirtualScrolling="true" MarkFirstMatch="True"
        OnClientDropDownClosing="OnClientDropDownClosing_UpdateText"
        >
        <ItemTemplate>
        <div onclick="StopPropagation(event)">  
            <asp:CheckBox ID="CheckBox1" runat="server" Checked="True" OnClick="checkboxClick(this);" Text = '<%# DataBinder.Eval(Container, "Text") %>' />
        </div>
        </ItemTemplate>
    </telerik:RadComboBox>               

    I have tried several ways to get var items to recognize the dropdown - with no success.
    The rest of the code has not been tested, so don't worry about that [yet]. ;)

                function OnClientDropDownClosing_UpdateText(sender, eventArgs) {
    //                var combobox = $find(sender);
    //                var items = combobox.get_items();
     
                    var items = sender;  //.get_items(); //document.getElementById(sender.get_id()).Items;  //$find('<%= RadComboBox3.ClientID %>'); //combobox.Items; 
                    var itemsCount = items.length;
     
                    alert(itemsCount);
     
                    var label = " - bla - ";
                    var count = 0;
     
                    for (var itemIndex = 0; itemIndex < itemsCount; itemIndex++) {
                        var item = items[itemIndex];
                        var checkbox = getItemCheckBox(item);
     
                        alert(checkbox);
     
                        if (checkbox) {
                            if (checkbox.checked) {
                                count++;
                                if (label != "") {
                                    label = items[i].text;
                                    alert(label);
                                }
                            }
                        }
                    }
                    if (count > 1) {
                        label = count + " selected";
                    }
                    alert(label + " -- final");
     
                    document.getElementById(sender.get_id()).text = label;
     
                }
                function getItemCheckBox(item) {
                    //Get the 'div' representing the current RadComboBox Item.
                    var itemDiv = document.getElementById(item.ClientID);
     
                    alert("got itemdiv");
                     
                    //Get the collection of all 'input' elements in the 'div' (which are contained in the Item).
                    var inputs = itemDiv.getElementsByTagName("input");
     
                    alert("got iteminput");
                     
                    for (var inputIndex = 0; inputIndex < inputs.length; inputIndex++) {
                        var input = inputs[inputIndex];
                        alert("loop "+ inputIndex);
                     
     
                        //Check the type of the current 'input' element.
                        if (input.type == "checkbox") {
                            return input;
                        }
                    }

    Thanks for any pointers. 
    -Megan
  20. Simon
    Admin
    Simon avatar
    2281 posts

    Posted 17 Aug 2010 Link to this post

    Hi Megan Vee,

    Thank you for the code.

    I modified it and now it works without errors:
    function OnClientDropDownClosing_UpdateText(sender, eventArgs) {
        var items = sender.get_items();
        var itemsCount = items.get_count();
      
        alert(itemsCount);
      
        var label = " - bla - ";
        var count = 0;
      
        for (var itemIndex = 0; itemIndex < itemsCount; itemIndex++) {
            var item = items.getItem(itemIndex);
            var checkbox = getItemCheckBox(item);
      
            alert(checkbox);
      
            if (checkbox) {
                if (checkbox.checked) {
                    count++;
                    if (label != "") {
                        label = items.getItem(itemIndex).get_text();
                        alert(label);
                    }
                }
            }
        }
        if (count > 1) {
            label = count + " selected";
        }
        alert(label + " -- final");
      
        sender.get_text() = label;
     
    }
     
    function getItemCheckBox(item) {
        //Get the 'div' representing the current RadComboBox Item.
        var itemDiv = item.get_element();
     
        alert("got itemdiv");
     
        //Get the collection of all 'input' elements in the 'div' (which are contained in the Item).
        var inputs = itemDiv.getElementsByTagName("input");
     
        alert("got iteminput");
     
        for (var inputIndex = 0; inputIndex < inputs.length; inputIndex++) {
            var input = inputs[inputIndex];
            alert("loop " + inputIndex);
     
     
            //Check the type of the current 'input' element.
            if (input.type == "checkbox") {
                return input;
            }
        }
    }

    You can find more info about client-side API of RadComboBox and its related objects in the following help articles:

    Kind regards,
    Simon
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  21. Megan Vee
    Megan Vee avatar
    40 posts
    Member since:
    Mar 2010

    Posted 18 Aug 2010 Link to this post

    Yay! Thanks so much Simon. I swear I tried the sender.get_items() method, but must have had something else wrong at the same time.
    I used your code, removed all of my testing alerts, changed this:
    sender.get_text() = label;
    to
    sender.set_text(label);

    and everything works!
    :)

    Thanks again, Megan
Back to Top