Hello everyone,
I created a web user control called MultiSelectDropDown using RadComboBox based on the example Telerik.com provided.
When I drag and drop this control into a web page, It works perfect, My problem is , when the page has 2 or more MultiSelectDropDown ,
Only the one works, for the rest of them, when I click check box items, the text in combo box always empty. I hope some one can help me out.I appreciate it in advanced. Below is code:
ASCX code:
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="MultiSelectDropDown.ascx.cs" Inherits="G2WebFramework.RebillRejectedData.Controls.MultiSelectDropDown" %>
<%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %>
<style type="text/css">
.example-panel
{
width:352px;
height: 30px;
margin: 91px 0 0 68px;
background: transparent url("Img/background.png") no-repeat 0 0;
}
.example-panel ul.combobox-panel
{
list-style:none;
margin:156px 0 0 75px;
padding:0;
float:left;
}
.example-panel ul.status-panel
{
list-style:none;
padding:0;
margin:40px 0 0 117px;
float:left;
}
.example-panel ul.status-panel label
{
font: 14px 'Segoe UI', Arial, sans-serif;
color: #fff;
padding-right: 9px;
}
.example-panel ul.status-panel li
{
float:left;
font: 14px 'Segoe UI', Arial, sans-serif;
color: #ffb400;
padding-right: 15px;
}
* html ul.combobox-panel
{
display:inline; /*double margin bug*/
}
.example-panel ul.combobox-panel li
{
float:left;
}
.example-panel ul.combobox-panel li label
{
font: 12px 'Segoe UI', Arial;
color: #fff;
margin-right: 5px;
margin-left: 40px;
}
.combo-item-template input,
.combo-item-template label
{
vertical-align:top;
}
.combo-item-template img
{
vertical-align:top;
}
.example-panel .rent-button
{
float:right;
width: 73px;
height:21px;
background: transparent url('Img/button.png') no-repeat 0 0;
text-decoration:none;
color: #000;
text-align:center;
line-height:21px;
margin: 18px 30px 0 auto;
}
</style>
<script type="text/javascript">
// <![CDATA[
var cancelDropDownClosing = false;
function StopPropagation(e)
{
//cancel bubbling
e.cancelBubble = true;
if (e.stopPropagation)
{
e.stopPropagation();
}
}
function onDropDownClosing()
{
cancelDropDownClosing = false;
}
function onCheckBoxClick(chk)
{
var combo = $find("<%= RadComboBox1.ClientID %>");
//prevent second combo from closing
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
var items = combo.get_items();
//enumerate all 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 + "_chk1");
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);
combo.set_value(text);
}
else
{
//all checkboxes are unchecked
//so reset the controls
combo.set_text("");
}
}
//this method hides the nodes of the treeeview depending on
//the checked items in the first combobox
//this method removes the ending comma from a string
function removeLastComma(str)
{
return str.replace(/,$/,"");
}
function OnClientDropDownClosingHandler(sender, e)
{
//do not close the second combo if
//a checkbox from the first is clicked
e.set_cancel(cancelDropDownClosing);
}
// ]]>
</script>
<%-- <telerik:RadFormDecorator ID="FormDecorator1" runat="server" DecoratedControls="all" ControlsToSkip="Scrollbars"></telerik:RadFormDecorator>--%>
<telerik:RadComboBox ID="RadComboBox1" runat="server" HighlightTemplatedItems="true"
AllowCustomText="true" Width="131px"
OnClientDropDownClosed="onDropDownClosing" ForeColor="Navy"
BorderColor="Navy" AutoPostBack="True" >
<ItemTemplate>
<div id="ListDiv" onclick="StopPropagation(event)" class="combo-item-template" runat="server" >
<asp:CheckBox runat="server" ID="chk1" Checked="false" onclick="onCheckBoxClick(this)" BorderColor="Navy"/>
<asp:Label runat="server" ID="Label1" AssociatedControlID="chk1" ForeColor="Navy">
<%# Eval(RadComboBox1.DataTextField) %>
</asp:Label>
</div>
</ItemTemplate>
</telerik:RadComboBox>
____________________________________
C# code:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace G2WebFramework.RebillRejectedData.Controls
{
public partial class MultiSelectDropDown : System.Web.UI.UserControl
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
RadComboBox1.DataBind();
}
}
//selected checkbox text
public string sText
{
get { return RadComboBox1.Text; }
}
public Object DataSource
{
get { return RadComboBox1.DataSource; }
set { RadComboBox1.DataSource = value; }
}
public string DataTextField
{
get { return RadComboBox1.DataTextField; }
set { RadComboBox1.DataTextField = value; }
}
public string DataValueField
{
get { return RadComboBox1.DataValueField; }
set { RadComboBox1.DataValueField = value; }
}
}
}
Testing code:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using G2WebBL.DataMappers.RebillRejectedData;
namespace G2WebFramework.RebillRejectedData
{
public partial class Test : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BindData_Company();
BindData_LEC();
}
}
internal void BindData_Company()
{
var DBObj = new RebillRejectedDataAccess("BOSS_SB");
var DT = DBObj.SelectCompany();
MultiSelectDropDown1.DataSource = DT;
MultiSelectDropDown1.DataTextField = "Company";
MultiSelectDropDown1.DataValueField = "Company";
}
internal void BindData_LEC()
{
var DBObj = new RebillRejectedDataAccess("BOSS_SB");
var DT = DBObj.SelectLEC();
MultiSelectDropDown2.DataSource = null;
MultiSelectDropDown2.DataSource = DT;
MultiSelectDropDown2.DataTextField = "LEC";
MultiSelectDropDown2.DataValueField = "LEC";
}
}
}