Set DockHandle to None clientside

[Dave]

I need to show the handle / title bar under certain conditions, and have not showing under other conditions.  Looking for a way to set the DockHandle to none using javascript.

Is there a way to do this?   I tried dock.set_handle(null), and that didn't work.

Thanks,

Dave

 

[Vessy]

Hello Dave,

You can see the possible ways to set the dock drag handle on the client-side in the following live demo:

https://demos.telerik.com/aspnet-ajax/dock/examples/setdraghandleclientside/defaultcs.aspx

Regards,
Vessy
Progress Telerik

[Dave]

Hi Vessy,

Thanks for the information. But I'm not finding what I want. Here's a better description using the demo you suggested:

Initially, I want the state of the dock as shown in Column one, top dock. It has a title bar, collapse and delete commands. Now, when the user clicks a button on the client, I want the dock to appear as it does in the second column, top dock. No title bar and no commands.

The button's click event would need some javascript that modifies the client-side dock object to achieve the above scenario. Is this possible?

Thanks!
Dave

[Vessy]

Thanks a lot for the clarification, Dave. Unfortunately, the only way to change the dock handle on the client-side is to set a custom one like demonstrated in the linked demo. 

If you want to change the default DockHandle of the control, you will need to do it on the server-side. A possible way to initiate it from the client-is to perform a manual AJAX request and change the dock handle in the server-side OnAjaxRequest handle.

For example:

        <telerik:RadDock RenderMode="Lightweight" ID="RadDock1" Title="RadDock1"
            runat="server" Width="200px" CssClass="higherZIndex" AllowedZones="">
            <ContentTemplate>
                <div style="padding: 11px;">
                    You can drag this object through the titlebar, no custom handle is defined.
                </div>
            </ContentTemplate>
        </telerik:RadDock>

        <div style="padding-top: 200px">
            <telerik:RadButton ID="RadButton1" runat="server" Text="Change handle" AutoPostBack="true" OnClick="RadButton1_Click"></telerik:RadButton>
        </div>

 

    protected void RadButton1_Click(object sender, EventArgs e)
    {
        RadDock1.DockHandle = Telerik.Web.UI.DockHandle.None;
    }

[Dave]

Appreciate your help! I was able to achieve the result I needed solely client side.

Using the information from this post: https://www.telerik.com/forums/can-t-hide-raddock-border, I can hide the dock's borders and title bar by modifying the dock's CssClass, i.e. dock.get_element().className. And using the demo you suggested, I was able to set a custom handle as a custom command in the toolbar.

When the CssClass is set to "hidden", then only the content shows. When set to "visible" the dock's borders, title and commands appear. The dock can now be moved using the custom handle, and other dock commands can be clicked as needed.

Hope this make sense.

Thanks again!
Dave

[Vessy]

Thank you for the update, Dave! I am glad you have found a solution that fit your needs.