Using SplitView layout

[Gonzalo]

I've been developing a phonegap application using Kendo and overall the result has been pretty good. I've been focusing on just phone screen size, but now I'm adapting it to tablet, meaning that on some cases where there's a listview that goes to a details view, I'd like to use a SplitView to make a better use of the screen size on a tablet device.

I've developed all my screens as remote views, each one in its separate html file and each one is bound to its own viewmodel.

That being said, now I'd like to reuse my existing views in a splitview layout, but it hasn't been as easy as I thought it would be (or I haven't found the correct documentation/examples). All examples I've seen are very basic and just use a couple of views, all defined in the same file.

In a real world application, that's most likely not the case and you'll have quite a few screens that you can navigate to and that you cannot have all of them in the same file if multiple developers are working on the same app.

Issues I've found so far:

1. Pane navigation doesn't work as one would expect in the details pane. If the details pane screen tries to navigate to another view, the whole page navigates to that view, not just the details pane. Is there a configuration option at the pane level for this?
2. Another pane navigation issue. From the master pane (left side), if you select an item from a listview and use pane.navigate to display the view in the details pane, the onShow event handler for the detail view is only called once and then it's never called again. Transitions stop working too.
3. Loading remote views using pane.navigation breaks the view layout for some reason. I'm using the android theme which has the navigation bar at the bottom of the screen, but when I load the views in the splitview pane the navigation is shown at the top.

 

I've stopped developing the split view at the moment as I've found myself writing a lot of hacky code to bypass this limitations.

This could actually be a showstopper for using your framework in my application.

 

Are the issues I mentioned solvable? Am I missing something?

[Petyo]

Hello Gonzalo,

none of the issues you describe are known ones. In general, there is no difference in the way remote and local views are handled. The samples use local views for easier understanding.

I may suggest that you isolate the issues you are facing in a dojo or a sample project - we will examine them and assist you accordingly.

I would also like to point out that source control management tool (like the one integrated in the Telerik Platform) should resolve any issues with multiple developers working on the same file. 

Regards,
Petyo
Telerik

 

 

[Gonzalo]

Hello Petyo, I'm attaching a simplified example of what I'm trying to achieve. I can't use dojo because I want to test this with remote views.

The sample project demonstrates issue (3) in my list above, and I leave it out to you to show me how should I go about pane navigation.

Hope this helps.

 

PS: Not sure what you mean about using a "source control management tool". I've been using source control tools for a very long time and I can assure you that even on pretty simple projects the best thing you can do is avoid (as much as you can) having developers work on the same files. Not to mention a fairly complex project where it's impossible to mantain a single file with all the application logic.

 

Regards,

Gonzalo

[Petyo]

Hello,

the android splitview styling is based on the tablets we have examined. Overriding it is easy, you need to add the following rules after the Kendo UI styles:

<style type="text/css" media="screen">
.km-android .km-view>*, .km-android .km-modalview, .km-android .km-popover-root .km-view, .km-android .km-splitview .km-view, .km-android .km-pane-wrapper .km-view {
    -moz-box-direction: reverse;
    -webkit-box-direction: reverse;
    -webkit-flex-direction: column-reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
}
</style>

You can navigate to a given pane like this:

$("#split").data("kendoMobileSplitView").panes[1].navigate("detail.html");

Regards,
Petyo
Telerik

 

 

[Gonzalo]

That CSS solves the layout issue. Thanks.

I'm attaching an updated project with the detail view navigation. What about a second level of detail screens (i.e.: the detail screen links to another page, which is a very common scenario)?

 

Also, the issue I mention on point (2) on my first post: the onShow event handler for the detail view is only called once and transitions stop working is still an issue.

 

Can you please check the updated project and let me know what I'm doing wrong or if what I found are known issues?

 

[Petyo]

Hello Gonzalo,

you can use the same approach for second level detail navigation (by getting the pane from the splitview).  

the onshow event is getting fired once because you navigate to the same view again. In a real world scenario, you will most likely pass a parameter to the view, which will result in the view content changing (and onShow being triggered). The same approach is used in our splitview demo.

I would like to point out that the navigation approach of the demo I have linked is a bit simpler than your example, and relies on HTML attributes. You may use the same approach, too - there is no need to resort to event handling and manual calls of .navigate(). This will resolve the need to obtain a reference to the splitview panes - you can use the data-target attribute to specify the linked pane.

Regards,
Petyo
Telerik