Telerik RadDock - ajax update returns a JSON error

Question

Trying to update RadDock (open/close it) by putting it in UpdatePanel however no luck....I'm getting the following response.

189|error|500|Invalid JSON primitive: {"Top":179,"Left":583,"DockZoneID":"","Collapsed":false,"Pinned"

:false,"Resizable":false,"Closed":false,"Width":"300px","Height":null,"ExpandedHeight":0,"Index":-1} .|

Here is the code:

<asp:UpdatePanel ID="upanelDock" runat="server">
    <ContentTemplate>
        <telerik:RadDock ID="RadDock1" runat="server" Width="300px">
            <TitlebarTemplate>
                <h2>
                    this is a dock</h2>
            </TitlebarTemplate>
            <ContentTemplate>
                some content here
                <br />
                some content here
                <br />
                some content here
                <br />               
            </ContentTemplate>
        </telerik:RadDock>
    </ContentTemplate>
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="lbtnUpdate" EventName="Click" />
    </Triggers>
</asp:UpdatePanel>
<asp:LinkButton ID="lbtnUpdate" runat="server" OnClick="lbtnUpdate_Click">update</asp:LinkButton>

Code behind:

    protected void lbtnUpdate_Click(object sender, EventArgs e)
{

    if (this.RadDock1.Closed)
        this.RadDock1.Closed = false;
    else
        this.RadDock1.Closed = true;
}

What am I doing wrong here?

Answer 1

UPDATE: You are not doing anything wrong in your code. I was able to duplicate this problem using both UpdatePanel and RadAjaxManager. According to Telerik support, this is a "limitation" in the RadDock control. More like a bug in my opinion.

Here's what it says in their Support Page Forum: Non-docked Docks cloned plus Invalid JSON primitive

The RadDock control is not a standard control and there are some limitations when it is updated via ajax. If you want to update a RadDock via ajax you should update all RadDockZones and all RadDocks should be docked.

The error you experience is due to that you update a floating RadDock with AJAX. When dragging the dock you move it outside the update panel and this causes AJAX not working properly as it attempts to recreate the dock at the place it was previously located. In this way two docks with the same id appear on the page and this leads to an exception. This is a common problem for all controls which could be moved in the DOM.

I was able to make your code work by wrapping the RadDock inside a RadDockZone and setting the DockMode property to "Docked". If however, I drag the dock out of the zone, leave it floating and click the "Update" button, the error reappears.

<asp:UpdatePanel ID="upanelDock" runat="server">
    <ContentTemplate>
       <telerik:RadDockZone runat="server">
        <telerik:RadDock ID="RadDock1" runat="server" Width="300px" 
                                                      DockMode="Docked">
            <TitlebarTemplate>
                <h2>
                    this is a dock
                </h2>
            </TitlebarTemplate>
            <ContentTemplate>
                some content here
                <br />
                some content here
                <br />
                some content here
                <br />               
            </ContentTemplate>
        </telerik:RadDock>
      </telerik:RadDockZone>
    </ContentTemplate>
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="lbtnUpdate" EventName="Click" />
    </Triggers>
</asp:UpdatePanel>
<asp:LinkButton ID="lbtnUpdate" runat="server"
           OnClick="lbtnUpdate_Click">update</asp:LinkButton>

Answer 2

I have a couple RadDocks floating inside a RadDockLayout. Ajax works if I update the RadDock, the RadDockLayout, or the main panel that wraps the RadDockLayout through the RadAjaxManager object.

Ex:

<telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
    <UpdatedControls>
        <telerik:AjaxUpdatedControl ControlID="mainPanel" />
    </UpdatedControls>
</telerik:AjaxSetting>