CascadingDropDown: back

Showing posts with label back. Show all posts

Wednesday, March 28, 2012

Change in DragDropList in new release ?

Hello,

Back in Atlas Time (6 monthes ago), I used Garbin's great exemple for a drag and drop found here:
http://aspadvice.com/blogs/garbin/archive/2006/01/17/14730.aspx

Now, after updating to the latest releases of ASPnet Ajax, I cannot make it work.

I've changed the script reference call into:
<asp:ScriptReferenceName="Microsoft.Web.Resources.ScriptLibrary.PreviewScript.js"Assembly="Microsoft.Web.Preview"/>
<asp:ScriptReferenceName="Microsoft.Web.Resources.ScriptLibrary.PreviewDragDrop.js"Assembly="Microsoft.Web.Preview"/>

The drag function (using "draggableListItem" beaviour) works well but the drop ("dragDropList" beaviour) is bugged and I get the following javascript error :

'this._activeDragSource.get_dragDataType()' is null or is not an object

Has there been a change in dragDropList in the new release? I cannot see it listed in the documentation.

Thanks in advance

Hi,

I've modified the example and the following code is working for me:

<%@. Page %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head id="Head1" runat="server"> <title>Widgets UI Example</title> <style type="text/css"> body { font-family:Verdana; font-size:11px; } .main { position:relative; width:710px; height:540px; margin:auto; } .list1 { position:absolute; left:0px; height:520px; width:340px; padding:10px 5px 10px 10px; } .list2 { position:absolute; right:0px; height:520px; width:340px; padding:10px 10px 10px 5px; } .item { background:#fff; margin-bottom:5px; background:#fff; } .itemContent { padding:5px; text-align:center; } .itemHandle { height:15px; background:#e5ecf9; overflow:hidden; border-top:solid 1px #3366cc; font-weight:bold; cursor:move; } .dropCue { border:dashed 1px #ff0000; margin-bottom:5px; } .emptyList{ font-weight:bold; text-align:center; } .centered { margin:auto; } .templates { visibility:hidden; } </style></head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="scriptManager" runat="server"> <Scripts> <asp:ScriptReference Assembly="Microsoft.Web.Preview" Name="PreviewScript.js" /> <asp:ScriptReference Assembly="Microsoft.Web.Preview" Name="PreviewDragDrop.js" /> </Scripts> </asp:ScriptManager> <div class="main"><%-- Left Area --%> <div id="leftArea" class="list1"> <div id="content1" class="item"> <div id="content1Handle" class="itemHandle">Content 1</div> <div class="itemContent"> <asp:Login ID="myLogin" runat="server" CssClass="centered"></asp:Login> </div> </div> <div id="content2" class="item"> <div id="content2Handle" class="itemHandle">Content 2</div> <div class="itemContent"> <asp:TextBox ID="myTextBox" runat="server"></asp:TextBox> <asp:Button ID="myButton" runat="server" Text="ClickMe" /> </div> </div> </div><%-- Right Area --%> <div id="rightArea" class="list2"> <div id="content3" class="item"> <div id="content3Handle" class="itemHandle">Content 3</div> <div class="itemContent"> <asp:Calendar ID="myCalendar" runat="server" CssClass="centered"></asp:Calendar> </div> </div> </div><%-- Templates --%> <div class="templates"><%-- Drop Cue template --%> <div id="dropCueTemplate" class="dropCue"></div><%-- Empty template --%> <div id="emptyTemplate" class="emptyList">Drop content here.</div> </div> </div> </form> <script type="text/xml-script"> <page> <components><!-- Left Area --> <control id="leftArea"> <behaviors> <dragDropList dragDataType="HTML" acceptedDataTypes="'HTML'" dragMode="Move" direction="Vertical"> <dropCueTemplate> <template layoutElement="dropCueTemplate" /> </dropCueTemplate> <emptyTemplate> <template layoutElement="emptyTemplate" /> </emptyTemplate> </dragDropList> </behaviors> </control><!-- Right Area --> <control id="rightArea"> <behaviors> <dragDropList dragDataType="HTML" acceptedDataTypes="'HTML'" dragMode="Move" direction="Vertical"> <dropCueTemplate> <template layoutElement="dropCueTemplate" /> </dropCueTemplate> <emptyTemplate> <template layoutElement="emptyTemplate" /> </emptyTemplate> </dragDropList> </behaviors> </control><!-- Draggable items --> <control id="content1"> <behaviors> <draggableListItem handle="content1Handle" /> </behaviors> </control> <control id="content2"> <behaviors> <draggableListItem handle="content2Handle" /> </behaviors> </control> <control id="content3"> <behaviors> <draggableListItem handle="content3Handle" /> </behaviors> </control> </components> </page> </script></body></html>

Yes ! It works perfect.

Thank you very much Garbin ! Smile

It's a great example.

Many thanks

Any ideas how I could save the contents after dragging

Any help on how we can get the list contents after a drop event would be good

Thanks anyway

Mike

mike963:
Any ideas how I could save the contents after dragging
Any help on how we can get the list contents after a drop event would be good

That is what I would also like to know. Also could you please Garbin provide the same code without xmlscript but with Microsoft AJAX library?

Thanx

I've been able to use the following code to make elements draggable:

$create(Sys.Preview.UI.DraggableListItem, {'handle': $get('content1Handle')}, null, null, $get('content1'));

But I haven't been able to programatically attach dragDropList behaviors because I can't figure out how to get a reference to a template. I had it working in Atlas (see: http://forums.asp.net/thread/1411942.aspx) but I had problems updating the template manager to work with MS AJAX.

Not that this will help too much, but I've been attempting the same thing. I've been spending a lot of time trying to understand exactly what the differences are between how the xml-script is parsed and run vice the imperative methods that you (and I) are trying.

A few things of note...

First, I noticed that if you call Sys.Application.getComponents(), the .length property will reveal that the imperative method will show five components are present (one for each $create call if you're mod'ing garbin's example like I am). In the declarative version, there are 10. So, after some investigating it seems that the declarative model makes one component for each DragDropList and each DraggableListItem (each behavior) and another component for each control, as a Sys.UI.Control (rightArea, leftArea, content1, content2, content3). Not sure if that's relevant just yet, but I suspect it might be.

Second, dropCueTemplates are Sys.Preview.UI.Template objects, not 'Declarative Template' objects like in AlexL's previous work around.

I've made them imperatively, but that hasn't helped in part b/c I'm not sure I'm making all the initialization params right. Looking in the previewScript.debug.js file, it looks like there's four params expected, but when I reflect on the actual dropCueTemplate that is sitting in one of the list behavior objects, it looks liek only two of them are passed by the xml-script; those are the _layoutTemplate (to be expected; and it's the dropCueTemplate DomElement), and the _parentMarkupContext.

I tried passing the list behavior a dropCueTemplate by using both the $create(Sys.Preview.UI.Template and the =new Sys.Preview.UI.Template syntax, but I think it's coming down to not knowing how to build that parentMarkupContext right. I've also tried to build one of those to pass in, but so far no joy. $create says that it doesn't support the property and using the =new has no effect at all (no error, no success). I suspect that you have to call initialize to get it to do anything, but I'm not sure why it's throwing that 'not supported' error. The Sys.Preview.UI.Template.initialize() function just deals with really basic DOM manipulation (tests if the layoutelement has a parentnode, if so it removes it from its parent node...)

Well, anyway, I need to get back to work now. T hose are my thoughts, please post here if you guys find anything adn I'll do the same.

Paul

Sorry for the thread necromancy, bu thas anyone had any luck solving this yet? I'd *really* like to be able to handle the control via js instead of xml-script...

Paul

I am looking for an option to save the position of those dragged items. I tried including a floatingbehavior to the xml-script for that control and provided

move = "OnMove" attribute value. And on the OnMove i tried to Save Profile properties. It didn't work. Any suggestions ??

Just to mention I updated the code for Atlas RC1.

Source here :

http://blog.marjanenarnout.be/index.php?entry=entry070320-224307

Change event in Ajax Update Panel

Dear All

If any event contains inside of the update panelthen after post back focus is lost. More clearly, LetTextbox1 and TextBox2 inside of the update panel.TextBox1 containsTextChanged event andthis event contains TextBox2.Focus(). But after post back it lost the focus.

Thanks

Aminul Bari

It should work just fine. Let me see if I understand what you are saying:

You've got an updatepanel.

Try to use SetFocus of ScriptManager

http://www.asp.net/AJAX/Documentation/Live/mref/O_T_System_Web_UI_ScriptManager_SetFocus.aspx

Thanks. Its working fine.

Change content pages of Master Page without Master Page posting back?

so Master + content pages seems like exactly what I want except that they are assembled on postbacks. I am trying to make a site where both Master and Content pages have updatepanels, and the site switches content pages (40+ content pages) without the master page refreshing. Master Pages are assembled on postbacks so I don't think simple master page will work without annoying postbacks. I tried an approach where load content pages inside an Iframe, but the content pages take too long to load becuase each content page loads its own scriptmanager. View/Multiview will probably work but difficult to develop a 40 view multiview, I would rather develop 40 separate aspx pages. Any ideas on making any of these three approaches work well? either fix masterpage postback, or fix Iframe load times, or fix View/Multiview eaase of development?

THanks!

Todd Wilder

I think you are looking at the problem backwards - you have to change the MasterPage of the content page. this.Page.MasterPageFile property.

Another option which I successfuly have deployed is dynamically loading a usercontrol into a placeholder on the masterpage.

Monday, March 26, 2012

Catching form Submit and PageRequestManager Submit

We want to save some state on an Extender just before the page is posted back or submitted. We were just listening to the form's submit event

$addHandler(form,"submit", this._formSubmitDelegate);

but that doesn't fire when we postback is via a LinkButton so I want to catch that happening and reuse the same delegate.

I looked at using

 $addHandler(Sys.WebForms.PageRequestManager.getInstance(),'endrequest',this._endRequestDelegate);

but add Handler did not like non DOM elements being passed in. I then tried

 Sys.WebForms.PageRequestManager.getInstance().add_endRequest(this.endRequestHandler);

But the value of "this" was not what I was expecting. I am currently trying

if (typeof(Sys.WebForms)!=="undefined" &&typeof(Sys.WebForms.PageRequestManager)!=="undefined"){ Array.add(Sys.WebForms.PageRequestManager.getInstance()._onSubmitStatements,this._formSubmitDelegate); }else { $addHandler(form,"submit",this._formSubmitDelegate); }

This seems to call formSubmitDelegate and all works well. I realise i am accessing _onSubmitStatements which should be considered private. Am I cheating? What is the correct way of doing it?

TIA

Paddeo

Hi Paddeo,

Why the second one doesn't meet your requirement?

It's the recommended way that how a handler is added.

Well when my page is "Posted back" and that postback is caused by something causing validation WebForm_DoPostbackWithOptions is called. At the end of that routine it passes off to a ASP.NET AJAX routine that will do the "postback" using a WebRequest. That does NOT cause our Form Submit event to fire.

I thought I could get around this by trapping both the Submit AND adding to the _onSubmitStatements array (I realise that my eariler post was doing it OR the other) however this is still not enough. If I had a simple AutoPost=True ASP.Net CheckBox that calls _doPostback that exists in the page itself. This does not cause my onSubmitStatements to fire nor does it call DoPostbackWithOptions so yet again I have an issue with reliably catching postbacks and submits.

To this end I am going to give up trying to lazy write to state and just serilaise it every time it changes.

Pat

Saving client state on PropertyChanged event.

Yes, sorry I should have reported back. PropertyChanged is exactly what i changed to and that works much better. Even the approaches above were not enough to catch all the postbacks

Saturday, March 24, 2012

CascadingDropDownlist: How Do I Save the SelectedValue Back To Database

I'm using the AJAX CascadingDropDown extender inside a FormView's InsertItemTemplate.
Question: What is the correct way to save the CascadingDropDown 's selected value back to the database?

I've tried do it by setting the SelectedValue in the CascadingDropDown tag (not the DropDownList) like this:
SelectedValue='<%# Bind("SellerRegionId") %>'

However, when trying to save, this fails with error "Input string was not in a correct format."

I've been able to make it work by setting the Values dictionary in the FormView's ItemInserting() event handler, using the SelectedValue of the DropDownList control (not the extender), as follows:
e.Values["SellerRegionId"] = sellerRegionDropDownList.SelectedValue;

Is this the correct way to do this?

Thanks, in advance, for any help you can give.

Yes the latter should work and in my own opinion personally is more efficient.