Creating a RadDock client-side?

[Sean]

Hi all,

I am looking to create a RadDock client-side, but noticed that calling Telerik.Web.UI.RadDock() does not produce an object as I was hoping it would. Is this functionality support explicitly? If not, how about a work-around that could achieve this functionality?

At the very least, let me explain my whole scenario:

I am converting a RadControls for AJAX application to MVC2. I have opted to use the AJAX controls inside of the MVC architecture. My application supports dynamically creating RadDocks and attaching them to dynamically created RadDockZone's on the page. If I create my RadDock in my Controller, then I have no means to Dock it to a RadDockZone (since the View knows about this control, not the Controller).

As such, I was planning on creating a RadDock in the controller, setting it all up, then passing it back to the view as JSON. Once in the view, I would like to create the RadDock object again based off of the JSON, but this does not seem possible?

Suggestions welcome..

[Niko]

Hi Sean,

Have you considered using the View Model or the ViewData collection to make the data(dock object) available in the View? Here are some references on the topic: http://weblogs.asp.net/scottgu/archive/2007/12/06/asp-net-mvc-framework-part-3-passing-viewdata-from-controllers-to-views.aspx and http://stephenwalther.com/blog/archive/2009/04/13/asp.net-mvc-tip-50-ndash-create-view-models.aspx.
I wouldn't advise you to use the other option - to create the RadDocks manually on the client-side, as the control is not designed to be used in that way. If you still wish to try this method, you will need to recreate the HTML of the RadDock and on the page init client-side event use the $create method to create the RadDock control. In order to see the specifics of this operation you could create a sample page with a RadDock and check the rendered content(view source).

Hope this helps.

Best wishes,
Niko
the Telerik team

[Sean]

Hi Telerik,

Thank you for your response. I did do some reading about ViewData, and in fact played around with an example for a bit, but it does not seem technically feasible to recreate what I currently have using partial views. My controller is able to store the RadDock control inside of the ViewData collection, but then there needs to be an event for the view to respond to to work with the data (e.g. page_load for a partial view). If I load the data on this partial view, though, the next time I create a control the old data will be lost on that view. Stacking up views indefinitely isn't conceptually possible as far as I know. 

I would love to take a stab at recreating the RadDock manually client-side -- if Telerik thinks it is worth pursuing! Obviously there are some known limitations of the RadDock which have kept Telerik from utilizing it. In my dashboard, I have refactored out the need for a RadDockLayout control. Indeed, I am monitor and handing dynamically created RadDocks and RadDockZones with my own managers. With that in mind, would there be anticipated limitations on the RadDock control if I was able to visually represent them on the page? Would they still respond to dragging events (I'm expecting I'd have to hook up my own event handlers client-side)?

I know you guys officially don't support this, so I'm not going to ask for an example, but it would still be nice to see someone take a stab at it for fun before I do! :D

[Niko]

Hi Sean,

If you have decided to try recreating the RadDock on the client side you have basically two options:

1. Create a prototypical RadDock in the View and utilize the clone client-side method specifying the id of the new dock as a parameter to the method. After that you could use the client-side API to recreate all the settings of the newly created/clones dock. This option is the easier one and it seems to be just fine for simple scenarios. Please, review the attached implementation of this approach.
2. You could recreate the HTML of the control from a template through using JavaScript and its DOM API. Please, note that you will also need to provide the $create clause with all the necessary dependencies. For best results, please, review the generated code from a single RadDock. This approach is quite complex and may involve a lot of client-side complications.

Hope this will be a good starting point for you and the project you wish to accomplish.

Greetings,
Niko
the Telerik team

[Sean]

Hi Telerik,

Thank you for your continued support. I have opted to pursue option 1). 

I am encountering the following error on JSON.stringify:

Uncaught TypeError: Converting circular structure to JSON

I am encountering this error when I try and pass my newly created object back to the server so that I may persist its information to a database. Since dynamically created controls are lost on post-back I need to be able to write down the settings of my control.

Here is what I did to produce this error:

On my index.aspx I have: "    <telerik:RadDock ID="RadDockPrototype" runat="server" Height="0"/> " and I store its clientID in a variable accessible to an external JS file.

Then, I execute the following JS code to produce the error. Do you have any suggestions on how to bypass this situation? I would be happy overriding toJSON's stringify method to account for the circular reference in RadDock, or at least knowing what the circular reference is.

function OnClientDropped(sender, eventArgs) {

    var droppedID = eventArgs.get_htmlElement().id;

 

    if (droppedID.indexOf("RadDockZone") != -1) {

        var radDockZone = $find(droppedID);

        if (radDockZone.get_docks().length == 0) {

            var radDock = $find(radDockProtoID).clone("RadDock_ABC");

            radDock.set_height(200);

            var data = $.toJSON(radDock);

        }

    }
}

Alternatively, if we're unable to deal with the circular reference (I explored a couple of other jsonifying third-party scripts)
I'm wondering if using: http://api.jquery.com/jQuery.param/ would be possible?

Currently I receive the following error in Telerik.Web.UI.RadDock._fixIeHeight 

1. Uncaught TypeError: Cannot read property 'offsetHeight' of undefined

[Niko]

Hello Sean,

Such a circular reference exists in almost all AJAX Web controls. It lies with the control's DOM element, as this same element keeps a reference to its control through the _control property:

var conrol = sender;
control == control.get_element()._control; //this statement is true. This is the circular reference

When the toJSON method tries to create a JSON string out of it it stumbles upon this circular reference. 
In order to avoid this error you should build an simple object with only the properties and values that you need to have persisted. For example:

var data = {
    width: dock.get_width(),
    height: dock.get_height(),
    x: dock.get_left(),
    y: dock.get_top()
};

Hope this helps.

Greetings,
Niko
the Telerik team

[Sean]

Ahh, yep. I had spent some time thinking about this issue away from the forum and came to the same conclusion. In addition, it's probably best practice to be doing this regardless of circular reference issues. Passing the least amount of data needed is always a good idea. Thanks.

Sean