Hi,
There has been some progress according to the implementation of zoom in spreadsheet.
Regards,Hi,
I am wondering if it is possible to use Effects when there is a page change in a SPA app which is built with purely Kendo.
For example this is the code of a simple SPA with 2 pages:
// variables
window.rootUrl =
"http://localhost:3000"
// datasource
// models
var
model = kendo.observable({foo:
"I am testing and trying out new things"
});
// views
var
layoutView =
new
kendo.Layout(
"layout-template"
);
var
header =
new
kendo.View(
"index-template"
);
var
content =
new
kendo.View(
"content-template"
);
var
contact =
new
kendo.View(
"contact-template"
, {model: model, evalTemplate:
true
});
// router
var
myrouter =
new
kendo.Router({
init:
function
() {
layoutView.render(
"#app"
);
}
});
myrouter.route(
"/aboutme"
,
function
() {
layoutView.showIn(
"#top"
, header);
layoutView.showIn(
"#main"
, content);
});
myrouter.route(
"/contact"
,
function
() {
layoutView.showIn(
"#top"
, header);
layoutView.showIn("#main", contact);
});
// onload
$(
function
() {
myrouter.start();
});
Basically my question is if it is possible when I change page from aboutme to contact that the contact page not just appears but slides in or fades in ( and the aboutme slides out or fades out ). If it is possible then whats the recommended way to do it using the example code above?
Hello,
we noticed that in R3 2016 (UI for ASP.NET MVC R3 2016) the typescript definition files (d.ts) are not shipped with a correct definition for the kendo.throttle function.
Its defined as
function throttle(fn: Function, timeout: number): void;
while it should be
function throttle(fn: Function, timeout: number): Function;
Regards,
I have been unable to get the kendo page turn effect to work acceptably in chrome. The appearance is staggered and on android mobile, which I am targeting for my application, it does not appear to work at all.
Below is plunkr http://plnkr.co/edit/aWIthiWY1UEPret8BOkT?p=preview
<
html
>
<
head
>
<
meta
charset
=
"utf-8"
>
<
title
>Kendo UI Mobile Loves AngularJS</
title
>
<
meta
http-equiv
=
"Content-Security-Policy"
content
=
"default-src http://ajax.googleapis.com/ http://code.jquery.com/ http://demos.telerik.com/kendo-ui/ ; http://cdn.kendostatic.com/ ; https://static.pexels.com/ 'self' https://localhost:44309/ https://localhost:44300/ https://caredarestorage.blob.core.windows.net/ 'unsafe-eval' 'unsafe-inline' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src http://cdn.kendostatic.com/ 'self' 'unsafe-inline'; media-src *"
>
<
link
rel
=
"stylesheet"
href
=
"http://cdn.kendostatic.com/2014.3.1029/styles/kendo.mobile.all.min.css"
>
<!-- the application CSS file -->
<
script
src
=
"http://code.jquery.com/jquery-1.9.1.min.js"
></
script
>
<
script
src
=
"http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.js"
></
script
>
<
script
src
=
"http://cdn.kendostatic.com/2014.3.1029/js/kendo.all.min.js"
></
script
>
<
script
src
=
"//ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular-sanitize.js"
></
script
>
<
style
>
#wrap {
background-image: url("../content/web/fx/pageturn/book.png");
width: 100%;
height: 90%;
margin: 2.5em auto 4em;
position: relative;
}
#book {
position: relative;
width: 85%;
height: 85%;
margin: 0 auto;
padding: 0;
list-style-type: none;
}
#book > li {
position: absolute;
width: 100%;
height: 100%;
background-color: #fff;
}
#actions {
overflow: hidden;
margin: 0 auto 3em;
width: 650px;
}
#previous, #next {
text-decoration: none;
text-indent: -999em;
overflow: hidden;
display: block;
height: 100%;
width: 50%;
position: absolute;
top: 0;
background-repeat: no-repeat;
background-position: 50% 50%;
opacity: .5;
}
#previous:hover, #next:hover {
opacity: 1;
}
#previous {
background-image: url('content/css/imagesrotator/arrow-left.png');
left: 0;
}
#next {
background-image: url('content/css/imagesrotator/arrow-right.png');
right: 0;
}
.first-page #previous,
.last-page #next {
display: none;
}
.preloadSlide * {
-webkit-transition: none !important;
-moz-transition: none !important;
-ms-transition: none !important;
-o-transition: none !important;
}
.divSection {
display: table;
width: 100%;
height: 100%;
z-index: 0;
}
.divRandomText {
height: 100%;
font-size: large;
line-height: 130%;
padding: 10% 15% 15% 15%;
display: table-cell;
vertical-align: middle;
white-space: normal;
}
.divBackgroundImage {
background-color: white;
height: 100%;
width: 100%;
position: absolute;
right: 0px;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
*z-index: -1;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#80000000', GradientType=1);
}
</
style
>
</
head
>
<
body
kendo-mobile-application
ng-app
=
"sushiMobileApp"
>
<
kendo-mobile-view
k-layout
=
"'default'"
ng-controller
=
"indexController"
k-stretch
=
"'true'"
k-on-show
=
"show(kendoEvent)"
>
<
kendo-mobile-header
>
<
kendo-mobile-nav-bar
>
Veterinary Wellness
</
kendo-mobile-nav-bar
>
</
kendo-mobile-header
>
<
div
id
=
"divHome"
>
Slides {{slides.length}}
Slide {{currentIndex}}
<
div
fill-height
id
=
"divWholePageWrapper"
style
=
"height: 100%; width: 100%; "
>
<
div
id
=
"wrap"
class
=
"first-page"
>
<
ul
id
=
"book"
>
<
li
ng-repeat
=
"slide in slides"
>
<
div
no-wrap
=
"noWrapSlides"
class
=
"divWholePageNew"
ng-style
=
"{'background-image': 'url(' + slide.image + ')'}"
style
=
"height: 100%; width: 100%; background-repeat:no-repeat; background-position:center; "
>
<
div
class
=
"divSection "
>
<
div
class
=
"divRandomText"
>
<
div
style
=
"position: relative;height:100%;background-color: white; opacity: .85; border:2px solid gainsboro;"
>
<
div
class
=
"row"
>
<
div
class
=
"col-md-2"
>
<
div
class
=
"circle color-1 color1-box-shadow"
style
=
"position:absolute;left:-20px;top:20px"
>
<
p
>
<
div
style
=
"margin-top:-10px; font: italic 29px/32px Cambria, serif;text-shadow: black 0 1px 0;"
>{{slide.careCardDate | date:'d'}}</
div
>
<
div
style
=
"margin-top:-8px;display: block;font: Georgia, serif;font-size: 12px;text-transform: uppercase;font-weight: bold;text-shadow: black 0 1px 0;"
>{{slide.careCardDate | date:'MMM'}}</
div
>
</
p
>
</
div
>
</
div
>
<
div
class
=
"col-md-8"
><
h3
style
=
"text-align:center"
>{{slide.careCardName}}</
h3
></
div
>
<
div
class
=
"col-md-2"
>
</
div
>
</
div
>
<
center
>
</
center
>
<
p
style
=
"text-align:center"
class
=
"cardTextNew"
ng-bind-html
=
"slide.task"
> </
p
>
</
div
>
</
div
>
</
div
>
</
div
>
</
li
>
<
li
class
=
"current"
>
<
div
no-wrap
=
"noWrapSlides"
class
=
"divWholePageNew"
style
=
"height: 100%; width: 100%;background-image:url(https://static.pexels.com/photos/1230/landscape-mountains-nature-sky.jpg)"
>
<
div
class
=
"divSection "
>
<
div
class
=
"divRandomText"
>
<
div
style
=
"position: relative;height:100%;background-color: white; opacity: .85; border:2px solid gainsboro;"
>
<
div
class
=
"row"
>
<
div
class
=
"col-md-2"
></
div
>
<
div
class
=
"col-md-8"
><
h3
style
=
"text-align:center"
>Welcome</
h3
></
div
>
<
div
class
=
"col-md-2"
>
</
div
>
</
div
>
<
center
>
</
center
>
<
p
style
=
"text-align:center"
class
=
"cardTextNew"
> Daily inspiration self care wellness message.</
p
>
</
div
>
</
div
>
</
div
>
</
div
>
</
li
>
</
ul
>
<
a
href
=
"#"
ng-click
=
"previous($event)"
id
=
"previous"
>Previous page</
a
>
<
a
href
=
"#"
ng-click
=
"next($event)"
id
=
"next"
>Next page</
a
>
</
div
>
</
div
>
</
div
>
</
kendo-mobile-view
>
<
script
>
angular.module('sushiMobileApp', ['kendo.directives', 'ngSanitize'])
.controller('indexController', ['$scope', function ($scope) {
$scope.slides = [];
var slidesData = [
{
"id": 1,
"cardName": "Facial",
"cardDescription": "Schedule a facial once a month",
},
{
"id": 2,
"cardName": "Stairs",
"cardDescription": "Take the stairs instead of the escalator",
},
{
"id": 3,
"cardName": "Lunch",
"cardDescription": "Find time to eat lunch",
},
{
"id": 4,
"cardName": "Vow",
"cardDescription": "Vow to eat healthy",
},
{
"id": 5,
"cardName": "Walk",
"cardDescription": "Walk your dog for 20 minutes today",
},
{
"id": 6,
"cardName": "Breathe",
"cardDescription": "Take 10 deep breaths",
},
{
"id": 7,
"cardName": "After 9pm",
"cardDescription": "Turn off your phone after 9pm",
},
{
"id": 8,
"cardName": "Don't Check",
"cardDescription": "Don't check your phone from your bed",
},
{
"id": 9,
"cardName": "Spark",
"cardDescription": "Ask yourself, does the spark joy? If it doesn't, take the time to figure out how to make it better",
} ,
{
"id": 10,
"cardName": "Caffeine",
"cardDescription": "Try to limit your caffeine intake to 1 to 2 cups a day.",
]
$scope.show = function (e) {
$scope.startDate = new Date();
for (var i = 0; i <
slidesData.length
; i++) {
$scope.addSlide(slidesData[i], i);
};
}
$
scope.addSlide
=
function
(slide, index) {
$scope.slides.push({
image: slide.image + '?
v
=
1
',
careCardName: slide.cardName,
task: slide.cardDescription,
careCardDate: $scope.startDate,
id: index,
userTaskId: slide.id,
index: index
});
};
$
scope.previous
=
function
(e) {
e.preventDefault();
$scope.current(Math.max(1, $scope.current() - 1));
}
$
scope.next
=
function
(e) {
e.preventDefault();
$scope.current(Math.min($scope.slides.length, $scope.current() + 1));;
}
$
scope.current
=
function
(page) {
var book = $("#book"),
pages
=
book
.children(),
pagesCount
= pages.length,
current
=
pages
.filter(".current"),
currentIndex
=
pagesCount
- current.index(),
newPage;
$
scope.currentIndex
= currentIndex;
if (!arguments.length) {
return currentIndex;
}
if (book.data("animating")) {
return;
}
$("#wrap").toggleClass("first-page", page == 1)
.toggleClass("last-page", page == pagesCount);
if (page != currentIndex) {
current.removeClass("current");
newPage
=
pages
.eq(pagesCount - page).addClass("current");
if (page > currentIndex) {
kendo.fx(book).pageturnHorizontal(current, newPage).play();
} else {
kendo.fx(book).pageturnHorizontal(newPage, current).reverse();
}
}
}
}]);
</
script
>
</
body
>
</
html
>
Just wondering why the effects and animations are using inline style to be created?
Is there not an option to use css classes?
The only problem I am having was that I wanted to extend and create some custom effects however because they are currently using inline styles it will overwrite any styles I apply via a class.
For example: http://docs.telerik.com/kendo-ui/api/javascript/ui/dropdownlist
If it was simply adding a class of .fadeIn and .fadeOut then I could create a custom css class for the transitions and change fadeIn to .mycustomclass
However is it not switching class style it is adding inline styles and I can't locate where the JS is that adds these inline styles and 'fadeIn' is declared. Are you able to advise where these are being set at all so worst case I can just copy one of them and rename the effect and set the inline styles that would ideally be a class