Questions on Kendo UI for jQuery Forum

12 questions

0 answers

61 views

zoom in spreadsheet

Hi,

There has been some progress according to the implementation of zoom in spreadsheet.

Regards,
Ivan

Effects

Spreadsheet

asked on 15 Dec 2021

3 answers

84 views

Effects inside a SPA app

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?

Effects

answered on 11 Jul 2019

6 answers

52 views

Page Turn Large number of images

Hi, I'm trying to use Pageturn effect on a large number of images (200). It is very slow and almost does not show the effect at all. Is there any limitation with this effect?

Effects

answered on 10 Jan 2017

1 answer

202 views

typescript throttle function definition is wrong

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,

Effects

answered on 27 Oct 2016

1 answer

94 views

How to get Kendo page turn effect to work on Chrome especially Android

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

<link rel="http://demos.telerik.com/kendo-ui/content/mobile/apps/sushi/css/style.css">

<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 class="col-md-8"><h3 style="text-align:center">{{slide.careCardName}}</h3></div>

<div class="col-md-2">

</div>

<center>

</center>

<p style="text-align:center" class="cardTextNew" ng-bind-html="slide.task"> </p>

</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>

<center>

</center>

<p style="text-align:center" class="cardTextNew"> Daily inspiration self care wellness message.</p>

</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>

</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",

"image": "https://static.pexels.com/photos/31256/pexels-photo-31256.jpg"

},

{

"id": 2,

"cardName": "Stairs",

"cardDescription": "Take the stairs instead of the escalator",

"image": "https://static.pexels.com/photos/29280/pexels-photo-29280.jpg"

},

{

"id": 3,

"cardName": "Lunch",

"cardDescription": "Find time to eat lunch",

"image": "https://static.pexels.com/photos/4718/sky-buildings-windows-blue-sky.jpg"

},

{

"id": 4,

"cardName": "Vow",

"cardDescription": "Vow to eat healthy",

"image": "https://static.pexels.com/photos/3768/sky-sunny-clouds-cloudy.jpg"

},

{

"id": 5,

"cardName": "Walk",

"cardDescription": "Walk your dog for 20 minutes today",

"image": "https://static.pexels.com/photos/67101/pexels-photo-67101.jpeg"

},

{

"id": 6,

"cardName": "Breathe",

"cardDescription": "Take 10 deep breaths",

"image": "https://static.pexels.com/photos/1084/sky-clouds-sun-desert.jpg"

},

{

"id": 7,

"cardName": "After 9pm",

"cardDescription": "Turn off your phone after 9pm",

"image": "https://static.pexels.com/photos/4607/landscape-sky-clouds-cloudy.jpg"

},

{

"id": 8,

"cardName": "Don't Check",

"cardDescription": "Don't check your phone from your bed",

"image": "https://static.pexels.com/photos/2330/dawn-landscape-sky-sunset.jpg"

},

{

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

"image": "https://static.pexels.com/photos/2596/dawn-sunset-flying-clouds.jpg"

} ,

{

"id": 10,

"cardName": "Caffeine",

"cardDescription": "Try to limit your caffeine intake to 1 to 2 cups a day.",

"image": "https://static.pexels.com/photos/4655/city-dawn-sky-sunset.jpg"}

]

$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>

Effects

answered on 11 Apr 2016

3 answers

68 views

Effects and animations

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

Effects

answered on 23 Feb 2016

1 answer

27 views

Page Turn Auto Play

Is there a way to auto play the page turn automation? So if I have 5 images, it will turn the page one every X seconds. I can get the first image to page to the second image, but never get subsequent images to page correctly.

Effects

answered on 28 Apr 2015

1 answer

57 views

Expand effect from the bottom to the top

Hi,

I'm using Window to display some content is popup.
And I'm trying to use expand effect.
If I use vertical direction - it appears from the top to the bottom.

Problem is that I didn't find the way to make it appear from the bottom to top.

Is there any way to do it?

Thanks,
Vlad.

Effects

answered on 30 Mar 2015

1 answer

77 views

Finish event

I need to know when effect (expand) finished to correct some layout. How can I do that?

Effects

answered on 14 Jan 2015

3 answers

107 views

Slide In Effect using AngularJS

Hi There,

I'm looking at how Kendo UI implement "Slide In" effect at http://demos.telerik.com/kendo-ui/fx/slidein, I'm curious whether if I could do that with Angular since Kendo UI is supporting Angular out of the box now.

Specifically for this line:
var slide = kendo.fx($("#slide-in-share")).slideIn("left")

What would the angular version for it?

Cheers,
Leo

Effects