Open View in SplitView Pane from Direct Link

[Kevin Kembel]

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" ?

[Kevin Kembel]

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?

[Kevin Kembel]

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 :-)

[Kevin Kembel]

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.

[Kiril Nikolov]

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

[Kevin Kembel]

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

[Kiril Nikolov]

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

[Kiril Nikolov]

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

[Kevin Kembel]

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.

[Kiril Nikolov]

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