Help with client-side docking objects

[Rob]

Is there any help or examples of how to use the client-side docking objects?  I see a reference to the properties, methods, and events, but don't see how you reference the objects in javascript.  I'm specifically trying to determine if a RadDock is collapsed or not.

Any help here is much appreciated.

Thanks, Rob

[Valeri Hristov]

Hello Rob,

I hope this example could be of help:
http://www.telerik.com/demos/aspnet/prometheus/Dock/Examples/ClientSideAPI/DefaultCS.aspx

All the best,
Valeri Hristov (Senior Developer, MCSD)
the Telerik team

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

[Richard Lemmon]

I am trying to figure out how to disable the Expand/Collapse button on a Docked Object when it's in Zone1 and then enable it when it's in Zone2.  I cannot find any reference to how to set this through the client-side script.

Help would be appreciated.

[Petya]

Hi Richard Lemmon,

Here is a code snippet demonstrating how you can achieve the desired scenario on the client by handling OnClientPositionChanged:

<telerik:raddocklayout id="RadDockLayout1" runat="server" skin="Default2006">
            <table>
                <tbody>
                    <tr>
                        <td>
                            <telerik:raddockzone id="RadDockZone1" runat="server" height="300px" width="300px">
                                <telerik:raddock id="Raddock1" runat="server" title="Dock 1" text="Dock 1" onclientdockpositionchanged="OnClientPositionChanged">
                                </telerik:raddock>
                            </telerik:raddockzone>
                        </td>
                        <td style="width: 100px">
                            <telerik:raddockzone id="RadDockZone2" runat="server" height="300px" width="300px">
                               
                            </telerik:raddockzone>
                        </td>
                    </tr>
                </tbody>
            </table>
        </telerik:raddocklayout>
        <script type="text/javascript">
        function OnClientPositionChanged(sender, eventArgs)
        {
            if(sender.get_DockZoneID() == "RadDockZone2")
            {
                var closeCommand = sender.get_Commands()["ExpandCollapse"].set_visible(false);
            }
            else
            {
                var closeCommand = sender.get_Commands()["ExpandCollapse"].set_visible(true);
            }
        }
        </script>

Test with it and let me know if this satisfies your requirements.

Best wishes,
Petya
the Telerik team

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

[Richard Lemmon]

Petya,

Based on the code sample you provided, I may have found a bug in the Prometheus Dock.  I wanted the DockableObject to start with no Expand/Collapse icons when the page first loads. 

I went into the properties and selected:
Commands -> Collection
Changed the Expand.Visible = False and Collapse.Visible=False

When I compile the site and run it, I get an error in the WebResource.axd file.

Am I using the commands correctly, or is there another way I should configure the control to not show the Expand/Collapse icons on page load?

Thanks Petya!

[Petya]

Hello Richard Lemmon,

The information you provided was not sufficient for me to reproduce the issue with the commands. Would it be possible for you to send us the exact code demonstrating

"...I went into the properties and selected:
Commands -> Collection
Changed the Expand.Visible = False and Collapse.Visible=False..."

To achieve your goal, you can handle OnClientInitialize of RadDock and set the ExpandCollapse command to be hidden in the same manner as in OnClientPositionChanged. Here is the entire code:

<telerik:raddocklayout id="RadDockLayout1" runat="server" skin="Default2006">
            <table>
                <tbody>
                    <tr>
                        <td>
                            <telerik:raddockzone id="RadDockZone1" runat="server" height="300px" width="300px">
                               
                            </telerik:raddockzone>
                        </td>
                        <td style="width: 100px">
                            <telerik:raddockzone id="RadDockZone2" runat="server" height="300px" width="300px">
                                <telerik:raddock id="Raddock1" runat="server" onclientdockpositionchanged="OnClientPositionChanged"
                                    onclientinitialize="OnClientInitialize" text="Dock 1" title="Dock 1">
                                </telerik:raddock>
                            </telerik:raddockzone>
                        </td>
                    </tr>
                </tbody>
            </table>
        </telerik:raddocklayout>
        <script type="text/javascript">
        function OnClientPositionChanged(sender, eventArgs)
        {
            if(sender.get_DockZoneID() == "RadDockZone2")
            {
                var closeCommand = sender.get_Commands()["ExpandCollapse"].set_visible(false);
            }
            else
            {
                var closeCommand = sender.get_Commands()["ExpandCollapse"].set_visible(true);
            }
        }
       
        function OnClientInitialize(sender, eventArgs)
        {
            var closeCommand = sender.get_Commands()["ExpandCollapse"].set_visible(false);
        }
        </script>

Hope this helps.

Kind regards,
Petya
the Telerik team

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

[Richard Lemmon]

Sorry for my vague description.  It always makes sense at the time I am typing it.  Below is a snippet of my code that seems to cause the error.  Please look at the <Commands> area.

<cc1:RadDockableObject ID="RadDockableObject4" runat="server" OnClientDock="OnClientDock" OnClientDockStateChange="OnClientPositionChanged"

Text="Total Due by Date" Behavior="resizable" Expanded="false" Width="100%" Height="450">

<ContentTemplate>

<uc4:Calendar_amount_due ID="Calendar_amount_due" runat="server"></uc4:Calendar_amount_due>

</ContentTemplate>

<Commands>

<cc1:RadDockableObjectCommand Name="Expand" ToolTip="Expand" Visible="False" />

<cc1:RadDockableObjectCommand Enabled="False" Name="Collapse" ToolTip="Collapse" Visible="False" />

</Commands>

</cc1:RadDockableObject>

[Petya]

Hi Richard Lemmon,

From the provided code it becomes evident that you are using the "regular" RadDock whereas you have stated that you are using RadDock Prometheus and my code is for RadDock Prometheus. Would you please clarify which control you are using? If it is RadDock Prometheus, did my last post satisfy your scenario? If it is the "regular" RadDock, then do you want us to redo the discussion on the issue so that you can get the desired effect with it.

All the best,
Petya
the Telerik team

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

[Richard Lemmon]

Petya,

You were absolutely correct!  I had converted my RadDock over to Prometheus, but had left a remenant of the old RadDock in my app.  I was mixing them together.

I took the old .dll out and the code is working as it should. 

THANKS AGAIN for all your help.

Rich