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>