This is a migrated thread and some comments may be shown as answers.

Layout & Navigation Issue with multiple views

13 Answers 402 Views

View

This is a migrated thread and some comments may be shown as answers.

devApps asked on 09 Apr 2017, 05:21 AM

I am trying to achieve the following :

1. Hide the header & footer on home page or home view but display on other views
2. Customize the header for each view
3. Navigating to views using href tags was not showing the layout

---------------------------------------First Issue : Hide the header & footer on any specific view -------------------------------------------------------------------
I am using the following code for lay-out initialization in home view i.e. index.html:

<body>

<div data-role="view" data-title="Home View" id="index-en">

<div data-role="layout" data-id="main-layout">

<div data-role="header">

<div data-role="navbar">

<span data-role="view-title"></span>

</div>

<div data-role="footer">

<div data-role="tabstrip">

<a href="#index-en" data-icon="home">Home</a>

<a href="views/view1.html" data-icon="organize">Agenda</a>

<a href="views/view2.html" data-icon="favorites">Registration</a>

<a href="views/view3.html" data-icon="globe">Gallery</a>

<a href="views/view4.html" data-icon="contacts">Speakers</a>

</div>

<script>

var app = new kendo.mobile.Application(document.body,

{

platform:'ios7',

layout: "main-layout"

});

</scirpt>

</div>

</body>

How can I hide the header and footer on the home page.
Currently I used the following custom css to hide the header

#index-en div.km-header {

display : none;

}

I probably need to do the same to hide the footer also.
Is there any other standard approach to do this ?

------------------------------------------Second Issue : Customize the header for any specific view--------------------------------------------
Since I have the main-layout defined , the same layout will be copied to all views.
Let's say I want to change the header for a specific view to be
<div data-role="header">
<div data-role="navbar">
<img src="xyz/abc.jpg"></img>
</div>
</div>

I was able to achieve this by adding data-layout tag to this view and defining a new layout in this view's html file.

<div data-role="view" data-title="Second View" data-layout="custom-layout" id="view2">

</div>

<div data-role="layout" data-id="custom-layout">

<div data-role="header">

<div data-role="navbar">

<img src="xyz/abc.jpg"></img>

</div>

<div data-role="footer">

<div data-role="tabstrip">

<a href="#index-en" data-icon="home">Home</a>

<a href="views/view1.html" data-icon="organize">Agenda</a>

<a href="views/view2.html" data-icon="favorites">Registration</a>

<a href="views/view3.html" data-icon="globe">Gallery</a>

<a href="views/view4.html" data-icon="contacts">Speakers</a>

</div>

But this was breaking the tabstrip navigation.
Could you please advise how can this be achieved ?

--------------------------Third Issue : Navigating to views directly using href tags was not showing the layout----------------------------

In my home page, I have a gird of four images created using CSS flex-box.
I have added href on each image to link to a different view.
But when clicked on the image only the view's content is displayed , the layout is not shown.
The custom css styling applied to view's elements is also broken.

<div id="flex-grid-container1" class="flex-container-center-content">

<div class="flex-item1">

<a href="views/view2.html"><img src="images/homeGrid/agenda.jpg"/></a>

</div>

<div class="flex-item2">

<a href="views/view2.html"><img src="images/homeGrid/speakers.jpg"/></a>

</div>

I have also tried using #idOfView in the href tags but same problem exists.

Could you please let me know how this can be resolved ?

Sorry for the very lengthy post , but these are the issues I am struck with now.
Thanks in advance.

13 Answers, 1 is accepted

answered on 11 Apr 2017, 03:55 PM

Hello,

Straight to your questions:

1. If you don't want to display a header and a footer in the Home view, don't define such within the view and don't apply data-layout setting to the View. Also, remove the layout setting from the Application. By default, all shared app layouts are defined in the root page and are referenced by views using a data-layout setting. This is explained in the following article:
Kendo UI Hybrid Layout

2. I cannot reproduce the issue in the following Dojo that uses three views, of which the third one uses a custom layout with no header and its own footer:
http://dojo.telerik.com/@tsveti/OdOQA/2

3.Do these views declare a data-layout setting? Also, please confirm that you do not create more than one instance of the kendo.mobile.Application.

Regards,
Tsvetina
Telerik by Progress

Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.

answered on 12 Apr 2017, 06:57 AM

Thanks a lot Tsvetina.

Removing the layout setting from the application and using it on each view using data-layout attribute solved the first two issues.

I was able to remove the header and footer on home view.
I also have a view with custom layout i.e. I was able to remove the header and the tab-strip in the footer was working as expected. But still for you to reproduce the second issue in your dojo snippet, could you please try copying the "secondview" and "strechview" in separate hmtl files and test the same.

Only the third issue still remains.

I don't have multiple instances of the kendo.mobile.Application.

All these views earlier did not have data-layout setting as the layout was set in application instantiation.

But now as per your suggestion , I have removed the layout setting from application.

The main-layout is defined only in the home page which has the flexbox grid of images.

The images, each have a href to a different view. All these views share the main-layout using data-layout attribute.

Even after making this change , the layout is still not being displayed when navigated to the views from the images grid.

answered on 15 Apr 2017, 04:48 AM

Here are the contents of the index.html file

<!DOCTYPE html>

<html>

<head>

<title></title>

<meta charset="utf-8">

<meta name="viewport" content="initial-scale=1, maximum-scale=1, width=device-width">

<link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet">

<link href="styles/overrides.css" rel="stylesheet">

<link href="styles/main.css" rel="stylesheet">

<link href="css/main.css" rel="stylesheet">

<script src="cordova.js"></script>

<script src="kendo/js/jquery.min.js"></script>

<script src="kendo/js/kendo.mobile.min.js"></script>

</head>

<body>

<div data-role="view" data-title="Primary Care Conference" id="index-en">

<img class="banner-img" src="images/homeGrid/night-water-reflected-new2.jpg"/>

<div id="flex-grid-container1" class="flex-container-center-content">

<div class="flex-item1">

<a href="views/agendaView.html"><img src="images/homeGrid/agenda.jpg"/></a>

</div>

<div class="flex-item2">

<a href="views/speakersView.html"><img src="images/homeGrid/speakers.jpg"/></a>

</div>

<div id="flex-grid-container2" class="flex-container-center-content">

<div class="flex-item3">

<img src="images/homeGrid/venue.jpg"/>

</div>

<div class="flex-item4">

<a href="views/regView.html"><img src="images/homeGrid/maps.png"/></a>

</div>

<div data-role="layout" data-id="main-layout">

<div data-role="header">

<div data-role="navbar">

<a href="#app-drawer" data-rel="drawer" data-role="button" data-align="left" data-icon="drawer-icon"></a>

<span class="myNavbarHeaderTitleText" data-role="view-title"></span>

</div>

<div data-role="footer">

<div data-role="tabstrip">

<a href="#index-en" data-icon="home">Home</a>

<a href="views/agendaView.html" data-icon="organize">Agenda</a>

<a href="views/regView.html" data-icon="favorites">Registration</a>

<a href="views/galleryView.html" data-icon="globe">Gallery</a>

<a href="views/speakersView.html" data-icon="contacts">Speakers</a>

</div>

<div data-role="drawer" id="app-drawer">

<div data-role="header">

<div data-role="navbar"> <span class="myDrawerNavbarHeaderTitleText">Menu</span> </div>

</div>

<ul data-role="listview">

<li><a href="#index-en" data-icon="home"><span class="drawerlistItemText">Home</span></a></li>

<li><a href="views/agendaView.html" data-icon="organize"><span class="drawerlistItemText">Agenda</span></a></li>

<li><a href="views/regView.html" data-icon="favorites"><span class="drawerlistItemText">Registrations</span></a></li>

<li><a href="views/galleryView.html" data-icon="globe"><span class="drawerlistItemText">Gallery</span></a></li>

<li><a href="views/speakersView.html" data-icon="contacts"><span class="drawerlistItemText">Speakers</span></a></li>

<li><a href="views/biographies.html" data-icon="action"><span class="drawerlistItemText">Follow us</span></a></li>

</ul>

</div>

<script>

var app = new kendo.mobile.Application(document.body,

{

platform:'ios7'

//layout: "main-layout"

//skin : "metro"

});

</script>

</body>

</html>

Below here is the speakersView.html which is a remote view that tries to use the shared-layout defined in index.html

<!DOCTYPE html>

<html>

<head>

<title></title>

</head>

<body>

View 4

<div data-role="view" data-title="Key Speakers" data-layout="main-layout" id="speakersView">

<div data-role="scrollview" data-enable-pager="false">

<div data-role="page">

<ul data-role="listview" data-style="inset">

<li>

<div class="listViewRoundedIconShadowedImage"><img src="images/user-icons/black.png" /></div>

<div class="listViewTitleText">Dr.Asddfxcb Bdfffasas Aevfvdfe</div>

</li>

<li>

<div class="listViewRoundedIconShadowedImage"><img src="images/user-icons/doctor-green-round.png" /></div>

<div class="listViewTitleText">Prof Eaasddasd Rcsdcvvsv</div>

</li>

</ul>

</div><div data-role="page">

<ul data-role="listview">

<li>

<div class="listViewIconImage"><img src="images/user-icons/blue-user.png" /></div>

<div class="listViewTitleText">Dr.Asddfxcb Bdfffasas Aevfvdfe</div>

</li>

<li>

<div class="listViewIconImage"><img src="images/user-icons/black-lady.jpg" /></div>

<div class="listViewTitleText">Prof Eaasddasd Rcsdcvvsv</div>

</li>

</ul>

</div>

</div> 

</div> 

</body>

</html>

This is regView.html which is a remote view that defines it's own custom layout

<!DOCTYPE html>

<html>

<head>

<title></title>

</head>

<body>

<div data-role="view" data-layout="custom-layout" data-title="Registrations">

Page Under Construction

</div>

<div data-role="layout" data-id="custom-layout">

<div data-role="footer">

<div data-role="tabstrip">

<a href="#index-en" data-icon="home">Home</a>

<a href="views/agendaView.html" data-icon="organize">Agenda</a>

<a href="views/regView.html" data-icon="favorites">Registration</a>

<a href="views/galleryView.html" data-icon="globe">Gallery</a>

<a href="views/speakersView.html" data-icon="contacts">Speakers</a>

</div>

</body>

</html>

None of these views show the layout as well as the custom css when referenced from the gird

From the drawer , they are fine, they show the layout as well as the custom css is applied.

Could you also let me know how can I share a runnable sample ?

answered on 18 Apr 2017, 02:52 PM

Hi,

I am copying my reply from the support thread that you opened, if someone else encounters the sample problem.

The issue is caused by the fact that the links that you use are not Kendo UI widgets. Like described here, the mobile Application modifies the behavior of the Kendo UI hybrid widgets—ListView link items, buttons, tabs—so that they navigate between the mobile views when the user taps them. In your sample, the links are regular link elements, without any data-role set and they act as usual links and do not trigger inner app navigation. The easiest solution is to declare the links as buttons:

<br><br>

<a data-role="button" class="km-link-button" href="views/view1.html">FirstView - Direct Link</a>

<br><br>

<a data-role="button" class="km-link-button" href="views/view2.html">SecondView - - Direct Link</a>

<br><br>

The km-link-button class, is used to remove the Button border, so that it looks more like a link. Here is a style that you can add to your app to achieve this:

<style>

.km-view .km-link-button {

border-color: transparent;

}

</style>

Regards,
Tsvetina
Telerik by Progress

Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.

Accepted

answered on 20 Apr 2017, 01:44 PM

ViewsNavigation.zip

Hello,

About the custom styles—the custom background color is visible initially because you load only the given page within the Cordova app. However, when navigating in the Kendo UI app, Kendo UI has additional elements loaded on top of the View container that have a custom background of their own.
I will try to better explain the situation. When you navigate to a remote view in a Kendo Mobile Application, what happens is that the remote view content is copied into index.html and all scripts and styles referenced in index.html work on the new content. This includes the Kendo UI styles.
However, when you navigate using a regular link, the Cordova WebView (or the browser) goes to a completely different page and is no longer at index.html, so all script and style references from index.html are lost and only your inline styles apply.

To overwrite the Kendo UI style for the view content background, you can use a CSS rule like this:

<style>

#view1 .km-content {

background: lightblue;

}

</style>

With regard to the TabStrip issue, it does happen because of the link to the Home page, as the TabStrip is unable to confirm that the currently selected view location is the one from its tab link. In general, it is advised to make all views local OR remote and not mix local with remote views.
The problem will be resolved if you move the Home view into a separate HTML file and load it using the initial setting of the Application object:

var app = new kendo.mobile.Application(document.body,

{

platform: 'ios7',

initial: 'views/home.html'

});

You can find, attached to this message, your project with the above modifications applied.

Regards,
Tsvetina
Telerik by Progress

Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.

answered on 31 Aug 2018, 03:54 PM

Hello,

I'm having an issue regarding remote views, let's take devApps's index.html example and let's say that the "views/agendaView.html" link within the drawer points to a remote view that has an scheduler in it. As per one of Tsvetina's replies I have declared my links as buttons data-role="button".

So this is agendaView.html which defines the scheduler.

<!DOCTYPE html>

<html>

<head>

<title></title>

</head>

<body>

<div id="schedulerView" data-role="view" data-init="initScheduler" data-show="schedulerViewShow" data-stretch="true" data-title="Scheduler">

<header data-role="header">

<div data-role="navbar">

<a data-role="button" data-rel="drawer" href="#my-drawer" data-icon="drawer-icon" data-align="left"></a>

<span data-role="view-title"></span>

</div>

</header>

<div id="scheduler"></div>

</div>

<div data-role="drawer" id="my-drawer" style="width: 20em" data-views="['schedulerView']" data-use-native-scrolling="true">

<header data-role="header">

<div data-role="navbar"></div>

</header>

<ul data-role="listview" class="km-listview-icons">

<li data-icon="downloads"><a href="index.html" data-transition="none"><span>Contacts List</span></a></li>

<li data-icon="favorites"><a href="#schedulerView" data-transition="none"><span>Calendar</span></a></li>

</ul>

</div>

</body>

</html>

<link rel="stylesheet" href="../kendoui/styles/kendo.common.min.css" />

<link rel="stylesheet" href="../kendoui/styles/kendo.default.min.css" />

<link rel="stylesheet" href="../kendoui/styles/kendo.mobile.all.min.css" />

<style>

</style>

<script src="../kendoui/js/kendo.all.min.js"></script>

<script>

function initScheduler(e) {

$("#scheduler").kendoScheduler({

date: new Date("2013/6/26"),

startTime: new Date("2013/6/26 07:00 AM"),

height: 'auto',

views: [

{ type: "day", selected: true },

{ type: "week", selectedDateFormat: "{0:ddd,MMM dd,yyyy} - {1:ddd,MMM dd,yyyy}" },

"month",

{ type: "agenda", selectedDateFormat: "{0:ddd, M/dd/yyyy} - {1:ddd, M/dd/yyyy}" },

"timeline"

],

mobile: "phone",

timezone: "Etc/UTC",

dataSource: {

batch: true,

transport: {

read: {

url: "https://demos.telerik.com/kendo-ui/service/meetings",

dataType: "jsonp"

},

update: {

url: "https://demos.telerik.com/kendo-ui/service/meetings/update",

dataType: "jsonp"

},

create: {

url: "https://demos.telerik.com/kendo-ui/service/meetings/create",

dataType: "jsonp"

},

destroy: {

url: "https://demos.telerik.com/kendo-ui/service/meetings/destroy",

dataType: "jsonp"

},

parameterMap: function(options, operation) {

if (operation !== "read" && options.models) {

return {models: kendo.stringify(options.models)};

}

},

schema: {

model: {

id: "meetingID",

fields: {

meetingID: { from: "MeetingID", type: "number" },

title: { from: "Title", defaultValue: "No title", validation: { required: true } },

start: { type: "date", from: "Start" },

end: { type: "date", from: "End" },

startTimezone: { from: "StartTimezone" },

endTimezone: { from: "EndTimezone" },

description: { from: "Description" },

recurrenceId: { from: "RecurrenceID" },

recurrenceRule: { from: "RecurrenceRule" },

recurrenceException: { from: "RecurrenceException" },

roomId: { from: "RoomID", nullable: true },

attendees: { from: "Attendees", defaultValue: [] },

isAllDay: { type: "boolean", from: "IsAllDay" }

}

},

resources: [

{

field: "roomId",

dataSource: [

{ text: "Meeting Room 101", value: 1, color: "#6eb3fa" },

{ text: "Meeting Room 201", value: 2, color: "#f58a8a" }

],

title: "Room"

},

{

field: "attendees",

dataSource: [

{ text: "Alex", value: 1, color: "#f8a398" },

{ text: "Bob", value: 2, color: "#51a0ed" },

{ text: "Charlie", value: 3, color: "#56ca85" }

],

multiple: true,

title: "Attendees"

}

]

});

}

function schedulerViewShow(e)

{

}

</script>

When I click the link to load the remote view URL changes to http://my.domain/index.html#views/agendaView.html and the scheduler does not display; but if I manually change the URL to be http://my.domain/views/agendaView.html the scheduler loads just fine.

It seems that the redirection does not trigger the scheduler view init event.

The reason why I'd like to have the scheduler within a remote view is to be able to re-use/call it from other pages.

What am I missing?

Thanks in advance.

Best Regards!!!

answered on 03 Sep 2018, 04:00 PM

Hi Joel,

The Scheduler might be failing to load because of invalid HTML inside the agendaView.html file. All the following content is rendered outside of the <body> element:

<link rel="stylesheet" href="../kendoui/styles/kendo.common.min.css" />

<link rel="stylesheet" href="../kendoui/styles/kendo.default.min.css" />

<link rel="stylesheet" href="../kendoui/styles/kendo.mobile.all.min.css" />

<style>

</style>

<script src="../kendoui/js/kendo.all.min.js"></script>

<script>

function initScheduler(e) {

$("#scheduler").kendoScheduler({

date: new Date("2013/6/26"),

startTime: new Date("2013/6/26 07:00 AM"),

height: 'auto',

views: [

{ type: "day", selected: true },

{ type: "week", selectedDateFormat: "{0:ddd,MMM dd,yyyy} - {1:ddd,MMM dd,yyyy}" },

"month",

{ type: "agenda", selectedDateFormat: "{0:ddd, M/dd/yyyy} - {1:ddd, M/dd/yyyy}" },

"timeline"

],

mobile: "phone",

timezone: "Etc/UTC",

dataSource: {

batch: true,

transport: {

read: {

url: "https://demos.telerik.com/kendo-ui/service/meetings",

dataType: "jsonp"

},

update: {

url: "https://demos.telerik.com/kendo-ui/service/meetings/update",

dataType: "jsonp"

},

create: {

url: "https://demos.telerik.com/kendo-ui/service/meetings/create",

dataType: "jsonp"

},

destroy: {

url: "https://demos.telerik.com/kendo-ui/service/meetings/destroy",

dataType: "jsonp"

},

parameterMap: function(options, operation) {

if (operation !== "read" && options.models) {

return {models: kendo.stringify(options.models)};

}

},

schema: {

model: {

id: "meetingID",

fields: {

meetingID: { from: "MeetingID", type: "number" },

title: { from: "Title", defaultValue: "No title", validation: { required: true } },

start: { type: "date", from: "Start" },

end: { type: "date", from: "End" },

startTimezone: { from: "StartTimezone" },

endTimezone: { from: "EndTimezone" },

description: { from: "Description" },

recurrenceId: { from: "RecurrenceID" },

recurrenceRule: { from: "RecurrenceRule" },

recurrenceException: { from: "RecurrenceException" },

roomId: { from: "RoomID", nullable: true },

attendees: { from: "Attendees", defaultValue: [] },

isAllDay: { type: "boolean", from: "IsAllDay" }

}

},

resources: [

{

field: "roomId",

dataSource: [

{ text: "Meeting Room 101", value: 1, color: "#6eb3fa" },

{ text: "Meeting Room 201", value: 2, color: "#f58a8a" }

],

title: "Room"

},

{

field: "attendees",

dataSource: [

{ text: "Alex", value: 1, color: "#f8a398" },

{ text: "Bob", value: 2, color: "#51a0ed" },

{ text: "Charlie", value: 3, color: "#56ca85" }

],

multiple: true,

title: "Attendees"

}

]

});

}

function schedulerViewShow(e)

{

}

</script>

When a remote view contains a full HTML page, the Kendo UI Mobile Application should load only the content of the <body>, meaning that the initialization scripts may fail to load in the agenda view.

Additionally, if the main page contains a reference to kendo.all.min.js and the needed Kendo UI styles, please make sure you move all Kendo UI script and style references into the <head> section of the remote view, so they do not get loaded a second time into the page.

If the problem persists, please share the initial view where the buttons are declared, so I can see what the buttons and Application initialization look like?

In general, the application should be able to correctly do the routing with a link like the one you showed, you can see that the Hybrid UI demos generate the same links with remote view navigation.

Regards,
Tsvetina
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.