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

    Hi,

    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() {
            layoutView.render("#app");
        }
    });
     
    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() {
        myrouter.start();
    });

     

    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
    Admin
    Petyo avatar
    2439 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.

    Regards,
    Petyo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
Back to Top