Questions on Kendo UI for jQuery Forum

28,694 questions

1 answer

420 views

[Solved] AngularJS Treeview with custom template

Hi,

I am developing an application using angularjs and kendo ui. I have a requirement to apply custom template to the treeview based on the type of data.

For eg: consider the tree below:

I need to use different templates for letters and numbers. I was trying to define a template selector from the control but it did not work. Is there any sample using angularjs? Most of the code samples are not mentioning what attributes can be used from angular.

Appreciate any help.

Thanks

TreeView

answered on 12 Apr 2016

1 answer

625 views

Filtering entries within DropDownList with template and Angular filter

Hi guys,

I have a problem using the DropDownList with Angular and Angular Translate. Here is an example:

http://dojo.telerik.com/URUYO

Basically I use a simple template to appy an Angular filter to the value key. From my point of view this is a standard scenario, if I have a DropDownList expressing a foreign-key column from a database. The value is a key (such as a user status), but within the GUI I want a translated text to be displayed. Within the example everything works fine except the filter function of the DropDownList. The filter parses the key value, not the displayed text, as a user would expect. If you enter "KEY_2" a row will be found, entering the displayed text will result in no entries - irritating the user.

Is this a bug or am I doing something wrong?

Thanks & cheers,

Nikola

DropDownList

answered on 12 Apr 2016

1 answer

6.2K+ views

[Solved] Add Custom Class to Grid Command CELL

How can I add a custom class name to the grid CELL (not the buttons) of a command cell, and have it so that when new rows are added in batch edit mode, the classes are attached. I see no "attributes" attribute for the command cell.

Grid

answered on 12 Apr 2016

3 answers

393 views

Line chart categoryAxis baseUnit with date range issues

Hello,

In experimenting with line chart and differing date ranges have run into a couple discrepancies. Outlined below with examples.

Issue 1
With ‘roundToBaseUnit’ set to true (default behavior) it looks like the weeks always start on Sundays. You can see the middle week in the example is adding data for both Sundays, so 8 days total, while the 3rd week in the example (starting on the 20th) does not take Sunday the 20th data into its total.

http://jsbin.com/yejage/9/edit

Issue 2
When you set ‘roundToBaseUnit’ to false, it looks like the chart gets cutoff according the remainder of the base unit. In the example, since there is less than a half week for the third data point, you aren’t even able to see the third data point. We are looking for the ability to have weeks that don't always start on Sunday, but instead the first day of the date range, which is why we're setting this option to false.

http://jsbin.com/yejage/11/edit

Issue 3
With ‘baseUnitStep’ set to “auto” it is possible to display one more date group than is set in ‘maxDateGroups.’ For instance, in the example, maxDateGroups is set to 5 and you can see 6 date groups are displaying.

Note: To view example 3 properly you will need to change the version of Kendo that is loaded to be the most recent internal build (2016.1.322). The example is referencing 2016.1.226.

http://jsbin.com/yejage/13/edit

Machine used for testing is on PDT.

Charts

answered on 12 Apr 2016

1 answer

189 views

Manually expanding causes overflow of rows.

Hi,

When we load data into a TreeList and then use your prescribed method for expanding nodes, the rows section always overflows the viewport by a couple of rows. (The "k-grid-content" section appears to be too big)

This is "sometimes" rectified if we then expand a node that wasn't previously expanded - but not always. This looks like a refresh problem after manually expanding. How can I cause the control to re-draw itself (without reloading the DS etc...) and re-render its viewport ("k-grid-content") correctly ?

I'm sorry but I can't attach a screenshot as the data is sensitive and I'd be shot...

(version 2016.1.226)

TreeView

answered on 12 Apr 2016

1 answer

156 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

388 views

[Solved] Set columns to be editable dynamicaly (MVC)

Is there any way to set a column to be editable or not simply based by name?

For example, I want to pass in via ViewData a list of column names and then make those columns uneditable. How could I go about doing this in such a way that I can add very little code to all of my Views and be able to to turn these columns to be editable/uneditable?

Grid

answered on 11 Apr 2016

3 answers

197 views

Bing maps zoom in on double click angularjs directive

Hello,

I would like to enable the zoom in on double click on Kendo UI bing maps angularjs directive.

This is an example on how to it using MS sdk.

https://social.msdn.microsoft.com/Forums/en-US/707afccb-f872-4ba8-8fd2-e44ea68082a5/how-to-disable-double-click-zoom-on-bing-maps-ajax-control-version-70?forum=bingmapsajax

Question is how to enable it with your angularjs directive.

Thanks

Map

answered on 11 Apr 2016

1 answer

947 views

Keep Multiselect dropdown list open at fixed height with vertical scroll

Would anyone have suggestions on how to keep a Multiselect dropdown list open at a fixed height with vertical scroll.

We have a series of Multiselects, and our visual design calls for them to all stay open. They'll be populated with dynamically which will make the length constantly vary, so they'll need to stay open, stay at a fixed height, and be scrollable when they extend beyond the fixed height.

Can this be done with simple styling, or would some JS be the way to go?

MultiSelect