<!DOCTYPE html>
<html>
<head>
<title>Kendo Window states using ui-router </title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.material.mobile.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://kendo.cdn.telerik.com/2017.2.621/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.2.621/js/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.0/angular-ui-router.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.2.621/js/kendo.all.min.js"></script>
<script src="https://rawgit.com/djandyr/kendo-state-window/master/kendo-state-window.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="app">
<div class="container">
<div ui-view></div>
</div>
</body>
</html>
var app = angular.module('app', ['ui.router', 'kendo.directives', 'kendo.stateWindow']);
app.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'home.html'
})
.state('window', {
parent: 'home',
url: '/window1',
templateUrl: 'window1.html',
window: {
name: 'window1',
options: {
title: 'Home -> Window 1',
center: {
top: 100
}
}
}
})
.state('window2', {
parent: 'window',
templateUrl: 'window2.html',
controller: 'Window2Controller',
url: '/window2',
window: {
name: 'window2'
}
})
.state('tabs', {
url: '/tabs',
parent: 'home',
templateUrl: 'tabs.html',
abstract: true,
window: {
name: 'tabWindow',
append: true,
options: {
appendTo: '#tabsWindow'
}
}
})
.state('tab1', {
parent: 'tabs',
url: '/tab1',
templateUrl: 'tab1.html'
})
.state('tab2', {
parent: 'tabs',
url: '/tab2',
templateUrl: 'tab2.html'
})
.state('tab3', {
parent: 'tabs',
url: '/tab3',
templateUrl: 'tab3.html'
})
});
app.controller('Window2Controller', function($scope, stateWindow) {
stateWindow.get('window2').then(function(window) {
window.setOptions({
title: 'Home -> Window 1 -> Window2'
})
});
});
app.config(['stateWindowConfigProvider', function (stateWindowConfigProvider) {
stateWindowConfigProvider.setOptions({
autoFocus: false,
resizable: false,
draggable: true,
scrollable: true,
pinned: true,
modal: true,
width: '80%',
actions: ["Maximize", "Close"],
height: '80%'
});
}]);
# kendo-state-window
AngularJS module that allows kendo-window states when using ui-router
Window states
-----------------------
Adding `window` parameter to a state definition causes its template to be generated with a `state-window` directive which will open kendo-window once rendered.
```javascript
$stateProvider
.state('nested', {
url: '/nested',
templateUrl: 'nested.html'
})
.state('nested.window', {
parent: 'nested',
url: '/window1',
templateUrl: 'window1.html',
window: {
name: 'window1'
}
})
.state('nested.window2', {
parent: 'nested.window',
templateUrl: 'window2.html',
controller: 'Window2Controller',
url: '/window2',
window: {
name: 'window2'
}
})
})
```
Window name is required, which allows [reference](http://docs.telerik.com/kendo-ui/AngularJS/introduction#widget-references) to the kendo window widget in controller scope.
Kendo window [configuration options](http://docs.telerik.com/kendo-ui/api/javascript/ui/window#configuration) can be provided on state definition, as documented in Kendo Window configuration
FAQ
-------
**How to dynamically change the window title**
Your state definition must be assigned a controller, where kendo-window can be [referenced](http://docs.telerik.com/kendo-ui/AngularJS/introduction#widget-references) by window name once available in scope (unfortunate use of timeout). The kendo-window method [setOptions](http://docs.telerik.com/kendo-ui/api/javascript/ui/window#methods-setOptions) can be used to configure a new window title.
```javascript
app.controller('WindowController', function($scope, $timeout) {
$timeout(function() {
$scope.window.setOptions({
title: 'Hello World'
});
});
});
```
**How to change the window default configuration options**
The `state-window` directive is assigned a default set of configuration options by `stateWindowConfigProvider`. You can change these options globally for all kendo windows opened from state definitions, as below:
```javascript
app.config(['stateWindowConfigProvider', function (stateWindowConfigProvider) {
stateWindowConfigProvider.setOptions({
modal: false,
resizable: true,
draggable: true,
pinned: false
});
}]);
```
<h4>Example of kendo window with nested states</h4>
<button class="k-button" ui-sref='window' ui-sref-opts="{reload: true}">Open Nested Window</button><br />
<br />
<h4>Example of kendo window with tabs</h4>
<button class="k-button" ui-sref='tab1' ui-sref-opts="{reload: true}">Open Window Tabs</button><br />
<div ui-view></div>
<button class="k-button" ui-sref='window2'>Open Window 2</button>
<div class="container">
<ul class="nav nav-pills">
<li class="active">
<a ui-sref="tab1">Tab 1</a>
</li>
<li><a ui-sref="tab2">Tab 2</a>
</li>
<li><a ui-sref="tab3">Tab 3</a>
</li>
</ul>
<div class="tab-content">
<div ui-view></div>
</div>
</div>
<div>
This tab 1 content
</div>
<div>
This is tab2 content
</div>
<div>
This is tab3 content
</div>