I had a strange problem in Kendo grid, when a the last row was canceled the values of the first row were shown in the last row. The first fix was adding a cancel even handler: cancel: function (e) { this.cancelChanges(); } This fixed the bug, but introduced …
The code and live preview can be found here: http://plnkr.co/edit/jdnRjO?p=preview When no date is entered a “pink” border will be shown: When a date is entered that’s before the “min” date a “pink” border will be shown: When a date on or after the min date …
In the following screendump, I used 6 sparkline fields: To increase the width / height of the sparkline (bar) I set the following values: – charArea options (height, padding, margin) – Series options (gap and spacing) $scope.kostenMinderPersoneelChartOptions = { chartArea: { background: “”, height: 17, margin: { top: …
Here is a plunkr showing a combobox with hierarchy: http://plnkr.co/edit/PaiRPD6dZNq0JaT2Tkdg?p=preview <!DOCTYPE html> <html xmlns:ng="http://angularjs.org" id="ng-app" ng-app="spike"> <head> <!– This page can be used as a base for spiking with jQuery, AngularJS and Kendo. All scripts and styles are loaded from a CDN or inline. –> <title>Spike page</title> <meta …
Here’s a plunkr demonstrating, binding a kendo mobile switch http://plnkr.co/edit/KlJ4JW?p=preview <!DOCTYPE html> <html xmlns:ng="http://angularjs.org" id="ng-app" ng-app="spike"> <head> <!– This page can be used as a base for spiking with jQuery, AngularJS and Kendo. All scripts and styles are loaded from a CDN or inline. …
Using Kendo UI mobile switch in AngularJS generated grid. Using Kendo UI date picker in AngularJS generated grid. Using Kendo UI combobox in AngularJS generated grid. All code can be found at: https://github.com/roelvanlisdonk/Research/tree/master/Research/Research.UI.Web/Client/Features/AngularJS_and_Breeze/Part3 Some highlights: AngularJS directive This directive will render the controls in …
The native confirm dialog, shown when you use the confirm function in JavaScript can’t be positioned in JavaScript. A Kendo UI window can be positioned. HTML <!DOCTYPE html> <html> <head> <title>Kendo element binding research page.</title> <link rel="stylesheet" type="text/css" href="//cdn.kendostatic.com/2014.1.528/styles/kendo.common.min.css" /> <link rel="stylesheet" type="text/css" href="//cdn.kendostatic.com/2014.1.528/styles/kendo.rtl.min.css" /> <link rel="stylesheet" …
If you want to show an text in a Kendo UI grid, you could use CSS, as suggested on stackoverflow.com: http://stackoverflow.com/questions/23476978/display-a-message-within-the-kendo-grid-when-its-empty But if you want to completely hide the gird and show a message, you can use a calculated field: http://docs.telerik.com/kendo-ui/getting-started/framework/mvvm/observableobject#creating-dependent-methods-also-known-as-calculated-fields HTML <!DOCTYPE html> <html> <head> <title>Kendo …
Kendo UI MVVM allows functions of objects to be called in the binding syntax: <div class="totals"><span>Totals: </span><span data-bind="text: products.data().length"></span></div> In this case the viewmodel property [products] is a kendo.data.DataSource object. To get the total count of the records in the DataSource, you can use the function data(). This will return …
Before drag and drop During drag and drop After drag and drop Code <!DOCTYPE html> <html> <head> <title>Kendo element binding research page.</title> <link rel="stylesheet" type="text/css" href="//cdn.kendostatic.com/2014.1.528/styles/kendo.common.min.css" /> <link rel="stylesheet" type="text/css" href="//cdn.kendostatic.com/2014.1.528/styles/kendo.rtl.min.css" /> <link rel="stylesheet" type="text/css" href="//cdn.kendostatic.com/2014.1.528/styles/kendo.metro.min.css" /> <link rel="stylesheet" type="text/css" href="//cdn.kendostatic.com/2014.1.528/styles/kendo.metro.mobile.min.css" /> <link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css"> <style> …
