Step 1: Display checkbox in Telerik Combobox
<telerik:RadComboBox ID="ddlStream" runat="server" EmptyMessage="Type Program Name" DataTextField='Program' DataValueField='Code' Style="display: none; width: 300px;" ZIndex="999999" Filter="Contains">
<ItemTemplate>
<asp:CheckBox runat="server" ID="chk1" Width="300" Text='<%#Eval("Program") %>' onclick="onCheckBoxClick(this)" />
</ItemTemplate>
</telerik:RadComboBox>
Step 2: Function to select any checkbox in the RadCombobox
function onCheckBoxClick(element) {
var text = "";
var values = "";
var combo = $find("<%= ddlStream.ClientID %>");
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 + "_chk1");
if (chk1.checked) {
text += item.get_text() + ",";
//Text of selected checkbox of ComboBox
values += item.get_value() + ", ";
// Values of selected checkbox of ComboBox
}
}
text = removeLastComma(text);
$("#<%=txtBox.ClientID %>").val(text); // Text generated above displayed in textbox.
prg = text;
}
//This method removes the ending comma from a string.
function removeLastComma(str) {
return str.replace(/,$/, "");
}
Step 3. (OPTIONAL) CSS changes that may be required to display the combobox if displayed in popup (Values added need to be updated as per requirement.)
<style type="text/css">
.RadComboBoxDropDown
{
z-index: 999999999999 !important;
}
#ctl00_ContentPlaceHolder1_ddlStream_DropDown
{
width: 320px !important;
}
.rcbFocused
{
width: 320px !important;
}
#ctl00_ContentPlaceHolder1_ddlStream table
{
width: 320px !important;
}
</style>
<telerik:RadComboBox ID="ddlStream" runat="server" EmptyMessage="Type Program Name" DataTextField='Program' DataValueField='Code' Style="display: none; width: 300px;" ZIndex="999999" Filter="Contains">
<ItemTemplate>
<asp:CheckBox runat="server" ID="chk1" Width="300" Text='<%#Eval("Program") %>' onclick="onCheckBoxClick(this)" />
</ItemTemplate>
</telerik:RadComboBox>
Step 2: Function to select any checkbox in the RadCombobox
function onCheckBoxClick(element) {
var text = "";
var values = "";
var combo = $find("<%= ddlStream.ClientID %>");
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 + "_chk1");
if (chk1.checked) {
text += item.get_text() + ",";
//Text of selected checkbox of ComboBox
values += item.get_value() + ", ";
// Values of selected checkbox of ComboBox
}
}
text = removeLastComma(text);
$("#<%=txtBox.ClientID %>").val(text); // Text generated above displayed in textbox.
prg = text;
}
//This method removes the ending comma from a string.
function removeLastComma(str) {
return str.replace(/,$/, "");
}
Step 3. (OPTIONAL) CSS changes that may be required to display the combobox if displayed in popup (Values added need to be updated as per requirement.)
<style type="text/css">
.RadComboBoxDropDown
{
z-index: 999999999999 !important;
}
#ctl00_ContentPlaceHolder1_ddlStream_DropDown
{
width: 320px !important;
}
.rcbFocused
{
width: 320px !important;
}
#ctl00_ContentPlaceHolder1_ddlStream table
{
width: 320px !important;
}
</style>
No comments:
Post a Comment