I've copied the Windows2000 skin and made some amendments to the CSS which have worked very well. However the Splitter is still trying to get images from a WebResource, as such no images are being displayed.
<telerik:RadSplitter ID="MainSplitter" runat="server" Orientation="Vertical" Width="100%" Height="100%" Skin="MySkin" EnableEmbeddedSkins="false" >
<telerik:RadPane ID="MainContent" runat="server" Scrolling="none">
<telerik:RadSplitter ID="MainContentSplitter" runat="server" Orientation="Horizontal" >
<telerik:RadPane ID="MainContent_SearchHolder" runat="server" Height="25" Locked="true" >
<telerik:RadSlidingZone ID="MainContent_SlidingZone" runat="server" ClickToOpen="true">
<telerik:RadSlidingPane ID="MainContent_SearchOptions" runat="server" Title="Search Options" MinHeight="250" Height="250" EnableDock="false" >
Search Optionssssss
</telerik:RadSlidingPane>
<telerik:RadSlidingPane ID="MainContent_SavedSearches" runat="server" Title="Saved Searches" EnableDock="false">
Saved Searchedddddd
</telerik:RadSlidingPane>
<telerik:RadSlidingPane ID="MainContent_ApplicantActions" runat="server" Title="Applicant Applications" EnableDock="false">
Applicant Actionssssss
</telerik:RadSlidingPane>
</telerik:RadSlidingZone>
</telerik:RadPane>
<telerik:RadSplitBar ID="Splitbar_Search_Results" runat="server" CollapseMode="None" />
<telerik:RadPane ID="MainContent_Results" runat="server" Scrolling="y">
Results
</telerik:RadPane>
<telerik:RadSplitBar ID="Splitbar_Results_Bookmarks" runat="server" CollapseMode="Both" />
<telerik:RadPane ID="MainContent_Bookmarks" runat="server" Scrolling="Y">
Bookmarks
</telerik:RadPane>
</telerik:RadSplitter>
</telerik:RadPane>
<telerik:RadSplitBar ID="TheSplitBar" runat="server" CollapseMode="none" EnableResize="false" />
<telerik:RadPane ID="SlidingContent" runat="server" Width="25" Scrolling="none">
<telerik:RadSlidingZone ID="SlidingZone" runat="server" ClickToOpen="true" SlideDirection="left" >
<telerik:RadSlidingPane ID="Slide_AppNotes" runat="server" Title="Applicant Notes" MinWidth="500" Width="500">
App Notes
</telerik:RadSlidingPane>
<telerik:RadSlidingPane ID="Slide_AppContactHistory" runat="server" Title="Contact History" MinWidth="500" Width="500">
Contact History
</telerik:RadSlidingPane>
</telerik:RadSlidingZone>
</telerik:RadPane>
</telerik:RadSplitter>
Any ideas how I can put my own images in?
29 Answers, 1 is accepted
Rank 1
We are aware of this issue and it is on out TODO list. For the time being, I cannot tell you when we will fix it, but our developers are working on the matter.
Kind regards,
Tsvetie
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center
Rank 1
Unfortunately, for the time being all I can offer you, is the following workaround:
| <body> |
| <script type="text/javascript"> |
| function OnClientLoadedHandler(object, args) |
| { |
| SetMyImages(); |
| } |
| function OnClientExpandedHandler(object, args) |
| { |
| setTimeout(function(){ |
| SetMyImages(); |
| }, 0) |
| } |
| function OnClientCollapsedHandler(object, args) |
| { |
| setTimeout(function(){ |
| SetMyImages(); |
| }, 0) |
| } |
| function SetMyImages() |
| { |
| var splitbarElement = document.getElementById('<%= RadSplitBar1.ClientID %>'); |
| var images = splitbarElement.getElementsByTagName('IMG'); |
| for(var i=0; i<images.length; i++) |
| { |
| if(images[i].id.indexOf('Forward') > -1) |
| { |
| images[i].src = 'myImageForward.gif'; |
| } |
| else if(images[i].id.indexOf('Backward') > -1) |
| { |
| images[i].src = 'myImageBackward.gif'; |
| } |
| } |
| } |
| </script> |
| <form id="form1" runat="server"> |
| <asp:ScriptManager ID="ScriptManager1" runat="server" /> |
| <telerik:RadSplitter ID="RadSplitter1" runat="server" |
| EnableEmbeddedSkins="false" |
| Skin="Default" |
| OnClientLoaded="OnClientLoadedHandler"> |
| <telerik:RadPane ID="RadPane1" runat="server" |
| OnClientExpanded="OnClientExpandedHandler" |
| OnClientCollapsed="OnClientCollapsedHandler"></telerik:RadPane> |
| <telerik:RadSplitBar ID="RadSplitBar1" runat="server" CollapseMode="Both" /> |
| <telerik:RadPane ID="RadPane2" runat="server" |
| OnClientExpanded="OnClientExpandedHandler" |
| OnClientCollapsed="OnClientCollapsedHandler"></telerik:RadPane> |
| </telerik:RadSplitter> |
| </form> |
| </body> |
This issue is on our TODO list, but with low priority.
Sincerely yours,
Tsvetie
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center
Rank 1
Rank 1
We will do our best to implement this for the service pack.
Greetings,
Tsvetie
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center
Rank 1
I am afraid that currently this is the only way.
The problem is specific and is not easy to resolve. The service pack that will appear tomorrow will not have this issue fixed, so for now we would suggest to use the workaround. We will make sure that the fix will be included in the next update of the RadSplitter "Prometheus" control.
We apologize for the temporary inconvenience.
Kind regards,
Georgi Tunev
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center
Rank 1
Rank 1
One further workaround please ;-)
What code is to implement to get two images for collapse and two images for expand?
(i.e.: splitbar_collapse_h.gif, splitbar_collapse_v.gif, splitbar_collapse_h.gif, splitbar_collapse_v.gif)
Your workaround handles only with "Forward" and "Backward"
Thanks for answering
We have set high priority for this issue for the next Q.
For the time being, I updated my previous code - now it should work in all cases.
| <body> |
| <script type="text/javascript"> |
| function OnClientLoadedHandler(object, args) |
| { |
| SetMyImages(object, object.isVertical()); |
| } |
| function OnClientExpandedHandler(object, args) |
| { |
| var splitter = object.get_splitter(); |
| setTimeout(function(){ |
| SetMyImages(splitter, splitter.isVertical()); |
| }, 0) |
| } |
| function OnClientCollapsedHandler(object, args) |
| { |
| var splitter = object.get_splitter(); |
| setTimeout(function(){ |
| SetMyImages(splitter, splitter.isVertical()); |
| }, 0) |
| } |
| function SetMyImages(splitter, isVerticalSplitter) |
| { |
| var splitBarElements = splitter.getSplitBars(); |
| for(var j = 0; j < splitBarElements.length; j++) |
| { |
| var splitbarElement = splitBarElements[j].get_element(); |
| var images = splitbarElement.getElementsByTagName('IMG'); |
| for(var i=0; i<images.length; i++) |
| { |
| var image = images[i]; |
| //if(image.style.display != "none") |
| { |
| if(image.current == "expand" || (image.id.indexOf('Forward') > -1 && !image.current )) |
| { |
| image.src = (isVerticalSplitter) ? 'my_splitbar_collapse_h.gif' : 'my_splitbar_collapse_v.gif'; |
| image.current = "collapse"; |
| } |
| else if(image.current == "collapse" || (image.id.indexOf('Backward') > -1 && !image.current)) |
| { |
| image.src = (isVerticalSplitter) ? 'my_splitbar_expand_h.gif' : 'my_splitbar_expand_v.gif'; |
| image.current = "expand"; |
| } |
| } |
| } |
| } |
| } |
| </script> |
| <form id="form1" runat="server"> |
| <asp:ScriptManager ID="ScriptManager1" runat="server" /> |
| <telerik:RadSplitter ID="RadSplitter1" runat="server" OnClientLoaded="OnClientLoadedHandler"> |
| <telerik:RadPane ID="RadPane1" runat="server" OnClientExpanded="OnClientExpandedHandler" |
| OnClientCollapsed="OnClientCollapsedHandler"> |
| </telerik:RadPane> |
| <telerik:RadSplitBar ID="RadSplitBar1" runat="server" CollapseMode="Both" /> |
| <telerik:RadPane ID="RadPane2" runat="server" OnClientExpanded="OnClientExpandedHandler" |
| OnClientCollapsed="OnClientCollapsedHandler"> |
| </telerik:RadPane> |
| <telerik:RadSplitBar ID="RadSplitBar3" runat="server" CollapseMode="Both" /> |
| <telerik:RadPane ID="RadPane5" runat="server" OnClientExpanded="OnClientExpandedHandler" |
| OnClientCollapsed="OnClientCollapsedHandler"> |
| </telerik:RadPane> |
| </telerik:RadSplitter> |
| <telerik:RadSplitter ID="RadSplitter2" runat="server" Orientation="Horizontal" OnClientLoaded="OnClientLoadedHandler"> |
| <telerik:RadPane ID="RadPane3" runat="server" OnClientExpanded="OnClientExpandedHandler" |
| OnClientCollapsed="OnClientCollapsedHandler"> |
| </telerik:RadPane> |
| <telerik:RadSplitBar ID="RadSplitBar2" runat="server" CollapseMode="Both" /> |
| <telerik:RadPane ID="RadPane4" runat="server" OnClientExpanded="OnClientExpandedHandler" |
| OnClientCollapsed="OnClientCollapsedHandler"> |
| </telerik:RadPane> |
| <telerik:RadSplitBar ID="RadSplitBar4" runat="server" CollapseMode="Both" /> |
| <telerik:RadPane ID="RadPane6" runat="server" OnClientExpanded="OnClientExpandedHandler" |
| OnClientCollapsed="OnClientCollapsedHandler"> |
| </telerik:RadPane> |
| </telerik:RadSplitter> |
| </form> |
| </body> |
Sincerely yours,
Tsvetie
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center
Rank 2
Yes, this will be fixed for the next release.
Best wishes,
Tsvetie
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center
Rank 1
thanks for making us hope ;-), but I don't realize, that this issue is fixed in Q3.
The splitbar_collapse and splitbar_expand images are here, but not the customized.
How is the "professional" way to embed customized images in the splitbar?
Thanks for answering and Merry Christmas.
My answer was to the question of Sam Van - whether this will be fixed in the SP scheduled for january. I apologize if the phrase "next release" misled you.
Best wishes,
Tsvetie
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center
Rank 2
Thanks,
Michael
Yes, this problem is resolved in the version of the Prometheus suite, that is to appear tomorrow (15 January).
Regards,
Tsvetie
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center
Rank 2
Thanks.
Rank 2
I have downloaded the latest version and now instead of picking up the default images for the original skin that I am modifying from the web resource it doesn't pick up any. I suspect this is because I need to have the images named appropriately or in a particular path. Is there a setting/property that I can set for image path on the splitter?
Is there any decent documentation on how to do this that I can reference? I thought it would be a straight forward cosmetic change but it is proving otherwise.
Thanks.
Please refer to our online documentation for information how to create a custom skin:
How skins work
Skin registration
Modifying built-in skins
Creating a custom skin
All the best,
Tsvetie
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center
Rank 2
I have downloaded the latest version (released yesterday) and despite maintaining folder paths and file names from the original skin the images of my customised skin are not appearing.
I created a custom skin using the latest version of the Prometheus RadSplitter and was able to set new images. Could you please make sure that you have set the EnableEmbeddedSkins property of the control to "false"?
In case this does not fix the problem, please open a new support ticket and send us a running project, demonstrating the problem.
Regards,
Tsvetie
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center
Rank 2
I'd rather not have to set up a running project if possible with a customised skin as it will be time consuming. Take a look at my other post and see if you can notice any obvious errors.
Worst case scenario I would rather get the hack working than have to set up a project for you.
Thanks,
Michael
I already answered your question in the other forum thread. For your convenience, I will place the information here as well:
______________________________________________________________________
The first thing that I notice is that you have not set the Skin property of the RadSplitter to the name of the new skin - Skin="Cks".
Another thing is that the RadSplitter has four images for the SplitBars - two for Vertical splitters and two for Horizontal splitter - please make sure that you have replaced the correct images.
Apart from these suggestions, everything seems correct. In case the problem persists, I will really appreciate it, if you could take the time to send us a running project, even not so simple.
All the best,
Tsvetie
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center
Rank 1
I’m not sure if this is the right thread for this question, but I could not find an answer anywhere else. What is the most straight forward method to make the RadSplitter and the panes inside it to show the background of the form? By the way, if I set the size of the splitter with actual pixel number, there would be no problem showing the background of the form, but when I go for 100% in the height and width, then I get the white background.
Thanks,
-Sam
I am not quite sure why you get different behavior when using a RadSplitter in PX and one in % - I got the same result. Generally, you have to do two things:
- Set BackColor="transparent" for the RadPanes.
- Add the following class to the HEAD of your page:
That way you will not need to customize your skin. In case you prefer to update the CSS file, you have to update the .pane class the same way.
.pane { background-color: transparent !important; }
For example:
| <head runat="server"> |
| <title>Untitled Page</title> |
| <style type="text/css"> |
| html, body, form |
| { |
| height: 100%; |
| padding: 0px; |
| margin: 0px; |
| overflow: hidden; |
| } |
| .pane |
| { |
| background-color: transparent !important; |
| } |
| </style> |
| </head> |
| <body> |
| <form id="form1" runat="server" style="background-color:Red;"> |
| <asp:ScriptManager ID="ScriptManager1" runat="server" /> |
| <telerik:RadSplitter ID="RadSplitter1" runat="server" Width="100%" Height="100%"> |
| <telerik:RadPane ID="RadPane1" runat="server" BackColor="transparent"> |
| </telerik:RadPane> |
| <telerik:RadPane ID="RadPane2" runat="server" BackColor="transparent"> |
| </telerik:RadPane> |
| </telerik:RadSplitter> |
| </form> |
| </body> |
Regards,
Tsvetiethe Telerik team
Instantly find answers to your questions at the new Telerik Support Center
Rank 1
I still get the same thing, just white background. I attached a sample of what I'm using. I really appreciate the help.
thanks,
-Sam
<
head id="Head1" runat="server">
<title>TazaREO</title>
<link href="../StyleSheet.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.pane
{
background-color: transparent !important;
}
.TD_Bottom
{
text-align: center;
font-size: x-small;
color: #666666;
}
.TD_Tree
{
text-align: left;
vertical-align: top;
}
.LogoStyle
{
float: left;
}
</style>
</
head>
<
body class="BodyStyle">
<form id="form1" runat="server" class="BackGround" >
<telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server"></telerik:RadStyleSheetManager>
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" EnableHistory="True">
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="RadToolBar1">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="RadToolBar1" />
</UpdatedControls>
</telerik:AjaxSetting>
</AjaxSettings>
</telerik:RadAjaxManager>
<telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
<
telerik:RadSplitter ID="TopSplitter" Runat="server"
Width = "100%" Height = "100%"
Orientation="Horizontal"
FullScreenMode="True"
BorderStyle="None"
BorderSize="0"
BackColor="Transparent">
<telerik:RadPane ID="TopPane" runat="server"
Height="75px"
BackColor="Transparent"
CssClass="pane">
<asp:HyperLink ID="HyperLink1" runat="server" class="LogoStyle"
ImageUrl="~/Images/TaZaREOLogo.png">TazaREO.net Home</asp:HyperLink>
</telerik:RadPane>
<telerik:RadPane ID="BottomPane" runat="server"
Scrolling="None"
BackColor="Transparent"
CssClass="pane">
<telerik:RadSplitter Runat="server" ID="BottomSplitter"
Orientation ="Vertical"
BorderStyle="None"
BorderSize="0" BackColor="Transparent" >
<telerik:RadPane ID="TreePane" runat="server"
BackColor="Transparent"
CssClass="pane">
<telerik:RadTreeView ID="TazaTree" Runat="server" ForeColor="White" Skin="Telerik">
<CollapseAnimation Duration="100" Type="OutQuint" />
<ExpandAnimation Duration="100" />
</telerik:RadTreeView>
</telerik:RadPane>
<telerik:RadSplitBar ID="RadSplitBar2" runat="server" CollapseMode="Both" />
<telerik:RadPane ID="RightPane" runat="server"
BackColor="Transparent"
CssClass="pane">
The solution I gave you was for Vertical RadSplitters. In order to use it with Horizontal splitters as well, you have to update styles in the HEAD the following way:
| .pane, |
| .paneHorizontal |
| { |
| background-color: transparent !important; |
| } |
Best wishes,
Tsvetie
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center