[Solved] Custom multi select combo box

[bala]

Hi,
I am trying to create a user control to achieve multi select combo box functionality using RadComboBox. When click on check box of a combo box item i get System.Data.DataRowView instead of actual text value. Here are my code and pl help.

MultiSelectCombo.ascx
===================

<

 

telerik:RadComboBox runat="server" Skin="Web20" ID="RadComboBox1" Height="190px" Width="420px"

 

 

MarkFirstMatch="true"

 

 

EnableLoadOnDemand="true"

 

 

HighlightTemplatedItems="true"

 

 

OnClientItemsRequested="UpdateItemCountField"

 

 

OnDataBound="RadComboBox1_DataBound"

 

 

OnItemsRequested="RadComboBox1_ItemsRequested">

 

 

<ItemTemplate>

 

 

<asp:CheckBox runat="server" ID="chk1" onclick="onCheckBoxClick(this);" />

 

 

<asp:Label runat="server" ID="Label1" AssociatedControlID="chk1"><%# Eval("CodeDesc")%>

 

 

</asp:Label>

 

 

</ItemTemplate>

 

 

<FooterTemplate>

 

A total of

<asp:Literal runat="server" ID="RadComboItemsCount" /> items

 

 

</FooterTemplate>

 

 

</telerik:RadComboBox>

MultiSelectCombo.ascx.cs
=====================

 

public

 

partial class MultiSelectCombo : BaseControl

 

{

 

protected void Page_Load(object sender, EventArgs e)

 

{

 

if (!Page.ClientScript.IsClientScriptBlockRegistered("MultiSelectComboIDBlock"))

 

{

Page.ClientScript.RegisterClientScriptBlock(

this.Page.GetType(), "MultiSelectComboIDBlock", "var MultiSelectComboID = '" + RadComboBox1.ClientID + "';", true);

 

}

}

 

protected void RadComboBox1_DataBound(object sender, EventArgs e)

 

{

 

//set the initial footer label

 

 

 

 

((

Literal)RadComboBox1.Footer.FindControl("RadComboItemsCount")).Text = Convert.ToString(RadComboBox1.Items.Count);

 

}

 

protected void RadComboBox1_ItemsRequested(object sender, RadComboBoxItemsRequestedEventArgs e)

 

{

RadComboBox1.DataSource =

Shared.tdsStaticReference.User;

 

RadComboBox1.DataBind();

}

}

 

MultiSelectCombo.js
================

 

function

 

UpdateItemCountField(sender, args) {

 

 

//set the footer text

 

 

 

 

 

sender.get_dropDownElement().lastChild.innerHTML =

"A total of " + sender.get_items().get_count() + " items";

 

}

 

 

var cancelDropDownClosing = false;

 

 

function onDropDownClosing() {

 

cancelDropDownClosing =

false;

 

}

 

function onCheckBoxClick(chk) {

 

 

var combo = $find(MultiSelectComboID);

 

alert(combo);

 

//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 = removeLastSemicolon(text);

values = removeLastComma(values);

 

if (text.length > 0) {

 

 

//set the text of the combobox

 

 

 

 

 

combo.set_text(text);

combo.set_value(values);

}

 

else {

 

 

//all checkboxes are unchecked

 

 

 

 

 

 

//so reset the controls

 

 

 

 

 

combo.set_text(

"");

 

combo.set_value(

"");

 

}

}

 

 

//this method removes the ending comma from a string

 

 

 

 

 

 

function removeLastComma(str) {

 

 

return str.replace(/,$/, "");

 

}

 

function removeLastSemicolon(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);

}

 

 

[Simon]

Hi bala,

You need to set the DataTextField and (optionally) the DataValueField to the data base fields which values you would like to be mapped to the respective Item properties.

Please see this help topic for more information about RadComboBox data binding.

All the best,
Simon
the Telerik team

Instantly find answers to your questions on the newTelerik Support Portal.
Check out the tipsfor optimizing your support resource searches.

[donoho]

Wow.  Thanks for this solution.  So simple.

With this remaining the same:

RadComboBox csCombo = (RadComboBox)o;
DataTable dt = DemandLoad("SQL_Stored_Proc", e.Text.Replace("'", "''"));

I switched from:

foreach(DataRow row in dt.Rows) {
  RadComboBoxItem item = new RadComboBoxItem(row["CompanyName"].ToString(), row["CompanyID"].ToString());
  csCombo.Items.Add(item);
}

to:

csCombo.DataSource = dt;
csCombo.DataBind();

and completely forgot about setting the DataText & DataValue fields.

After correction:

csCombo.DataSource = dt;
csCombo.DataTextField = "CompanyName";
csCombo.DataValueField = "CompanyID";
csCombo.DataBind();