Drag from toolbar to create dock

[Toby]

Hi,

I would like to have a toolbar where you can drag an item from a toolbar into the relevant dock area which will then create the item in the dock - the toolbar item should be available to be dragged multiple times to create the same item in different dock areas.

Has anyone else implimented this / or are there any demos on how to do this?

thanks
Toby

[Obi-Wan Kenobi]

I created a similar example a time ago, where a RadTreeNode is dropped over a zone and a new RadDock is created.
You can find it here:
http://www.telerik.com/community/forums/aspnet-ajax/docking/create-dropzone-from-dragged-treeview-node.aspx
Hope this helps.

[Toby]

thanks - Ill have a look.

cheers
Toby

[Toby]

This seems to work in IE, but it does not work properly in Firefox - when you try and drag it the node just gets stuck on the page before you get to the zone.

thanks
Toby

[Pero]

Hi Toby,

I examined the source code of the project and found an error in the definitions of some of the JavaScript methods. I have corrected the code and attached the project to the thread. There shouldn't be any problems now.

Please test it out and let me know if you still experience any of the problems.

Best wishes,
Pero
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Toby]

thanks - that works perfectly now.

cheers
Toby

[Toby]

Ok - it works pretty well in IE and Firefox - although periodically when dragging new docks in I get viewstate errors

Failed to load viewstate. The control tree into which viewstate is being loaded must match the control tree that was used to save viewstate during the previous request. For example, when adding controls dynamically, the controls added during a post-back must match the type and position of the controls added during the initial request.

any ideas why this may be happening?

Also when dragging the docks in using firefox the existing docks in the layout seems to jump about a bit when you are moving the dragged node in the existing layout - this does not happen in IE though.

thanks

Toby

[Pero]

Hi Toby,

I could not encounter any ViewState errors while running the project that I previously sent you. Could you please open a new support ticket and send us your project, so the problem can be reproduced on our side? Also more detailed information about how to reproduce the problem will be of help.

Regarding the second problem - you should place additional condition in the onNodeDragging event handler to check whether the previousZone is equal to the zone (current zone) objects are equal and hide the place-holder only if they are different. Here is the modified source code of the onNodeDragging method:

function onNodeDragging(sender, args)

{

currentTreeView = sender;

var target = args.get_htmlElement();

var zone = null;

var parentNode = target;

while (parentNode != null)

{

if (parentNode.id)

{

if ($find(parentNode.id))

{

if (Object.getTypeName($find(parentNode.id)) == "Telerik.Web.UI.RadDockZone")

{

zone = $find(parentNode.id);

break;

}

}

}

parentNode = parentNode.parentNode;

}

//// Modify the condition to stop flickering in FF

if (previousZone != null && previousZone != zone)

{

previousZone._hidePlaceholder();

previousZone = null;

}

if (zone != null)

{

zone._showPlaceholder(args._node);

previousZone = zone;

currentZone = zone;

}

}

Best wishes,
Pero
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.