This is a migrated thread and some comments may be shown as answers.

Check the item onclick Checkboxes=true

10 Answers 244 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
Raghavendra
Top achievements
Rank 1
Raghavendra asked on 16 Jan 2012, 02:43 PM
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

10 Answers, 1 is accepted

Sort by
0
Kaushal
Top achievements
Rank 1
answered on 17 Jan 2012, 10:47 AM
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+"')");
 
 
 
    }
 
 
 
}

0
Kalina
Telerik team
answered on 18 Jan 2012, 07:36 PM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
0
croach01
Top achievements
Rank 1
answered on 07 Mar 2012, 04:35 PM
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'));
}
0
AJ
Top achievements
Rank 2
answered on 23 Jul 2012, 06:20 PM
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?
0
croach01
Top achievements
Rank 1
answered on 23 Jul 2012, 08:05 PM
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();
}
0
AJ
Top achievements
Rank 2
answered on 23 Jul 2012, 08:32 PM
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();
}
0
croach01
Top achievements
Rank 1
answered on 23 Jul 2012, 08:56 PM
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', ''));
0
AJ
Top achievements
Rank 2
answered on 05 Sep 2012, 06:15 PM
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
0
Mark
Top achievements
Rank 1
answered on 10 Jul 2014, 11:57 AM
[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.
0
Hristo Valyavicharski
Telerik team
answered on 15 Jul 2014, 10:51 AM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Tags
ComboBox
Asked by
Raghavendra
Top achievements
Rank 1
Answers by
Kaushal
Top achievements
Rank 1
Kalina
Telerik team
croach01
Top achievements
Rank 1
AJ
Top achievements
Rank 2
Mark
Top achievements
Rank 1
Hristo Valyavicharski
Telerik team
Share this question
or