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.

programatically disable dropdown in Ajax updatepanel

I've searched high and low for what seemed would be a simple and frequently used method to access the properties of a drop down contained in a Ajax UpdatePanel without finding anyone who seems to have needed to do this or who has solved it. Maybe Microsoft decided nobody would ever want to do such a weird thing!

I have users with various permission levels. Depending on their level, on page load I need to disable drop downs which are contained within Ajax Updatepanels.

I can expose the properties of the UpdatePanels themselves but they do not support the enable property, only invisible which is no help.

Anyone know how this is done ?

Thanks

Aren't you able to just set the Enabled property of the appropriate DropDownList's?

Dont depends only on UI elements enable/disable state. Also enusre the User level in server side. Can pls post some code i mean in which point you want to disable the dropdown list.

Use CascadingDropDown control in AJAXControlToolKit

http://www.asp.net/AJAX/AjaxControlToolkit/Samples/CascadingDropDown/CascadingDropDown.aspx

Hi,

Are you using the AJAX extension version 1.0.61025.0 ?

I'm using this one. The controls inside UpdatePanel can be accessed directly. For instance:

<%@. Page Language="C#" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><script runat="server"> protected void Page_Load(object sender, EventArgs e) { DropDownList1.Enabled = false; }</script><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title>Untitled Page</title></head><body> <form id="form1" runat="server"> <div> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <asp:DropDownList ID="DropDownList1" runat="server"> </asp:DropDownList> </ContentTemplate> </asp:UpdatePanel> </div> </form></body></html>

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.

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