Slide in window?

6 posts, 0 answers
  1. Robert Madrian
    Robert Madrian avatar
    154 posts
    Member since:
    Apr 2003

    Posted 06 Jan Link to this post

    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

  2. Ianko
    Admin
    Ianko avatar
    1707 posts

    Posted 10 Jan Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Robert Madrian
    Robert Madrian avatar
    154 posts
    Member since:
    Apr 2003

    Posted 10 Jan in reply to Ianko Link to this post

    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

  4. Ianko
    Admin
    Ianko avatar
    1707 posts

    Posted 10 Jan Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. Robert Madrian
    Robert Madrian avatar
    154 posts
    Member since:
    Apr 2003

    Posted 10 Jan in reply to Ianko Link to this post

    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

  6. Robert Madrian
    Robert Madrian avatar
    154 posts
    Member since:
    Apr 2003

    Posted 11 Jan in reply to Robert Madrian Link to this post

    Hi,

    I have found a solution with CSS

    robert

Back to Top