Check the item onclick Checkboxes=true

[Raghavendra]

I have a RadComboBox with CheckBoxes="true". Everything is working fine. However, the user has to click exactly on the checkbox to check/uncheck the item. How to enable the item to toggle checked state when the user clicks anywhere within the item?

I have also set the AutoPostBack="true" for this combobox. In the earlier version, the user could check/uncheck as many items as they want and the postback would occur on taking focus out of the combobox. I updated the project to use Telerik.Web.UI.dll v2011.3.1305.40. But now the control does a postback every time an item is checked/unchecked. How to revert it back to the old behavior?

Thanks,
Raghu

[Kaushal]

Hi,
Please try this.

JavaScript:

<script type="text/javascript">
function toggle(chk , button)
{
    if(document.getElementById(button).value == 'P')
    {
        document.getElementById(chk).disabled = true;
    }
    else
    {
        document.getElementById(chk).disabled = false;
    }
}
</script>

C#:

protected void Page_Load(object sender, EventArgs e)



{



    foreach( RadComboBoxItem item in RadComboBox1.Items)



    {



        CheckBox chk = (CheckBox)item.FindControl("B");







        RadioButton PButton = (RadioButton)item.FindControl("P");



        PButton.Attributes.Add("onclick", "toggle('" + chk.ClientID + "','" + PButton.ClientID + "')");







        RadioButton QButton = (RadioButton)item.FindControl("Q");



        QButton.Attributes.Add("onclick", "toggle('"+chk.ClientID+"','"+QButton.ClientID+"')");



    }



}

[Kalina]

Hello,

Regarding your first question: “How to enable the item to toggle checked state when the user clicks anywhere within the item?” - I am afraid that this is not a supported behaviour. In order to check an item user needs to check the checkbox.

The second issue that you describe is quite strange and I was not able to reproduce it.
Please try reproducing it on your side with this RadComboBox definition:

<telerik:RadComboBox ID="RadComboBox2" runat="server"
CheckBoxes="true" EnableCheckAllItemsCheckBox="true"
AutoPostBack="true">
    <Items>
        <telerik:RadComboBoxItem Text="Arts" />
        <telerik:RadComboBoxItem Text="Biographies" />
        <telerik:RadComboBoxItem Text="Children's Books" />
        <telerik:RadComboBoxItem Text="Computers" />
        <telerik:RadComboBoxItem Text="Cooking" />
        <telerik:RadComboBoxItem Text="History" />
        <telerik:RadComboBoxItem Text="Fiction" />
        <telerik:RadComboBoxItem Text="Mystery" />
        <telerik:RadComboBoxItem Text="Nonfiction" />
        <telerik:RadComboBoxItem Text="Romance" />
        <telerik:RadComboBoxItem Text="Science Fiction " />
        <telerik:RadComboBoxItem Text="Travel" />
    </Items>
</telerik:RadComboBox>

Regards,
Kalina
the Telerik team

[croach01]

Handle the item click event via jQuery:

function pageLoad()
{
     $('.rcbItem').click(checkBoxItemClicked);
}

function checkBoxItemClicked(sender)
{
    var checkBox = $(sender.target).find(':checkbox');
    checkBox.prop('checked', !checkBox.is(':checked'));
}

[AJ]

I realize this is a somewhat old post, but was curious if I could get some input. I've implemented the method that croach01 mentioned, but I would really like it if it would update the combox box text similar to how it is when you actually click on the checkbox. It seems like it would be a better idea if we were to actually use the findItemByValue and select the actual item, but I can't figure out how. Any ideas?

[croach01]

Building upon the method I described earlier, replace the checkBoxItemClicked method with the below code (Replace the id of testBox with the id of your RadComboBox):

function checkBoxItemClicked(sender, e)
{
    // get the combo control
    var comboBox = $find($('div[id$=testBox]:first').get(0).id);

    var itemElement = $(sender.target);

    // get the item by it's index.  The index of the object
    // in the DOM is the same as the index of the item in
    // the combo's list of items.
    var itemIndex = itemElement.index();
    var item = comboBox.get_items().getItem(itemIndex);

    // is the item checked?
    if (itemElement.find(':checkbox').is(':checked'))
        item.uncheck();
    else
        item.check();
}

[AJ]

Wow, I honestly didn't think I'd get a response back that quickly. That method worked perfectly. I happen to have two ComboBoxes on the page, and wasn't sure if there's an easy way to get the radcombobox from the item element. For now, I just put two different click methods for both comboboxes...

I can't thank you enough for your help with this.

function pageLoad() {
    $("#ctl00_contentBody_rcbLocations_DropDown > div > ul > li.rcbItem").click(LocationCheckBoxItemClicked);
    $("#ctl00_contentBody_rcbSalesReps_DropDown > div > ul > li.rcbItem").click(SalesRepCheckBoxItemClicked);
}

function LocationCheckBoxItemClicked(sender, e) {
    // get the combo control
    var comboBox = $find("<%=rcbLocations.ClientID %>");

    var itemElement = $(sender.target);

    // get the item by it's index.  The index of the object
    // in the DOM is the same as the index of the item in
    // the combo's list of items.
    var itemIndex = itemElement.index();
    var item = comboBox.get_items().getItem(itemIndex);

    // is the item checked?
    if (itemElement.find(':checkbox').is(':checked'))
        item.uncheck();
    else
        item.check();
}

function SalesRepCheckBoxItemClicked(sender, e) {
    // get the combo control
    var comboBox = $find("<%=rcbSalesReps.ClientID %>");

    var itemElement = $(sender.target);

    // get the item by it's index.  The index of the object
    // in the DOM is the same as the index of the item in
    // the combo's list of items.
    var itemIndex = itemElement.index();
    var item = comboBox.get_items().getItem(itemIndex);

    // is the item checked?
    if (itemElement.find(':checkbox').is(':checked'))
        item.uncheck();
    else
        item.check();
}

[croach01]

No problem.  You might try the following line to get the combo box control so that you can minimize the functions:

var comboBox = $find(itemElement.parents('div.RadComboBoxDropDown').get(0).id.replace('_DropDown', ''));

[AJ]

Sorry for the late reply back. Moved homes and then just got busy and forgetful. However, your suggestion works like a charm and I greatly appreciate your help! Here is the final version:

function checkBoxItemClicked(sender, e) {
    var itemElement = $(sender.target);
    // get the combo control
    var comboBox = $find(itemElement.parents('div.RadComboBoxDropDown').get(0).id.replace('_DropDown', ''));

    // get the item by it's index.  The index of the object
    // in the DOM is the same as the index of the item in
    // the combo's list of items.
    var itemIndex = itemElement.index();
    var item = comboBox.get_items().getItem(itemIndex);

    // is the item checked?
    if (itemElement.find(':checkbox').is(':checked'))
        item.uncheck();
    else
        item.check();
}

Thank you again!
 - Andrew

[Mark]

[quote]Kalina said:Hello,

Regarding your first question: “How to enable the item to toggle checked state when the user clicks anywhere within the item?” - I am afraid that this is not a supported behaviour. In order to check an item user needs to check the checkbox. [/quote]

Hi Kalina,

Is this function something which will be addressed in coming releases? I have had to add a note by the control for the user advising to only click on the checkbox, and nowhere else on the row. Currently the checked state will not be reflected correctly on the OnItemChecked method through an autopostback if anything but the checkbox is clicked on within the item's row.

[Hristo Valyavicharski]

Hi Matt,

This behavior has been changed. You can test it here:
http://demos.telerik.com/aspnet-ajax/combobox/examples/functionality/checkboxes/defaultcs.aspx

<telerik:RadComboBox ID="RadComboBox1" runat="server" CheckBoxes="true" AutoPostBack="true" OnItemChecked="RadComboBox1_ItemChecked">
    <Items>
        <telerik:RadComboBoxItem Text="Item 1" Value="1"/>
        <telerik:RadComboBoxItem Text="Item 2" Value="2"/>
    </Items>
</telerik:RadComboBox>

Regards,
Hristo Valyavicharski
Telerik