Is HighlightedStyle being implemented?

4 posts, 0 answers
  1. Cameron Tabor
    Cameron Tabor avatar
    9 posts
    Member since:
    Mar 2004

    Posted 05 Sep 2007 Link to this post

    In the upgrade documentation for RadDockingZone I see "HighlightedStyle - Removed - TODO".  I would like to change the style to have a wider border, like I did in the previous version.

    2 Questions:

    1) Does the "TODO" mean that it is planned for Prometheus, just not implemented yet? 

    2) Is there any way I can make it work now?

    Thanks.
  2. Petio Petkov
    Admin
    Petio Petkov avatar
    825 posts

    Posted 05 Sep 2007 Link to this post

    Hi Cameron Tabor,

    HighlightedStyle will be implemented in RadDock Prometheus

    I created for you the following code, which implements highlighting of a RadDockZone when RadDock is over it:

    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %> 
    <!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 runat="server">  
        <title>Untitled Page</title> 
        <style type="text/css">  
        .RadDockZone_Default2  
        {  
            background-color: green;  
        }  
        </style> 
    </head> 
    <body> 
        <form id="form1" runat="server">  
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager> 
        <div> 
        <telerik:RadDockLayout ID="RadDockLayout1" runat="server">  
            <telerik:RadDockZone ID="RadDockZone1" runat="server" Width="200px" > 
                <telerik:RadDock ID="RadDock1" runat="server" Width="300px">  
                </telerik:RadDock> 
            </telerik:RadDockZone> 
            <telerik:RadDockZone ID="RadDockZone2" runat="server" Width="300px" > 
            </telerik:RadDockZone> 
        </telerik:RadDockLayout>      
        <asp:Button ID="Button1" runat="server" /> 
        </div> 
        <script type="text/javascript">  
        var x;  
        TelerikTelerik.Web.UI.RadDockZone.prototype.oldonDragEnterTarget = Telerik.Web.UI.RadDockZone.prototype.onDragEnterTarget;  
        TelerikTelerik.Web.UI.RadDockZone.prototype.oldonDragLeaveTarget = Telerik.Web.UI.RadDockZone.prototype.onDragLeaveTarget;  
        TelerikTelerik.Web.UI.RadDockZone.prototype.olddrop = Telerik.Web.UI.RadDockZone.prototype.drop;  
        Telerik.Web.UI.RadDockZone.prototype.onDragEnterTarget = function(dragMode, type, dock)  
        {  
            this.oldonDragEnterTarget(dragMode, type, dock);          
            this.addCssClass("RadDockZone_Default2");  
        };  
        Telerik.Web.UI.RadDockZone.prototype.onDragLeaveTargetfunction(dragMode, type, dock)  
        {  
            this.oldonDragLeaveTarget(dragMode, type, dock);          
            this.removeCssClass("RadDockZone_Default2");  
        };  
        Telerik.Web.UI.RadDockZone.prototype.drop = function(dragMode, dataType, dock)  
        {  
            this.olddrop(dragMode, dataType, dock);  
            this.removeCssClass("RadDockZone_Default2");  
        }  
        </script>      
        </form> 
    </body> 
    </html> 

    I hope that this will help you.

    Sincerely yours,
    Petio Petkov
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  3. Cameron Tabor
    Cameron Tabor avatar
    9 posts
    Member since:
    Mar 2004

    Posted 05 Sep 2007 Link to this post

    Thanks for your fast reply!  I'll try this out.
  4. Petio Petkov
    Admin
    Petio Petkov avatar
    825 posts

    Posted 11 Sep 2007 Link to this post

    Hello Cameron Tabor,

    We have already implemented the RadDockZone Highlighting in RadDock Prometheus
    All you need to do is to create a CSS class:
    <head id="Head1" runat="server">  
             <style type="text/css">   
            .CustomCssClass   
            {   
                background-color: green !important;   
            }   
        </style>   
    </head> 
     
    After that you must set RadDockZone's property HighlightedCssClass:
    <telerik:RadDockZone ID="RadDockZoneLeft" runat="server" HighlightedCssClass="CustomCssClass">  
    </telerik:RadDockZone> 

     This functionality will be included in the next update of RadControls Prometheus, which will be on 17th of September.

    Sincerely yours,
    Petio Petkov
    the Telerik team

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