Rad Sliding Pane Colors

6 posts, 0 answers
  1. Arindam
    Arindam avatar
    28 posts
    Member since:
    Mar 2009

    Posted 07 Jul 2009 Link to this post

    Hi -

    We decided to use telerik controls on our website, therefore initially we are testing how far we go to change look and feel of controls so they match and fit to our needs graphically.
    I am using RadSplitter, and please find below codes :-
    <telerik:RadSplitter ID="RadSplitter1" runat="server" Width="950" Height="500" Skin="Forest">
               <telerik:RadPane ID="LeftPane" runat="server" Width="22px" Scrolling="none">
                    <telerik:RadSlidingZone ID="SlidingZone1" runat="server" Width="22px">
                        <telerik:RadSlidingPane ID="RadSlidingPane1" Title="All Dashboard Reports" runat="server"
                        Width="150px" >
                            <telerik:RadTreeView ID="RadTreeView1" runat="server" OnClientMouseOver= "OnClientMouseOver"
                            EnableDragAndDrop="True" OnClientNodeDropping="OnClientNodeDropping">
                        </telerik:RadTreeView>
                        </telerik:RadSlidingPane>
                    </telerik:RadSlidingZone>
                </telerik:RadPane>
                <telerik:RadSplitBar ID="Radsplitbar1" runat="server"></telerik:RadSplitBar>
                <telerik:RadPane ID="MiddlePane1" runat="server" Scrolling="None">
                    <telerik:RadSplitter ID="Radsplitter2" runat="server" Orientation="Horizontal" VisibleDuringInit="false">
                        <telerik:RadSplitBar ID="Radsplitbar3" runat="server"></telerik:RadSplitBar>
                        <telerik:RadPane ID="Radpane2" runat="server">
                            <div id="SummaryDiv2" style="width:925px;height:480px;"></div>
                            
                            <telerik:RadWindowManager ID="RadWindowManager1" runat="server" VisibleOnPageLoad="false"
                                VisibleTitlebar="true" VisibleStatusbar="false"
                                ReloadOnShow ="true" ShowContentDuringLoad="true" RestrictionZoneID="SummaryDiv2"
                                Overlay="true" Animation="Fade"
                                MinimizeZoneID="MyMinWins" OnClientCommand="oCCWindow">
                            </telerik:RadWindowManager>
                            
                            <telerik:RadToolTipManager Width="300px" Height="300px" RelativeTo="element"
                                ID="RadToolTipManager1" runat = "server" OffsetX="15" Skin="Telerik" Position="MiddleRight"
                                OnAjaxUpdate="RadToolTipmanager1_AjaxUpdate" >
                            </telerik:RadToolTipManager>
                    
                        </telerik:RadPane>
                    </telerik:RadSplitter>
                </telerik:RadPane>
                <telerik:RadSplitBar ID="RadSplitBar2" runat="server"></telerik:RadSplitBar>
                <telerik:RadPane ID="EndPane" runat="server" Width="22px" Scrolling="None">
                    <telerik:RadSlidingZone ID="Radslidingzone1" runat="server" Width="22px" SlideDirection="Left">
                        <telerik:RadSlidingPane ID="Radslidingpane5" Title="Company Dashboards" runat="server" Width="150px">
                            <telerik:RadTreeView id="CompTree" runat="server">
                        </telerik:RadTreeView>
                        </telerik:RadSlidingPane>
                        <telerik:RadSlidingPane ID="Radslidingpane6" Title="Personal Dashboards" runat="server" Width="150px">
                           <telerik:RadTreeView ID="DBDTree" runat="server" OnNodeClick="DBDTree_NodeClick">
                            </telerik:RadTreeView>
                        </telerik:RadSlidingPane>
                    </telerik:RadSlidingZone>
                </telerik:RadPane>
            </telerik:RadSplitter>

    Now you can see that I am having one pane in left and 2 panes in right, what I want to have different colors to each panes, is it possible to have?

    Please suggest me a way!

    Thanks in advance
    Regards
    Arindam R
  2. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 07 Jul 2009 Link to this post

    Hello Arindam,

    The color of a RadPane can be set through its CSSClass property, e.g as shown below:

    head:


    1 <head runat="server">  
    2     <title></title>  
    3     <style type="text/css">  
    4       
    5     .MiddlePaneCSS  
    6     {  
    7        background-colorred;  
    8     }  
    9       
    10     .EndPaneCSS  
    11     {  
    12        background-coloryellow;  
    13     }  
    14     .LeftPaneCSS  
    15     {  
    16        background-colorblue;  
    17     }  
    18       
    19     </style>  
    20 </head> 

    markup declaration:


    1    <telerik:RadSplitter ID="RadSplitter1" runat="server" Width="950" Height="500" Skin="Forest">  
    2                 <telerik:RadPane ID="LeftPane" runat="server" Width="22px" Scrolling="none" CssClass="LeftPaneCSS">  
    3                     <telerik:RadSlidingZone ID="SlidingZone1" runat="server" Width="22px">  
    4                         <telerik:RadSlidingPane ID="RadSlidingPane1" Title="All Dashboard Reports" runat="server" 
    5                             Width="150px">  
    6                             <telerik:RadTreeView ID="RadTreeView1" runat="server">  
    7                             </telerik:RadTreeView> 
    8                         </telerik:RadSlidingPane> 
    9                     </telerik:RadSlidingZone> 
    10                 </telerik:RadPane> 
    11                 <telerik:RadSplitBar ID="Radsplitbar1" runat="server"></telerik:RadSplitBar> 
    12                 <telerik:RadPane ID="MiddlePane1" runat="server" Scrolling="None" CssClass="MiddlePaneCSS">  
    13                     <telerik:RadSplitter ID="Radsplitter2" runat="server" Orientation="Horizontal" VisibleDuringInit="false">  
    14                         <telerik:RadSplitBar ID="Radsplitbar3" runat="server"></telerik:RadSplitBar> 
    15                         <telerik:RadPane ID="Radpane2" runat="server">  
    16                             <div id="SummaryDiv2" style="width: 925px; height: 480px;">  
    17                             </div> 
    18                             <telerik:RadWindowManager ID="RadWindowManager1" runat="server" VisibleOnPageLoad="false" 
    19                                 VisibleTitlebar="true" VisibleStatusbar="false" ReloadOnShow="true" ShowContentDuringLoad="true" 
    20                                 RestrictionZoneID="SummaryDiv2" Overlay="true" Animation="Fade" MinimizeZoneID="MyMinWins">  
    21                             </telerik:RadWindowManager> 
    22                             <telerik:RadToolTipManager Width="300px" Height="300px" RelativeTo="element" ID="RadToolTipManager1" 
    23                                 runat="server" OffsetX="15" Skin="Telerik" Position="MiddleRight">  
    24                             </telerik:RadToolTipManager> 
    25                         </telerik:RadPane> 
    26                     </telerik:RadSplitter> 
    27                 </telerik:RadPane> 
    28                 <telerik:RadSplitBar ID="RadSplitBar2" runat="server"></telerik:RadSplitBar> 
    29                 <telerik:RadPane ID="EndPane" runat="server" Width="22px" Scrolling="None" CssClass="EndPaneCSS">  
    30                     <telerik:RadSlidingZone ID="Radslidingzone1" runat="server" Width="22px" SlideDirection="Left">  
    31                         <telerik:RadSlidingPane ID="Radslidingpane5" Title="Company Dashboards" runat="server" 
    32                             Width="150px">  
    33                             <telerik:RadTreeView ID="CompTree" runat="server">  
    34                             </telerik:RadTreeView> 
    35                         </telerik:RadSlidingPane> 
    36                         <telerik:RadSlidingPane ID="Radslidingpane6" Title="Personal Dashboards" runat="server" 
    37                             Width="150px">  
    38                             <telerik:RadTreeView ID="DBDTree" runat="server">  
    39                             </telerik:RadTreeView> 
    40                         </telerik:RadSlidingPane> 
    41                     </telerik:RadSlidingZone> 
    42                 </telerik:RadPane> 
    43             </telerik:RadSplitter> 


    Let me know whether this works for you.

    All the best,
    Svetlina
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Arindam
    Arindam avatar
    28 posts
    Member since:
    Mar 2009

    Posted 07 Jul 2009 Link to this post

    Hi Svetlina,

    Thanks for you reply!

    But I applied in my page, it doesn't affect at all, and also another point to tell you I am using Master-Content pages, so I put the style in Master pages

    <style type="text/css">  
               
            .MiddlePaneCSS  
            {  
               background-color: red;  
            }  
              
            .EndPaneCSS  
             {  
               background-color: yellow;  
            }  
             .LeftPaneCSS  
            {  
               background-color: blue;  
            }  
              
    </style>



    and the below code in content page :-

    <telerik:RadSplitter ID="RadSplitter1" runat="server" Width="950" Height="500">
               <telerik:RadPane ID="LeftPane" runat="server" Width="22px" Scrolling="none" CssClass="LeftPaneCSS">
                    <telerik:RadSlidingZone ID="SlidingZone1" runat="server" Width="22px" >
                        <telerik:RadSlidingPane ID="RadSlidingPane1" Title="All Dashboard Reports" runat="server"
                        Width="150px">
                            <telerik:RadTreeView ID="RadTreeView1" runat="server" OnClientMouseOver= "OnClientMouseOver"
                        EnableDragAndDrop="True" OnClientNodeDropping="OnClientNodeDropping">
                        </telerik:RadTreeView>
                        </telerik:RadSlidingPane>
                    </telerik:RadSlidingZone>
                </telerik:RadPane>
                <telerik:RadSplitBar ID="Radsplitbar1" runat="server"></telerik:RadSplitBar>
                <telerik:RadPane ID="MiddlePane1" runat="server" Scrolling="None" CssClass="MiddlePaneCSS">
                    <telerik:RadSplitter ID="Radsplitter2" runat="server" Orientation="Horizontal" VisibleDuringInit="false">
                        <telerik:RadSplitBar ID="Radsplitbar3" runat="server"></telerik:RadSplitBar>
                        <telerik:RadPane ID="Radpane2" runat="server">
                            <div id="SummaryDiv2" style="width:925px;height:480px;"></div>
                            
                            <telerik:RadWindowManager ID="RadWindowManager1" runat="server" VisibleOnPageLoad="false"
                                VisibleTitlebar="true" VisibleStatusbar="false"
                                ReloadOnShow ="true" ShowContentDuringLoad="true" RestrictionZoneID="SummaryDiv2"
                                Overlay="true" Animation="Fade"
                                MinimizeZoneID="MyMinWins" OnClientCommand="oCCWindow">
                            </telerik:RadWindowManager>
                            
                            <telerik:RadToolTipManager Width="300px" Height="300px" RelativeTo="element"
                                ID="RadToolTipManager1" runat = "server" OffsetX="15" Skin="Telerik" Position="MiddleRight"
                                OnAjaxUpdate="RadToolTipmanager1_AjaxUpdate" >
                            </telerik:RadToolTipManager>
                    
                        </telerik:RadPane>
                    </telerik:RadSplitter>
                </telerik:RadPane>
                <telerik:RadSplitBar ID="RadSplitBar2" runat="server"></telerik:RadSplitBar>
                <telerik:RadPane ID="EndPane" runat="server" Width="22px" Scrolling="None" CssClass="EndPaneCSS">
                    <telerik:RadSlidingZone ID="Radslidingzone1" runat="server" Width="22px" SlideDirection="Left">
                        <telerik:RadSlidingPane ID="Radslidingpane5" Title="Company Dashboards" runat="server"
                        Width="150px">
                            <telerik:RadTreeView id="CompTree" runat="server">
                        </telerik:RadTreeView>
                        </telerik:RadSlidingPane>
                        <telerik:RadSlidingPane ID="Radslidingpane6" Title="Personal Dashboards" runat="server"
                        Width="150px">
                           <telerik:RadTreeView ID="DBDTree" runat="server" OnNodeClick="DBDTree_NodeClick" AllowNodeEditing="true"
                             OnClientContextMenuItemClicking="onClientContextMenuItemClicking"  OnClientContextMenuShowing="onClientContextMenuShowing"
                              OnClientNodeClicked="ClientNodeClicked" OnNodeEdit="DBDTree_NodeEdit"
                             OnContextMenuItemClick="DBDTree_ContextMenuItemClick" EnableDragAndDrop="true" EnableDragAndDropBetweenNodes="true"
                              OnNodeDrop="DBDTree_HandleDrop">
                             <ContextMenus>
                                <telerik:RadTreeViewContextMenu ID="MainContextMenu" runat="server">
                                <Items>
                                <telerik:RadMenuItem Value="Rename" Text="Rename ..." Enabled="false" PostBack="false"></telerik:RadMenuItem>
                                                         <telerik:RadMenuItem IsSeparator="true">
                                                </telerik:RadMenuItem>
                                             <telerik:RadMenuItem Value="Copy" Text="Copy">
                                </telerik:RadMenuItem>
                                <telerik:RadMenuItem IsSeparator="true">
                                                </telerik:RadMenuItem>
                                             <telerik:RadMenuItem Value="Paste" Text="Paste">
                                </telerik:RadMenuItem>
                                <telerik:RadMenuItem IsSeparator="true">
                                                </telerik:RadMenuItem>
                                <telerik:RadMenuItem Value="NewFolder" Text="New Folder">
                                </telerik:RadMenuItem>
                                 <telerik:RadMenuItem IsSeparator="true">
                                                </telerik:RadMenuItem>
                                                <telerik:RadMenuItem Value="CreateCanvas" Text="Create Canvas">
                                </telerik:RadMenuItem>
                                 <telerik:RadMenuItem IsSeparator="true">
                                                </telerik:RadMenuItem>
                                <telerik:RadMenuItem Value="Delete" Text="Delete">
                                </telerik:RadMenuItem>
                                <telerik:RadMenuItem IsSeparator="true">
                                                </telerik:RadMenuItem>
                                <telerik:RadMenuItem Value="Save" Text="Save">
                                </telerik:RadMenuItem>
                                <telerik:RadMenuItem IsSeparator="true">
                                                </telerik:RadMenuItem>
                                <telerik:RadMenuItem Value="SaveAs" Text="Save As">
                                </telerik:RadMenuItem>
                                
                                </Items>
                                <CollapseAnimation Type="none" />
                                </telerik:RadTreeViewContextMenu>
                                </ContextMenus>
                            </telerik:RadTreeView>
                        </telerik:RadSlidingPane>
                    </telerik:RadSlidingZone>
                </telerik:RadPane>
            </telerik:RadSplitter>

    What I seen that the middle pane is red in color but others i.e left and right pane are having default color, no change.

    Another point to note, I want something else, I want to apply CssClass to SlidingPanes, not in RadPane neither to RadSlidingZone, so the Sliding Panes will having multiple colors one in left (lets say yellow) and other two in right (lets say blue and red). Is that possible?

    Please suggest!

    Thanks
    Arindam R
  5. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 10 Jul 2009 Link to this post

    Hi Arindam,


    I apologise for the misunderstanding and for styling the RadPanes instead of RadSlidingPanes.
    In order to get the desired result, you should apply the CSS classes to the RadSlidingPanes as done below:

    <%@ Page Language="C#"  %> 
     
    <%@ 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">    
                 
            .MiddlePaneCSS    
            {    
               background-color: red;    
            }    
                
            .EndPaneCSS    
             {    
               background-color: yellow;    
            }    
             .LeftPaneCSS    
            {    
               background-color: blue;    
            }    
                
    </style> 
    </head> 
    <body> 
        <form id="form1" runat="server">  
            <asp:ScriptManager ID="mng" runat="server">  
            </asp:ScriptManager> 
            <telerik:RadSplitter ID="RadSplitter1" runat="server" Width="950" Height="500">  
                <telerik:RadPane ID="LeftPane" runat="server" Width="22px" Scrolling="none">  
                    <telerik:RadSlidingZone ID="SlidingZone1" runat="server" Width="22px">  
                        <telerik:RadSlidingPane ID="RadSlidingPane1" CssClass="EndPaneCSS" Title="All Dashboard Reports" 
                            runat="server" Width="150px">  
                            <telerik:RadTreeView ID="RadTreeView1" runat="server" > 
                            </telerik:RadTreeView> 
                        </telerik:RadSlidingPane> 
                    </telerik:RadSlidingZone> 
                </telerik:RadPane> 
                <telerik:RadSplitBar ID="Radsplitbar1" runat="server"></telerik:RadSplitBar> 
                <telerik:RadPane ID="MiddlePane1" runat="server" Scrolling="None">  
                    <telerik:RadSplitter ID="Radsplitter2" runat="server" Orientation="Horizontal" VisibleDuringInit="false">  
                        <telerik:RadSplitBar ID="Radsplitbar3" runat="server"></telerik:RadSplitBar> 
                        <telerik:RadPane ID="Radpane2" runat="server">  
                            <div id="SummaryDiv2" style="width: 925px; height: 480px;">  
                            </div> 
                            <telerik:RadWindowManager ID="RadWindowManager1" runat="server" VisibleOnPageLoad="false" 
                                VisibleTitlebar="true" VisibleStatusbar="false" ReloadOnShow="true" ShowContentDuringLoad="true" 
                                RestrictionZoneID="SummaryDiv2" Overlay="true" Animation="Fade" MinimizeZoneID="MyMinWins" 
                             > 
                            </telerik:RadWindowManager> 
                            <telerik:RadToolTipManager Width="300px" Height="300px" RelativeTo="element" ID="RadToolTipManager1" 
                                runat="server" OffsetX="15" Skin="Telerik" Position="MiddleRight">  
                            </telerik:RadToolTipManager> 
                        </telerik:RadPane> 
                    </telerik:RadSplitter> 
                </telerik:RadPane> 
                <telerik:RadSplitBar ID="RadSplitBar2" runat="server"></telerik:RadSplitBar> 
                <telerik:RadPane ID="EndPane" runat="server" Width="22px" Scrolling="None">  
                    <telerik:RadSlidingZone ID="Radslidingzone1" runat="server" Width="22px" SlideDirection="Left">  
                        <telerik:RadSlidingPane ID="Radslidingpane5" Title="Company Dashboards" runat="server" 
                            Width="150px" CssClass="LeftPaneCSS">  
                            <telerik:RadTreeView ID="CompTree" runat="server">  
                            </telerik:RadTreeView> 
                        </telerik:RadSlidingPane> 
                        <telerik:RadSlidingPane ID="Radslidingpane6" CssClass="MiddlePaneCSS" Title="Personal Dashboards" 
                            runat="server" Width="150px">  
                            <telerik:RadTreeView ID="DBDTree" runat="server">  
                                <ContextMenus> 
                                    <telerik:RadTreeViewContextMenu ID="MainContextMenu" runat="server">  
                                        <Items> 
                                            <telerik:RadMenuItem Value="Rename" Text="Rename ..." Enabled="false" PostBack="false">  
                                            </telerik:RadMenuItem> 
                                            <telerik:RadMenuItem IsSeparator="true">  
                                            </telerik:RadMenuItem> 
                                            <telerik:RadMenuItem Value="Copy" Text="Copy">  
                                            </telerik:RadMenuItem> 
                                            <telerik:RadMenuItem IsSeparator="true">  
                                            </telerik:RadMenuItem> 
                                            <telerik:RadMenuItem Value="Paste" Text="Paste">  
                                            </telerik:RadMenuItem> 
                                            <telerik:RadMenuItem IsSeparator="true">  
                                            </telerik:RadMenuItem> 
                                            <telerik:RadMenuItem Value="NewFolder" Text="New Folder">  
                                            </telerik:RadMenuItem> 
                                            <telerik:RadMenuItem IsSeparator="true">  
                                            </telerik:RadMenuItem> 
                                            <telerik:RadMenuItem Value="CreateCanvas" Text="Create Canvas">  
                                            </telerik:RadMenuItem> 
                                            <telerik:RadMenuItem IsSeparator="true">  
                                            </telerik:RadMenuItem> 
                                            <telerik:RadMenuItem Value="Delete" Text="Delete">  
                                            </telerik:RadMenuItem> 
                                            <telerik:RadMenuItem IsSeparator="true">  
                                            </telerik:RadMenuItem> 
                                            <telerik:RadMenuItem Value="Save" Text="Save">  
                                            </telerik:RadMenuItem> 
                                            <telerik:RadMenuItem IsSeparator="true">  
                                            </telerik:RadMenuItem> 
                                            <telerik:RadMenuItem Value="SaveAs" Text="Save As">  
                                            </telerik:RadMenuItem> 
                                        </Items> 
                                        <CollapseAnimation Type="none" /> 
                                    </telerik:RadTreeViewContextMenu> 
                                </ContextMenus> 
                            </telerik:RadTreeView> 
                        </telerik:RadSlidingPane> 
                    </telerik:RadSlidingZone> 
                </telerik:RadPane> 
            </telerik:RadSplitter> 
        </form> 
    </body> 
    </html> 
     

    For your convenience I also attached my demo page and a screenshot for a reference of the result on my side.



    Greetings,
    Svetlina
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  6. Arindam
    Arindam avatar
    28 posts
    Member since:
    Mar 2009

    Posted 10 Jul 2009 Link to this post

    Thanks Svetlina - For your help
    But the way you did I already done that, I need it in a bit twist.

    When my RadSlidingPanes are collapsed  at that time only I wan't to have yellow, blue and red color means sliding panes. I hope you got my point.

    Thanks
    Arindam R
  7. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 16 Jul 2009 Link to this post

    Hello Arindam,

    The only visible part concerning a RadSlidingPane when it is collapsed is the tab which triggers it to expand. That is why I assuem that you do not want to actually style the RadSlidingPane but the RadSlidingPane tab.

    In order to do this you should find teh DIV element of teh tab and set its color. Once possible approach is to find its ID by using the IEDevToolBar or FireBug tools and to hard code it but I do not recommend this because hardcodeing is not a good practice. That is why I suggest to dynamically evaluate the ClientID at runtime in the following manner:


     <style type="text/css" runat="server">       
              
            #RAD_SLIDING_PANE_TAB_<%=RadSlidingPane1.ClientID %>  
            {   
                background-imagenone !important;  
                background-coloryellow !important;   
            }  
            #RAD_SLIDING_PANE_TAB_<%=Radslidingpane5.ClientID %>  
            {   
                background-imagenone !important;  
                background-colorblue !important;   
            }  
            #RAD_SLIDING_PANE_TAB_<%=Radslidingpane6.ClientID %>  
            {   
                background-imagenone !important;  
                background-colorred !important;   
            }  
              
                   
    </style> 

    Note, that your style block should have runatat=server because otherwise you will not be able to evaluate the IDs.

    All the best,
    Svetlina
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017