New to Kendo UI for jQuery? Start a free 30-day trial

ShowIn

methods

Renders the View element in the element specified by the selector

showIn

Parameters:containerString

The selector of the container in which the view element will be appended.

viewkendo.View

The view instance that will be rendered.

transitionClassstring

Optional. If provided, the new view will replace the current one with a replace effect.

<div id="app"></div>

<script>
    var view = new kendo.View("<span>Foo</span>");

    var layout = new kendo.Layout("<header>Header</header><section id='content'></section><footer></footer>");

    layout.render($("#app"));

    layout.showIn("#content", view);
</script>

<style>
    /* the initial position of the next div */
    .k-fx-swap.k-fx-start .k-fx-next {
        -webkit-transform: translatex(100%);
        -moz-transform: translatex(100%);
        transform: translatex(100%);
    }

    /* the final position of the current div */
    .k-fx-swap.k-fx-end .k-fx-current {
        opacity: 0;
        -webkit-transform: scale(0.9);
        -moz-transform: scale(0.9);
        transform: scale(0.9);
    }
</style>

<div id="app"></div>

<script>
    var foo = new kendo.View("<span>Foo</span>");
    var bar = new kendo.View("<span>Bar</span>");

    var layout = new kendo.Layout("<header>Header</header><section id='content'></section><footer></footer>");

    layout.render($("#app"));

    layout.showIn("#content", foo);
    layout.showIn("#content", bar, "swap");
</script>