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

Empty RadDockZone Message

15 Answers 228 Views
Dock
This is a migrated thread and some comments may be shown as answers.
Ryan
Top achievements
Rank 1
Ryan asked on 12 Jan 2010, 03:51 PM
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?

15 Answers, 1 is accepted

Sort by
0
Gido Geek
Top achievements
Rank 2
answered on 13 Jan 2010, 09:09 AM
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


0
Ryan
Top achievements
Rank 1
answered on 13 Jan 2010, 03:49 PM
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!
0
Accepted
Gido Geek
Top achievements
Rank 2
answered on 13 Jan 2010, 04:05 PM
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.
0
Ryan
Top achievements
Rank 1
answered on 13 Jan 2010, 04:39 PM
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!
0
Gido Geek
Top achievements
Rank 2
answered on 13 Jan 2010, 05:07 PM
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
0
Ryan
Top achievements
Rank 1
answered on 13 Jan 2010, 08:41 PM
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.
0
Gido Geek
Top achievements
Rank 2
answered on 13 Jan 2010, 08:44 PM
Good idea,

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

Regards,
Gido
0
Ryan
Top achievements
Rank 1
answered on 13 Jan 2010, 10:17 PM
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.
0
Ryan
Top achievements
Rank 1
answered on 14 Jan 2010, 11:31 PM
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.

0
Gido Geek
Top achievements
Rank 2
answered on 15 Jan 2010, 09:50 AM
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

0
Jim
Top achievements
Rank 1
answered on 15 Jan 2010, 01:52 PM
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.
0
Ryan
Top achievements
Rank 1
answered on 15 Jan 2010, 03:05 PM
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
0
Pat Henry
Top achievements
Rank 1
answered on 25 Jan 2010, 11:06 AM
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
0
Hugo Augusto
Top achievements
Rank 2
Iron
Veteran
Iron
answered on 10 Dec 2010, 02:34 AM
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?
0
Pero
Telerik team
answered on 10 Dec 2010, 10:49 AM
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.
Tags
Dock
Asked by
Ryan
Top achievements
Rank 1
Answers by
Gido Geek
Top achievements
Rank 2
Ryan
Top achievements
Rank 1
Jim
Top achievements
Rank 1
Pat Henry
Top achievements
Rank 1
Hugo Augusto
Top achievements
Rank 2
Iron
Veteran
Iron
Pero
Telerik team
Share this question
or