How to fix: can’t type in textbox inside kendo sortable

I had some input type=”text” html elements inside a kendo sortable. These textboxes couldn’t get focus, I was unable to type in the textbox, due to the fact it was inside a “draggable” element.

(first I thought it was the css property “user-select”, but that was not the case).

 

The fix is documented on the kendo api site:

http://docs.telerik.com/kendo-ui/web/sortable/overview#sortable-widget-with-focus-able-input-elements

 

image

Using a custom AngularJS validation directive to validate an entered text in a kendo combo box.

See the plunker for the code: http://plnkr.co/edit/WroQIwLj4K8vUlVOCkDx?p=preview

 

When no text is entered, the kendo combo box should be invalid:

image

 

When a text is entered, that does not match a valid entry, the kendo combo box should be invalid:

 

image

 

When a text is entered, that does match a valid entry, the kendo combo box should be valid and the selected person should be shown:

 

image

How to refresh a kendo ui widget, when options on the AngularJS $scope change.

Code can be found at: http://plnkr.co/edit/8CQURTLHftIpBwXUAN7s?p=preview

 

Let say, we want to show all records in a pageable kendo-grid, when the user clicks on a button.

This can accomplished by programmatically setting the page size of a kendo-grid and using the k-rebind attribute:

 

image

 

After clicking on the “Set page size” button:

 

image

 

<!-- App scripts -->
<script>
(function () {
"use strict";
// This is the starting point (main) for the angular app.
var app = angular.module("spike", ["kendo.directives"]);
// Set culture info to Ducth:
kendo.culture("nl-NL");
}());

(function () {
"use strict";
var app = angular.module("spike");
var controller = function ($scope, $animate) {
$scope.title = "Programmatically set pagesize kendo grid.";
var data = [
{ id: 1, name: "Bob1" },
{ id: 2, name: "Bob2" },
{ id: 3, name: "Bob3" },
{ id: 4, name: "Bob4" },
{ id: 5, name: "Bob5" },
{ id: 6, name: "Bob6" },
{ id: 7, name: "Bob7" },
{ id: 8, name: "Bob8" },
{ id: 9, name: "Bob9" },
{ id: 10, name: "Bob10" },
{ id: 11, name: "Bob11" },
{ id: 12, name: "Bob12" }
]
$scope.mainGridOptions = {
dataSource: {
data: data,
pageSize: 4
},
pageable: {
pageSizes: [4, 8, 12]
},
sortable: true,
dataBinding: function (e) {
// This is a fix.
// When the user selects an other page size in the "page size" dropdownlist, 
// the MainGridOptions are not updated.
// To reflect the changes from the "page size" dropdownlist, we set the "page size" manually here.
$scope.mainGridOptions.dataSource.pageSize = e.sender.dataSource.pageSize();
}
};
$scope.setPageSize = function () {
$scope.mainGridOptions.dataSource.pageSize = data.length;
};
};
app.controller("main", ["$scope", controller]);
}());
</script>
<div ng-controller="main">
<h2>{{ title }}</h2>
<div>
<br />
<button ng-click="setPageSize()">Set page size</button>
<br />
<br />
<div kendo-grid="mainGrid"
k-options="mainGridOptions"
k-rebind="mainGridOptions"></div>
</div>
</div>