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

Use Dock as Panel

6 Answers 75 Views
Dock
This is a migrated thread and some comments may be shown as answers.
Jon
Top achievements
Rank 1
Jon asked on 09 Dec 2011, 12:39 PM
Hi,

I'd like to use the dock control as a panel control that works with the normal flow of a web page.  No docking etc functionality.  Is that possible with it as it stands?

If not possible, is there a way to use a div couples with the styles of the Dock to get it working.  

This should be created as a panel control as I'm sure that many developers would find it useful.

Regards,

Jon

6 Answers, 1 is accepted

Sort by
0
Jon
Top achievements
Rank 1
answered on 09 Dec 2011, 02:33 PM
I've managed to get the panel working inline but it seems that if a width is not specified then it gets set to 300px.  Is there a way to clear that?  My example below goes full width...  If I leave out the width:auto line then it stays at 300px unless I manually set the width in the RadDock object.

    <style type="text/css">
        .RadDock
        {
            position:relative ! important;
            width:auto ! important;
        }
    </style>
 
<telerik:RadDock ID="RadDock1" runat="server"
    Title="Test" DefaultCommands="None"
    EnableDrag="False" Index="-1" Pinned="True" Tag="" >
<ContentTemplate>nonoiroirto nirtoin</ContentTemplate>
</telerik:RadDock>
0
Accepted
Kevin
Top achievements
Rank 2
answered on 09 Dec 2011, 02:40 PM
Hello Jon,

The Dock control can be used as Panel control, you just need to adjust the settings to prevent it from being dragged. The only problem is that you have to write a lot just to use it for something like a Panel. Currently, I copied the css stylings that make up the dock and just copied the background image it uses for the header and created the following css classes:

.containerPanelWrapper
{
    margin-bottom: 4px;
    border: solid 1px #768ca5;
    font: normal normal normal 12px "Segoe UI", Arial, sans-serif;
}
.containerPanelWrapper .containerPanelContent
{
    padding: 2px;
}
.containerPanelWrapper .containerPanelHeader
{
    background: url('headerBg.png') repeat-x scroll 0 -1px;
    font: normal normal normal 12px/24px "Segoe UI", Arial, sans-serif;
    color: #ffffff;
    display: block;
    padding: 0 10px 1px;
    border-bottom: solid 1px #3d556c;
}

HTML:
<div class="containerPanelWrapper">
    <span class="containerPanelHeader">My Header</span>
    <div class="containerPanelContent">
        Some Content
    </div>
</div>

I use the background image found in the RadPanelBar control, for root elements, as it's very close to the Dock background, but the image is bigger than the dock version. I've attached the one I use, which the WebBlue skin, so you have an idea what the image looks like.

I hope that helps.
0
Accepted
Slav
Telerik team
answered on 13 Dec 2011, 02:40 PM
Hi guys,

As for the RadDock width, its default value is 300px and it is applied when there is nothing else specified, as in your case. You can set the Width property of the RadDock to 100% which will force it to take all available width in the current HTML element:
<telerik:RadDock ID="RadDock1" runat="server" Title="Test" DefaultCommands="None"
    EnableDrag="False" Index="-1" Pinned="True" Tag="" Width="100%">
    <ContentTemplate>
        nonoiroirto nirtoin</ContentTemplate>
</telerik:RadDock>

Greetings,
Slav
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
0
Jon
Top achievements
Rank 1
answered on 13 Dec 2011, 02:48 PM
Thanks Kevin & Slav,

Kevin,  good approach although it's a little troublesome because of the need to work with multiple styles - that kind of comes into play with another post I have open re having some of the generic colours exposed in their own style elements for reuse.

Slav, what is the chance of getting this moved up to being a proper stand alone component?  It would be tremendously useful and obviously you have all the components already it's a case of extracting them from the existing dock.

Also, Slav, there appears to be a problem with the forums.  I'm only getting notifications when someone from Telerik replies to my posts.  I didn't get one from Kevin and this is happening on other posts.

Regards,

Jon
0
Slav
Telerik team
answered on 16 Dec 2011, 12:36 PM
Hello Jon,

You can also try the RadPanelBar for implement your desired scenario. In the online demo PanelBar / Templates it is shown how to embed any content inside RadPanelBar's ContentTemplate and HeaderTemplate.

Thank you for reporting the encountered notification behavior. We will investigate the matter further.

Best wishes,
Slav
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
0
Jon
Top achievements
Rank 1
answered on 20 Dec 2011, 09:56 AM
Thanks Slav,

I'll give that a shot later on to see if it looks better than the dock approach.

Best Regards,

Jon
Tags
Dock
Asked by
Jon
Top achievements
Rank 1
Answers by
Jon
Top achievements
Rank 1
Kevin
Top achievements
Rank 2
Slav
Telerik team
Share this question
or