Empty RadDockZone Message

16 posts, 1 answers
  1. Ryan
    Ryan avatar
    61 posts
    Member since:
    Jul 2009

    Posted 12 Jan 2010 Link to this post

    I would like to have a message displayed on top of the RadDockZone when there are no RadDocks on it.  This will help the user better know that it is ready and waiting for RadDocks to be added to it.

    I have worked through a possible solution with the AjaxLoadingPanel, showing it when RadDockZone.get_docks().length = 0, but I keep getting the "object is null" javascript error.

    if ($find("<%=rdzLeft.ClientID%>").get_docks().length == 0)  
    {  
        var objEmptyZoneLoadingPanel = $find("<%=lpEmptyZone.ClientID%>");  
        objEmptyZoneLoadingPanel.show("<%=rdzLeft.ClientID%>");  

    I've also considered having <div>s displayed over top of each RadDockZone, only showing them when the associated RadDockZone is empty.  I was having a difficult time setting the style of these <div>s to appear where I wanted them.

    <!-- Empty RadDockZone messages --> 
    <div runat="server" id="divEmptyLeftZone" class="DashboardItemPanelLeft_Empty">No Dashboard Items (Left)</div> 
    <div runat="server" id="divEmptyRightZone" class="DashboardItemPanelRight_Empty">No Dashboard Items (Right)</div> 
     
    <!-- RadDockLayout for dashboard items to go --> 
    <telerik:RadDockLayout runat="server" ID="rdlDockLayout">  
        <telerik:RadDockZone runat="server" ID="rdzLeft" MinHeight="300px" CssClass="DashboardItemPanelLeft" HighlightedCssClass="HighlightedZone" /> 
        <telerik:RadDockZone runat="server" ID="rdzRight" MinHeight="300px" CssClass="DashboardItemPanelRight" HighlightedCssClass="HighlightedZone" /> 
    </telerik:RadDockLayout> 

    Are there any built-in ways to address my goal?  Perhaps an "EmptyZoneMessage" for the RadDockZone?
  2. Gido Geek
    Gido Geek avatar
    28 posts
    Member since:
    Nov 2009

    Posted 13 Jan 2010 Link to this post

    Hey Ryan,

    I'll try to help you as good as I can. Not sure I have an acceptable solution for you though. There is no built-in property for "EmptyRadDockZoneMessage" or something similar (to my knowledge). The easiest way to solve this is to give the RadDockZone a background image with the message you want to be displayed on an empty zone. Once the zone get's docks you can use your JavaScript method to remove the class/backgroundImage. 

    Kind regards,
    Gido


  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Ryan
    Ryan avatar
    61 posts
    Member since:
    Jul 2009

    Posted 13 Jan 2010 Link to this post

    Thank you for your reply!  I have actually aleady come across that solution as well (http://www.telerik.com/community/forums/aspnet-ajax/docking/text-inside-raddockzone.aspx), but didn't like the rigidity of having an image with text.  Also, I'm having trouble giving the RadDockZone a background image.  There are no properties (server-side nor client-side) that I have found to set this, and the only other thought I had was to set the background-image property in CSS, which isn't working.

    .Zone_Empty  
    {  
        background-imageurl("../Images/empty.png"no-repeat center top;  
    }  
     
    .Zone  
    {  
        background-imagenone;  

    How have you shown/hidden this image in your project?  Thank you for your help!
  5. Answer
    Gido Geek
    Gido Geek avatar
    28 posts
    Member since:
    Nov 2009

    Posted 13 Jan 2010 Link to this post

    I don't know why your image isn't showing. I see you miss a "." but I think that's just a copy paste issue when posting to the forum.
    Here is what I tried:
    .RadDockZoneEmpty 
        background-imageurl("http://dl.dropbox.com/u/610806/dropzone.jpg") !important; 
        background-positiontop
        background-repeatno-repeat
    .RadDockZoneFilled 
        backgroundnone

    You can se the Class using your previously shown Javascript method or in codebehind (if you go trough pageloads)

                        if (zone.Docks.Count == 0) 
                        { 
                            zone.CssClass = "RadDockZoneEmpty"
                        } 
                        else 
                        { 
                            zone.CssClass = "RadDockZoneFilled"
                        } 

    I agree this is not a beautiful solution. I will think about it some more and see if I come up with a different solution. However in the meantime this could solve your problem. Of-course you don't just have to make the background image with some text, you could take advantage of some visually appealing icon but that depends on your application.

    I hope I helped you to some extent.
    If this post answers your question please mark my post as the answer.
  6. Ryan
    Ryan avatar
    61 posts
    Member since:
    Jul 2009

    Posted 13 Jan 2010 Link to this post

    That'll certainly do for now - I'm not sure why my CssClass wasn't assigning the background image before, but the CSS below works for me:

    .EmptyZone  
    {  
        background-imageurl("../Images/empty.png");  
        background-positioncenter center;  
        background-repeatno-repeat;  
    }  
     
    .Zone  
    {  
        background-imagenone;  

    I'm assigning the new CssClass in the rdlDockLayout.SaveDockLayout server-side event using the following code:

    Protected Sub DockLayout_SaveDockLayout(ByVal sender As ObjectByVal e As DockLayoutEventArgs) Handles DockLayout.SaveDockLayout  
        'Adjust the RadDockZones' CssClass accordingly  
        LeftZone.CssClass = IIf(LeftZone.Docks.Count = 0, "EmptyZone""Zone")  
        RightZone.CssClass = IIf(RightZone.Docks.Count = 0, "EmptyZone""Zone")  
    End Sub 

    Thank you for your help.  I'll be using this solution until something better comes along - perhaps if Telerik were to offer an "EmptyZoneCssClass", "EmptyZoneText" or "EmptyZoneImage" in the future.

    I guess it's time for the developer to put on a design hat for this new background image!
  7. Gido Geek
    Gido Geek avatar
    28 posts
    Member since:
    Nov 2009

    Posted 13 Jan 2010 Link to this post

    Hey Ryan,

    I'm glad I could be of assistance. And thank you for marking my post as the answer. The by you proposed situation has me intrigued however and I'll be looking for a better solution, just because I hate dirty fixes ;) 
    I'll let you know if I think of anything.

    Kind regards,
    Gido
  8. Ryan
    Ryan avatar
    61 posts
    Member since:
    Jul 2009

    Posted 13 Jan 2010 Link to this post

    I'm actually playing around with a possible solution.  The only thing that can be displayed within a RadDockZone are RadDocks, so I was thinking I could dynamically create a RadDock with no DockHandle and the appropriate message as its text when no RadDocks are yet in that RadDockZone, and dynamically remove it when a new RadDock is added.  I'll respond with some code should I get this working - so far, it seems like it might solve our issue.
  9. Gido Geek
    Gido Geek avatar
    28 posts
    Member since:
    Nov 2009

    Posted 13 Jan 2010 Link to this post

    Good idea,

    I was thinking around the same lines but didn't work on it yet. Let me know how it goes.

    Regards,
    Gido
  10. Ryan
    Ryan avatar
    61 posts
    Member since:
    Jul 2009

    Posted 13 Jan 2010 Link to this post

    Now my issue is determining when to hide/show this RadDock with the "empty zone" message in it.  Does anybody know of any RadDockZone client events that will fire in time for me to check if it has any RadDocks?

    Right now, I have the RadDock's OnClientInitialize event handled by the following Javascript:

    function RemovePlaceholder(sender, eventArgs)  
    {  
        if (sender.get_parent().get_docks().length > 1)  
            sender.set_closed(true);  

    What I really want is to handle some sort of OnClientDocksLoaded for the RadDockZone, and then determine if I need to add the RadDock with the "empty zone" message in it.
  11. Ryan
    Ryan avatar
    61 posts
    Member since:
    Jul 2009

    Posted 14 Jan 2010 Link to this post

    I think I'm going to have to throw the towel in on this one.  The issue is that it is only possible to create RadDocks on the server-side, and in order for the EmptyZoneMessage-bearing RadDock to be effective, it must be handled on the client-side (otherwise it's always one PostBack behind).

    I tried getting around this by hard-coding a RadDock with the EmptyZoneMessage in each zone, and altering its properties (set_width(), set_height(), set_visible()) client-side when the number of RadDocks in its RadDockZone changes.  This didn't work for the following reasons:

    1. set_width() and set_height() only accept integers greater than 0, so there was no way for me to hide the RadDock that way
    2. set_visible() only works on visible RadDocks, because once you set_visible(false), the RadDock no longer exists as far as the page is concerned.  Therefore, you cannot set_visible(true) on a RadDock that doesn't exist.

    I have resolved to revert back to a setting a background image for each RadDockZone when there are no RadDocks present in it.  By changing the CssClass conditionally server-side, I can hide or show the background images without a hitch.

    .LeftZone_Empty,  
    .RightZone_Empty  
    {  
        background-positioncenter center;  
        background-repeatno-repeat;  
    }  
     
    .LeftZone_Empty  
    {  
        background-imageurl(emptypanel_withtext_left.png");  
    }  
     
    .RightZone_Empty  
    {  
        background-imageurl("emptypanel_withtext_right.png");  
    }  
     
    .LeftZone,  
    .RightZone  
    {  
        background-imagenone;  

     

    Protected Sub DockLayout_LoadDockLayout(ByVal sender As ObjectByVal e As DockLayoutEventArgs) Handles DockLayout.LoadDockLayout  
        'Show empty panel image if necessary  
        LeftZone.CssClass = IIf(LeftZone.Docks.Count = 0, "LeftZone_Empty""LeftZone")  
        RightZone.CssClass = IIf(RightZone.Docks.Count = 0, "RightZone_Empty""RightZone")  
    End Sub 

    I have attached the background images that I am using, in case anybody is interested.  If anybody comes up with a creative solution otherwise, please post to this thread!  I'm sure we'll all be eager to take a look.

  12. Gido Geek
    Gido Geek avatar
    28 posts
    Member since:
    Nov 2009

    Posted 15 Jan 2010 Link to this post

    Hey Ryan,

    I found this code on one of the samples from telerik
            function ShowHideRadDock1() 
            { 
                var dock = $find('<%= RadDock1.ClientID%>'); 
                var isClosed = dock.get_closed(); 
                dock.set_closed(!isClosed); 
            } 

    This method hides/shows the RadDock.
    You can see the sample here .

    Furthermore I think the
    "OnClientDockPositionChanging" event can serve as the place to check wether or not a DockZone is empty or not.
     function OnClientDockPositionChanging(dock, e) 
     { 
       var id = dock.get_dockZoneID(); 
       if (id != ""
       { 
         var zone = $find(id); 
         var docks = zone.get_docks(); 
         if (docks.length == 0) 
           //do your thing :) 
        } 
     } 

    I didn't test my theory but I'm pretty sure I could get it working. I think this should send you in the right direction. Please try to achieve your goal with these suggested methods/resources. Let me know how it goes. If you don't manage to solve it I'll try to have a look and run a proof of concept soon , once I have more time.

    I hope this information was helpful.

    Kind regards,
    Gido

  13. Jim
    Jim avatar
    31 posts
    Member since:
    Jun 2009

    Posted 15 Jan 2010 Link to this post

    The following source code paints the background of the zone red:

    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"
    <head id="Head1" runat="server"
        <title></title
        <style type="text/css"
            .NewCss 
            { 
                background-color: Red; 
            } 
        </style> 
    </head> 
    <body> 
        <form id="form1" runat="server"
        <asp:ScriptManager ID="ScriptManager1" runat="server"
        </asp:ScriptManager> 
     
        <script type="text/javascript"
            function ChangeCSS(dock, args) 
            { 
                var zones = Telerik.Web.UI.RadDockZonesGlobalArray; 
                for (var i = 0; i < zones.length; i++) 
                { 
                    var zone = zones[i]; 
                    var zoneElement = zone.get_element(); 
     
                    if (zone.get_docks().length > 0) 
                    { 
                        Sys.UI.DomElement.removeCssClass(zoneElement, "NewCss"); 
                    } 
                    else 
                    { 
                        Sys.UI.DomElement.addCssClass(zoneElement, "NewCss"); 
                    } 
                } 
            } 
            Sys.Application.add_load(function() 
            { 
                ChangeCSS(); 
            }); 
        </script> 
     
        <div> 
            <telerik:RadDockLayout ID="RadDockLayout1" runat="server"
                <telerik:RadDockZone ID="RadDockZone1" runat="server" MinHeight="300px" Width="300px"
                    <telerik:RadDock ID="RadDock1" runat="server" Width="300px" Title="RadDock-Title" 
                        OnClientDrag="ChangeCSS" OnClientDragEnd="ChangeCSS"
                        <ContentTemplate> 
                            <br /> 
                            <br /> 
                            <br /> 
                            <br /> 
                            <br /> 
                            CONTENT 
                            <br /> 
                            <br /> 
                            <br /> 
                            <br /> 
                            <br /> 
                        </ContentTemplate> 
                    </telerik:RadDock> 
                </telerik:RadDockZone> 
                <telerik:RadDockZone ID="RadDockZone2" runat="server" MinHeight="300px" Width="300px"
                </telerik:RadDockZone> 
            </telerik:RadDockLayout> 
        </div> 
        </form> 
    </body> 
    </html> 

    The scenario when the dock close command is pressed needs to be handled.
  14. Ryan
    Ryan avatar
    61 posts
    Member since:
    Jul 2009

    Posted 15 Jan 2010 Link to this post

    Gido,

    I may look into the ShowHideRadDock() solution, as that might be what I needed.  Unfortunately, I'm low on time and have to move on to the next issue with my project.  I'm pretty well pleased, actually, with the appearance of the background image, so that might be an acceptable solution for this issue.

    I've also played around with the OnClientDockPositionChanging() event in attempting to hide/show the RadDock, but for some reason, I wasn't satisfied with the result.  Perhaps it was because as the position is changing, you can literally see the RadDock with the EmptyZone message be pushed to the next index in the RadDockZone, which isn't too pretty.  Also, the RadDock's position wouldn't be changing when a new RadDock is dynamically added beneath it.

    Thank you for all of your time and energy put into this issue!

    ~Ryan
  15. Pat Henry
    Pat  Henry avatar
    1 posts
    Member since:
    Jan 2008

    Posted 25 Jan 2010 Link to this post

    Or more simply, you could also use a simple "watermark" with a z-index:

     

    <style type="text/css">            
    .watermark            
    {           
    margin-left: 10px;           
    margin-top: 10px;           
    display: block;      
    z-index:-1;          
    }         
    </style>         
              
    <table width="96%">            
        <tr>            
            <td style="width: 50%" valign="top">            
                <div class="watermark">Drop Widget Here</div>            
                    <telerik:RadDockZone Orientation="Vertical" MinHeight="100px" runat="server" ID="Left" FitDocks="true" Style="border-color: lightgray">            
                    </telerik:RadDockZone>            
            </td>            
            <td style="width: 50%" valign="top">            
                <div class="watermark">Drop Widget Here</div>            
                <telerik:RadDockZone Orientation="Vertical" MinHeight="100px" runat="server" ID="Right" FitDocks="true" Style="border-color: lightgray">            
                </telerik:RadDockZone>            
            </td>            
        </tr>            
        <tr>            
            <td colspan="2" valign="top">            
                <div class="watermark">Drop Widget Here</div>            
                <telerik:RadDockZone Orientation="Vertical" MinHeight="100px" runat="server" ID="Bottom" FitDocks="true" Style="border-color: lightgray">            
                </telerik:RadDockZone>            
            </td>            
        </tr>            
    </table>           
           
     
    Regards
    Josselin
  16. Hugo Augusto
    Hugo Augusto avatar
    55 posts
    Member since:
    Jul 2004

    Posted 09 Dec 2010 Link to this post

    In ASP.NET RadDock it was possible to add any control into a zone. That allowed to insert a label into any zone. Now, a zone only allows RadDock objects, so this nice feature has been lost. How can you show the zone name to the user with dynamically created zones? Any ideas?
  17. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 10 Dec 2010 Link to this post

    Hi Hugo,

    You could use RadDock instead of a Label to show that the zone is in edit mode. Setting a couple of properties will make the RadDock look like a label. Here is an example:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="RadScriptManager1" runat="server">
        </asp:ScriptManager>
        <script type="text/javascript">
            //Put your JavaScript code here.
        </script>
        <div>
            <telerik:RadDockLayout ID="RadDockLayout1" runat="server">
                <telerik:RadDockZone ID="RadDockZone1" runat="server" MinHeight="300px" Width="300px">
                    <telerik:RadDock ID="RadDock1" runat="server" Text="This is a dock" DockHandle="Grip"
                        EnableDrag="false">
                    </telerik:RadDock>
                </telerik:RadDockZone>
            </telerik:RadDockLayout>
        </div>
        </form>
    </body>
    </html>

    If you send us a screenshot of how the Label should look like, we can help you achieve the same behavior with the RadDock.

    Kind regards,
    Pero
    the Telerik team
    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017