Edit this page

Use Windows as Sliding Panes

You can configure the Kendo UI Window so it acquires the visual effect of a sliding UI component.

The following example demonstrates how to make the Window behave as a sliding pane.

Example
<div id="dialog">
  <p>Some content</p>
</div>

<a href="#" id="openWindow" class="k-button">Open</a>

<script>
  $("#dialog").kendoWindow({
    title: "Title",
    width: "60%",
    height: "94%",
    actions: [ "close" ],
    draggable: false,
    resizable: false,
    modal: true,
    position:{
      top: 0,
      left: "40%"
    },
    animation: {
        open: {
        effects: "slideIn:left",
        duration: 500
      },
      close: {
        effects: "slideIn:left",
        reverse: true,
        duration: 500
      },
    },
    visible: false
  });

  $("#openWindow").click(function(){
    var dialog = $("#dialog").getKendoWindow();
    dialog.open();
  })
</script>

See Also

Other articles and how-to examples on the Kendo UI Window:

For more runnable examples on the Kendo UI Window, browse the How To documentation folder.

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy