Set DockHandle to None clientside

1 Answer 19 Views
Dock
Dave
Top achievements
Rank 1
Veteran
Dave asked on 15 Jun 2021, 10:32 PM

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

 

1 Answer, 1 is accepted

Sort by
0
Vessy
Telerik team
answered on 18 Jun 2021, 01:17 PM

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

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Dave
Top achievements
Rank 1
Veteran
commented on 18 Jun 2021, 02:00 PM

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
Telerik team
commented on 22 Jun 2021, 01:19 PM

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
Top achievements
Rank 1
Veteran
commented on 23 Jun 2021, 07:53 PM

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
Telerik team
commented on 24 Jun 2021, 05:39 AM

Thank you for the update, Dave! I am glad you have found a solution that fit your needs.
Tags
Dock
Asked by
Dave
Top achievements
Rank 1
Veteran
Answers by
Vessy
Telerik team
Share this question
or