I Working on RAD ComboBox with Multiple Selection loading on Demand
I am getting the Data from StoredProc.
RadComboBox1 is getting values from 1StoredProc(CustomerNames);
Problem
RadComboBox2 to has to pop with ID on Demand(Just Like the Ex in Telerik Site)
I used the Example BUT
i unable to get that where i am going wrong
for each and every click(on RadComboBox1) its adding the values(again and again) in RadComboBox2
AND
It is not working basing on CheckBoxs it is working basing the SelectedItem(Click on Item)
plz help me
Where i am going wrong
My Default.CS File
using
System;
using
System.Collections.Generic;
using
System.Linq;
using
System.Web;
using
System.Web.UI;
using
System.Web.UI.WebControls;
using
System.Data;
using
System.Data.SqlClient;
using
Telerik.Web.UI;
namespace
Combotry
{
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
this.RadComboBox1.DataBind();
this.RadComboBox1.Text = String.Empty;
//fill the continents combo
LoadCustomerName();
this.Label4.Text = this.RadComboBox1.Text;
}
}
protected void LoadCustomerName()
{
SqlConnection connection = new SqlConnection("Data Source=vijay;Initial Catalog=TRY;Integrated Security=True");
SqlDataAdapter adapter = new SqlDataAdapter("usp_GetCustomers", connection);
DataTable dt = new DataTable();
adapter.Fill(dt);
RadComboBox1.DataTextField =
"customerName";
RadComboBox1.DataValueField =
"customerid";
RadComboBox1.DataSource = dt;
RadComboBox1.DataBind();
//insert the first item
RadComboBox1.Items.Insert(0,
new RadComboBoxItem("- Select Customer -"));
this.Label4.Text = this.RadComboBox1.Text;
this.Label4.Text = this.comboValue.Value;
}
protected void LoadStoreID(string customerid)
{
this.Label4.Text = this.RadComboBox1.Text;
this.Label4.Text = this.comboValue.Value;
SqlCommand cmd = new SqlCommand("dbo.StoreID", new SqlConnection("Data Source=vijay;Initial Catalog=TRY;Integrated Security=True"));
//select a StoreID based on the CustomerID
//SqlDataAdapter adapter = new SqlDataAdapter("dbo.StoreID", cmd);
SqlDataAdapter adapter = new SqlDataAdapter(cmd);
cmd.CommandType =
CommandType.StoredProcedure;
//adapter.SelectCommand.Parameters.AddWithValue("@CustomerID", customerid);
cmd.Parameters.Add(
new SqlParameter("@CustomerID", customerid ));
DataTable dt = new DataTable();
adapter.Fill(dt);
cmd.Connection.Open();
RadComboBox2.DataTextField =
"storeid";
RadComboBox2.DataValueField =
"storeid";
RadComboBox2.DataSource = dt;
RadComboBox2.DataBind();
}
protected void LoadStoreName(string storeid)
{
SqlConnection connection = new SqlConnection("Data Source=vijay;Initial Catalog=TRY;Integrated Security=True");
//select a StoreID based on the CustomerID
SqlDataAdapter adapter = new SqlDataAdapter("SELECT name FROM StoreMaster WHERE storeid=@storeid", connection);
adapter.SelectCommand.Parameters.AddWithValue(
"@storeid", storeid);
DataTable dt = new DataTable();
adapter.Fill(dt);
RadComboBox3.DataTextField =
"Name";
RadComboBox3.DataValueField =
"name";
RadComboBox3.DataSource = dt;
RadComboBox3.DataBind();
}
protected void RadComboBox1_ItemsRequested(object o, RadComboBoxItemsRequestedEventArgs e)
{
LoadCustomerName();
}
protected void RadComboBox2_ItemsRequested(object o, RadComboBoxItemsRequestedEventArgs e)
{
// e.Text is the first parameter of the requestItems method
// invoked in LoadStoreID method
LoadStoreID(e.Text );
}
protected void RadComboBox3_ItemsRequested(object o, RadComboBoxItemsRequestedEventArgs e)
{
// e.Text is the first parameter of the requestItems method
// invoked in LoadStoreName method
LoadStoreName(e.Text);
}
protected void RadComboBox1_SelectedIndexChanged(object o, RadComboBoxSelectedIndexChangedEventArgs e)
{
}
}
}
My .ASPX File
<%
@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Combotry._Default" %>
<%
@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %>
<!
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<
html xmlns="http://www.w3.org/1999/xhtml">
<
head>
<
title = "ComboBox"></title>
</
head>
<
body >
<form runat="server" id="mainForm" method="post" style="width: 100%">
<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
</telerik:RadScriptManager>
<script type="text/javascript">
var supressDropDownClosing = false;
function OnClientDropDownClosing(sender, eventArgs) {
eventArgs.set_cancel(supressDropDownClosing);
}
function OnClientSelectedIndexChanging(sender, eventArgs) {
eventArgs.set_cancel(supressDropDownClosing);
}
function OnClientDropDownOpening(sender, eventArgs) {
supressDropDownClosing =
true;
}
function OnClientBlur(sender) {
supressDropDownClosing =
false;
sender.toggleDropDown();
}
function checkboxClick() {
collectSelectedItems();
}
function getItemCheckBox(item) {
//Get the 'div' representing the current RadComboBox Item.
var itemDiv = item.get_element();
//Get the collection of all 'input' elements in the 'div' (which are contained in the Item).
var inputs = itemDiv.getElementsByTagName("input");
for (var inputIndex = 0; inputIndex < inputs.length; inputIndex++) {
var input = inputs[inputIndex];
//Check the type of the current 'input' element.
if (input.type == "checkbox") {
return input;
}
}
return null;
}
function collectSelectedItems() {
var combo = $find("<%= RadComboBox1.ClientID %>");
var items = combo.get_items();
var selectedItemsTexts = "";
var selectedItemsValues = "";
var itemsCount = items.get_count();
for (var itemIndex = 0; itemIndex < itemsCount; itemIndex++) {
var item = items.getItem(itemIndex);
var checkbox = getItemCheckBox(item);
//Check whether the Item's CheckBox) is checked.
if (checkbox.checked) {
selectedItemsTexts += item.get_text() +
", ";
selectedItemsValues += item.get_value() +
", ";
}
}
selectedItemsTexts = selectedItemsTexts.substring(0, selectedItemsTexts.length - 2);
selectedItemsValues = selectedItemsValues.substring(0, selectedItemsValues.length - 2);
//Set the text of the RadComboBox with the texts of the selected Items, separated by ','.
combo.set_text(selectedItemsTexts);
//Set the comboValue hidden field value with values of the selected Items, separated by ','.
//document.getElementById("comboValue").value = selectedItemsValues;
//Clear the selection that RadComboBox has made internally.
if (selectedItemsValues == "") {
combo.clearSelection();
}
}
</script>
<div>
<asp:Label ID="Label1" runat="server"
style="z-index: 1; left: 162px; top: 38px; position: absolute; height: 20px; width: 112px">
CustomerID
</asp:Label>
<input type="hidden" id="comboValue" value="" runat="server" />
<telerik:RadComboBox ID="RadComboBox1"
runat="server"
OnClientSelectedIndexChanging="LoadCustomerName"
OnItemsRequested="RadComboBox1_ItemsRequested"
style="z-index: 1; left: 284px; top: 38px; position: absolute; height: 20px; width: 160px"
AllowCustomText="True" HighlightTemplatedItems="True"
onclientdropdownopening="OnClientDropDownOpening"
OnClientDropDownClosing="OnClientDropDownClosing"
OnClientBlur="OnClientBlur" DataTextField="CustomerName"
DataValueField="CustomerID" Skin="Web20">
<ItemTemplate>
<asp:CheckBox runat="server" ID="CheckBox" onclick="checkboxClick();" Text='<%# DataBinder.Eval(Container, "Text") %>' />
</ItemTemplate>
<CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>
</telerik:RadComboBox>
<asp:SqlDataSource ID="DataSourceforCustomers" runat="server"
ConnectionString="<%$ ConnectionStrings:ULTIMATE_NEWConnectionString %>"
SelectCommand="usp_GetCustomers" SelectCommandType="StoredProcedure">
</asp:SqlDataSource>
<asp:Label ID="Label2" runat="server"
style="z-index: 1; left: 537px; top: 38px; position: absolute; height: 20px; width: 83px">
StoreID:
</asp:Label>
<telerik:RadComboBox ID="RadComboBox2"
runat="server"
Width="186px"
OnClientSelectedIndexChanging="LoadStoreName"
OnClientItemsRequested="ItemsLoaded"
OnItemsRequested="RadComboBox2_ItemsRequested"
style="z-index: 1; left: 634px; top: 38px; position: absolute; height: 20px; width: 160px"
DataTextField="StoreID" DataValueField="StoreID" Skin="Web20">
<ItemTemplate>
<asp:CheckBox runat="server" ID="CheckBox" onclick="checkboxClick();" Text='<%# DataBinder.Eval(Container, "Text") %>' />
</ItemTemplate>
<
CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>
</telerik:RadComboBox>
<asp:SqlDataSource ID="DataSourceforStoreID" runat="server"
ConnectionString="<%$ ConnectionStrings:ULTIMATE_NEWConnectionString %>"
SelectCommand="StoreID" SelectCommandType="StoredProcedure">
<SelectParameters>
<asp:ControlParameter ControlID="RadComboBox1" Name="CustomerID"
PropertyName="SelectedValue" Type="String" />
</SelectParameters>
</asp:SqlDataSource>
<asp:Label ID="Label3" runat="server"
style="z-index: 1; left: 907px; top: 38px; position: absolute; height: 20px; width: 103px; right: 599px;">
StoreName:
</asp:Label>
<telerik:RadComboBox ID="RadComboBox3"
runat="server"
Width="186px"
OnClientItemsRequested="ItemsLoaded"
OnItemsRequested="RadComboBox3_ItemsRequested"
style="z-index: 1; left: 1024px; top: 38px; position: absolute; height: 20px; width: 160px" Skin="Web20">
<
CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>
</telerik:RadComboBox>
</div>
<script type="text/javascript">
//global variables for the countries and cities comboboxes
var StoreIDCombo;
var StoreNameCombo;
function pageLoad() {
// initialize the global variables
// in this event all client objects
// are already created and initialized
StoreIDCombo = $find(
"<%= RadComboBox2.ClientID %>");
StoreNameCombo = $find(
"<%= RadComboBox3.ClientID %>");
}
function LoadCustomerName(combo, eventArqs) {
var item = eventArqs.get_item();
StoreIDCombo.set_text(
"Loading...");
StoreNameCombo.clearSelection();
// if a continent is selected
if (item.get_index() > 0) {
// this will fire the ItemsRequested event of the
// StoreID combobox passing the CustomerName as a parameter
StoreIDCombo.requestItems(item.get_value(), checkboxClick);
}
if (checkbox.checked) {
selectedItemsTexts += item.get_text() +
", ";
selectedItemsValues += item.get_value() +
", ";
}
}
function LoadStoreName(combo, eventArqs) {
var item = eventArqs.get_item();
StoreNameCombo.set_text(
"Loading...");
// this will fire the ItemsRequested event of the
// StoreName combobox passing the StoreID as a parameter
StoreNameCombo.requestItems(item.get_value(),
false );
}
function ItemsLoaded(combo, eventArqs) {
if (combo.get_items().get_count() > 0) {
// pre-select the first item
combo.set_text(combo.get_items().getItem(0).get_text());
combo.get_items().getItem(0).highlight();
}
combo.showDropDown();
}
function collectSelectedItems() {
var combo =$find ("<%= RadComboBox1.ClientID %>");
var items = combo.get_items();
var selectedItemsTexts = "";
var selectedItemsValues = "";
var itemsCount = items.get_count();
for (var itemIndex = 0; itemIndex < itemsCount; itemIndex++) {
var item = items.getItem(itemIndex);
var checkbox = getItemCheckBox(item);
//Check whether the Item's CheckBox) is checked.
if (checkbox.checked) {
selectedItemsTexts += item.get_text() +
", ";
selectedItemsValues += item.get_value() +
", ";
}
}
selectedItemsTexts = selectedItemsTexts.substring(0, selectedItemsTexts.length - 2);
selectedItemsValues = selectedItemsValues.substring(0, selectedItemsValues.length - 2);
//Set the text of the RadComboBox with the texts of the selected Items, separated by ','.
combo.set_text(selectedItemsTexts);
//Set the comboValue hidden field value with values of the selected Items, separated by ','.
}
</script>
<p>
</p>
<asp:Label ID="Label4" runat="server"
style="z-index: 1; left: 10px; top: 95px; position: absolute; height: 149px; width: 418px"
Text="Label"></asp:Label>
</form>
</
body>
</
html>
1 Answer, 1 is accepted
Rank 1