I'm using AngularJS framework.
I have a text box to enter an amount and a drop down to select a type.
<input type="text" ng-model="user.amount"/>
<select ng-model="user.rateType">
<option> rate </option>
<option> unrate</option>
</select>
<input type="text" ng-model="user.assignVal"/>
Here is my controller
var app = angular.module("myApp", []);
app.controller("myCtrl", function ($scope) {
$scope.Main = [
{ id: "1", hval: 1000, lval: 5000, type: "rate", cal: "20" },
{ id: "2", hval: 6000, lval: 10000, type: "rate", cal: "50" },
{ id: "3", hval: 1000, lval: 5000, type: "unrate", cal: "100" },
{ id: "4", hval: 6000, lval: 10000, type: "unrate", cal: "100" },
];
console.log($scope.user.assignVal);
});
The user enter an amount in the text-box and select the rate type.
I need to find the element fulfilling the following conditions :
the user selected type matches item type
the amount entered by the user is in the range delimited by hval andlval
For example,
User enters 1100 as amount and select rate type, cal equals 20
User enters 6500 as amount and select rate type, cal equals 50
User enters 1100 as amount and select unrate type, cal equals 100
How can I achieve this ?
get request
$scope.loadShareSetting = function (){
$http({
method: "GET",
headers: { 'Content-Type': 'application/json','Authorization': 'Bearer ' + localStorage.getItem('JWT_TOKEN')},
url: appConfig.apiUrl + "/residence-settings",
}).then(function (response) {
$scope.residenceSetting = response.data;
}, function (response) {
});
}
Here is a sample code to achieve this
angular.module("myApp", []);
angular
.module("myApp")
.controller("myController", [
"$scope",
"myService",
function ($scope, myService) {
$scope.getCalForAmount = function () {
var result = myService.getCalForAmount($scope.amount, $scope.type);
if (result !== -1) {
$scope.calForAmount = result.cal;
} else {
$scope.calForAmount = ""; // no matching cal, empty field
}
};
},
])
.service("myService", function () {
var items = [
{ id: "1", hval: 1000, lval: 5000, type: "rate", cal: "20" },
{ id: "2", hval: 6000, lval: 10000, type: "rate", cal: "50" },
{ id: "3", hval: 1000, lval: 5000, type: "unrate", cal: "100" },
{ id: "4", hval: 6000, lval: 10000, type: "unrate", cal: "100" },
];
return {
getCalForAmount: function (amount, type) {
var result = items.find(function (item) {
return (
/^[0-9]*$/.test(amount) && // amount must be an number
type === item.type && // type must match
amount >= item.hval && // amount is in the range delimited by hval
amount <= item.lval // and lval
);
});
return result || -1;
},
};
});
label {
display: block;
padding: 5px;
}
label span {
display: inline-block;
width: 200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<html ng-app="myApp">
<body>
<div ng-controller="myController">
<label>
<span>Amount</span>
<input type="text" ng-model="amount" ng-change="getCalForAmount()" />
</label>
<label>
<span>Type</span>
<select ng-model="type" ng-change="getCalForAmount()">
<option>rate</option>
<option>unrate</option>
</select>
</label>
<label>
<span>Cal for amount and type</span>
<input type="text" ng-model="calForAmount" readonly />
</label>
</div>
</body>
</html>
Edit
Checkout this demo on Plunker to understand how to load items using http request
Related
I am new to AngularJs and Google charts. My requirement is to show Google charts dynamically in ng-repeat for each li.
<li ng-repeat="ques in surveyquestions">
<label for="{{ques['questions']}}">
{{ques['id']}} {{ques['questions']}}
</label>
<div ng-init="calltry(ques['option_array'],ques['id'])"></div>
<div id="chartdiv{{ques['id']}}"></div>
</li>
In above code through ng-init I pass the data to render the Google chart. In JavaScript I used as below but it's not working.
var chart = new google.visualization.ColumnChart(document.getElementById('chartdiv'+id));
It's working fine when id is static like below.
<div id="chartdiv"></div>
var chart = new google.visualization.ColumnChart(document.getElementById('chartdiv'));
Please help to sort out what is the issue.
Try with angular-google-chart,
Refer :https://angular-google-chart.github.io/angular-google-chart/docs/latest/examples/bar/
<div class="chartContainer" ng-repeat="data in arrayDiv">
<div layout-padding layout-margin google-chart chart="drawChart(data)">
</div>
</div>
$scope.drawChart = function (value) {
$scope.chartData = [];
var chartValue = {
c: [{
v: 'subject
}, {
v: 5,
f: " questions"
}, {
v: 6,
f: " questions"
}]
};
$scope.chartData.push(chartValue);
$scope.qaChart = {};
$scope.qaChart.type = "BarChart";
$scope.qaChart.data = {
"cols": [{
id: "Sections",
label: "Subject",
type: "string"
}, {
id: "Correct",
label: "Correct",
type: "number"
}, {
id: "Wrong",
label: "Wrong",
type: "number"
}],
"rows": $scope.chartData
};
$scope.qaChart.options = {
"isStacked": "true",
"fill": 20,
"displayExactValues": true,
"colors": ['#4CAF50', '#EF5350', '#00adee'],
"vAxis": {
"title": " Questions",
},
"hAxis": {
"title": "Details",
}
};
return $scope.qaChart;
};
When I run my application, both combo boxes show. How to show one and hide the other one when clicking radio buttons?
I stored the state and region in a static json file and use xhrGet to get them.
i want to use dojo combo box for auto-complete.
var cboState;
var cboRegion;
dojo.xhrGet({
url: "../client/stemapp/widgets/samplewidgets/myProject/common.json",
handleAs: "json",
load: function (result) {
require([
"dojo/store/Memory",
"dijit/form/ComboBox",
"dojo/domReady!"
], function (Memory, ComboBox) {
var stateStore = new Memory({
data: result.states
});
var regionStore = new Memory({
data: result.regions
});
cboState = new ComboBox({
id: "state",
name: "state",
placeholder: "Select a State",
store: stateStore,
searchAttr: "name",
autocomplete: true
}, "state");
cboRegion = new ComboBox({
id: "region",
name: "region",
placeholder: "Select a Region",
store: regionStore,
searchAttr: "name",
autocomplete: true
}, "region");
});
}
});
domStyle.set(dom.byId('state'), "display", "block");
domStyle.set(dom.byId('region'), "display", "none");
On(query('.radio'),'change',function(){
query('.query').forEach(function(divElement){
domStyle.set(divElement, "display", "none");
});
domStyle.set(dom.byId(this.dataset.target), "display", "block");
});
<input class="radio" data-target="state" type="radio" name="selection" value="state" > State
<input class="radio" data-target="region" type="radio" name="selection" value="region" > Region
<div id="state" class="query"></div>
<div id="region" class="query"></div>
I let you deal with the creation of the combobox, but here is the code you were trying to write.
it is a simple and basic use of dojo/on
require([
'dojo/dom',
'dojo/dom-construct',
'dojo/dom-class',
'dojo/query',
'dojo/on',
'dojo/store/Memory',
'dijit/form/ComboBox',
'dojo/domReady!'
], function(dom, domConstruct, domClass, query, on, Memory, ComboBox) {
var stateStore = new Memory({
data: [{
name: "Alabama",
id: "AL"
}, {
name: "Alaska",
id: "AK"
}, {
name: "American Samoa",
id: "AS"
}, {
name: "Arizona",
id: "AZ"
}, {
name: "Arkansas",
id: "AR"
}, {
name: "Armed Forces Europe",
id: "AE"
}]
});
var regionStore = new Memory({
data: [{
name: "North Central",
id: "NC"
}, {
name: "South West",
id: "SW"
}]
});
var comboState = new ComboBox({
id: "stateSelect",
name: "state",
store: stateStore,
searchAttr: "name"
});
comboState.placeAt("state");
comboState.startup();
var comboRegion = new ComboBox({
id: "regionSelect",
name: "region",
store: regionStore,
searchAttr: "name"
});
comboRegion.placeAt("region");
comboRegion.startup();
on(query('.radio'), 'change', function(event) {
query('.query').forEach(function(divElement) {
domClass.add(divElement, 'hidden');
});
domClass.remove(dom.byId(event.target.value), 'hidden');
});
});
.hidden {
display: none
}
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/resources/dojo.css">
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/tundra/tundra.css">
<input class="radio" data-target="state" checked="true" type="radio" name="selection" value="state">State
<input class="radio" data-target="region" type="radio" name="selection" value="region">Region
<div id="state" class="query"></div>
<div id="region" class="query hidden"></div>
We are using a custom editor template with custom fields in Agenda View. We have an edit button which fires the editEvent of scheduler. The problem is that, when we update the event, it doesn't fire the update operation.
As you can see, in "add new event" case, it works fine. Also while editing the "repetitive events with series" case, it fires the update operation as desired.
Only problem, we are having is that, while editing a single event (all day event or non-repetitive events), update operation is not fired.
Does anyone have any solution to this?
Here is the link to demo in telerik's dojo :
The HTML:
<div id="example" ng-app="KendoDemos">
<div ng-controller="MyCtrl">
<div class="thisTab clickhereTabScheduledcont boxWrapper">
<div class="agenda" style="position:relative;">
<div kendo-toolbar k-options="toolbarOptions" class="newEvent" id="toolbar" ng-click="schedulerOptions.addEvent()"></div>
<div kendo-scheduler="scheduler" k-options="schedulerOptions">
<span k-event-template class='custom-event'>
<span>{{dataItem.title}}</span>
<hr>
<i class="fa fa-pencil" ng-click="schedulerOptions.editEvent(dataItem)">Edit</i>
</span>
<div k-all-day-event-template class='custom-all-day-event'>{{dataItem.title}}</div>
</div>
</div>
</div>
</div>
Script section:
<script>
angular.module("KendoDemos", [ "kendo.directives" ])
.controller("MyCtrl", function($scope){
$scope.toolbarOptions = {
items: [
{ type: "button", text: "New Event" }
]
};
$scope.schedulerOptions = {
date: new Date("2013/6/13"),
startTime: new Date("2013/6/13 07:00 AM"),
height: 600,
views: [
"agenda"
],
timezone: "Etc/UTC",
editable: {
template: kendo.template($("#customEditorTemplate").html())
},
dataSource: {
batch: true,
transport: {
read: {
url: "http://demos.telerik.com/kendo-ui/service/tasks",
dataType: "jsonp"
},
update: {
url: function (data) {
alert(JSON.stringify(data));
return "http://demos.telerik.com/kendo-ui/service/tasks/update";
},
dataType: "jsonp"
},
create: {
url: function (data) {
alert(JSON.stringify(data));
return "http://demos.telerik.com/kendo-ui/service/tasks/create";
},
},
destroy: {
url: "http://demos.telerik.com/kendo-ui/service/tasks/destroy",
dataType: "jsonp"
},
parameterMap: function(options, operation) {
alert(operation);
}
},
schema: {
model: {
id: "taskId",
fields: {
taskId: { from: "TaskID", type: "number" },
title: { from: "Title", defaultValue: "No title", validation: { required: true } },
start: { type: "date", from: "Start" },
end: { type: "date", from: "End" },
startTimezone: { from: "StartTimezone" },
endTimezone: { from: "EndTimezone" },
description: { from: "Description" },
recurrenceId: { from: "RecurrenceID" },
recurrenceRule: { from: "RecurrenceRule" },
recurrenceException: { from: "RecurrenceException" },
ownerId: { from: "OwnerID", defaultValue: 1 },
isAllDay: { type: "boolean", from: "IsAllDay" }
}
}
},
filter: {
logic: "or",
filters: [
{ field: "ownerId", operator: "eq", value: 1 },
{ field: "ownerId", operator: "eq", value: 2 }
]
}
},
editEvent: function (dataItem) {
alert(JSON.stringify(dataItem));
$scope.scheduler.editEvent(dataItem);
},
addEvent: function () {
$scope.scheduler.addEvent({title: ""});
}
};
})
</script>
Ok,I think first we will pass scheduler event function in edit function.Then you can call api by eventId or as u like.
I have done this issue like that
This is your html template
<div class="thisTab clickhereTabScheduledcont boxWrapper">
<div class="agenda" style="position:relative;">
<div kendo-toolbar k-options="toolbarOptions" class="newEvent" id="toolbar" ng-click="schedulerOptions.addEvent()"></div>
<div kendo-scheduler="scheduler" k-options="schedulerOptions">
<span k-event-template class='custom-event'>
<span>{{dataItem.title}}</span>
<hr>
<i class="fa fa-pencil" ng-click="schedulerOptions.editEvent($event,$event.isRecurrenceHead())">Edit</i>
</span>
<div k-all-day-event-template class='custom-all-day-event'>{{dataItem.title}}</div>
</div>
</div>
</div>
Here is your controller
//you can pass scheduler default function in edit function
var editEventDetails ={};
update: {
url: function (data) {
console.log('update function');
var dt;
data.SignUpDueDate = moment(data.SignUpDueDate).format('YYYY-MM-DD') + "T23:59:59" + ".000Z";
data.ProgramTemplateId = editEventDetails.ProgramTemplateId;
data.IsTeamEvent = editEventDetails.IsTeamEvent;
data.SeasonTeamId = editEventDetails.SeasonTeamId;
data.Description = editEventDetails.Description;
data.CheckAttendance = editEventDetails.CheckAttendance;
data.Remarks = editEventDetails.Remarks;
data.IsSignUpRequired = editEventDetails.IsSignUpRequired;
API.post('/Scheduler/SaveProgramEvent', data).then(function (result) {
}
},
},
editEvent: function (evt) {
var uid = $(evt.target).closest('.k-task').attr("data-uid");
var event = $scope.scheduler.occurrenceByUid(uid);
event.startDate = moment(event.start).format('MM/DD/YYYY h:mm a');
event.endDate = moment(event.end).format('MM/DD/YYYY h:mm a');
dataItem.startDate = moment(event.start).format('MM/DD/YYYY h:mm a');
dataItem.endDate = moment(event.end).format('MM/DD/YYYY h:mm a');
$scope.scheduler.editEvent(event);
},
edit: function (e) {
console.log('EDIT');
if (e.event.eventMetaId != null && e.event.eventMetaId != undefined && e.event.eventMetaId != 0) {
var detailParams = {
EventMetaId: (e.event.recurrenceId !== 0 && e.event.eventMetaId === 0) ? e.event.recurrenceId : e.event.eventMetaId,
OwnerOrganizationId: _orgId,
UserTimezone: global.userTimezoneOffset// userTimezone
};
API.get('/Scheduler/GetEventDetailById', detailParams).then(function (data) {
editEventDetails = data;
mapEventDetail(editEventDetails, e.event)
});
setTimeout(function () {
e.event.startDate = moment(e.event.start).format('MM/DD/YYYY h:mm a');
e.event.endDate = moment(e.event.end).format('MM/DD/YYYY h:mm a');
e.event.recurrenceException = editEventDetails.recurrenceException;
$scope.$apply();
}, 0);
}
},
Here mapEventDetail is map function database and scheduler model
you can use mapEventDetail like that:--
var mapEventDetail = function (fromObj, toObj) {
toObj.programTemplateId = fromObj.ProgramTemplateId;
toObj.isTeamEvent = fromObj.IsTeamEvent;
toObj.seasonTeamId = fromObj.SeasonTeamId;
toObj.description = fromObj.Description;
toObj.checkAttendance = fromObj.CheckAttendance;
toObj.remarks = fromObj.Remarks;
return toObj;
};
I can Post data , with first method, but when i am using $resource POST, it doesn't work. Whats wrong with my createInventory function
$scope.addInventory = function(inventory, $location) {
$http.post("http://localhost/api/v1/inventory/", inventory)
.success(function(data) {
$scope.info.objects.key = data;
$location.path('/inventory');
});
};
And with this method it doesnt work at all
$scope.createInventory = function(){
Inventory.create($scope.info);
$location.path('/inventory/add/');
};
Here goes the template
<label>Name</label>
<input class="form-control" type="text" ng-model="inventory.name" /><br />
<label>Slug</label>
<input class="form-control" type="text" ng-model="inventory.slug" /><br />
<label>Description</label>
<input class="form-control" type="text" ng-model="inventory.description" /><br />
<label>Category</label>
<select ng-show="!show" ng-model="inventory.category" ng-options="category.name for category in category.objects">
<option value="" selected>--Please select your category--</option>
</select>
<input type="button" class="btn btn-primary" ng-click="createInventory()" value="Save" />
I have ng-repeat defined in other template
ng-repeat="inventory in info.objects"
Here if needed is my factory
app.factory('Category', function($resource, $http) {
return $resource('http://localhost/api/v1/category/:id/', {},
{
update: {
method: 'POST',
isArray: false
},
save: {
method: 'PUT'
},
query: {
method: 'GET',
isArray: false
},
create: {
method: 'POST'
},
drop: {
method: 'DELETE',
params: {id: '#id'}
}
}
);
});
Entire controller
app.controller('InventoryCtrl', function($scope, $http, Inventory, Category, $location) {
$scope.createInventory = function(){
Inventory.create($scope.info);
$location.path('/inventory/add/');
};
$scope.info = Inventory.query();
$scope.category = Category.query();
$scope.addInventory = function(inventory, $location) {
$http.post("http://api.bos.lv/api/v1/inventory/", inventory)
.success(function(data) {
$scope.info.objects.key = data;
});
};
});
my api
{
meta: {
limit: 20,
next: null,
offset: 0,
previous: null,
total_count: 2
},
objects: [
{
category: {},
count: 1,
created: "2014-02-27T16:23:40.813690",
description: "asd",
id: 50,
location: "asd",
name: "asd",
resource_uri: "/api/v1/inventory/50",
slug: "asd",
status: "Broken"
},
{
category: {},
count: 1,
created: "2014-02-27T16:46:05.017178",
description: "asd",
id: 51,
location: "sad",
name: "bubu",
resource_uri: "/api/v1/inventory/51",
slug: "bubu",
status: "Broken"
}
]
}
I'm guessing you need to wait for the post to finish before you can move to another location... so you need to change the path on the callback.
$scope.createInventory = function(){
Inventory.create($scope.info, function(param) {
$location.path('/inventory/add/');
);
};
I'm experimenting with AngularJS. I want to show a basic Kendo Grid. I'm trying to do this using pure directives. With that in mind, I've looked at the Kendo UI / Angular JS project (https://github.com/kendo-labs/angular-kendo). Unfortunately, my
index.html:
<div>Products: {{products.length}}</div>
<div kendo-grid k-data-source="products" k-selectable="'row'"
k-pageable='{ "refresh": true, "pageSizes": true }'
k-columns='[
{ "field": "Name", "title": "Name"},
{ "field": "Department", "title": "Department"},
{ "field": "LastShipment", "title": "Last Shipment" }
]'>
</div>
controllers.js
function myController($scope) {
console.log("initializing controller...");
$scope.products = [
{ id:1, name:'Tennis Balls', department:'Sports', lastShipment:'10/01/2013' },
{ id:2, name:'Basket Balls', department:'Sports', lastShipment:'10/02/2013' },
{ id:3, name:'Oil', department:'Auto', lastShipment:'10/01/2013' },
{ id:4, name:'Filters', department:'Auto', lastShipment:'10/01/2013' },
{ id:5, name:'Dresser', department:'Home Furnishings', lastShipment:'10/01/2013' }
];
}
I've verified that I've wired up the controller properly. The activity count shows properly. However, the grid does not appear. I can't figure out what I'm doing incorrectly.
Thank you for your help.
You can also setup a Kendo DataSource as an AngularJS Service using the Factory method and inject this into your Controller to conform to AngularJS best practices and patterns.
Full source code and live demo: http://goo.gl/6Z9jop
Customer.cshtml
#{
ViewBag.Title = "Index";
}
<div>
<h2 ng-cloak>{{title}}</h2>
<div>
<div class="demo-section">
<div class="k-content" style="width: 100%">
<div kendo-grid="grid"
k-sortable="true"
k-pageable="true"
k-filterable="true"
k-editable="'inline'"
k-selectable="true"
k-columns='[
{ field: "CustomerID", title: "ID", width: "75px" },
{ field: "CompanyName", title: "Company"},
{ field: "ContactName", title: "Contact" },
{ field: "ContactTitle", title: "Title" },
{ field: "Address" },
{ field: "City" },
{ field: "PostalCode" },
{ field: "Country" },
{ field: "Phone" },
{ field: "Fax" }]'
>
</div>
<style scoped>
.toolbar { padding: 15px; float: right; }
</style>
</div>
</div>
<script type="text/x-kendo-template" id="toolbar">
<div>
<div class="toolbar">
<button kendo-button ng-click="edit(this)"><span class="k-icon k-i-tick"></span>Edit</button>
<button kendo-button ng-click="destroy(this)"><span class="k-icon k-i-tick"></span>Delete</button>
<button kendo-button ng-click="details(this)"><span class="k-icon k-i-tick"></span>Edit Details</button>
</div>
<div class="toolbar" style="display:none">
<button kendo-button ng-click="save(this)"><span class="k-icon k-i-tick"></span>Save</button>
<button kendo-button ng-click="cancel(this)"><span class="k-icon k-i-tick"></span>Cancel</button>
</div>
</div>
</script>
</div>
</div>
customerController.js
'use strict';
northwindApp.controller('customerController',
function ($scope, $rootScope, $location, customerDataSource)
{
customerDataSource.filter({}); // reset filter on dataSource everytime view is loaded
var onClick = function (event, delegate)
{
var grid = event.grid;
var selectedRow = grid.select();
var dataItem = grid.dataItem(selectedRow);
if (selectedRow.length > 0)
{
delegate(grid, selectedRow, dataItem);
}
else
{
alert("Please select a row.");
}
};
$scope.toolbarTemplate = kendo.template($("#toolbar").html());
$scope.save = function (e)
{
onClick(e, function (grid)
{
grid.saveRow();
$(".toolbar").toggle();
});
};
$scope.cancel = function (e)
{
onClick(e, function (grid)
{
grid.cancelRow();
$(".toolbar").toggle();
});
},
$scope.details = function (e)
{
onClick(e, function (grid, row, dataItem)
{
$location.url('/customer/edit/' + dataItem.CustomerID);
});
},
$scope.edit = function (e)
{
onClick(e, function (grid, row)
{
grid.editRow(row);
$(".toolbar").toggle();
});
},
$scope.destroy = function (e)
{
onClick(e, function (grid, row, dataItem)
{
grid.dataSource.remove(dataItem);
grid.dataSource.sync();
});
},
$scope.onChange = function (e)
{
var grid = e.sender;
$rootScope.lastSelectedDataItem = grid.dataItem(grid.select());
},
$scope.dataSource = customerDataSource;
$scope.onDataBound = function (e)
{
// check if there was a row that was selected
if ($rootScope.lastSelectedDataItem == null)
{
return;
}
var view = this.dataSource.view(); // get all the rows
for (var i = 0; i < view.length; i++)
{
// iterate through rows
if (view[i].CustomerID == $rootScope.lastSelectedDataItem.CustomerID)
{
// find row with the lastSelectedProductd
var grid = e.sender; // get the grid
grid.select(grid.table.find("tr[data-uid='" + view[i].uid + "']")); // set the selected row
break;
}
}
};
});
customerDataSource.js
'use strict';
northwindApp.factory('customerDataSource',
function (customerModel)
{
var crudServiceBaseUrl = "/odata/Customer";
return new kendo.data.DataSource({
type: "odata",
transport: {
read: {
async: false,
url: crudServiceBaseUrl,
dataType: "json"
},
update: {
url: function (data)
{
return crudServiceBaseUrl + "(" + data.CustomerID + ")";
},
type: "put",
dataType: "json"
},
destroy: {
url: function (data)
{
return crudServiceBaseUrl + "(" + data.CustomerID + ")";
},
dataType: "json"
}
},
batch: false,
serverPaging: true,
serverSorting: true,
serverFiltering: true,
pageSize: 10,
schema: {
data: function (data) { return data.value; },
total: function (data) { return data["odata.count"]; },
model: customerModel
},
error: function (e)
{
alert(e.xhr.responseText);
}
});
});
It looks as if the field names are spelled wrong. The following works for me:
<div kendo-grid k-data-source="products" k-selectable="'row'"
k-pageable='{ "pageSize": 2, "refresh": true, "pageSizes": true }'
k-columns='[
{ "field": "name", "title": "Name"},
{ "field": "department", "title": "Department"},
{ "field": "lastShipment", "title": "Last Shipment" }
]'>
</div>
Here is a live demo: http://jsbin.com/odeQAfI/2/edit
To avoid the NaN message in the pager you need to make the products field to be a Kendo DataSource:
function MyController($scope) {
$scope.products = new kendo.data.DataSource({
data: [
{ id:1, name:'Tennis Balls', department:'Sports', lastShipment:'10/01/2013' },
{ id:2, name:'Basket Balls', department:'Sports', lastShipment:'10/02/2013' },
{ id:3, name:'Oil', department:'Auto', lastShipment:'10/01/2013' },
{ id:4, name:'Filters', department:'Auto', lastShipment:'10/01/2013' },
{ id:5, name:'Dresser', department:'Home Furnishings', lastShipment:'10/01/2013' }
],
pageSize: 2
});
}
Here is a live demo: http://jsbin.com/ODElUfO/2/edit