Need examples about Kendo Router with pushState=true

6 posts, 0 answers
  1. phx255
    phx255 avatar
    10 posts
    Member since:
    Feb 2016

    Posted 29 Nov 2016 Link to this post

    I'm searching documentation about kendo Router with pushState=true. 
    Using the configuration like:

    pushState:true

    root:"/"

    when I use router.navigate always is fired the routeMissing event. Why?

    I think that there isn't enought documentation about how to work with pushState.

    Should i use navigate with pushState:true or history.pushState?

    Can some write some example ?

    Thanks

    var router = new kendo.Router({
        pushState: true,
        root: "/",
        init: function(e) {
            debugger
        },
        routeMissing: function(e) {
            debugger
        },
        change: function(e) {
            debugger
     
        }
    });
     
    router.route("/", function() {
        loadModule("/presentacion");
    });
     
     
    router.route("/previsiones", function() {
        loadModule("/controls/prv/prv_listadoPrevisiones");
    });
  2. Stefan
    Admin
    Stefan avatar
    3073 posts

    Posted 01 Dec 2016 Link to this post

    Hello Jaime,

    The documentation and example for the pushState property of the router can be found at the following link:

    http://docs.telerik.com/kendo-ui/api/javascript/router#configuration-pushState

    Also, please check the requirements when the root property is set and the pushState property is set to true:

    http://docs.telerik.com/kendo-ui/api/javascript/router#configuration-root

    The routeMissing event should be fired only when no route match is found:

    http://docs.telerik.com/kendo-ui/api/javascript/router#events-routeMissing

    http://docs.telerik.com/kendo-ui/framework/spa/router#missing-routes

    Additionally, I can suggest checking the following article for the Kendo UI Router which contains examples:

    http://developer.telerik.com/featured/unleashing-power-kendo-uis-router/

    I hope this information will help to achieve the desired result.

    Regards,
    Stefan
    Telerik by Progress
    Kendo UI is ready for Visual Studio 2017 RC! Learn more.
  3. moosh
    moosh avatar
    9 posts
    Member since:
    Aug 2019

    Posted 24 Aug 2019 Link to this post

    Hello,

    I agree. The pushstate feature does not seem to work. Even if root option is correctly defined. 

    Navigation returns 404 pages. 

    Maybe need to configure htaccess with urlrewriting to allow * urls ?

     

  4. Dimitar
    Admin
    Dimitar avatar
    502 posts

    Posted 28 Aug 2019 Link to this post

    Hi moosh,

    The following Dojo snippet shows how pushState works with * urls. Click on its "Full screen" button in top right corner and the page will navigate through all defined urls. Navigating backwards is also possible. If this does not help, could you provide a Dojo snippet with the setup causing issues and add steps to reproduce with expected and actual results.

    Regards,
    Dimitar
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  5. moosh
    moosh avatar
    9 posts
    Member since:
    Aug 2019

    Posted 28 Aug 2019 Link to this post

    Hi,

    Thank you for this example.

    But it seems that it only works when using navigate().

    What happen if I want to access to a route without # directly from my browser ? 

    On my side, I get 404 pages. Should I configure urlrewriting in a htaccess file to allow all urls ?

    moosh

  6. Dimitar
    Admin
    Dimitar avatar
    502 posts

    Posted 30 Aug 2019 Link to this post

    Hi,

    Kendo Routers uses the fragment url part (#page). Navigating to the url without # results in a routerMissing event firing, which may be used for redirecting to root, as discussed in the following forum thread about the same case. Also configuring urlrewriting seems as an approach worth trying for handling such scenarios.

    Regards,
    Dimitar
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top