Dynamic display behaviors for dragDropList

I'm using the drag drop list to allow my users to reposition report elements. The problem that I am having is that different zones have different sizes and we would like our draggable elements to resize to fill the zone in which they are dropped. Unfortunately, the controls are retaining their original sizes when moved to a different drop zone.

Furthermore, we have implemented som cascading styles to allow the controls to change appearance depending on which zone they have been places. This is not working either, the controls always retaing the style of the zone in which they were originally placed.

Any suggestions?

Yeah, you should build a behavior that implements the IDropTarget interface, and assign that behavior to whatever Divs you've go tthat are going to be the drop zones for your parts. The custom behavior you build has to implement this.drop() , among others, and that funciton will define what happens when something's dropped on it. My guess is that you'd build logic into the drop() method that tells the div that was dropped to resize / restyle itself, possibly by just changing the cssClass . Check out this article: http://www.codeproject.com/Ajax/AtlasDragNDrop.asp for more info.

dynamic cascaded drop down

Hi..

well in my web page based on a parameter user selects i need to create contents dynamically

for eg if A is passed than page will have only 1 drop down but if B is passed it might have 7 8 drop downs in it..

this is one part of the problem..once i am able to create them i need to address there selection index change even which will call again some fucntion

which will reload all othr drop dwon whch were created dynamically

so its kind of generating cascaded drop down dynamically and the parent control id could be more than one

Can some one help me out

in case any one is here wondering what happened to the problem

the solution is same as

http://forums.asp.net/t/1090354.aspx

DropShadowExtender display issue

Im jsut playing about with the drop shadow extender and when i come to use it for the first time i have hit a major snag.

I have bound it to a panel which contains some text, when i run the page, i get the rounded corners of the panel, but the shadow (or I shoud say a black image the same size of the panel) appears about an inch lower down on the screen and not even remotely connected to the panel, let alone behind it to give a shadow effect.

Anyone else run into this?

I am having the same issue. Is there a solution to this?

...Have you tested this in both IE7 and FireFox?

If it displays properly in one but not the other it's probably due to HTML rendering.

You can resolve this behavior by removing HTML tags, especially tags like HTML header tags.
Replace them with ASP.NET CSS, then they should render properly in the toolkit div sections.

Yes, it's hosed the same in Firefox.

Surely someone, somewhere is using this thing somehow got it working outside of the samples.

I've recreated this page four times now and it's still not working correctly.

DropShadowExtender and centered page

I'm centering a page by usingmargin:0pxauto;

on the body style. The problem is that the drop shadow is offset by the same distance as the left margin.

Is there any work around to this?

Sorry, I mean I havemargin:0pxauto; on a wrapper div, not on the body.
Sorry for the trouble - pleaseopen a work item to report and track this issue. Thank you!

dropshadowextender - how to show and hide in javascript

Hello

How would i turn a dropshadowextender on and off in javascript. In essence i need to show and hide teh drop shadow at different points.

Thanks

andrea

Hi Andrea,

The easiest approach is to set the width of the drop shadow to0, like the sample page does inchkShadow'sonclick. You can do it using$object('dsBehavior').set_Width(0);.

Thanks,
Ted
thanks :)

DropShadow panel within another dropshadow panel

Hello,

I am trying to put a drop shadow extender on a panel around another drop shadow extender but the inside panel is acting funny. I have the panel rounded and looks great but the black shadow part is distorted and at the bottom of the indside panel ? I have tried position absolute in a few places and tried putting a div around it but still no change...

Any thoughts?

So, you are trying to nest one DropShadowExtender on a panel within another DropShadowExtender panel?
That is exactly what I am trying to do... Does anyone know how to make this work?

DropShadow on PopupControl rounded corner error

I am trying to add rounded corners to my drop down calendar control but when I select rounded corners on the DropShadowExtender the calendar disappears. (http://www.mtechglobal.com/sample1.jpg)

If I set rounded corners to false, it works fine. (http://www.mtechglobal.com/sample2.jpg)

I'm also seeing a weird problem if I point the dropshadowextender to the Calendar control directly rather than the containing panel. It seems that the shadow is somehow mis-calculating the position of the control. (http://www.mtechglobal.com/sample3.jpg)

Here is my code:

<asp:Panel ID="Panel1" runat="server" CssClass="popupControl">
 <atlas:updatepanel id="UpdatePanel1" runat="server">
 <ContentTemplate>
 <atlasToolkit:PopupControlExtender ID="PopupControlExtender1" runat="server">
 <atlasToolkit:PopupControlProperties TargetControlID="txtFrom" PopupControlID="Panel1" Position="Bottom" />
 </atlasToolkit:PopupControlExtender>
 <atlasToolkit:DropShadowExtender ID="dse" runat="server">
 <atlasToolkit:DropShadowProperties TargetControlID="Panel1" Width="5" Rounded='false' Opacity=".5" TrackPosition="true" ID="dsBehavior" />
 </atlasToolkit:DropShadowExtender>
 <center>
 <asp:Calendar ID="calFrom" runat="server" BackColor="White" BorderColor="Black" CellPadding="2" DayNameFormat="Shortest" Font-Names="Verdana" Font-Size="8pt"
 ForeColor="#003399" Width="160px" OnSelectionChanged="calFrom_SelectionChanged" BorderWidth="1px" BorderStyle="Solid" >
 <SelectedDayStyle BackColor="#009999" Font-Bold="True" ForeColor="#CCFF99" />
 <TodayDayStyle BackColor="#99CCCC" ForeColor="White" />
 <SelectorStyle BackColor="#99CCCC" ForeColor="#336666" />
 <WeekendDayStyle BackColor="#CCCCFF" />
 <OtherMonthDayStyle ForeColor="#999999" />
 <NextPrevStyle ForeColor="#CCCCFF" VerticalAlign="Bottom" />
 <DayHeaderStyle BackColor="#99CCCC" Height="1px" ForeColor="#336666" Font-Bold="True" Font-Size="7pt" />
 <TitleStyle BackColor="#003399" ForeColor="#CCCCFF" BorderColor="#3366CC" Font-Bold="True" />
 <DayStyle CssClass="calDay" />
 </asp:Calendar>
 </center
 </ContentTemplate>
 </atlas:updatepanel>
</asp:Panel>
<atlasToolkit:DropShadowExtender ID="DropShadowExtender1" runat="server">
 <atlasToolkit:DropShadowProperties TargetControlID="Panel1" Width="5" Rounded='false' Opacity=".5" TrackPosition="true" ID="DropShadowProperties1" />
</atlasToolkit:DropShadowExtender>

Any ideas?oh and ignore the second one of these:

<atlasToolkit:DropShadowExtender ID="dse" runat="server">
 <atlasToolkit:DropShadowProperties TargetControlID="Panel1" Width="5" Rounded='false' Opacity=".5" TrackPosition="true" ID="dsBehavior" />
</atlasToolkit:DropShadowExtender>

cut and paste error. :)

Dropdownlist flickers in IE6.0 inside Update panel

Hi All,

There is few drop down lists inside update panel on my page. As of now I cannot make these drop down lists stand outside Update panel. These Drop down list boxes flickers in IE6.0 whenever updatepanel containing them gets updated/refreshed while this works absolutely fine in fire fox, safari and IE7.0 beta version.

Is there some solution so that I can remove flickers from IE6.0 whenever update panel refreshes?

Thanks in Advance.

Can you post the source?

Hi,

The same issue has been discussed athttp://forums.asp.net/t/990278.aspx.

AsGarbin said in that thread:

This is not an issue of the Atlas framework. It is an issue in the way IE6 renders this type of boxed list.

Best Regards

DropDownList blinks on update in IE, not in FF

I have some pages with lots of updatepanels and stuff, and everything works fine. The only glitch: each and one drop down list inside an UpdatePanel disappears when the update of that particular UpdatePanel is initiated, and then reappears whan the update is finished. This is quite some annoying "blink" ! :)

The "blink" happens to all my ddl's inside update panels, irrespective of whether I actually change their values, rebind, whatever. But, it happens in only IE 6, but NOT in FF 2, where the updates runs smoothly, just as for all other components in all my update panels.

Anyone with any ideas on how to stop the ddl's from blinking in IE ?

Bump. Anybody facing similar problem ? Or rather, solution

Dropdownlist

I have just started using Atlas and I am having a little trouble changing the text of a label when a font is selected from a drop down list. When the font-family name is selected the entire dropdown list is moved into the label. Here is my code

C# code

protected

void Page_Load(object sender,EventArgs e)

{

if (!Page.IsPostBack)

{

DisplayLabel.Style.Clear();FontFamilyDropDownList.DataSource = System.Drawing.FontFamily.Families;

FontFamilyDropDownList.DataBind();

FontFamilyDropDownList.Items.Insert(0,

"Default");

}

}

protectedvoid FontFamilyDropDownList_SelectedIndexChanged(object sender,EventArgs e)

{

DisplayLabel.Text = FontFamilyDropDownList.SelectedValue;

}

ASP Code

<asp:LabelID="DisplayLabel"runat="server"Text="Test Atlas Controls"></asp:Label>

<atlas:UpdatePanelID="FontNameUpdatePanel"Mode="Conditional"runat="server"><Triggers><atlas:ControlEventTriggerControlID="FontFamilyDropDownList"EventName="SelectedIndexChanged"/></Triggers><ContentTemplate>

<asp:DropDownListID="FontFamilyDropDownList"runat="server"DataTextField="Name"OnSelectedIndexChanged="FontFamilyDropDownList_SelectedIndexChanged"AutoPostBack="true"></asp:DropDownList>

</ContentTemplate></atlas:UpdatePanel>

Any suggestions would be great

Thanks

Mike

Figured it out, needed to place the label inside of the ContentTemplate and remove the DropDownList for it to work.

DropDownExtender: reusing DropDownControl - is it possible?

Hello Developers,

I have a form with several input textboxes and associated drop down extenders.
Is there any way I can use one drop down control (panel with link buttons) for all of my drop down extenders?
I just hate to render drop down control multiple times when each drop down should have exactly the same selection items.

Thanks for any pointers.

Tomasz

Hi Tomasz,

My understanding of your issue is that you want to use one DropDownExtender instead of several DropDownExtenders in your situation. If I have misunderstood, please feel free to let me know.

tdjastrzebski:

Is there any way I can use one drop down control (panel with link buttons) for all of my drop down extenders?

Do you want to set its TargetControl manually? I think it is a little complex unless we modify its source code. However I found a way . We only put one DropDownExtender on the page. When click (or a mouse event) the Control, DropDownExtender will conver it and act like one another DropDownExtender works on it. Here is the sample.

<%@. 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"
</script
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>

<asp:LinkButton ID="LinkButton1" runat="server" style="display:none">LinkButton</asp:LinkButton>
<br />
<br />

<asp:Panel ID="Panel1" runat="server" style="display:none">
123123123<br>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</asp:Panel>
<ajaxToolkit:DropDownExtender ID="DropDownExtender1" BehaviorID="myDDEBID" runat="server" TargetControlID="LinkButton1" DropDownControlID="Panel1">
</ajaxToolkit:DropDownExtender>

<asp:LinkButton ID="LinkButton2" runat="server" OnClientClick="return false;" onmouseover="showDDE('LinkButton2','LinkButton2');">LinkButton2</asp:LinkButton>
<asp:LinkButton ID="LinkButton3" runat="server" OnClientClick="return false;" onmouseover="showDDE('LinkButton3','LinkButton3');">LinkButton3</asp:LinkButton>
<%=DateTime.Now.ToString()%>
<script type="text/javascript" language="javascript">
function showDDE(lbName,lbText){
//If you want to change the Panel's content when switch from different LinkButtons , the easiest way is to add an UpdatePanel inside the Panel.
//When onhover event is fire, first refresh the UpdatePanel by sending an asynchronous postback.
var newLocation = $common.getLocation($get(lbName));
$get("LinkButton1").innerText = lbText; //if Firefox , $get("LinkButton1").textContent = lbText;
$common.setLocation($find("myDDEBID").get_element(),new Sys.UI.Point(newLocation.x ,newLocation.y));
$get("LinkButton1").style.display='';
$find("myDDEBID").hide(); //enhance the compatible
$find("myDDEBID").hover();
}
</script>
</form>
</body>
</html>
I hope this help.

Best regards,

Jonathan

Thanks!

This solution seems to work.

Tomasz

DropDownExtender Visual Question

When you hover over the dropdown element it gets a really nice khaki background, blue border, and a down image. More or less it looks like a drop down after you hover over the text.

Is there a way to get this style to be the default style? The dropdown extender is kind of misleading in that you wont know its a drop down menu till you hover over the text and expose the style that then displays it as a menu.

Any ideas?

It really depends on what you're trying to put the dropdown extender on - but generally, for something like a label, you could create an image, that looked very much like the dropdown extenders outside - and set it as the background to an appropriatly sized Div. Put the label inside the div, and apply the extender to the label.

DropDownExtender list is very disconnected from DropDownExtender label...why?

HI,

I have included a DropDownExtender control on my site's master page (currently with only two options to drop down). The DDE is targeting an asp:Label.

My problem is that when I move my mouse over the Label, the drop down list shows up at the bottom of the page! (For what it matters, in the past I have tried replacing the DDE with a HoverMenu and still the same problem occurs; the options that show up after hovering over the list show up at the bottom of the page).

The only styles I have in the table column that the DDE is located in is:

width:30%;text-align:left;

Does anyone have any idea as to why this is occurring...and what the fix could be? I appreciate any help, thank you. Frank

I have included the body of the site here:

******************

<body>

<formid="form1"runat="server">

<asp:ScriptManagerID="ScriptManager1"runat="server"/>

<imgsrc="pics/BGfade.jpg"id="bg"alt=""/>

<divid="content">

<!--Main Table for the body-->

<tableid="maintable">

<!--Title/Navigation Links Row-->

<trid="title">

<tdcolspan="2">

<imgsrc="pics/anomaliestitle.jpg"alt=""/>

<p>

<aid="homelink"runat="server"href="http://www.maybusher.com/Default.aspx">Blog Frankly</a>

<aid="anomalylink"runat="server"href="Default.aspx">Anomalies Home</a>

<aid="emaillink"runat="server"href="Email.aspx">Contact Me</a>

<aid="adminlink"runat="server"href="Login.aspx">Admin</a>

</p>

<p></p>

</td>

</tr>

<!--Main Content-->

<trid="midbody">

<!--Left Content Selection Column-->

<tdid="leftcolumn">

<cc1:DropDownExtenderID="ddeCategories"runat="server"

TargetControlID="lblDropUFO"

DropDownControlID="panelDropUFO">

</cc1:DropDownExtender>

<asp:PanelID="panelDropUFO"runat="server"

Style="display:none; visibility:hidden;">

<asp:LinkButtonID="lbUFOImages"runat="server"

Text="UFO Images"

Width="114px"

OnClick="lbUFOImages_Click"/><br/>

<asp:LinkButtonID="lbUFOVids"runat="server"

Text="UFO Videos"

Width="115px"/>

</asp:Panel>

<asp:LabelID="lblDropUFO"runat="server"

Text="UFO's"Width="119px"/>

</td>

<!--Middle Content Column-->

<tdid="midcolumn">

<asp:contentplaceholderid="body"runat="server">

</asp:contentplaceholder>

<p></p>

</td>

</tr>

<!--Footer Row-->

<trid="footer">

<tdcolspan="2">

<p>©2007 Frank Maybusher. All Rights Reserved.</p>

</td>

</tr>

</table>

</div>

</form>

</body>

Hi Maybush1,

I was failed to reproduce your issue with the sample code so I suspect that your Ajax Control Toolkit lower than V10618. If true, please please upgrade and have a test. Also, I should suggest you add CSS to your Panel (panelDropUFO).

Best regards,

Jonathan

Hi Jonathan,

Thanks for your reply.

I have tried what you suggested: upgraded the Toolkit to version 10920 and also I have tried positioning the Panel using CSS to no avail. The panel just does not want to respond to anything. It it still very disconnected and about 300 pixels down from the actual TargetControl Label. I've been trying to work on this for several weeks now (no kidding)! I'm at a complete loss.

Frank

Hi Maybush1,

I have tested with your code on my machine and it works pretty well. So really sorry that we cannot reproduce your issue and give your further more advices. Here is the test sample.

<form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server" /> <img src="pic/upg_Business.jpg" id="bg" alt="" /> <div id="content"><!--Main Table for the body--> <table id="maintable"><!--Title/Navigation Links Row--> <tr id="title"> <td colspan="2"> <img src="pic/upg_HomeBasic.jpg" alt="" /> <p> <a id="homelink" runat="server" href="http://www.maybusher.com/Default.aspx">Blog Frankly</a>       <a id="anomalylink" runat="server" href="Default.aspx">Anomalies Home</a>       <a id="emaillink" runat="server" href="Email.aspx">Contact Me</a>       <a id="adminlink" runat="server" href="Login.aspx">Admin</a> </p> <p> </p> </td> </tr><!--Main Content--> <tr id="midbody"><!--Left Content Selection Column--> <td id="leftcolumn"> <ajaxToolkit:DropDownExtender ID="ddeCategories" runat="server" TargetControlID="lblDropUFO" DropDownControlID="panelDropUFO"> </ajaxToolkit:DropDownExtender> <asp:Panel ID="panelDropUFO" runat="server" Style="display: none; visibility: hidden;"> <asp:LinkButton ID="lbUFOImages" runat="server" Text="UFO Images" Width="114px"/><br /> <asp:LinkButton ID="lbUFOVids" runat="server" Text="UFO Videos" Width="115px" /> </asp:Panel> <asp:Label ID="lblDropUFO" runat="server" Text="UFO's" Width="119px" /> </td> </tr><!--Footer Row--> <tr id="footer"> <td colspan="2"> <p> ?2007 Frank Maybusher. All Rights Reserved.</p> </td> </tr> </table> </div> </form>

My Ajax Control Toolkit's version is V10618. Would you please test it on another machine? If your problem is still there, please share more information.

I hope this help.

Best regards,

Jonathan

DropDownExtender LinkButton doesnt work

I am currently using a DropDownExtender to provide a SharePoint like experience with a drop down on a link button. This seems to work fine in IE7, but when I get to IE6, clicking on the LinkButton will activate the drop down (rather than firing the LinkButton's Click event). I've posted the pertinent code below. Thanks for any help!

Mike

<asp:LinkButton Style="padding-right: 25px; display: block; padding-left: 2px; padding-bottom: 2px;
padding-top: 2px;" ID="NameLink" runat="server" Text='<%# Bind("Name") %>'
Enabled='<%# Bind("HasChildren") %>' OnClick="NameLink_Click" CommandArgument='<%# Eval("ComponentIndex") %>'></asp:LinkButton>

<asp:Panel Style="display: none; visibility: hidden" ID="NameOptions"
runat="server">
<table>
<tbody>
<tr>
<td style="width: 6px">
<asp:Image ID="Image2" runat="server" ImageUrl="~/ReportTool/images/AddToPage.bmp"></asp:Image></td>
<td>
<asp:LinkButton ID="PropertiesLink" OnClick="EditProperties_Click" runat="server"
CommandArgument='<%# Eval("ComponentIndex") %>' Enabled='<%# Eval("Editable") %>'>Properties</asp:LinkButton></td>
</tr>
<tr>
<td style="width: 6px">
<asp:Image ID="Image3" runat="server" ImageUrl="~/ReportTool/images/delete_16x.ico">
</asp:Image></td>
<td>
<asp:LinkButton ID="RemoveLink" OnClick="RemoveLink_Click" runat="server" CommandArgument='<%# Eval("ComponentIndex") %>'
Enabled='<%# Eval("Removeable") %>'>Remove</asp:LinkButton></td>
</tr>
<tr>
<td style="width: 6px">
</td>
<td>
<asp:LinkButton ID="MoveItemButton" runat="server" CommandArgument='<%# Eval("ComponentIndex") %>'
Enabled='<%# Eval("Moveable") %>' OnClick="MoveItemButton_Click">Move Item</asp:LinkButton></td>
</tr>
<tr>
<td style="width: 6px">
</td>
<td>
<asp:LinkButton ID="SequenceItemButton" runat="server" CommandArgument='<%# Eval("ComponentIndex") %>'
Enabled='<%# Eval("Sequenceable") %>' OnClick="SeqItemButton_Click">Sequence Item</asp:LinkButton></td>
</tr>
<tr>
<td style="width: 6px">
</td>
<td>
<asp:LinkButton ID="StyleButton" runat="server" CommandArgument='<%# Eval("ComponentIndex") %>'
Enabled='<%# Eval("Styleable") %>' OnClick="StyleButton_Click">Style</asp:LinkButton></td>
</tr>
</tbody>
</table>
</asp:Panel>
<cc1:DropDownExtender ID="DropDownExtender1" runat="server" TargetControlID="NameLink"
HighlightBackColor="wheat" DropDownControlID="NameOptions">
</cc1:DropDownExtender>

Hi,

I tried it on IE 6 with following code, the click event is successfully fired.

<%@. 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 OnSelect(object sender, EventArgs e) { } protected void TextLabel_Click(object sender, EventArgs e) { Response.Write("fired"); }</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:LinkButton ID="TextLabel" Text="Select your favorite exotic ice-cream flavor" runat="server" Style="display: block; width: 300px; padding:2px; padding-right: 50px; font-family: Tahoma; font-size: 11px;" OnClick="TextLabel_Click">LinkButton</asp:LinkButton> <asp:Panel ID="DropPanel" runat="server" CssClass="ContextMenuPanel" Style="display :none; visibility: hidden;"> <asp:LinkButton runat="server" ID="Option1" Text="Mocha Blast" CssClass="ContextMenuItem" OnClick="OnSelect" /> <asp:LinkButton runat="server" ID="Option2" Text="Java Cyclone" CssClass="ContextMenuItem" OnClick="OnSelect" /> <asp:LinkButton runat="server" ID="Option3" Text="Dry Fruit" CssClass="ContextMenuItem" OnClick="OnSelect" /> </asp:Panel> <ajaxToolkit:DropDownExtender runat="server" ID="DDE" DropArrowImageUrl="../images/arrowvf2.gif" TargetControlID="TextLabel" DropDownControlID="DropPanel" /> <br /> </div> </form></body></html>

Can you update to the most recent version of AjaxControlToolkit and try again.

If it still doesn't work, can you post a simple page here? It seems you are using it in a GridView control, can you change the sample to use NorthingWind database?

Hi Raymond, Thank you for your reply!

I first loaded the update ajaxcontroltoolkit. That changed things so that link was getting clicking but then I couldn't activate the drop down. I then noticed that you had "width: 300px" and I wasn't specifying a width. After I added that, all is ok.

Now if only I can get it to work onFirefox ...

Mike

But it works on Firefox too according to my test.