Hi all,
I am using RadCombobox which contains CheckBoxes as its items. When a checkbox item is checked, its Text will be displayed in Combobox's Text with the delimiter is ",".
It's OK. But I get problem when user clicks/selects on an item instead of checking it. Text of Combobox will be replaced by Text of selecting item.
Please tell me how can I prevent this action ?
Thanks in advance
I am using RadCombobox which contains CheckBoxes as its items. When a checkbox item is checked, its Text will be displayed in Combobox's Text with the delimiter is ",".
It's OK. But I get problem when user clicks/selects on an item instead of checking it. Text of Combobox will be replaced by Text of selecting item.
Please tell me how can I prevent this action ?
Thanks in advance
5 Answers, 1 is accepted
0

Jayesh Goyani
Top achievements
Rank 2
answered on 12 Sep 2011, 09:05 AM
0

Phuc
Top achievements
Rank 1
answered on 12 Sep 2011, 10:14 AM
Hi Jayesh Goyani,
In list of items in RadCombobox, there is an "All" item. This means when user checks/unchecks this item, the other items will be checked/unchecked (and doing some things in code-behind). How can I know which item has been checked/unchecked to determine the next action ?
So in my current case, I use ItemTemplate which contains a CheckBox control but I get the problem with setting (automatically) text for RadCombobox's Text.
Could you give me the solution for my case?
Thanks for your help.
In list of items in RadCombobox, there is an "All" item. This means when user checks/unchecks this item, the other items will be checked/unchecked (and doing some things in code-behind). How can I know which item has been checked/unchecked to determine the next action ?
So in my current case, I use ItemTemplate which contains a CheckBox control but I get the problem with setting (automatically) text for RadCombobox's Text.
Could you give me the solution for my case?
Thanks for your help.
0

Jayesh Goyani
Top achievements
Rank 2
answered on 12 Sep 2011, 06:25 PM
Hello,
sorry for late reply because busy work/job not able to give reply early.
let me know if any concern.
Thanks,
Jayesh Goyani
sorry for late reply because busy work/job not able to give reply early.
<
telerik:RadComboBox
ID
=
"RadComboBoxWithCheckbox"
runat
=
"server"
EmptyMessage
=
"--Select Name--"
HighlightTemplatedItems
=
"true"
AllowCustomText
=
"true"
Width
=
"400px"
>
<
HeaderTemplate
>
<
asp:CheckBox
ID
=
"chkSelectAll"
runat
=
"server"
onClick
=
"HeaderCheckChanged(this,'RadComboBoxWithCheckbox');"
/>
<
asp:Label
runat
=
"server"
ID
=
"lblClassSelectAll"
Text
=
"Select All"
AssociatedControlID
=
"chkSelectAll"
></
asp:Label
>
</
HeaderTemplate
>
<
ItemTemplate
>
<
div
onclick
=
"StopPropagation(event)"
>
<
asp:CheckBox
runat
=
"server"
ID
=
"chkddlID"
onclick
=
"onCheckBoxClick(this,'RadComboBoxWithCheckbox')"
Text='<%#Eval("Name") %>' />
<
asp:Label
runat
=
"server"
ID
=
"labelddlID"
Text='<%#Eval("ID") %>' Visible="false"></
asp:Label
>
</
div
>
</
ItemTemplate
>
</
telerik:RadComboBox
>
<telerik:RadCodeBlock ID=
"RadCodeBlock1"
runat=
"server"
>
<script type=
"text/javascript"
>
function
HeaderCheckChanged(chkbx, combo) {
var
headerchk = chkbx.checked;
combo = $find(
"<%= RadComboBoxWithCheckbox.ClientID %>"
);
cancelDropDownClosing =
true
;
//holds the text of all checked items
var
text =
""
;
//holds the values of all checked items
var
values =
""
;
//get the collection of all items
//enumerate all items
var
items = combo.get_items();
for
(
var
i = 0; i < items.get_count(); i++) {
var
item = items.getItem(i);
//get the checkbox element of the current item
var
chk1 = $get(combo.get_id() +
"_i"
+ i +
"_chkddlID"
);
chk1.checked = headerchk;
if
(chk1.checked) {
text += item.get_text() +
", "
;
values += item.get_value() +
","
;
}
}
//remove the last comma from the string
text = removeLastComma(text);
values = removeLastComma(values);
if
(text.length > 0) {
//set the text of the combobox
combo.set_text(text);
}
else
{
//all checkboxes are unchecked
//so reset the controls
combo.set_text(
""
);
}
}
function
onCheckBoxClick(chk, combo) {
combo = $find(
"<%= RadComboBoxWithCheckbox.ClientID %>"
);
cancelDropDownClosing =
true
;
var
text =
""
;
var
values =
""
;
var
items = combo.get_items();
for
(
var
i = 0; i < items.get_count(); i++) {
var
item = items.getItem(i);
var
chk1 = $get(combo.get_id() +
"_i"
+ i +
"_chkddlID"
);
if
(chk1.checked) {
text += item.get_text() +
", "
;
values += item.get_value() +
","
;
}
}
text = removeLastComma(text);
values = removeLastComma(values);
if
(text.length > 0) {
combo.set_text(text);
}
else
{
combo.set_text(
""
);
}
}
function
removeLastComma(str) {
return
str.slice(0, -1);
}
function
StopPropagation(e) {
e.cancelBubble =
true
;
if
(e.stopPropagation) {
e.stopPropagation();
}
}
</script>
</telerik:RadCodeBlock>
protected
void
Page_Load(
object
sender, EventArgs e)
{
if
(!IsPostBack)
{
dynamic data =
new
[] {
new
{ ID = 1, Name =
"Name1"
},
new
{ ID = 2, Name =
"Name2"
},
new
{ ID = 3, Name =
"Name3"
},
new
{ ID = 4, Name =
"Name4"
},
new
{ ID = 5, Name =
"Name5"
}
};
RadComboBoxWithCheckbox.DataSource = data;
RadComboBoxWithCheckbox.DataTextField =
"Name"
;
RadComboBoxWithCheckbox.DataValueField =
"ID"
;
RadComboBoxWithCheckbox.DataBind();
}
}
let me know if any concern.
Thanks,
Jayesh Goyani
0

Phuc
Top achievements
Rank 1
answered on 13 Sep 2011, 04:52 AM
Thanks for your code, Jayesh Goyani.
It works fine but there is the same bug (SelectedIndexChanged) when user clicks on (the points in the left of CheckBoxes or the right of Text of CheckBoxes, text of combobox is also changed without ticking CheckBoxes).
You can see the attached file for detail.
P/s : Please try to click on the left-points of CheckBox item, Text of Combobox always changed. But for the right of text of CheckBox item, it not always.
It works fine but there is the same bug (SelectedIndexChanged) when user clicks on (the points in the left of CheckBoxes or the right of Text of CheckBoxes, text of combobox is also changed without ticking CheckBoxes).
You can see the attached file for detail.
P/s : Please try to click on the left-points of CheckBox item, Text of Combobox always changed. But for the right of text of CheckBox item, it not always.
0

Phuc
Top achievements
Rank 1
answered on 15 Sep 2011, 07:50 AM
I found the solution by using CSS and Javascript as below :
Regards,
Phuc
.RadComboBoxDropDown .rcbItem,
.RadComboBoxDropDown .rcbHovered,
.RadComboBoxDropDown .rcbDisabled,
.RadComboBoxDropDown .rcbLoading
{
margin
:
0px
0px
!important
;
padding
:
0px
0px
!important
;
}
<!--OnClientSelectedIndexChanging="Disable" -- for Firefox-->
<
telerik:RadComboBox
runat
=
"server"
ID
=
"radCmbReportType"
Width
=
"200px"
HighlightTemplatedItems
=
"true"
AllowCustomText
=
"true"
OnClientSelectedIndexChanging
=
"Disable"
>
<
ItemTemplate
>
<
div
onclick
=
"Disable();"
>
<!--For IE-->
<
asp:CheckBox
runat
=
"server"
ID
=
"CheckBox"
Text='<%# DataBinder.Eval(Container, "Text") %>' OnCheckedChanged="ReportTypeCheckBoxItem_CheckedChanged" AutoPostBack="true"/>
</
div
>
</
ItemTemplate
>
</
telerik:RadComboBox
>
function Disable() {
agent = jQuery.browser;
if (agent.msie) {
window.event.cancelBubble = true;
} else {
event.stopPropagation();
}
}
Regards,
Phuc