JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.1008/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.1008/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.1008/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.1008/styles/kendo.dataviz.default.min.css">
<script src="http://cdn.kendostatic.com/2014.2.1008/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.1008/js/angular.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.1008/js/kendo.all.min.js"></script>
<base href="http://demos.telerik.com/kendo-ui/grid/angular">
<script id="tplAddNew" type="text/x-kendo-template">
Action in Add New: {{ Action }}
</script>
<script id="tplView" type="text/x-kendo-template">
Action in View: {{ Action }}
</script>
<div id="example" ng-app="Test">
<div ng-controller="MyCtrl">
<div kendo-window="winTesting"
k-visible="false"
k-modal="true"
k-pinned="true"
k-width="'500px'"
k-min-height="'200px'">
</div>
<button
kendo-button
ng-click="AddEntry()">Add Entry</button>
<button
kendo-button
ng-click="ViewContent()">View Content</button>
</div>
</div>
CSS
.k-widget {
font-size: 10px;
font-family: 'Segoe UI'
}
JavaScript
var app = angular.module("Test", ["kendo.directives"]);
app.controller("MyCtrl", [
"$scope", "$compile",
function($scope, $compile) {
$scope.AddEntry = function() {
$scope.Action = "Add New";
$scope.winTesting
.refresh({
//url: '../References/Test-entry.html'
template: kendo.template($('#tplAddNew').html())
})
.setOptions({
title: "Create New User"
});
//$scope.$apply(function() {
// $compile($scope.winTesting.element)($scope);
//});
$scope.winTesting.open().center();
}
$scope.ViewContent = function() {
$scope.winTesting
.refresh({
//url: '../References/View-entry.html'
template: kendo.template($('#tplView').html())
})
.setOptions({
title: "View User Detail"
});
//$scope.$apply(function() {
// $compile($scope.winTesting.element)($scope);
//});
$scope.winTesting.open().center();
}
}
]);