kendoWindow appendTo boundaries

[Emanuele]

I create a KendoWindow with appendTo set to a specific div.

the expected behavior is:

1) moving window inside parent boundaries
2) maximize windows inside parent boundaries

How can I obtain this behavior ?

[Petur Subev]

Hello Emanuele,

The behavior you experience is working as expected.

As explicitly mentioned in the documentation "this does not constrain the window dragging within the given elemen".

http://docs.kendoui.com/api/web/window#appendto objectstringdefault

Kind regards,
Petur Subev
the Telerik team

[Emanuele]

I had already read your documentation.

My question is, how can I get similar behavior ?

[Petur Subev]

Hello Emanuele,

Since the functionality is not supported out-of-the-box I would suggest you to share such idea on our Kendo User Voice page.
Depending how many people will vote for this functionality we will consider adding it sooner to the suite.

Kind Regards,
Petur Subev
the Telerik team

[Aditya]

Hello Emanuele,

are you able to fix this. i would like to have similar kind of feature... if you are able to fix it...can you please share the guide lines....how to fix it.

Petur Subev,
can you please share some guidelines which helps me to implement on my own

Thanks in advance...

[Emanuele]

I migrate all my windows to jquery-ui.

[Petur Subev]

Hello Aditya,

A possible work-around to limit the dragging of the Window out of coordinates (900x600 in the example below) could be the following:

 

<script type="text/javascript">

    $(document).ready(function () {

        $("#windowName").data("kendoWindow").dragging._draggable.bind("drag", function (e) {

 

            var wnd = $("#window").data("kendoWindow");

            var position = wnd.wrapper.position();

 

            var minT = 0;

            var minL = 0;

            //Get the Window width and height and

            //place them in position of the hard-coded width and height

            var maxT = 600 - wnd.wrapper.height();

            var maxL = 900 - wnd.wrapper.width();

 

            if (position.left < minL) {

                coordinates = { left: minL };

                $(wnd.wrapper).css(coordinates);

            }

 

            if (position.top < minT) {

                coordinates = { top: minT };

                $(wnd.wrapper).css(coordinates);

            }

 

            if (position.left > maxL) {

                coordinates = { left: maxL };

                $(wnd.wrapper).css(coordinates);

            }

 

            if (position.top > maxT) {

                coordinates = { top: maxT };

                $(wnd.wrapper).css(coordinates);

            }

        })

    })

</script>

You can use this as a base point and extend it with more complex logic.

Regards,
Petur Subev
the Telerik team

[Aditya]

Petur Subev,

Thanks alot...... it worked & am able to extend this functionality. 

Cheers..
Aditya Velala

[Mike]

I second that this workaround worked with no problems for me.

Vote for this functionality, please!

[UFIS]

Hi Petur and Aditya,

Do you have any sample for this functionality ?

[Petur Subev]

Hello Emanuele,

There is the same example copy/pasted into our Dojo site:

http://trykendoui.telerik.com/@pesho/IgaJ

Kind Regards,
Petur Subev
Telerik