This is a migrated thread and some comments may be shown as answers.

Client Side Show/Hide

4 Answers 241 Views

Dock

This is a migrated thread and some comments may be shown as answers.

4 Answers, 1 is accepted

answered on 02 May 2007, 01:40 PM

Hi Jon,

We will provide the required Show/Hide functionality in a function in one of the following versions of RadDock Prometheus. Currently you can show and hide the RadDock objects with the following code:

<telerik:raddocklayout runat="server" id="RadDockLayout1">
    <telerik:raddockzone runat="server" id="RadDockZone1" orientation="Vertical" minheight="200px"
        width="200px">
        <telerik:raddock id="RadDock2" title="RadDock2" runat="server" width="200px" dockhandle="TitleBar"
            text="DockHandle is set to Grip. This mode is suitable for scenarios when you do not need the DockCommand items and you want to maximize the content size.">
        </telerik:raddock>
        <telerik:raddock id="RadDock4" title="RadDock4" runat="server" width="200px" dockhandle="TitleBar"
            text="DockHandle is set to TitleBar. In this mode the TitleBar is visible and you have access to the DockCommand items.">
            <Commands>
                <telerik:DockCommand OnClientCommand="setVisibility" />
            </Commands>
        </telerik:raddock>
    </telerik:raddockzone>
</telerik:raddocklayout>

<script type="text/javascript">
function setVisibility(sender, args)
{
    var myDock = $find('<%= RadDock2.ClientID %>');
    myDock.set_Closed(!myDock.get_Closed());
}

Telerik.Web.UI.RadDock.prototype._closed = null;
Telerik.Web.UI.RadDock.prototype.get_Closed = function(value)
{
    return this._closed;
}
Telerik.Web.UI.RadDock.prototype.set_Closed = function(value)
{
    this._closed = value;

    this.get_element().style.display = value ? "none" : "block";

    this.conditionalPostback("Close");
}
</script>

Best regards,
Rumen
the telerik team

Instantly find answers to your questions at the new Telerik Support Center

answered on 12 Jan 2018, 04:54 PM

raddock.png

Hi Rumen,

I have a RadDock as below: Sample Attachement

Step 1: On Screen load, drap RadZone1 > RadDoc1 into RadZone2.
Step 2: Click on (x) close button of RadDoc1, then it should go back to RadZone1 (or Parent zone).
Is this possible. Please let me know or anybody help me here.
<telerik:RadDockLayout runat="server" ID="RadDockLayout1">
<table>
<tr>
<td style="vertical-align: top">
<telerik:RadDockZone ID="RadDockZone1" runat="server" Orientation="Vertical" Width="300px" Height="30px">
<telerik:RadDock RenderMode="Auto" ID="RadDock1" runat="server" Title="Documents Review" Width="20%" EnableAnimation="true"
EnableRoundedCorners="true" Resizable="true"
OnClientDragStart="Collapse" OnClientDragEnd="Expand" CssClass="higherZIndex">
<ContentTemplate>
<uc2:BlogsControl ID="BlogsControl1" runat="server"></uc2:BlogsControl>
</ContentTemplate>
<Commands>
<telerik:DockCloseCommand OnClientCommand="setVisibility" />
</Commands>
</telerik:RadDock>
</telerik:RadDockZone>
</td>
<td style="vertical-align: top">
<telerik:RadDockZone ID="RadDockZone2" runat="server" Orientation="Vertical" Width="300px" Height="30px">

</telerik:RadDockZone>
</td>
</tr>
</table>
</telerik:RadDockLayout>

answered on 15 Jan 2018, 02:56 PM

Hi Krishna,

You can hide the close X button and replace it with a custom command which will move the Dock to the first docking zone on the page. You can also style the custom command button to look like the close button with the highlighted class below:

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

<style>

.RadDock .rdCommandButton:before {

content: "\e11b" !important;

}

</style>

</head>

<body>

<form id="form1" runat="server">

<asp:ScriptManager runat="server" />

<script>

function setVisibility(dock, args) {

$find("<%=RadDockZone1.ClientID %>").dock(dock);

args.set_cancel(true);

}

</script>

<telerik:RadDockLayout runat="server" ID="RadDockLayout1">

<table>

<tr>

<td style="vertical-align: top">

<telerik:RadDockZone ID="RadDockZone1" runat="server" Orientation="Vertical" Width="300px" Height="30px">

<telerik:RadDock RenderMode="Auto" ID="RadDock1" runat="server" Title="Documents Review" Width="20%" EnableAnimation="true"

EnableRoundedCorners="true" Resizable="true"

CssClass="higherZIndex">

<ContentTemplate>

Dock 1 Content

</ContentTemplate>

<Commands>

<telerik:DockCommand Name="CustomCommand" OnClientCommand="setVisibility" />

</Commands>

</telerik:RadDock>

</telerik:RadDockZone>

</td>

<td style="vertical-align: top">

<telerik:RadDockZone ID="RadDockZone2" runat="server" Orientation="Vertical" Width="300px" Height="30px">

</telerik:RadDockZone>

</td>

</tr>

</table>

</telerik:RadDockLayout>

Regards,
Rumen
Progress Telerik

Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Client Side Show/Hide

4 Answers, 1 is accepted