ASP.NET Ajax Extender for multi-column widget drag & drop

http://business.goodnano-av.com/

crerielem — Thu, 02 Jul 2009 23:57:13 GMT

Read more hot reports about Business, Form business or Women small business loans business.goodnano-av.com

re: ASP.NET Ajax Extender for multi-column widget drag & drop

tochoni — Mon, 08 Jun 2009 14:45:01 GMT

i'm getting: Error Creating Control - CustomDragDropExtender2Unable to cast object of type 'Netco.CustomExtenders.CustomDragDrop.CustomDragDropDesigner' to type 'System.ComponentModel.Design.IDesigner'.

What i'm missing???

re: ASP.NET Ajax Extender for multi-column widget drag & drop

rasedo — Mon, 08 Jun 2009 14:33:38 GMT

when i use Extender for multi-column widget drag & drop in a list i get this:

The TargetControlID of 'CustomDragDropExtender1' is not valid. A control with ID 'thePanelID' could not be found.

re: ASP.NET Ajax Extender for multi-column widget drag & drop

rasedo — Mon, 08 Jun 2009 14:30:57 GMT

Hi, i'm trying to use this drag drop extender, but i'm rendering mi panels in a listview, Extender for multi-column widget drag & drop works in a listview????? plz help

re: ASP.NET Ajax Extender for multi-column widget drag & drop

swapnil ekhe — Wed, 25 Mar 2009 12:24:45 GMT

I am using the Customdragdrop extender it works fine with firefox ..but in ms internet explorer I am not able to select the header of widget properly, the selected widget goes to upperside and drops into another div also it is moving anywhere on my dashboard page ... Please help me to sole it.

re: ASP.NET Ajax Extender for multi-column widget drag & drop

chirag — Fri, 20 Mar 2009 13:27:57 GMT

hi guys,

I am getting javascript error onDrop is undefined.

Plz help?

Thanks

re: ASP.NET Ajax Extender for multi-column widget drag & drop

chirag — Fri, 20 Mar 2009 10:57:53 GMT

Hi Omar,

Thank you for your post. I am trying to get the CustomDragDrop extender to work, but I must be missing something.

Where do I put the CS and JS files that are included in the source code? Do I have to compile them? If so, do I put the DLL in Bin when done?

I m getting javascript error "CustomDragDrop" is undefined.

What to do?

Plz Help it is very urgent.........

re: ASP.NET Ajax Extender for multi-column widget drag & drop

Nithi Gurusamy — Thu, 11 Dec 2008 18:51:45 GMT

Following line from CustomDragDropExtender.cs is giving compiler error. Is it safe to remove this line?

[RequiredScript(typeof(FloatingBehaviorScript))]

Error 2 The type or namespace name 'FloatingBehaviorScript' could not be found (are you missing a using directive or an assembly reference?) C:\NithiGurusamy\Projects\AdvisoryConsole\CustomDragDrop\CustomDragDropExtender.cs 21 25 CustomDragDrop

Deleting a simple item(widget)

Anak1n — Thu, 11 Dec 2008 09:29:56 GMT

Hi everyone, before i ask my question, i would like to say that this work is totally impressive so congratulations !

Configuration : .Net 2.0 - VS2005

My problem is that i have two simple zones where there is 2 items(widgets) in each.

I would like to had a button on each item to simple remove them from the dragable zone.

The buttons i would like to affect an action are named "BtnDelete..". How can i code a function to remove them ?

Here is my code :

------------------ CODE -------------------

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Second.aspx.cs" Inherits="Second" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "www.w3.org/.../xhtml11.dtd">

.rightcol { width: 300px; float: left; padding: 0.5em; border: 1px solid black; margin: 0.5em; }

.leftcol { width: 300px; float: left; padding: 0.5em; border: 1px solid black; margin: 0.5em; }

.widget_header { width:auto; padding-top: 0.1em; padding-bottom: 0.1em; margin: 0em; font-size: small; cursor: move; background-color: #f0f0f0; font-family:Arial;}

.widget { position: relative; left: 0px; top: 0px; margin-bottom: 0.4em; background-color: white; }

.widget_dropcue { border: dashed 1px red; display:none; margin-bottom: 1em; }

</style>

</head>

<body>

<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true"

LoadScriptsBeforeUI="false" ScriptMode="Release" />

<div>

<asp:Panel ID="_leftPanel" runat="server" columnNo="0" CssClass="leftcol">

Widget Header 1

<asp:Button ID="BtnDelete1" runat="server" Text="remove item" />

</div>

Widget Header 2

<asp:Button ID="BtnDelete2" runat="server" Text="remove item" />

</div>

</div>

</asp:Panel>

<cdd:CustomDragDropExtender ID="_customDragDropExtenderLeft" runat="server" TargetControlID="_leftPanel"

DragItemClass="widget" DragItemHandleClass="widget_header" DropCueID="drop_cue_left"

OnClientDrop="onDrop" />

<asp:Panel ID="_rightPanel" runat="server" columnNo="1" CssClass="rightcol">

Widget Header 3

<asp:Button ID="BtnDelete3" runat="server" Text="remove item" />

</div>

Widget Header 4

<asp:Button ID="BtnDelete4" runat="server" Text="remove item" />

</div>

</div>

</asp:Panel>

<cdd:CustomDragDropExtender ID="_customDragDropExtenderRight" runat="server" TargetControlID="_rightPanel"

DragItemClass="widget" DragItemHandleClass="widget_header" DropCueID="drop_cue_right"

OnClientDrop="onDrop" />

</div>

</form>

function onDrop(sender,e)

{

var container = e.get_container();

var item = e.get_droppedItem();

var position = e.get_position();

var instanceId = parseInt(item.getAttribute("InstanceId"));

var columnNo = parseInt(container.getAttribute("columnNo"));

var row = position;

try

{

WidgetService.MoveWidgetInstance(instanceId, columnNo,row );

}

catch(e)

{

}

</script>

</body>

</html>

------------------ CODE -------------------

Thanks you for your help :)

re: ASP.NET Ajax Extender for multi-column widget drag & drop

BigFish — Tue, 02 Dec 2008 16:57:36 GMT

Hi Omar

I m not able to use this extender.

I m getting javascript error "CustomDragDrop" is undefined.

What to do?

Plz Help it is very urgent.........

re: ASP.NET Ajax Extender for multi-column widget drag & drop

Ted — Fri, 21 Nov 2008 18:25:59 GMT

Omar,

How do you keep the new placement of the widgets on page refresh? Whenever I refresh/postback the widgets return to their starting positions.

Thanx in advance,

Ted

re: ASP.NET Ajax Extender for multi-column widget drag & drop

Ted — Fri, 21 Nov 2008 16:02:15 GMT

I found my error. I had put the 'onDrop' function in the body and not the head of the page. All is working now - but it does require the 'dummy' button and confirmbuttonextender to run.

Ted

re: ASP.NET Ajax Extender for multi-column widget drag & drop

Ted — Fri, 21 Nov 2008 14:56:32 GMT

OK, so I downloaded your code and compiled it (after remarking out the following line from CustomDragDropExtender.cs - [RequiredScript(typeof(FloatingBehaviorScript))], as this line was causing a compilation error) with version 1.0.20229.20821 of the AjaxControlToolkit. I used example aspx page from Mike Puddephat and also included the 2 .js files in it. I have referenced the compiled .dll in my project. This is what I have codewise for my aspx page:

<%@ Page Language="VB" AutoEventWireup="true" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

<%@ Register Assembly="CustomDragDrop" Namespace="CustomDragDrop" TagPrefix="cdd" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "www.w3.org/.../xhtml11.dtd">

<title>ASP.NET AJAX Extender for multicolumn drag & drop</title>

.rightcol { width: 30%; float: left; padding: 0.5em; border: 1px solid black; margin: 0.5em; }

.leftcol { width: 30%; float: left; padding: 0.5em; border: 1px solid black; margin: 0.5em; }

.widget_header { width: 100%; padding-top: 0.1em; padding-bottom: 0.1em; margin: 0em; font-size: 100%; font-weight: normal; cursor: move; background-color: #f0f0f0; }

.widget { position: relative; left: 0px; top: 0px; margin-bottom: 1em; background-color: white; }

.widget_dropcue { border: dashed 1px gray; display:none; margin-bottom: 1em; }

</style>

</head>

<body>

function onDrop(sender, e)

{

var container = e.get_container();

var item = e.get_droppedItem();

var position = e.get_position();

var columnNo = parseInt(container.getAttribute("columnNo"));

alert( String.format( "Container: {0}, Item: {1}, Position: {2}, Column: {3}", container.id, item.id, position, columnNo ) );

}

</script>

<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true"

LoadScriptsBeforeUI="false" ScriptMode="Release" />

<div>

<asp:Button ID="dummy" runat="server" />

<cc1:ConfirmButtonExtender TargetControlID="dummy" runat="server" ConfirmText="Are you sure you want to do this?" />

<asp:Panel ID="_leftPanel" runat="server" columnNo="0" CssClass="leftcol">

Widget Header 1

</div>

Widget Header 2

</div>

</div>

</asp:Panel>

<cdd:CustomDragDropExtender ID="_customDragDropExtenderLeft" runat="server" TargetControlID="_leftPanel"

DragItemClass="widget" DragItemHandleClass="widget_header" DropCueID="drop_cue_left"

OnClientDrop="onDrop" />

<asp:Panel ID="_rightPanel" runat="server" columnNo="1" CssClass="rightcol">

Widget Header 3

</div>

Widget Header 4

</div>

</div>

</asp:Panel>

<cdd:CustomDragDropExtender ID="_customDragDropExtenderRight" runat="server" TargetControlID="_rightPanel"

DragItemClass="widget" DragItemHandleClass="widget_header" DropCueID="drop_cue_right"

OnClientDrop="onDrop" />

</div>

</form>

</body>

</html>

As you can see I have added the 'dummy' button and confirm button extender (which functions properly) that should activate the AjaxControlToolkit as suggested in one of your responses. However, it is still not working. I am using MS VS Pro 2005. The page loads and I get the 'crosshairs' indicating that I should be able to move the 'widget' but all that happens is the text highlights. Nothing moves, no dropcue appears. I get the following 2 errors on the page:

1) Line: 5

Char: 1

Error: 'Type' is undefined

Code: 0

URL: localhost/.../Default.aspx

2) Line: 258

Char: 20

Error: 'onDrop' is undefined

Code: 0

URL: localhost/.../Default.aspx

Any thoughts as to what I might be doing wrong?

Thanx in advance!

Ted

re: ASP.NET Ajax Extender for multi-column widget drag & drop

Osama — Sun, 16 Nov 2008 17:37:36 GMT

Hi Omar,

you are not just the MVP but ur the King

re: ASP.NET Ajax Extender for multi-column widget drag & drop

JohnM — Mon, 15 Sep 2008 20:16:11 GMT

Hi Omar,

Thank you for your post. I am trying to get the CustomDragDrop extender to work, but I must be missing something.

Where do I put the CS and JS files that are included in the source code? Do I have to compile them? If so, do I put the DLL in Bin when done?

re: ASP.NET Ajax Extender for multi-column widget drag & drop

omar — Mon, 25 Aug 2008 13:14:39 GMT

Hi Christian,

this is an advanced topic, so a bit hard to grasp. If you have some specific areas that you don't understand, let me know. I will try to clear it up.

Sorry Vidhya for not getting back to you earlier. I don't always get notification on comment posts.

re: ASP.NET Ajax Extender for multi-column widget drag & drop

Kanedogg — Mon, 25 Aug 2008 12:55:27 GMT

vidhya: firstly you should learn to read the tutorial first, secondly if you had some idea about coding you'd already have worked out it appears to be a class/extender. so there wont be an aspx page. Dude it's constructive critasizm, you'll figure this all out after a few good asp2/ajax books try some "Sams" or "O'rilley" titles!

Omar: keep up the good works man i'm a big fan of your stuff, its defiantely not for Noobs as i had asked you a similar question as vidhya about 1 year ago and didnt even get a response !! *frowns* -- feed your followers man we make who you are!

Cheers

msmvps.com christian

christian — Mon, 25 Aug 2008 01:22:07 GMT

Let me begin by saying that i love your blog msmvps.com a lot

now.. back to the post haha

I cant say that im 100% with what you typed up... care to clear things up for me?

re: ASP.NET Ajax Extender for multi-column widget drag & drop

vidhya — Fri, 25 Jul 2008 07:27:09 GMT

Hi omar,

I downloaded the source code.. but i unable to run that.. the file doesnt contain any aspx page.. have only cs file js file..i am using asp.net ajax 3.5.. can u plz help me... plz send me the working example to my mail id.. it is vidhya@ilink-systems.com

re: ASP.NET Ajax Extender for multi-column widget drag & drop

jo — Tue, 08 Jul 2008 15:58:45 GMT

Pardon me Omar. I'm a novice asp.net developer.

In your example, WidgetService.MoveWidgetInstance is being called. Do I have to create this service myself? How?

I don't mean to sound unappreciative but normally, when I find an extender, I add it on my toolbox, drag it to my form, set its properties and it works. As a user of your extender, do we need anything else (e.g. OnDrop) to make it to work?

I appreicate your help. I think this is great. I just need to learn exactly how to set it up.