programatically adding cascading dropdowns with the ability to add to the dropdownlist

I'll keep this as simple as possible, apologies in advance. Cascading dropdowns (CCD) are added to a page programatically. Each cascade dropdown (CCD) is added in a while lop based on the number of levels read in from a db table. beside each dropdown (CCD) is an add button, which when clicked pops up a modal window, allowing the user to via an update panel add to each the cascading dropdown (CCD) of choice. My problem is this I want the button beside the dropdown only to become enabled when the cascading dropdown is active/populated. So when I draw everything in theOnInit function I make the buttons beside the cascading dropdowns disabled. My Question is how do I enable them based on the (CCD) becoming active? and secondly am I doing this the correct way. Code below: Thanks in advance

While counter < SR.Item("Annello")

Lit =New Literal

If counter < 1Then

Lit.Text ="Category"

Else

Lit.Text ="Sub-Category"

EndIf

UPanel.ContentTemplateContainer.Controls.Add(Lit)

DDL =New DropDownList

With DDL

.ID ="DropDown" & counter

.Width = 250

.DataTextField ="CategoryName"

.DataValueField ="CID"

EndWith

UPanel.ContentTemplateContainer.Controls.Add(DDL)

Cascade =New AjaxControlToolkit.CascadingDropDown

With Cascade

.ID ="Cas" & counter

.TargetControlID = DDL.ID

If counter > 0Then

.ParentControlID ="DropDown" & counter - 1

.PromptText ="Please select a Sub-Category"

Else

.PromptText ="Please select a Category"

EndIf

.LoadingText ="Loading.."

.Category = counter

.ServiceMethod ="GetCategoriesPageMethod"

EndWith

UPanel.ContentTemplateContainer.Controls.Add(Cascade)

IB =New ButtonWith IB

.ID ="ADD" & counter

.Text ="add to.."

EndWith

UPanel.ContentTemplateContainer.Controls.Add(IB)

IB.Enabled =False

'''MODAL POPUP

NPanel =New Panel

With NPanel

.Style.Add(HtmlTextWriterStyle.Display,"none")

.Style.Add(HtmlTextWriterStyle.Height,"200px")

.Style.Add(HtmlTextWriterStyle.Width,"350px")

.Style.Add(HtmlTextWriterStyle.BackgroundColor,"#ffffff")

.Style.Add(HtmlTextWriterStyle.Padding,"10px")

.ID ="NPanel" & counter

EndWith

Lit =New Literal

Lit.Text ="Enter Your Category here "

NPanel.Controls.Add(Lit)

TBX =New TextBox

With TBX

.ID ="AddTBX" & counter

.Width =New System.Web.UI.WebControls.Unit(190)

EndWith

NPanel.Controls.Add(TBX)

IB =New ButtonWith IB

.ID ="OK" & counter

.Text ="OK"

'.Attributes.Add("onclick", "InsertCategory();")

EndWith

NPanel.Controls.Add(IB)

IB2 =New Button

With IB2

.ID ="Cancel" & counter

.Text ="Cancel"

EndWith

NPanel.Controls.Add(IB2)

UPanel.ContentTemplateContainer.Controls.Add(NPanel)

MP =New AjaxControlToolkit.ModalPopupExtender

With MP

.TargetControlID ="ADD" & counter

.PopupControlID ="NPanel" & counter

.OkControlID ="OK" & counter

.CancelControlID ="Cancel" & counter

.OnOkScript ="InsertNewCategory()"

.OnCancelScript ="alert('cancel');"

'.OnOkScript = "alert('OK');"

.DropShadow =False

.BackgroundCssClass ="ModalPopupBackground"

EndWith

UPanel.ContentTemplateContainer.Controls.Add(MP)

Hi

Try this,It works:

<td><asp:DropDownList ID="DropDown1" onchange="javascript:activeBtn(this)" runat="server" Width="170" /></td>

<script type='text/javascript'>
function activeBtn(ccd)
{
var strcounter = ccd.id.substring(ccd.id.indexOf("DropDown") + 8, ccd.length - 1);
var counter = parseInt(strcounter);
var theBtn = document.getElementById(ccd.id.replace("DropDown", "ADD").replace(strcounter, (counter + 1) + ""))
if(theBtn){
if(ccd.selectedIndex != 0)theBtn.disable = false;
else theBtn.disable = true;
}
}
</script>

You can add the onchange event handlers for your DropDownLists in code-behind by using this code:

DDL =New DropDownList

With DDL

.ID ="DropDown" & counter

.Width = 250

.DataTextField ="CategoryName"

.DataValueField ="CID"

.Attributes.Add("onchange", "javascript:activeBtn(this);")

EndWith

Best Regards

Gave that a go and couldn't get it to work. I see what your doing and I'm hitting the function and even if I hardcode the Button.ID to enable that one button it doesn't work, no errors but it just won't enable it... any ideas. Thanks in advance..

Hi

Sound odd,I have test it many times.I'm sure it works.

Would you please privide us with a whole demo?

Thanks

ThanksJin-Yu Yin

Firstly thanks for you help. It is strange that it doesn't work, the funny thing is if I change you function to the following it works, but I'd never have gotten there without your help. Again many thanks.

function activeBtn(ccd)

{

var strcounter = ccd.id.substring(ccd.id.indexOf("DropDown") + 8, ccd.length - 1);

var counter = parseInt(strcounter);

var theBtn = document.getElementById(ccd.id.replace("DropDown","ADD").replace(strcounter, (counter + 1) +""))

if(theBtn){

if(ccd.selectedIndex != 0)

{

if (theBtn.disabled) {theBtn.disabled =false;}else theBtn.disabled =true;

}

}

}

Hi

Glad to hear that it works now.I'm sorry for misunderstanding any logic of it.

Best Regards

Like I said mate, thanks ,u were 100% bang on. Appreciate the help.

Programmatic cascading dropdown repopulation

Greetings, all...

Time for yet another plaintive cry for help out to the Ajax community.

I've got a page with four cascading dropdown lists chained together. Everything is working fine.

Where my problem comes is when I add a new row into the database (via a web service) and now I want to call the parent dropdown list and repopulate it once I receive a success code from the ws. I want to be able to do this all via client-side, and I think (hope?) I'm close, but I just can't seem to get the ddl to update its options.

Here's the code so far. As you can see, I've been trying to tackle this two ways...using a $find().populate on the dropdownlist, and, alternatively, calling the web service directly. The web service call does, in fact, retrieve all the levels, including the newly added level, but I'm not understanding how to "bind" the results to the dropdown.

function AddNewLevel()
{
var txt = document.getElementById('<%= txtAddLevel.ClientID %>')
retVal = QuestionManagerWS.AddNewLevel(txt.value, OnAddLevelOk, OnTimeout, OnError);
return(true);
}

function OnAddLevelOk(result)
{
alert(result);
// This doesn't appear to do anything...it never calls the ws, etc.
$find('<%= ddlLevel.ClientID %>').populate;

// This calls the web service and gets the correct values...but how does it bind to the ddl?
//document.getElementById('<%= ddlLevel.ClientID %>');
//QuestionManagerWS.GetLevels("","Level");
}

Anyway, I would really appreciate any help that may be out there. I've looked at the stuff in the 'manual' folder of the ToolkitTests (there's usually a gem or two in there) but nothing gives any hint on how to get this to work.

Thanks in advance,

Ric

Does anyone have any ideas on this one? I'm still stumped and need some help.

I figured out a resolution to the problem.

I've blogged about it onmy site and in a few days will be putting together an article as an example to my solution.

public CascadingDropDownNameValue[] GetAllDistrict(string knownCategoryValues, string cate

want to know whether i can pass more than two arguments in the above shown webservice method..i intend to implement it in a cascading drop down list.. having two sibling dropdown lists...

so i want to pass three arguments eg..cid, brid, deptid...but a webservice allows only two of the kind...

Hi,

You can pass more information via a third parameter contextKey. For instance:

public static AjaxControlToolkit.CascadingDropDownNameValue[]
GetDropDownContentsPageMethod(string knownCategoryValues, string category, string contextKey)

protected void Page_Load(object sender, EventArgs e)
{
CascadingDropDown2.ContextKey = "contextKeyOf2";
}

Hope this helps.

Query regarding Ajax Atlas Tool Kit Cascading Dropdown List

Hi All,
I am using ajax atlas tool kit in my project.
Is it possible to share a parent cascading drop down with two child cascading dropdown list??
if any one has come across such logic or have any idea regarding this, pls help me.
Thanks in advance


Regards,
Palavesh

Hi,

I think you should try it by yourself before you ask!

Anyway,I found this question is answered by Jonathan Shen – MSFT athttp://forums.asp.net/t/1183703.aspx

Regards,

Hi,

Thank you. Jonathan shen's reply was for my post only. I have gone through the post.

Regards,

Palavesh

Query regarding Ajax Atlas Tool Kit Cascading Dropdown List

Hi All, I am using ajax atlas tool kit in my project.Is it possible to share a parent cascading drop down with two child cascading dropdown list??if any one has come across such logic or have any idea regarding this, pls help me.Thanks in advance

Hi Palavesh,

Of course. You can do it like this.

State:<asp:DropDownList runat="server" ID="dlState">
</asp:DropDownList>
City:
<asp:DropDownList runat="server" ID="dlCity" >
</asp:DropDownList>
District:
<asp:DropDownList runat="server" ID="dlDistrict">
</asp:DropDownList>
<cc1:CascadingDropDown ID="CascadingDropDown1" BehaviorID="myCDEState" runat="server" TargetControlID="dlState"
Category="State" ServicePath="../WebService/CityServiceOledb.asmx" ServiceMethod="GetStates" LoadingText="[Loading...]" PromptText="Please select state">
</cc1:CascadingDropDown>
<cc1:CascadingDropDown ID="CascadingDropDown2" BehaviorID="myCDECity" runat="server"TargetControlID="dlCity" ParentControlID="dlState"
Category="City"PromptText="Select a city" ServicePath="../WebService/CityServiceOledb.asmx"
ServiceMethod="GetCities" LoadingText="Load cities..." >
</cc1:CascadingDropDown>
<cc1:CascadingDropDown ID="CascadingDropDown3" BehaviorID="myCDDistrict" runat="server"TargetControlID="dlDistrict" ParentControlID="dlState"
Category="District" PromptText="Select a district" ServicePath="../WebService/CityServiceOledb.asmx"
ServiceMethod="GetDistricts" LoadingText="Load districts..." >
</cc1:CascadingDropDown>

I hope this help.

Best regards,

Jonathan

Hi Jonathan,

Thank you.. I hope this will solve my issue.

Regards,

Palavesh.

Hi Palavesh,

You are welcome. If it doesn't work , please feel free to let me know.

Best regards,

Jonathan

Hi jonathan,

i have below piece of code in my project.

i need source and locality from the city selected ,

initially it works fine during the the selection of city,

after i submit the form (during postback) locality dropdown is not populated,

can you pls give me your suggestion

thanks in advance

<%@. Register Assembly="AtlasControlToolkit" Namespace="AtlasControlToolkit" TagPrefix="cc1" %>

<asp:DropDownList ID="Dlstate" runat="server" />

<asp:DropDownList ID="DlCity" runat="server">
</asp:DropDownList>
<cc1:CascadingDropDown ID="cascadingstatezonecity" runat="server">
<cc1:CascadingDropDownProperties Category="StateName" ParentControlID="Dlstate"
TargetControlID="DlCity" PromptText="Select City" ServiceMethod="Pros_GetCityByStateID"
ServicePath="venusStateLocality.asmx" />
</cc1:CascadingDropDown>

<asp:DropDownList ID="DlLocality" runat="server" />
<cc1:CascadingDropDown ID="cascadingstatezonelocality" runat="server">
<cc1:CascadingDropDownProperties Category="CityName" ParentControlID="DlCity"
TargetControlID="DlLocality" PromptText="Select Locality" ServiceMethod="Pros_GetLocalityByCityID"
ServicePath="venusStateLocality.asmx" />
</cc1:CascadingDropDown>

<asp:DropDownList ID="DlSource" runat="server">
</asp:DropDownList>
<cc1:CascadingDropDown ID="cascadingstatesource" runat="server">
<cc1:CascadingDropDownProperties Category="CityName" ParentControlID="DlCity"
TargetControlID="DlSource" PromptText="Select Source" ServiceMethod="Pros_GetSourceByCityID"
ServicePath="venusStateLocality.asmx" />
</cc1:CascadingDropDown>

Hi Palavesh,

You have four CascadingDropDowns on the page, I suggest that you should add a CascadingDropDown for Dlstate. To debug it , please reference to thisthread.

Best regards,

Jonathan

Question: Using CascadingDropDown with OleDb

I'm curious. Do youhave to use a Web Service when trying to pull items for a cascading drop down from a database or is there another (perhaps simpler) way? I'd love to be more enlightened on the subject. Thanks in advance.

Hi Venom,

VenomZ302:

Using CascadingDropDown with OleDb

I have made a sample. Hope it helps.

ASPX:

<%@. Page Language="C#" %><%@. Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %><!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 id="Head1" runat="server"> <title>Untitled Page</title></head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server" /> State:<asp:DropDownList runat="server" ID="dlState"> </asp:DropDownList> City: <asp:DropDownList runat="server" ID="dlCity"> </asp:DropDownList> <cc1:CascadingDropDown ID="CascadingDropDown1" runat="server" TargetControlID="dlState" Category="State" PromptText="Select a state" ServicePath="../WebService/CityServiceOledb.asmx" ServiceMethod="GetStates" LoadingText="Load Text..."> </cc1:CascadingDropDown> <cc1:CascadingDropDown ID="CascadingDropDown2" runat="server" TargetControlID="dlCity" ParentControlID="dlState" Category="City" PromptText="Select a city" ServicePath="../WebService/CityServiceOledb.asmx" ServiceMethod="GetCities" LoadingText="Load Text..."> </cc1:CascadingDropDown> </form></body></html>

WebService:

<%@. WebService Language="C#" Class="CityServiceOledb" %>

using System;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Collections.Specialized;
using System.Collections.Generic;
using AjaxControlToolkit;
using System.Data.OleDb;
using System.Web.Script.Services;
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[ScriptService]
public class CityServiceOledb : System.Web.Services.WebService {

protected OleDbConnection cn;
protected OleDbCommand cm;
protected OleDbDataReader myReader;
private string strSql = "";
//private string conStr = "data source=TASKONE\\SQLEXPRESS;initial catalog=TestDB;user id=sa;pwd=password;Pooling=True; Min Pool Size=0; Max Pool Size=1000; Connection Lifetime=30;";

//private string conStr = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=D:\\MyWork\\DB\\YourDBName.mdb";
//using Microsoft Office2007
private string conStr = "Provider=Microsoft.ACE.OLEDB.12.0;Data Source=D:\\MyWork\\DB\\Database1.accdb";
public CityServiceOledb() { }

[WebMethod]
public CascadingDropDownNameValue[] GetStates(string knownCategoryValues, string category)
{
strSql = "SELECT * FROM tb_State";
GetDr(strSql);
List<CascadingDropDownNameValue> myList = new List<CascadingDropDownNameValue>();
while (myReader.Read()) {
myList.Add(new CascadingDropDownNameValue(myReader["StateName"].ToString(), myReader["StateID"].ToString()));
}
myReader.Close();
return myList.ToArray();
}
[WebMethod]
public CascadingDropDownNameValue[] GetCities(string knownCategoryValues, string category)
{
StringDictionary kv = CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValues);
int stateID;
if (!kv.ContainsKey("State") || !Int32.TryParse(kv["State"], out stateID))
{
return null;
}
List<CascadingDropDownNameValue> myList = new List<CascadingDropDownNameValue>();
strSql = "SELECT * FROM tb_City WHERE StateID=" + stateID.ToString();

GetDr(strSql);
while (myReader.Read())
{
myList.Add(new CascadingDropDownNameValue(myReader["CityName"].ToString(), myReader["CityID"].ToString()));
}
myReader.Close();
return myList.ToArray();
}

#region DB Operate
public void Open()
{
if (cn == null)
{
cn = new OleDbConnection(conStr);
cn.Open();
}
}
public void Close() {
if (cn != null)
{
cn.Close();
cn = null;
}
}

public OleDbDataReader GetDr(string strSql) {
Open();
cm = new OleDbCommand(strSql,cn);
myReader = cm.ExecuteReader();
//myReader = cm.ExecuteReader();
return myReader;
}
#endregion DBOperate

}

Note: You should add two tables with the name "tb_State" and "tb_City" into your Database ,which is used in your project , before you using this demo.

Table "tb_State" has two fields with the name "StateID"(primarykey) and "StateName"(Text).

Table "tb_City" has three fields with the name "CityID"(primarykey)、"StateID"(Number) and "CityName"(Text).

VenomZ302:

I'm curious. Do youhave to use a Web Service when trying to pull items for a cascading drop down from a database or is there another (perhaps simpler) way? I'd love to be more enlightened on the subject. Thanks in advance.

We are not limited to use Web Service. Sometimes, we may add the implement code into our *.cs file directly. Here is the sample:

using System;using System.Web.Services;using AjaxControlToolkit;public partialclass CascadingDropDown_CascadingDropDown : CommonPage{protected void DropDownList3_SelectedIndexChanged(object sender, EventArgs e) {// Get selected values } [WebMethod] [System.Web.Script.Services.ScriptMethod]public static CascadingDropDownNameValue[] GetDropDownContentsPageMethod(string knownCategoryValues,string category) {

 //obtain data from Database.

 return;

 }}

Note: We needn't to set the ServicePath property for the control in this case. Just like below.

<ajaxToolkit:CascadingDropDown ID="CascadingDropDown2" runat="server" TargetControlID="DropDownList2"
            Category="Model" PromptText="Please select a model" LoadingText="[Loading models...]"
            ServiceMethod="GetDropDownContentsPageMethod" ParentControlID="DropDownList1" />

Details please dip into the Ajax ControlToolkit source code.

If I misunderstood you, please let me know.

Thanks for the information. I really appreciate it. Now, however, I've progressed to the point where I need to understand more of the error codes that are given. Most specifically, error 12030, as found in my thread here: http://forums.asp.net/t/1138732.aspx

Thanks again.

Hi Venom,

Error code: 12030

ERROR_INTERNET_CONNECTION_ABORTED
The connection with the server has been terminated.

In your case, it seems like your webservice doesn't work properly.I suggest that you should add break points into your webservice and debug step-by-step.

Note: If you made some modifications in your webservice and before you debug , please reset your aplication by saving your web.config file.Good luck!