Show hierarchy in combobox items, with Kendo and AngularJS.

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 …

Using Kendo mobile switch with AngularJS and ng-model

  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. …

AngularJS and Breeze – A simple crud app – Part 3 –Adding foreign keys and Kendo UI widgets.

  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 …

Controlling position of a custom confirm dialog with Kendo UI

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

How to display a message, when a Kendo UI MVVM grid is empty.

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 …

Show kendo ui grid total record count with MVVM.

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 …

Using drag and drop to order rows in a Kendo UI grid

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