Using Kendo UI switch with Font Awsome icons in a Kendo grid

 

If you want to use Kendo UI switch widgets with Font Awsome icons in a Kendo grid with MVVM binding, you can use the code below:

 

image

 

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>
/* Resets */
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box; /* Border boxing is used, so the padding, margin and borders are within the width and height of de element. */
color: rgb(112, 112, 112);
font-family: Arial, Helvetica, sans-serif; /* For know use default fonts used on google.com stackoverflow.com, telerik.com etc. */
font-size: 13px;
margin: 0; /* Margin zero is used to prevent unnecessary white space. */
padding: 0; /* Padding zero is used to prevent unnecessary white space. */
}
html, body {
height: 100%;
max-height: 100%;
}
body {
padding: 20px;
}
.info {
border: 1px solid rgb(128, 128, 128);
box-shadow: rgba(0, 0, 0, 0.298039) 0 2px 6px 0, rgba(0, 0, 0, 0.2) 0 -3px 8px 0;
padding: 10px;
}
.addressRow {
cursor: move;
cursor: -webkit-grab;
cursor: -moz-grab;
height: 10px;
line-height: 10px;
padding: 0;
margin: 0;
}
.addressRow input {
font-family: FontAwesome;
}
#addressGrid tr > td {
height: 1.6em;
line-height: 1.6em;
padding: 1px 4px 1px 4px;
margin: 0;
}
#addressGrid tr > th {
font-weight: bold;
height: 1.6em;
line-height: 1.6em;
margin: 0;
padding: 1px 4px 1px 4px;
}
#addressGrid tr > td:first-child, #addressGrid tr > th:first-child {
width: 56px;
}
#addressGrid tr:last-child td {
padding-bottom: 3px;
}
.km-switch {
cursor: pointer;
height: 1.6em;
line-height: 1.6em;
margin: 0;
padding: 0;
}
#addressGrid tr > td:first-child .km-switch-label-on, #addressGrid tr > td:first-child .km-switch-label-off {
font-family: FontAwesome;
color: rgb(112, 112, 112);
height: 1.6em;
line-height: 1.6em;
}
#addressGrid tr > td:first-child .km-switch-label-on:before {
content: "\f023";
}
#addressGrid tr > td:first-child .km-switch-label-off:before {
content: "\f09c";
}
</style>
</head>
<body>
<div id="view">
<div class="info">
<script id="addressRowTemplate" type="text/x-kendo-tmpl">
<tr data-uid="#: uid#" class="addressRow">
<td>
<input data-role="switch" data-on-label="" data-off-label="" data-bind="checked: IsFixed">
</td>
<td>
#: Address#
</td>
<td>
#: Lat#
</td>
<td>
#: Long#
</td>
<td>
<input data-role="switch" data-on-label="Y" data-off-label="N" data-bind="checked: IsFixed">
</td>
</tr>
</script>
<div id="addressGrid" data-role="grid"
data-row-template="addressRowTemplate"
data-columns="[
{ 'field': 'IsFixed' },
{ 'field': 'Address' },
{ 'field': 'Lat' },
{ 'field': 'Long' },
{ 'field': 'Selected' }
]"
data-bind="source: addresses"></div>
</div>
</div>
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="//cdn.kendostatic.com/2014.1.528/js/kendo.all.min.js"></script>
<script type="text/javascript">
var dataService = (function ()
{
"use strict";
var self = {};
self.getAddresses = function ()
{
var data = new kendo.data.ObservableArray(
[
{ Id: 1, Address: 'Kerkweg 22',   Lat: '52.367443', Long: '4.865275', Selected: false, IsFixed: false },
{ Id: 2, Address: 'Peilstraat 3', Lat: '52.367967', Long: '4.866217', Selected: false, IsFixed: true },
{ Id: 3, Address: 'Bakkerloop 35', Lat: '52.367946', Long: '4.865482', Selected: false, IsFixed: false },
{ Id: 4, Address: 'Eikenlaan 1', Lat: '52.368237', Long: '4.866694', Selected: false, IsFixed: true }
]);
// Manual create a promise, so this function mimicks an Ajax call.
var dfd = new $.Deferred();
dfd.resolve(data);
return dfd.promise();
};
return self;
})(kendo);
var viewModel = new kendo.observable({
addresses: new kendo.data.DataSource({ data: [] })
});
var controller = (function (dataService, viewModel)
{
"use strict";
var _dataService = dataService;            
var _vm = viewModel;
var self = {};
self.handleAdressesRefresh = function (data)
{
_vm.set("addresses", new kendo.data.DataSource({ data: data }));
kendo.bind($(".info"), _vm);
};
self.show = function ()
{
$.when(_dataService.getAddresses())
.then(self.handleAdressesRefresh);
};
return self;
})(dataService, viewModel);
controller.show();
</script>
</body>
</html>

MVVM – Kendo UI ListView – Get selected items on selection.

This page shows how you can get the selected items when using Kendo UI MVVM:

 

<!DOCTYPE html>
<html>
<head>
<title>Kendo element binding research page.</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
padding: 20px;
}
</style>
<link href="//cdn.kendostatic.com/2014.1.528/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="//cdn.kendostatic.com/2014.1.528/styles/kendo.silver.min.css" rel="stylesheet" type="text/css" />    
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="//cdn.kendostatic.com/2014.1.528/js/kendo.all.min.js"></script>

</head>
<body>
<div id="page">
<button onclick="app.onExecuteClick(event);">Execute</button>
<script type="text/x-kendo-tmpl" id="template">
<div class="k-widget">
<dl>
<dt>Product Name</dt>
<dd>#:ProductName#</dd>
<dt>Unit Price</dt>
<dd>#:kendo.toString(UnitPrice, "c")#</dd>
</dl>
</div>
</script>
<div data-role="listview"
data-template="template"
data-selectable="multiple"
data-bind="source: products, events: { change: onProductChange }"
style="width: 420px; height: 200px; overflow: auto"></div>
</div>
<script type="text/javascript">
var app = (function ()
{
var self = {};
self.onExecuteClick = function (e)
{
debugger;
};
self.start = function (e)
{
var products = [
{ Id: 1, ProductName: 'Product1', UnitPrice: 200 },
{ Id: 2, ProductName: 'Product2', UnitPrice: 300 },
{ Id: 3, ProductName: 'Product3', UnitPrice: 400 }
];
var viewModel = kendo.observable({
selectedProducts: null,
products: new kendo.data.DataSource({
schema: {
model: {
id: "Id"
}
},
data: products
}),
onProductChange: function (e)
{
// Get kendo listview.
var $listView = e.sender;
var data = $listView.dataSource.view();
// Get the selected DOM elements as jQuery objects.
var $selectedElements = $listView.select();
// Convert the selected  jQuery DOM elements to a Array containing only "Product" objects.
var selected = $.map($selectedElements, function (item)
{
var index = $(item).index();
return data[index];
});
// Log the selected products to the console.
console.log(selected);
}
});
kendo.bind($("#page"), viewModel);
};
return self;
})();
app.start();
</script>
</body>
</html>

How to do basic two-way html element data binding with Kendo UI.

To see the code in action, see this Plunker: http://plnkr.co/SpYSwv

 

The following HTML page shows a input box.

When the users start typing in the input box the SPAN element next to it will show the value just entered (onkeypress).

 

image

<!DOCTYPE html>
<html>
<head>
<title>Kendo element binding research page.</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
padding: 20px;
}
</style>
<link href="//cdn.kendostatic.com/2014.1.528/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="//cdn.kendostatic.com/2014.1.528/styles/kendo.silver.min.css" rel="stylesheet" type="text/css" />
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="//cdn.kendostatic.com/2014.1.528/js/kendo.all.min.js"></script>
</head>
<body>
<div id="view">
<input data-bind="value: inputValue, events: { keypress: showValueOnLabel }" />
<span data-bind="text: label"></span>
</div>
<script>
var viewModel = kendo.observable({
inputValue: "Enter some text",
label: "",
showValueOnLabel: function (e) {
var pressedKey = String.fromCharCode(e.charCode);
var currentValue = e.currentTarget.value;
this.set("label", currentValue + pressedKey);
}
});
kendo.bind($("#view"), viewModel);
</script>
</body>
</html>

Create kendo ui tooltip with template and correct position on element click.

Just a code snippet, that shows a tooltip, when the user clicks on a button:

 

image

 

<!DOCTYPE html>
<html>
<head>
<title>RLI research page.</title>
<link rel="stylesheet" type="text/css" href="../../../Libraries/Kendo/styles/kendo.common.min.css" />
<link rel="stylesheet" type="text/css" href="../../../Libraries/Kendo/styles/kendo.rtl.min.css" />
<link rel="stylesheet" type="text/css" href="../../../Libraries/Kendo/styles/kendo.metro.min.css" />
<link rel="stylesheet" type="text/css" href="../../../Libraries/FontAwesome/css/font-awesome.min.css" />
<style type="text/css">
#toonTooltip_tt_active {
background-color: #FFFFFF;
left: 14px;
}
</style>
</head>
<body>
<div id="page">
<h3 class="page-header">RLI research page.</h3>
<div class="content">
<div style="position:absolute;top:100px;"><button id="toonTooltip" class="button">...</button></div>
</div>
<script type="text/x-kendo-template" id="template">
<div>
<button class="button" style="margin-top: 4px; margin-bottom: 4px; width: 200px;">Exporteer to .csv&nbsp;<i class="fa fa-file-text-o" title="Exporteer to *.csv."></i></button>
</div>
<div>
<button class="button" style="margin-bottom: 4px; width: 200px;">Exporteer naar .kml&nbsp;<i class="fa fa-file-text-o" title="Exporteer to *.kml."></i></button>
</div>
<div>
<button class="button" style="margin-bottom: 4px; width: 200px;">Show route&nbsp;<i class="fa fa-road" title="Show route."></i></button>
</div>
<div>
<button class="button" style="margin-bottom: 4px; width: 200px;">Delete route&nbsp;<i class="fa fa-minus-square" title="Delete route."></i></button>
</div>
</script>
</div>
<script type="text/javascript" src="../../../Libraries/jQuery/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="../../../Libraries/Kendo/js/kendo.web.min.js"></script>
<script type="text/javascript" src="../../../Libraries/Kendo/js/cultures/kendo.culture.nl-NL.min.js"></script>
    <script type="text/javascript" src="Rli.js"></script>
</body>
</html>

 

Rli.js

var app = (function ()
{
var self = this;
// The "main" entry point for this application.
self.start = function ()
{
$("#toonTooltip").kendoTooltip({
autoHide: false,
content: kendo.template($("#template").html()),
position: "right",
showOn: "click"
});
};
    
return self;
})();
// Start the application.
app.start();

Dynamically change kendo ui grid columns with AngularJS

The following HTML / JavaScript explains how to dynamically change Kendo UI grid columns, by using the Kendo – Angular directives.

 

<!doctype html> <html ng-app="researchApp"> <head> <meta charset="utf-8"> <title>Dynamically change Kendo grid columns.</title> <link href="/Client/Libraries/Kendo/css/kendo.common.min.css" rel="stylesheet" type="text/css" /> <link href="/Client/Libraries/Kendo/css/kendo.silver.min.css" rel="stylesheet" type="text/css" /> <script src="/Client/Libraries/Kendo/js/jquery.min.js"></script> <script src="/Client/Libraries/Angular/angular.js"></script> <script src="/Client/Libraries/Angular/angular-route.js"></script> <script src="/Client/Libraries/Angular/angular-sanitize.js"></script> <script src="/Client/Libraries/Kendo/js/kendo.all.min.js"></script> <script src="/Client/Libraries/Angular/angular-kendo.js"></script> <script src="/Client/Libraries/Q/q.min.js"></script> <script src="/Client/Libraries/Breeze/breeze.debug.js"></script> </head> <body ng-controller="researchCtrl"> <button ng-click="execute1($event)">Execute 1</button> <button ng-click="execute2($event)">Execute 2</button> <!-- By supplying the string "grid" to the kendo-grid directive, the kendo grid will be made available

to the $scope as $scope.grid. --> <!-- All initial configuration of the kendo grid is provided by the $scope.gridOptions. --> <!-- The kendo grid will "refresh" / "rebind" itself, when the $scope.selectedType changes. --> <div kendo-grid="grid" k-options="gridOptions" k-rebind="selectedType"></div> <script> // Main entry point of the application. // Kendo - Angular needs the ["kendo.directives"] to be injected. var researchApp = angular.module("researchApp", ["kendo.directives"]); researchApp.controller('researchCtrl', function ($scope) { var GridModel1 = kendo.data.Model.define({ id: 'Id', fields: { company: { type: 'string' }, os: { type: 'string' } } }); var GridModel2 = kendo.data.Model.define({ id: 'Id', fields: { FirstName: { type: 'string' }, LastName: { type: 'string' }, Description: { type: 'string' } } }); var gridOptions1 = { dataSource: new kendo.data.DataSource({ data: new kendo.data.ObservableArray([ new GridModel1({ Id: 1, company: 'Apple', os: 'OSX' }) ]), schema: { model: GridModel1 } }) }; var gridOptions2 = { dataSource: new kendo.data.DataSource({ data: new kendo.data.ObservableArray([ new GridModel2({ Id: 1, FirstName: 'John', LastName: 'Do', Description: "My test description." }) ]), schema: { model: GridModel2 } }) }; // Selected type is used to rebind the kendo ui grid. $scope.selectedType = ""; $scope.gridOptions = gridOptions1; $scope.execute1 = function (e) { // Switch $scope.gridOptions = gridOptions1; $scope.selectedType = "Software"; }; $scope.execute2 = function (e) { $scope.gridOptions = gridOptions2; $scope.selectedType = "Employee"; }; }); </script> </body> </html>

Initial screendump:

image

 

Screendump after clicking on the “Execute 2” button:

image

Fixing: TypeError: Cannot read property ‘sortable’ of undefined, when using Kendo UI grid.

I was getting the error: TypeError: Cannot read property ‘sortable’ of undefined.

This was caused by dynamically changing Kendo UI grid columns, without destroying the grid first.

After I destroyed the grid and recreated it, the error was resolved.

To destroy a Kendo UI grid and later recreate it, use:

 

// Destroy kendo UI grid.
// Must destroy and empty grid before refreshing columns.
$('#crudGrid').data().kendoGrid.destroy();
$('#crudGrid').empty();
// Create Kendo UI grid.
$('#crudGrid').kendoGrid({
dataSource: {
data: products,
schema: {
model: {
fields: {
ProductName: { type: "string" },
UnitPrice: { type: "number" },
UnitsInStock: { type: "number" },
Discontinued: { type: "boolean" }
}
}
},
pageSize: 20
},
height: 430,
scrollable: true,
sortable: true,
filterable: true,
pageable: {
input: true,
numeric: false
},
columns: [
"ProductName",
{ field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "130px" },
{ field: "UnitsInStock", title: "Units In Stock", width: "130px" },
{ field: "Discontinued", width: "130px" }
]
});