I am using splitter which will be divided the page in 2 horizontal sides.
Now I want to add kendo window in one splitting pane and it should be fixed with that splitting pane (like if I use tab it is fixed with the splitting pane ) and drag it to another splitting pane .In there the window should auto resize as with the splitting pane size (both height and width).
Now when I define kendo window it is easily draggable as it is in the top layer, so it is not fixed with the splitting pane and unable to auto resize.
The another issue is when I want to minimize the one splitting pane it should minimize at any direction .(Now I am only getting in left direction ,but please guide me how it will be in right direction can be possible).
Can anyone pls help me out.
Now I want to add kendo window in one splitting pane and it should be fixed with that splitting pane (like if I use tab it is fixed with the splitting pane ) and drag it to another splitting pane .In there the window should auto resize as with the splitting pane size (both height and width).
Now when I define kendo window it is easily draggable as it is in the top layer, so it is not fixed with the splitting pane and unable to auto resize.
The another issue is when I want to minimize the one splitting pane it should minimize at any direction .(Now I am only getting in left direction ,but please guide me how it will be in right direction can be possible).
Can anyone pls help me out.
7 Answers, 1 is accepted
0
Hi Sourav,
The described behavior is very difficult to achieve, because the Window is not rendered INSIDE the Splitter pane, but is a direct child of the <body> element. This means that the Window must be positioned and resized manually in order to match the size and position of another element on the page.
On a side note, I don't see any reason for such a requirement - the Window widget is designed to provide a free-floating, resizable and draggable wrapper of some content. The Splitter is designed to provide a resizable table-like wrapper of content. There is no connection between the two widgets. Unless I am missing something, I advise you to construct your layout in a different way.
Regards,
Dimo
the Telerik team
The described behavior is very difficult to achieve, because the Window is not rendered INSIDE the Splitter pane, but is a direct child of the <body> element. This means that the Window must be positioned and resized manually in order to match the size and position of another element on the page.
On a side note, I don't see any reason for such a requirement - the Window widget is designed to provide a free-floating, resizable and draggable wrapper of some content. The Splitter is designed to provide a resizable table-like wrapper of content. There is no connection between the two widgets. Unless I am missing something, I advise you to construct your layout in a different way.
Regards,
Dimo
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Sourav
Top achievements
Rank 1
Rank 1
answered on 28 Sep 2011, 04:48 AM
Actually I want to implement docking (like Telerik docking for .net) in webapplication. Is it possible?
I want to have following features.
1. content of splitter should be draggable.
2. On drop it will take splitter's height and width and position.
3. If target splitter already have content then new content will be added within TAB.
4. while floating window can be closable.
I want to have following features.
1. content of splitter should be draggable.
2. On drop it will take splitter's height and width and position.
3. If target splitter already have content then new content will be added within TAB.
4. while floating window can be closable.
0
Hi Sourav,
I am afraid the combination of Window and Splitter cannot provide docking functionality out-of-the-box. You will need to write a lot of custom code, almost as much as implementing a complete docking component.
Regards,
Dimo
the Telerik team
I am afraid the combination of Window and Splitter cannot provide docking functionality out-of-the-box. You will need to write a lot of custom code, almost as much as implementing a complete docking component.
Regards,
Dimo
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Marcin
Top achievements
Rank 1
Rank 1
answered on 13 Oct 2011, 09:53 AM
Dear Dimo,
Would you see possibility for docking window as a tab and vice versa? For example double clicking on tab title would undock it to window. Please let me know your thoughts about such feature.
Thanks,
Marcin
Would you see possibility for docking window as a tab and vice versa? For example double clicking on tab title would undock it to window. Please let me know your thoughts about such feature.
Thanks,
Marcin
0
Hi Marcin,
We have no plans to implement docking functionality in the foresee-able future, but if we decide to do it, it will probably be a separate component (just like RadDock for ASP.NET AJAX), instead of a feature of an existing component.
All the best,
Dimo
the Telerik team
We have no plans to implement docking functionality in the foresee-able future, but if we decide to do it, it will probably be a separate component (just like RadDock for ASP.NET AJAX), instead of a feature of an existing component.
All the best,
Dimo
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Gary
Top achievements
Rank 1
Rank 1
answered on 05 Apr 2012, 03:55 PM
You can achieve the desired results with jQuery UI using Draggable, Droppable and Resizable. I haven't tried it with the Kendo Window but basically the concept is; take an item I.E. "<div>" and make it .draggable() and .resizable(). Then make the I.E. Splitter pane .droppable(). On the drop event, you resize the item I.E. "<div>" via resizable() to the innerWidth/innerHeight of the .droppable() container.
0
Gary
Top achievements
Rank 1
Rank 1
answered on 06 Apr 2012, 01:48 PM
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>KendoUI - Window</title> <link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/redmond/jquery-ui.css" rel="stylesheet" type="text/css" media="all" > <link href="../script/kendo/styles/kendo.common.min.css" rel="stylesheet" type="text/css" media="all"> <link href="../script/kendo/styles/kendo.default.min.css" rel="stylesheet" type="text/css" media="all"> <script type="text/javascript" src="https://www.google.com/jsapi" language="javascript"></script> <script type="text/javascript"> if (typeof jQuery === 'undefined') { google.load("jquery", "1.7.1"); google.load("jqueryui", "1.8.9"); } </script> </head> <body> <div id="kendoUI" style="display:none;"> <div id="tabstrip"> <ul> <li>tab1</li> <li>tab2</li> </ul> <div> <div id="splitter"> <div style="height:300px;" id="split-panel-one"></div> <div style="height:300px;" id="split-panel-two"></div> </div> </div> <div> content2 </div> </div> <div id="window"> Window! </div> </div> <script src="../script/kendo/js/kendo.web.min.js" type="text/javascript" language="javascript"></script> <script type="text/javascript"> $(function(){ var kWindow = $('#window').kendoWindow({ visible:false, title:'KendoUI Window', width:'300px', height:'200px' }).data("kendoWindow"); var onSelect = function(e) { ($(e.item).index()) !== 0 ? kWindow.close() : kWindow.open(); }; var tabstrip = $('#tabstrip').kendoTabStrip().data("kendoTabStrip").select(0).bind("select", onSelect); function dockWindow(event, ui) { var pane = $(this), paneHeight = pane.innerHeight(), paneWidth = pane.innerWidth(), paneOffset = pane.offset(), tabsHeight = $("#tabstrip > .k-tabstrip-items").outerHeight(); kWindow.wrapper.width(paneWidth).height(paneHeight - tabsHeight - 18).css('top',paneOffset.top).css('left',paneOffset.left); } $('#kendoUI') .find('#splitter').kendoSplitter().end() .find('#split-panel-one').droppable({drop: dockWindow}).end() .find('#split-panel-two').droppable({drop: dockWindow}).end() .show(); kWindow.wrapper.draggable({ snap: true, snapMode: 'both',snapTolerance: 50 }); kWindow.center().open(); }); </script> </body> </html>