Use Dock as Panel

7 posts, 2 answers
  1. Jon
    Jon avatar
    813 posts
    Member since:
    Oct 2008

    Posted 09 Dec 2011 Link to this post

    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
  2. Jon
    Jon avatar
    813 posts
    Member since:
    Oct 2008

    Posted 09 Dec 2011 Link to this post

    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>
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Answer
    Kevin
    Kevin avatar
    360 posts
    Member since:
    Jul 2012

    Posted 09 Dec 2011 Link to this post

    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.
  5. Answer
    Slav
    Admin
    Slav avatar
    1356 posts

    Posted 13 Dec 2011 Link to this post

    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
  6. Jon
    Jon avatar
    813 posts
    Member since:
    Oct 2008

    Posted 13 Dec 2011 Link to this post

    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
  7. Slav
    Admin
    Slav avatar
    1356 posts

    Posted 16 Dec 2011 Link to this post

    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
  8. Jon
    Jon avatar
    813 posts
    Member since:
    Oct 2008

    Posted 20 Dec 2011 Link to this post

    Thanks Slav,

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

    Best Regards,

    Jon
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017