Drag & Drop Window in Splitting pane

8 posts, 0 answers
  1. Sourav
    Sourav avatar
    28 posts
    Member since:
    Sep 2011

    Posted 27 Sep 2011 Link to this post

       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.
  2. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 27 Sep 2011 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Sourav
    Sourav avatar
    28 posts
    Member since:
    Sep 2011

    Posted 27 Sep 2011 Link to this post

    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.
  5. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 28 Sep 2011 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Marcin
    Marcin avatar
    1 posts
    Member since:
    Oct 2011

    Posted 13 Oct 2011 Link to this post

    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

  7. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 13 Oct 2011 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  8. Gary
    Gary avatar
    6 posts
    Member since:
    Nov 2007

    Posted 05 Apr 2012 Link to this post

    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.
  9. Gary
    Gary avatar
    6 posts
    Member since:
    Nov 2007

    Posted 06 Apr 2012 Link to this post

    <!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>
Back to Top
Kendo UI is VS 2017 Ready