I have a horizontal splitter with a top pane and a bottom pane. Normally I can slide the splitBar up and down. However, if I have a binary component in one of the panes, I cannot slide the splitBar over it. Please try the simplified sample code below, and please help me find a solution. I have been trying to figure this one out for some time.
| <telerik:RadScriptManager ID="RadScriptManager1" runat="server"> |
| </telerik:RadScriptManager> |
| <telerik:RadSplitter ID="splitter1" Orientation="Horizontal" Width="100%" Height="100%" runat="server"> |
| <telerik:RadPane ID="paneTop" runat="server" Width="100%" Height="300px" ContentUrl="http://www.yahoo.com"> |
| </telerik:RadPane> |
| <telerik:RadSplitBar ID="splitBar1" runat="server" /> |
| <telerik:RadPane ID="paneBottom" runat="server" Width="100%" Height="100%" ContentUrl="RadGridExport.pdf"> |
| </telerik:RadPane> |
| </telerik:RadSplitter> |
2 Answers, 1 is accepted
0
Hi Cesar,
The behavior you describe is expected, as when the mouse is over a heavy weight object (PDF for example), the object captures the events of the mouse. As a result, when the mouse moves over the PDF, the splitbar does not get notified of that move and does not update its position. Unfortunately, there is not much that we can do in this case. The only suggestion that I can give, is to set LiveResize=true for the splitter control:
However, even with this setting, when you quickly drag the mouse above the PDF, the splitbar will stop moving.
Regards,
Tsvetie
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
The behavior you describe is expected, as when the mouse is over a heavy weight object (PDF for example), the object captures the events of the mouse. As a result, when the mouse moves over the PDF, the splitbar does not get notified of that move and does not update its position. Unfortunately, there is not much that we can do in this case. The only suggestion that I can give, is to set LiveResize=true for the splitter control:
<telerik:RadSplitter ID="splitter1" Orientation="Horizontal" Width="100%" Height="100%" runat="server" LiveResize="true" SplitBarsSize="10"> <telerik:RadPane ID="paneTop" runat="server" Width="100%" Height="300px" ContentUrl="http://www.yahoo.com"> </telerik:RadPane> <telerik:RadSplitBar ID="splitBar1" runat="server" /> <telerik:RadPane ID="paneBottom" runat="server" Width="100%" Height="100%" ContentUrl="AlbertEinstein.pdf"> </telerik:RadPane></telerik:RadSplitter>However, even with this setting, when you quickly drag the mouse above the PDF, the splitbar will stop moving.
Regards,
Tsvetie
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
0
Cesar
Top achievements
Rank 1
Rank 1
answered on 26 Mar 2010, 03:59 PM
I think your solution gets the job done quite nicely. I also came up with a solution, but it is not as graceful.
I used javascript to capture the mousedown and mouseup events. I had to use a separate tool to identify to what element and id the splitBar renders to, and I attached the mousedown event to it. Then I attached the mouseup event to the document object.
On mousedown, the ContentUrl of the RadPane (I set the .src property) is changed to an html friendly page (I use the google.com site for my example). And on mouseup I replace the same pane content with the original PDF file.
| <html> |
| <head runat="server"> |
| <style type="text/css"> |
| head, body, form |
| { |
| height: 100%; |
| padding: 0; |
| margin: 0; |
| overflow: hidden; |
| } |
| </style> |
| <script type="text/javascript"> |
| function mouseDown() |
| { |
| var currentSrc = document.getElementById('RAD_SPLITTER_PANE_EXT_CONTENT_paneBottom').src; |
| if (currentSrc != "http://www.google.com") |
| { |
| document.getElementById('RAD_SPLITTER_PANE_EXT_CONTENT_paneBottom').src = "http://www.google.com"; |
| } |
| } |
| function mouseUp() |
| {
// Source element is DIV when releasing over PDF report, TD otherwise. |
| var tname = event.srcElement.tagName; |
| if (tname == "DIV" || tname == "TD") |
| { |
| document.getElementById('RAD_SPLITTER_PANE_EXT_CONTENT_paneBottom').src = "/RadGridExport.pdf"; |
| } |
| } |
| </script> |
| </head> |
| <body> |
| <form id="form1" runat="server"> |
| <telerik:RadScriptManager ID="RadScriptManager1" runat="server"> |
| </telerik:RadScriptManager> |
| <telerik:RadSplitter ID="splitter1" Orientation="Horizontal" Width="100%" Height="100%" |
| VisibleDuringInit="false" runat="server"> |
| <telerik:RadPane ID="paneTop" runat="server" Width="100%" Height="300px" ContentUrl="http://www.yahoo.com"> |
| </telerik:RadPane> |
| <telerik:RadSplitBar ID="splitBar1" runat="server" /> |
| <telerik:RadPane ID="paneBottom" runat="server" Width="100%" Height="100%" ContentUrl="/RadGridExport.pdf"> |
| </telerik:RadPane> |
| </telerik:RadSplitter> |
| <script type="text/javascript"> |
| document.getElementById('splitBar1').onmousedown = mouseDown; |
| document.onmouseup = mouseUp; |
| </script> |
| </form> |
| </body> |
| </html> |