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

Rad Sliding Pane Colors

5 Answers 169 Views
Splitter
This is a migrated thread and some comments may be shown as answers.
Arindam
Top achievements
Rank 1
Arindam asked on 07 Jul 2009, 09:31 AM
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

5 Answers, 1 is accepted

Sort by
0
Svetlina Anati
Telerik team
answered on 07 Jul 2009, 03:10 PM
Hello Arindam,

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

head:


<head runat="server">  
    <title></title>  
    <style type="text/css">  
      
    .MiddlePaneCSS  
    {  
       background-colorred;  
    }  
      
    .EndPaneCSS  
    {  
       background-coloryellow;  
    }  
    .LeftPaneCSS  
    {  
       background-colorblue;  
    }  
      
    </style>  
</head> 

markup declaration:


   <telerik:RadSplitter ID="RadSplitter1" runat="server" Width="950" Height="500" Skin="Forest">  
                <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">  
                            </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">  
                            </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" 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">  
                            </telerik:RadTreeView> 
                        </telerik:RadSlidingPane> 
                    </telerik:RadSlidingZone> 
                </telerik:RadPane> 
            </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.
0
Arindam
Top achievements
Rank 1
answered on 07 Jul 2009, 05:29 PM
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
0
Svetlina Anati
Telerik team
answered on 10 Jul 2009, 12:00 PM
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.
0
Arindam
Top achievements
Rank 1
answered on 10 Jul 2009, 04:39 PM
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
0
Svetlina Anati
Telerik team
answered on 16 Jul 2009, 08:10 AM
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.
Tags
Splitter
Asked by
Arindam
Top achievements
Rank 1
Answers by
Svetlina Anati
Telerik team
Arindam
Top achievements
Rank 1
Share this question
or