Open View in SplitView Pane from Direct Link

10 posts, 1 answers
  1. Kevin Kembel
    Kevin Kembel avatar
    48 posts
    Member since:
    Mar 2009

    Posted 03 Dec 2013 Link to this post

    We have a SplitView in our web app, that has two panes (menu on the left, content on the right).  We want to be able to direct-link to a specific view, like we do for the phone version of our web app.  For example:

    http://www.ourwebsite.com/index.html#remote-view-name

    This works when we don't use a splitview (like our phone app), and Kendo will automatically load the #remote-view-name and display it in the context of our application.  But, with a splitview it doesn't work the same.  It still loads the #remote-view-name and displays it in the application, but it completely ignores our splitview code and displays only that view (no left menu pane).  Since the splitview isn't loaded, much of the rest of the site is broken.

    I'm assuming that Kendo just doesn't know which pane to display the #remote-view-name in, it makes no assumptions, and just displays the view only outside of a splitview?  Is there some way to do one of these direct links and tell it which pane to display the view in?  like "/index.html#remote-view-name?target=contentPane" ?
  2. Kevin Kembel
    Kevin Kembel avatar
    48 posts
    Member since:
    Mar 2009

    Posted 03 Dec 2013 Link to this post

    I thought I may be able to parse the hash and fragment manually, then set the "initial" view for the app myself.  But on a related note, how do you tell the "initial" view for the application to load in a specific pane of your splitview?
  3. Kendo UI is VS 2017 Ready
  4. Kevin Kembel
    Kevin Kembel avatar
    48 posts
    Member since:
    Mar 2009

    Posted 03 Dec 2013 Link to this post

    Not sure I'm going in the right direction, I tried to parse the hash and query string, and manually set the initial attribute of my pane before I initialize my app, like so:
    var initialHash = $(location).attr('hash');
    var initialSearch = $(location).attr('search');
    $('#main-pane').attr('data-initial', (initialHash + initialSearch));
    And as far as I can tell, the initial view for the pane is working fine, and my code loads it based on the direct link.  But, the Kendo framework then takes over after the app is initialized, and it will also try and set the initial view based on the URL and removes the splitview again.

    I'd ask if there's some way to prevent the Kendo framework from loading the initial view based on the hash, but I'm not sure this is the right direction to go in so I'll just wait patiently for some advice :-)
  5. Kevin Kembel
    Kevin Kembel avatar
    48 posts
    Member since:
    Mar 2009

    Posted 04 Dec 2013 Link to this post

    I have a workaround, but isn't ideal.  If any links use the standard hash url then my app is broken, but it's fairly simple to use a query string parameter to send users to a specific view from a direct link.

    Like so:
    http://www.myapp.com/?initial_view=%23ViewName

    After app init, I just navigate to that page:
    var initialView = helpers.queryString['initial_view'];
    if (typeof (initialView) != 'undefined') {
      var navigateTo = initialView + $(location).attr('search');
      app.contentPane.navigate(navigateTo);
    }

    Instead of navigating after init, it works to set data-initial attribute on the pane as well.  But my app currently loads different Phone/Tablet layouts, so "app.contentPane" will store the app (for phone view) or pane (for tablet view), which have similar methods.  So this initial view code will work for me, but might need some tweaking for someone else's purposes.

    But since #ViewName links break the app, I'd prefer a better supported solution.  Or a way to disable the hash view routing that kendo has built-in, now that I use my own mechanism.
  6. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 05 Dec 2013 Link to this post

    Hi Kevin,

    There is a configuration property of the Pane named "initial" that you can use to set the Id of the initial mobile View to display.

    Please check it out and let me know if it helps.

    Regards,
    Kiril Nikolov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  7. Kevin Kembel
    Kevin Kembel avatar
    48 posts
    Member since:
    Mar 2009

    Posted 05 Dec 2013 Link to this post

    Hi Kiril,

    Thanks for the reply, that does answer my second question, but I'm not quite there on the first one...

    Please read the original post, it better describes the whole issue I'm having.

    EDIT: Basically, I can't seem to get the direct links using the hash fragment working in a splitview.  Like if I have a website that links to "www.mymobileapp.com/index.html#remote-view-name", then Kendo opens #remote-view-name only - outside of my splitview layout which breaks my whole app.  I'd like Kendo to open the #remote-view-name in my main content pane inside the splitview whenever a view is specified after the hash.

    Kevin
  8. Answer
    Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 09 Dec 2013 Link to this post

    Hi Kevin,

    In general the functionality that you are looking for is not supported, because when you navigate directly using the URL the SplitView does not know which view to show inside the widget. So in order to achieve this using the before-show event of the initial view displayed in the pane, prevent its navigation, so the application will not navigate to it and then navigate to the view that you want to show inside the SplitView. 

    Regards,
    Kiril Nikolov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  9. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 09 Dec 2013 Link to this post

    Hello Kevin,

    I forgot to include a link with an example in my previous answer. Please accept my apologies:

    http://jsbin.com/AdOpUSA/2/edit

    Regards,
    Kiril Nikolov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  10. Kevin Kembel
    Kevin Kembel avatar
    48 posts
    Member since:
    Mar 2009

    Posted 09 Dec 2013 Link to this post

    For anyone else with this issue, my previous post seems to work as a workaround when you use a splitview.  Just use a query string parameter to tell your code which view to display, and navigate there in the appropriate pane manually.

    Thanks for your help, Kiril.  I think it would be useful to disable #hash view navigation in the Kendo framework when you initialize your app.  Since the #hash navigation is broken when using a splitview, it would be nice to be able to disable it for those scenarios that it doesn't work - prevent accidental breakage.
  11. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 11 Dec 2013 Link to this post

    Hi Kevin,

    If you disable the #hash navigation you will not be able to navigate at all in your application. The SplitView is what the frames used to be in the web development and work in a similar way.

    Basically the mobile application is nested inside a Kendo UI Pane and this parent Pane is using the address bar to handle its navigation, while the SplitView consists of two Panes that are nested inside the parent, however you cannot chain this nested Panes to the address bar and handle the navigation from there. It is the same situation when you are using an iframe in your web project, when you change the address, there is no way to automatically navigate to the desired iframe inside the html file.

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