or
I am using the Q1 2014 release of the controls and testing in IE 10. I do not see the issue when testing with Google Chrome (v. 33)
<
div
id
=
"app"
class
=
"contentPages"
>
<
button
data-bind
=
"click: gotopage1"
>Page 1</
button
>
<
button
data-bind
=
"click: gotopage2"
>Page 2</
button
>
</
div
>
<
script
id
=
"page1"
type
=
"text/x-kendo-template"
>
<
ul
id
=
"listView1"
data-bind
=
"source: photossource"
></
ul
>
</
script
>
<
script
id
=
"page2"
type
=
"text/x-kendo-template"
>
<
div
id
=
"grid"
>
</
div
>
</
script
>
<
script
id
=
"layout"
type
=
"text/x-kendo-template"
>
<
header
>Header</
header
><
section
id
=
content
></
section
>
</
script
>
<
script
type
=
"text/x-kendo-template"
id
=
"templatelistitem"
>
<
div
class
=
"item"
>
<
img
data-bind
=
"attr: { src: src }"
/>
<
p
data-bind
=
"text: description"
style
=
"text-align: center"
></
p
>
</
div
>
</
script
>
<script>
var
set1 =
new
Array();
for
(
var
i = 0; i <= 71; i++) {
//fill set1
}
var
appViewModel =
new
kendo.observable({
gotopage1:
function
() {
router.navigate(
"/"
);
},
gotopage2:
function
() {
router.navigate(
"/page2"
);
}
});
kendo.bind($(
"#app"
), appViewModel);
var
pageViewModel =
new
kendo.observable({
photossource: set1
});
var
page1 =
new
kendo.View(
"#page1"
, { model: pageViewModel });
var
page2 =
new
kendo.View(
"#page2"
, { model: pageViewModel });
var
layout =
new
kendo.Layout(
"#layout"
);
var
router =
new
kendo.Router();
router.route(
"/"
,
function
() {
layout.showIn(
"#content"
, page1);
});
router.route(
"/page2"
,
function
() {
layout.showIn(
"#content"
, page2);
});
$(
function
() {
router.start();
layout.render($(
"#app"
));
layout.showIn(
"#content"
, page1);
});
kendo.bind($(
"#listView1"
), pageViewModel);
var
listview1, grid;
$(document).ready(
function
() {
listview1 = $(
"#listView1"
).kendoListView({
template: kendo.template($(
"#templatelistitem"
).html()),
change: onChange,
selectable:
true
}).data(
"kendoListView"
);
grid = $(
"#grid"
).kendoGrid({
columns: [
{
field:
"FirstName"
,
title:
"First Name"
},
{
field:
"LastName"
,
title:
"Last Name"
}],
dataSource: {
data: [
{
FirstName:
"Joe"
,
LastName:
"Smith"
},
{
FirstName:
"Jane"
,
LastName:
"Smith"
}]
}
});
});
</script>
It seems like this is a bug with the router, but maybe I am missing something. Is there a different way that I should be handling canceling the route navigation? If this is a bug, I would like to know if there is a workaround/fix that can be implemented, since this feature is a must-have for my application.