Slide in window?

[Robert Madrian]

Hi,

I want to have "Slide in windows" in my ASP.NET solution für editing, Report showing etc.

here in this Video you can see what I mean:http://www.screencast.com/t/9clutfLk3

how to implement such a functionality with Kendo window?

robert

[Ianko]

Hello Robert,

The shown UI component is some sort of a modal sliding pane. Kendo Window is not supposed to operate as a pane, but it can be programmed to have a similar visual effect. 

You can, typically, set the width, height and position properties so that it fits the position and size requirements you have. You can use percent values with these options, but only by using client-side configuration. Therefore, with the MVC wrapper you should use the setOptions method to configure that. 

Next, the sliding animation can be defined by using the animation option. You can set the effects to "slideIn:left", which will slide the dialog from right to left. 

Here you are a runnable dojo example with the client-side widget to test out the suggested solution: http://dojo.telerik.com/uLafo. 

And the same behavior with the MVC wrapper you can achieve with this sample code:

@(Html.Kendo().Window()
    .Name("dialog")
    .Title("Title")
    .Content(@<text>
        <p>Some content</p>
    </text>)
    .Modal(true)
    .Animation(animation => animation
        .Open(open => open.SlideIn(SlideDirection.Left).Duration(500))
        .Close(close => close.SlideIn(SlideDirection.Left).Duration(500).Reverse(true))
    )
    .Actions(actions => actions.Clear().Close())
    .Visible(false)
    .Draggable(false)
    .Resizable(resizable => resizable.Enabled(false))
)

@(Html.Kendo().Button()
    .Name("showDialog")
    .Content("Show Slide Dialog")
    .Events(events => events.Click("showDialog"))
)

<script>
    $(document).ready(function () {
        var dialog = $("#dialog").data("kendoWindow");
        dialog.setOptions({
            width: "60%",
            height: "95%",
            position: {
                top: 0,
                left: "40%"
            },
        });
    })

    function showDialog() {
        $("#dialog").data("kendoWindow").open();
    }
</script>

Regards,
Ianko
Telerik by Progress

[Robert Madrian]

Hi Ianko,

that Looks good - the only Problem is the height of the window - I want to have to fill the window the whole screen but if I set the height: "100%" the window is higher than the viewport?

robert

[Ianko]

Hello Robert,

Setting it to 100% will occupy more that the real view port as there is some padding applied to the elements inside the Kendo Window.

Therefore, I would rather suggest you to use a percent value less than 100 that fits your requirements. 

Regards,
Ianko
Telerik by Progress

[Robert Madrian]

Hi,

the Problem to set it to less than 100% is if the window size will change - if you make the window smaller then you can see the Problem (your sample: http://dojo.telerik.com/uLafo) 

see here http://screencast.com/t/yInlkoTQ

robert

[Robert Madrian]

Hi,

I have found a solution with CSS

robert