<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.default.min.css" />
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://code.angularjs.org/1.4.0-beta.5/angular.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.716/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="app">
<div ng-controller="MainController">
<tabset>
<tab heading="A" active="tabs[0]">
<a href="" ng-click="switchTab(1)">Go to 'B' tab</a>
<grid-demo grid-options="gridOptions" do-something="doSomething(w)"></grid-demo>
</tab>
<tab heading="B" active="tabs[1]">
<a href="" ng-click="switchTab(0)">Go to 'A' tab</a>
<tabset vertical="true" id="chatting">
<tab ng-repeat="chat in chats">
<tab-heading>
<span>Chat {{chat.Id}}</span>
<a href="" style="color: red;"><b>X</b></a>
</tab-heading>
<div>
<ul>
<li ng-repeat="message in chat.Messages">
<b>{{message.From}}</b><i>{{message.Text}}</i><small>{{message.Time}}</small>
</li>
</ul>
</div>
</tab>
</tabset>
</tab>
</tabset>
<a class="btn btn-warning" ng-click="AddItem()">Add New</a>
</div>
</body>
</html>
// Code goes here
var app = angular.module('app', ['ui.bootstrap', 'kendo.directives']);
app.controller('MainController', ['$scope',
function($scope) {
$scope.tabs = [true, false];
$scope.data = new kendo.data.ObservableArray([
new Approval({
status: 1,
requestor: 'Alex',
approver: 'Jim',
whenRequested: (new Date())
}), new Approval({
status: 2,
requestor: 'Peter',
approver: 'Tanisha',
whenRequested: (new Date())
}), new Approval({
status: 3,
requestor: 'Chuck',
approver: 'Chip',
whenRequested: (new Date())
})
]);
$scope.chats = [{
Id: 1,
Users: [{
Id: 1,
Name: 'Jack'
}, {
Id: 2,
Name: 'Matt'
}],
Messages: [{
Id: 1,
From: 1,
Text: 'hello',
Time: '03-29-2015 18:10:47.000'
}, {
Id: 2,
From: 2,
Text: 'hey there',
Time: '03-29-2015 18:11:47.000'
}, {
Id: 3,
From: 1,
Text: 'haha',
Time: '03-29-2015 18:10:47.000'
}]
}, {
Id: 2,
Users: [{
Id: 3,
Name: 'Nick'
}, {
Id: 4,
Name: 'Saj'
}],
Messages: [{
Id: 4,
From: 3,
Text: 'hello',
Time: '03-29-2015 18:10:47.000'
}, {
Id: 5,
From: 4,
Text: 'hey there',
Time: '03-29-2015 18:11:47.000'
}, {
Id: 6,
From: 3,
Text: 'haha',
Time: '03-29-2015 18:10:47.000'
}]
}];
$scope.doSomething = function(w) {
//alert('Doing something with: ' + w);
};
$scope.AddItem = function() {
var newApproval = new Approval({
id: $scope.data.length + 1,
status: ApprovalStatus.Pending,
requestor: 'Jack',
approver: 'Keanu',
whenRequested: '01-22-2015'
});
//newApproval.set("statusText", ApprovalStatus.properties[newApproval.get("status")].name);
$scope.data.push(newApproval);
};
$scope.approve = function(d) {
d.set('status', ApprovalStatus.Approved);
};
$scope.reject = function(d) {
d.set('status', ApprovalStatus.Rejected);
};
$scope.gridOptions = {
dataSource: {
data: $scope.data,
schema: {
model: Approval
},
change: function(e){
/*if(e.field == "status"){
e.items[0].set("statusText", ApprovalStatus.properties[e.items[0].status].name);
}*/
}
},
sortable: true,
scrollable: false,
columns: [{
field: "status",
title: "status",
template: "${ApprovalStatus.properties[status].name}",
filterable: {
ui: function(e) {
e.kendoDropDownList({
dataSource: {
data: $.map(ApprovalStatus.properties, function(value, index) {
return value;
})
},
dataTextField: 'name',
dataValueField: 'value',
optionLabel: "--Select Value--"
});
},
messages: {
info: "Show negotiations that are:"
}
}
}, {
field: "requestor",
title: "requestor",
template: "{{dataItem.requestor}}"
}, {
field: "approver",
title: "approver",
template: "{{dataItem.approver}}"
}, {
field: "whenRequested",
title: "whenRequested",
format: "{0:MM-dd-yyyy}"
}, {
title: "Actions",
template: "<a href='' class='btn btn-success' ng-click='$parent.$parent.approve(dataItem)'>A</a><a href='' class='btn btn-error' ng-click='$parent.$parent.reject(dataItem)'>R</a>"
}],
filterable: {
extra: false
},
editable: true
};
$scope.switchTab = function(tabIndex) {
for (var i = 0; i < $scope.tabs.length; i++)
$scope.tabs[i] = tabIndex == i;
};
}
]);
app.directive('gridDemo', function() {
return {
restrict: 'E',
replace: false,
scope: {
gridOptions: '=',
doSomething: '&'
},
templateUrl: 'gridDemo.htm',
link: function(scope, element, attributes) {
scope.doSomething({
w: 'hahaha'
});
}
};
});
var Approval = kendo.data.Model.define({
id: "id",
fields: {
id: {
type: "number"
},
status: {
type: "number",
editable: true,
validation: {
min: 1,
max: 3
}
},
statusText: {
type: "string"
},
requestor: {
type: "string",
editable: false
},
approver: {
type: "string",
editable: false
},
whenRequested: {
type: "date",
editable: false
}
}
});
var ApprovalStatus = Object.freeze({
Pending: 1,
Approved: 2,
Rejected: 3,
properties: {
1: {
name: "Pending",
value: 1
},
2: {
name: "Approved",
value: 2
},
3: {
name: "Rejected",
value: 3
}
}
});
/* Styles go here */
@import "bootstrap";
#chatting.nav-stacked {
@extend .col-xs-3
}
<div><a href="" ng-click="doSomething({w: gridOptions})">Do Something</a></div>
<kendo-grid k-options="gridOptions">
<div class="ng-hide" k-detail-template>
<a href="#">Status{{dataItem.status}}</a>
</div>
</kendo-grid>