Effects inside a SPA app

2 posts, 0 answers
  1. Mate
    Mate avatar
    13 posts
    Member since:
    Sep 2013

    Posted 25 Jun 2015 Link to this post


    I am wondering if it is possible to use Effects when there is a page change in a SPA app which is built with purely Kendo.

    For example this is the code of a simple SPA with 2 pages:

    // variables
    window.rootUrl = "http://localhost:3000"
    // datasource
    // models
    var model = kendo.observable({foo: "I am testing and trying out new things"});
    // views
    var layoutView = new kendo.Layout("layout-template");
    var header = new kendo.View("index-template");
    var content = new kendo.View("content-template");
    var contact = new kendo.View("contact-template", {model: model, evalTemplate: true});
    // router
    var myrouter = new kendo.Router({
        init: function() {
    myrouter.route("/aboutme", function () {
        layoutView.showIn("#top", header);
        layoutView.showIn("#main", content);
    myrouter.route("/contact", function () {
        layoutView.showIn("#top", header);
        layoutView.showIn("#main", contact);
    // onload
    $(function() {


    Basically my question is if it is possible when I change page from aboutme to contact that the contact page not just appears but slides in or fades in ( and the aboutme slides out or fades out ). If it is possible then whats the recommended way to do it using the example code above?

  2. Petyo
    Petyo avatar
    2444 posts

    Posted 26 Jun 2015 Link to this post

    Hello Mate,

    sure - there is a built-in mechanism for that, too. You can examine the source code of our sample app. Check this snippet from the documentation, too.

    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top