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
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
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
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:
Regards,
Kalina
the Telerik team
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.
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:
Thank you again!
- Andrew
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.
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
Hi Matt,
This behavior has been changed. You can test it here:
http://demos.telerik.com/aspnet-ajax/combobox/examples/functionality/checkboxes/defaultcs.aspx
Regards,
Hristo Valyavicharski
Telerik
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.