Looping through the comboBox with checkbox inside in javascript

[sanjeev]

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

[Simon]

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

[sanjeev]

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

[Simon]

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

[sanjeev]

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

[Simon]

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

[Hugo]

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

[Simon]

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

[MStarr13]

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.

[MStarr13]

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.

[Veselin Vasilev]

Hi,

Actually the topics are there:

• RadComboBox client object
• RadComboBoxItem client object
• RadCombBoxItemCollection client object

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.

[Esther Nirmala]

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

[Megan Vee]

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

[Princy]

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.

[Megan Vee]

Thanks Princy - 
But this is not recognized at all:

var combobox = sender;

combobox = null
Am I missing something?
-M

[Simon]

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

[Megan Vee]

Thanks Simon - 
I have tried it both ways and neither way works.
boo.

[Simon]

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

[Megan Vee]

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

[Simon]

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:

• RadComboBox object
• RadComboBoxItemCollection object
• RadComboBoxItem object

Kind regards,
Simon
the Telerik team

[Megan Vee]

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