Dynamic Raddock in sharepoint 2010 webparts

[USI]

Hi,

I want to use raddocks in sharepoint 2010 using ajax to create them and to reload their content.

My problem is happening when I add the first dock dinamically. The ajax request is made and my javascript is evaluated after the request is done but the i'm unable to get the RadDock client instance.

I already tried the hidden updatePanel approach and  the RadAjaxManager approach but I did not succeed.

Here is the code I'm using:

• WebPart code (RadDockSpike.cs):

[ToolboxItemAttribute(false)]
public class RadDockSpike : WebPart
{
    // Visual Studio might automatically update this path when you change the Visual Web Part project item.
    private const string _ascxPath = @"~/_CONTROLTEMPLATES/Buv.Backoffice.WebAdmin/RadDockSpike/RadDockSpikeUserControl.ascx";

    private RadAjaxManager _ajaxManager;

    protected override void OnInit(EventArgs e)
    {
        base.OnInit(e);

        // Init the ajax manager
        _ajaxManager = new RadAjaxManager();
        _ajaxManager.EnableEmbeddedScripts = true;
        Page.Items.Add(typeof(RadAjaxManager), _ajaxManager);
        Page.Form.Controls.AddAt(0, _ajaxManager);
    }

    protected override void CreateChildControls()
    {
        base.CreateChildControls();

        Control control = Page.LoadControl(_ascxPath);
        RadDockSpikeUserControl controlAux = control as RadDockSpikeUserControl;
        controlAux.AjaxManager = _ajaxManager;
        Controls.Add(control);


    }
}

• Usercontrol loaded by the WebPart  (RadDockSpikeUserControl.cs):

public partial class RadDockSpikeUserControl : UserControl
{
    public RadAjaxManager AjaxManager;

    private List<DockState> _currentDockStates
    {
        get
        {
            //Store the info about the added docks in the session. For real life
            // applications we recommend using database or other storage medium
            // for persisting this information.
            List<DockState> _currentDockStates = (List<DockState>)Session["CurrentDockStatesMyPortal"];
            if (Object.Equals(_currentDockStates, null))
            {
                _currentDockStates = new List<DockState>();
                Session["CurrentDockStatesMyPortal"] = _currentDockStates;
            }
            return _currentDockStates;
        }
        set
        {
            Session["CurrentDockStatesMyPortal"] = value;
        }
    }

    protected override void OnInit(EventArgs e)
    {
        base.OnInit(e);

        // Initialize toolbar
        RadToolBarButton button = new RadToolBarButton();
        button.Text = "Open new dock";
        ToolBar.Items.Add(button);

        ToolBar.ButtonClick += new RadToolBarEventHandler(ToolBar_ButtonClick);

        //Recreate the docks in order to ensure their proper operation
        for (int i = 0; i < _currentDockStates.Count; i++)
        {
            if (_currentDockStates[i].Closed == false)
            {
                AddDockFromState(_currentDockStates[i]);
                //We want to save the dock state every time a dock is moved.
            }
        }
    }

    protected override void CreateChildControls()
    {
        base.CreateChildControls();

    }

    protected override void OnPreRender(EventArgs e)
    {
        base.OnPreRender(e);
        AjaxManager.AjaxSettings.AddAjaxSetting(ToolBar, Panel1, AjaxLoadingPanel);

    }

    protected void HandleLoadDockLayout(object sender, DockLayoutEventArgs e)
    {
        //Populate the event args with the state information. The RadDockLayout control
        // will automatically move the docks according that information.
        foreach (DockState state in _currentDockStates)
        {
            e.Positions[state.UniqueName] = state.DockZoneID;
            e.Indices[state.UniqueName] = state.Index;
        }
    }

    protected void HandleSaveDockLayout(object sender, DockLayoutEventArgs e)
    {
        //Save the dock state in the session. This will enable us
        // to recreate the dock in the next Page_Init.
        _currentDockStates = DockLayout.GetRegisteredDocksState();
    }

    void ToolBar_ButtonClick(object sender, RadToolBarEventArgs e)
    {
        AddDock("Untitled...");
    }

    private void AddDockFromState(DockState state)
    {
        RadDock dock = new RadDock();
        dock.ID = string.Format("Dock{0}", state.UniqueName);
        dock.ApplyState(state);

        Panel1.Controls.Add(dock);

        CreateSaveStateTrigger(dock);
    }

    protected void AddDock(string title)
    {
        RadDock dock = new RadDock();
        dock.UniqueName = Guid.NewGuid().ToString();
        dock.ID = string.Format("Dock{0}", dock.UniqueName);
        dock.Title = title;
        dock.Text = "Dock content";
        //dock.Resizable = true;
        //dock.EnableRoundedCorners = true;

        Panel1.Controls.Add(dock);

        CreateSaveStateTrigger(dock);

    // Here is the problem: The dock client instance is null???!!!
        string script = string.Format(@"
                        var dock = $find('{0}');
            alert('Dock: ' + dock);
                        //$find('{1}').dock($find('{0}'));
                        $find('{2}').ajaxRequest();",
                dock.ClientID, PageDockZone.ClientID, AjaxManager.ClientID);

        AjaxManager.ResponseScripts.Add(script);


    }

    private void CreateSaveStateTrigger(RadDock dock)
    {
        //Ensure that the RadDock control will initiate postback
        // when its position changes on the client or any of the commands is clicked.
        //Using the trigger we will "ajaxify" that postback.
        dock.AutoPostBack = true;
        dock.CommandsAutoPostBack = true;

        AjaxSetting trigger = new AjaxSetting();
        trigger.AjaxControlID = dock.ID;
        trigger.EventName = "DockPositionChanged";

        AjaxUpdatedControl updatedControl = new AjaxUpdatedControl();
        updatedControl.ControlID = Panel1.ID;

        trigger.UpdatedControls.Add(updatedControl);
        AjaxManager.AjaxSettings.Add(trigger);


        trigger = new AjaxSetting();
        trigger.AjaxControlID = dock.ID;
        trigger.EventName = "Command";

        updatedControl = new AjaxUpdatedControl();
        updatedControl.ControlID = Panel1.ID;

        trigger.UpdatedControls.Add(updatedControl);
        AjaxManager.AjaxSettings.Add(trigger);
    }
}
   


    

    
Usercontrol loaded by the WebPart  (RadDockSpikeUserControl.ascx):
    
    
    




<telerik:RadToolBar ID="ToolBar" runat="server">

</telerik:RadToolBar>

<asp:Panel ID="DocksContainer" runat="server">
    <telerik:RadDockLayout ID="DockLayout" runat="server" OnLoadDockLayout="HandleLoadDockLayout" OnSaveDockLayout="HandleSaveDockLayout" >

        <telerik:RadDockZone ID="PageDockZone" runat="server">

        </telerik:RadDockZone>

       <div style="display: block">
            Hidden Ajaxified asp:Panel, which is used to receive the new dock controls. We will move
            them with script to the desired initial dock zone.
            <asp:Panel ID="Panel1" runat="server">
            </asp:Panel>
        </div>


    </telerik:RadDockLayout>
</asp:Panel>

<telerik:RadAjaxLoadingPanel ID="AjaxLoadingPanel" runat="server" Skin="Default" MinDisplayTime="500">
</telerik:RadAjaxLoadingPanel>

Can someone help me?

Michael Pinheiro

[Pero]

Hi Michael,

Thank you for the source code. I have already answered your question in the corresponding support ticket. But will post the answer here so it is available to our community. Here it is:

I examined your code, and noticed that the script registered from the server is causing the problem. The script added with the AjaxManager will be immediately executed when the HTML comes to the client, even before the Ajax controls are created on the client. That's why the $find method returns null, the dock's client object is not created yet.
To fix this issue, you should change the script a little bit, so it is executed after all controls are created, like Application.load for example. Here is how the script should look like:

string script = string.Format(@"
        function _addDock()
        {{
            var dock = $find('{0}');
            alert('$find() returning value: '+ dock);
            dock._form.appendChild(dock.get_element());
            Sys.Application.remove_load(_addDock);
        }}
        Sys.Application.add_load(_addDock);
        ", dock.ClientID);
AjaxManager.ResponseScripts.Add(script);

All the best,
Pero
the Telerik team