Hi,
I need to use the kendo-ui grid with local data virtualization. And also, I need sorting functionality.
Your sample in Grid / Virtualization of local data shows 500.000 items in less than 1 second.
When I edit this sample in dojo (with adding 'sortable: true'), sorting the grid is resulting with nearly impossible scrolling (very slow).
Is there any acceptable way of using virtual scrolling (especially with local data) and sorting (and/or filtering) functionalities together?
Thanks.
Mahmut Zemheri
Hi,
I would like to have a private method that creates a Datasource to be used. This method can create a datasource either with a data object to send to the URL or one without a data object to send to the URL.
How can I go about achieving this?
ChangeGridDataSource: function (newDatasourceUrl, gridName, dataToSend) {
// Sets the grid to a new datasource and forces it to read
var gridId;
if (gridName[0] !== '#') {
gridId = '#' + gridName;
} else {
gridId = gridName;
}
var newDataSource = new kendo.data.DataSource({
transport: {
read: {
url: newDatasourceUrl,
type: 'POST',
dataType: 'JSON'
}
},
pageSize: 20,
schema: {
model: {
fields: {
// the model fields have to specified that it is of a date type object.
dSECSYSTimeStampDate: { type: 'date' },
dExecutedDateValue: { type: 'date' },
dEffectiveDateValue: { type: 'date' }
}
},
data: 'Data',
parse: function (response) {
// This will parse the dates and transform it into the proper date format. This is done
// after the date has been retrieved in a JSON format. This will allow the formatting of the dates
// to be done in the grids.
return Transactions.Methods.ParseDatesFromKendoGrid(response);
},
total: function (response) {
return response.Total;
}
}
});
if (typeof dataToSend !== 'undefined') {
// Does not seem to work.
newDataSource.transport.read.data = dataToSend;
}
console.log(newDataSource);
console.log(dataToSend);
$(gridId).data('kendoGrid').setDataSource(newDataSource);
},
I have the above and the line 'newDataSource.transport.read.data = dataToSend' doesn't seem to work for some reason. Is there a method that I can call or a different property that can be used to change a Data Object to send in side the data source?
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:
A
1
2
B
3
4
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
Hi guys,
I have a problem using the DropDownList with Angular and Angular Translate. Here is an example:
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
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.
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)
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>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?