Insert (i.e. AddAt) during DockPositionChanged event?

[Pete]

Hi,

I'm wondering if it's possible to insert a new dynamically created dock into a specific zone at a specific index?

The reason I ask is that I am developing a page layout editor and so have a "toolbox" of controls that a user can drag and drop on to their page layout, however because when a dock is moved it (obviously) gets removed from the "toolbox", thus I create a replacement control and put in the toolbox so the user can have multiple controls of the same type. The problem is I have a specific order for the controls in the toolbox and when I create the replacement control it just places that control at the bottom of the toolbox.

e.g. If I have a toolbox containing "text", "image" and "link" controls (in that order) and a user drags the "text" control on to their page then during the DockPositionChanged event I create another "text" control and place that in the toolbox, that way the user can drag another "text" control on to their page (if need be). But when I do so the "text" control is placed at the bottom of the toolbox and so the toolbox order is then "image", "link" and then "text" rather than "text", "image" and then "link".

So, is there a way to create a dock during the DockPositionChanged event and place it at a specific index?

I've tried the following and they've all failed:
1. Toolboxzone.Controls.AddAt(3, dock);
2. DockLayout.Controls.Add(dock);
    Toolboxzone.Controls.AddAt(3, dock);
3. Using ScriptManager.RegisterClientScriptBlock to register some js that moves the dock
4. Putting a literal in the same update panel and setting it's Text property to be some js that moves the dock
5. Placing some js that moves the dock into the update panel with calls to properties to get new dock and it's index "<%= NewDock %>"

The Javascript I tried was:
<script language="javascript" type="text/javascript">
    var dock = $find('<%= NewDock %>');
    var zone = $find('<%= ToolboxDockZone.ClientID %>');

    if (dock && zone) {
        dock.undock();
        zone.dock(dock, <%= MovedDockIndex %>);
    }
</script>
(note: for attempts 3 and 4 I used a string builder and just put in the control id's instead of "<%= NewDock %>", etc)

Has anyone got any ideas?

Thanks,
Pete

[Pero]

Hi Pete,

This can be done by outputting a JavaScript function on the server that places the dock at the desired position. For your convenience I have prepared a modification of the My Portal example that docks the RadDock to the zone at the desired position. It is attached to the thread.

And this is the source code that is placing the dock at the specified position:

int dockPosition = Convert.ToInt32(ddlPosition.SelectedValue);

ScriptManager.RegisterStartupScript(this,
    this.GetType(),
    "MoveDock",
string.Format(@"function _moveDock() {{
            Sys.Application.remove_load(_moveDock);
            $find('{1}').dock($find('{0}'),{2});
            }};
            Sys.Application.add_load(_moveDock);", dock.ClientID, DropDownZone.SelectedValue, dockPosition),
true);

Regards,
Pero
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.