I am using https://wix.github.io/angular-tree-control/#multi-selection to work on tree structure example.I am not getting the expected result in a proper format.Below is the code and also attached plunkr to it.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://wix.github.io/angular-tree-control/angular-tree-control.js"></script>
<link href="https://wix.github.io/angular-tree-control/css/tree-control.css" />
<link href="https://wix.github.io/angular-tree-control/css/tree-control-attribute.css" />
</head>
<div ng-app="app">
<div ng-controller="myController">
<treecontrol class="tree-classic"
tree-model="dataForTheTree"
options="treeOptions"
on-selection="showSelected(node)"
selected-node="node1">
employee: {{node.name}} age {{node.age}}
</treecontrol>
</div>
</div>
angular.module('app', ['treeControl'])
.controller('myController', function() {
$scope.treeOptions = {
nodeChildren: "children",
dirSelectable: true,
injectClasses: {
ul: "a1",
li: "a2",
liSelected: "a7",
iExpanded: "a3",
iCollapsed: "a4",
iLeaf: "a5",
label: "a6",
labelSelected: "a8"
}
}
$scope.dataForTheTree =
[
{ "name" : "Joe", "age" : "21", "children" : [
{ "name" : "Smith", "age" : "42", "children" : [] },
{ "name" : "Gary", "age" : "21", "children" : [
{ "name" : "Jenifer", "age" : "23", "children" : [
{ "name" : "Dani", "age" : "32", "children" : [] },
{ "name" : "Max", "age" : "34", "children" : [] }
]}
]}
]},
{ "name" : "Albert", "age" : "33", "children" : [] },
{ "name" : "Ron", "age" : "29", "children" : [] }
];
});
Here is the attached plunkr https://plnkr.co/edit/bQHOIQ2HDPr4WJaukB8I?p=preview
I noticed that two things are missing:
The context-menu module is missing.
There is no rel="stylesheet" in added CSS links.
Even though angular-tree-control readme says:
Include context-menu module if you're going to use menu-id attribute
I found issues reported in their GitHub page like this one, which is due to missing context-menu module.
Add following line to include context-menu module:
<script type="text/javascript" src="https://wix.github.io/angular-tree-control/context-menu.js"></script>
Also please update link elements to include rel attribute like follows:
<link rel="stylesheet" href="https://wix.github.io/angular-tree-control/css/tree-control.css" />
<link rel="stylesheet" href="https://wix.github.io/angular-tree-control/css/tree-control-attribute.css" />
There is no need to add CSS as in Plunker which is the duplicate of above links.
Hope this fixes your issues. Here is the full code of a working example:
angular.module('app', ['treeControl'])
.controller('myController', ['$scope', function($scope) {
$scope.treeOptions = {
nodeChildren: "children",
dirSelectable: true,
injectClasses: {
ul: "a1",
li: "a2",
liSelected: "a7",
iExpanded: "a3",
iCollapsed: "a4",
iLeaf: "a5",
label: "a6",
labelSelected: "a8"
}
}
$scope.dataForTheTree = [{
"name": "Joe",
"age": "21",
"children": [{
"name": "Smith",
"age": "42",
"children": []
},
{
"name": "Gary",
"age": "21",
"children": [{
"name": "Jenifer",
"age": "23",
"children": [{
"name": "Dani",
"age": "32",
"children": []
},
{
"name": "Max",
"age": "34",
"children": []
}
]
}]
}
]
},
{
"name": "Albert",
"age": "33",
"children": []
},
{
"name": "Ron",
"age": "29",
"children": []
}
];
}]);
treecontrol.tree-classic li .full {
display: none;
}
treecontrol.tree-classic li .empty {
display: inline;
}
treecontrol.tree-classic li .tree-selected .full {
display: inline;
}
treecontrol.tree-classic li .tree-selected .empty {
display: none;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://wix.github.io/angular-tree-control/angular-tree-control.js"></script>
<script type="text/javascript" src="https://wix.github.io/angular-tree-control/context-menu.js"></script>
<link rel="stylesheet" href="https://wix.github.io/angular-tree-control/css/tree-control.css" />
<link rel="stylesheet" href="https://wix.github.io/angular-tree-control/css/tree-control-attribute.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
</head>
<body ng-app="app">
<div ng-controller="myController">
<treecontrol class="tree-classic" tree-model="dataForTheTree" options="treeOptions" on-selection="showSelected(node)" selected-node="node1">
<span class="fa fa-square-o empty"></span>
<span class="fa fa-square full"></span> employee: {{node.name}} age {{node.age}}
</treecontrol>
</div>
</body>
</html>
UPDATE on 10/08/2018: edited the code snippet to add checkboxes using FontAwsome.
Related
My Index.html
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
<script src="client/delljson.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<body ng-app="myApp" ng-controller="myCtrl" style="background-color:orange;">
<h1><marquee width="40%" direction="right" >Resume</marquee></h1>
<a href='#!/main'>Press</a>
<div ng-view>
</div>
</body>
</html>
My Main.html
<div class="row">
<div class="col-md-4">
<h2><u>Personal Information</u></h2>
<p>{{deljson.personalInformation.name}}</p>
<p>{{deljson.personalInformation.dob}}</p>
<p>{{deljson.personalInformation.fatherName}}</p>
<p>{{deljson.personalInformation.gender}}</p>
<p>{{deljson.personalInformation.nationality}}</p>
<p>{{deljson.personalInformation.maritalStatus}}</p>
</div>
<div class="col-md-4">
<h3><u>Educational Information</u></h3>
<h4><u>SSLC</u></h4>
<p>{{deljson.educationInformation.sslc.institueName}}</p>
<p>{{deljson.educationInformation.sslc.studyBoard}}</p>
<p>{{deljson.educationInformation.sslc.percentage}}</p>
<p>{{deljson.educationInformation.sslc.yearOfPassedout}}</p>
<h4><u>HSC</u></h4>
<p>{{deljson.educationInformation.hsc.institueName}}</p>
<p>{{deljson.educationInformation.hsc.studyBoard}}</p>
<p>{{deljson.educationInformation.hsc.percentage}}</p>
<p>{{deljson.educationInformation.hsc.yearOfPassedout}}</p>
<h4><u>UG</u></h4>
<p>{{deljson.educationInformation.ug.institueName}}</p>
<p>{{deljson.educationInformation.ug.studyBoard}}</p>
<p>{{deljson.educationInformation.ug.percentage}}</p>
<p>{{deljson.educationInformation.ug.yearOfPassedout}}</p>
</div>
<div class="col-md-4">
<h3><u>Work Experience</u></h3>
<p>{{deljson.experience.previousExperience.companyName}}</p>
<p>{{deljson.experience.previousExperience.Position}}</p>
<p>{{deljson.experience.previousExperience.period}}</p>
<p>{{deljson.experience.previousExperience.responsibility}}</p>
</div>
</div>
My Js and Json File
var app = angular.module('myApp', ['ngRoute']);
app.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/main', {
templateUrl : 'main.html',
controller : 'first'
})
}]);
app.controller('first', ['$scope', '$locationProvider', function($scope){
$location.path("/main.html" );
}]);
app.controller('myCtrl', function($scope) {
$scope.deljson = {
"personalInformation": {
"name": "Raaj Kumar",
"dob": "13/5/1994",
"fatherName": "Suresh",
"gender": "Male",
"nationality": "Indian",
"maritalStatus": "Single"
},
"educationInformation": {
"sslc": {
"institueName": "G.K.S.V.V.J.C",
"studyBoard": "CBSE",
"percentage": "45%",
"yearOfPassedout": "2009"
},
"hsc": {
"institueName": "S.V.M.H.S.S",
"studyBoard": "Matriculation",
"percentage": "55%",
"yearOfPassedout": "2011"
},
"ug": {
"institueName": "S.T. Peter'S Engineering College",
"course": "B.Tech (It)",
"percentage": "59%",
"yearOfPassedout": "2016"
}
},
"experience": {
"previousExperience": {
"companyName": "Purple Soft Technology",
"Position": "SEO Analyst",
"period": "2018-19",
"responsibility": "SEO"
}
},
"personalSkills": [
"Gaming"
],
"technicalSkills": [
"Digital Marketing",
"HTML",
"CSS",
"JS"
]
}
});
The Objective is to make a anchor text and link the main ,html to it and when clicked it should display the main.html in my ng-view.
I tried many methods watching the you tube but its not working out. the ng-view is displaying a template but its not displaying an template url.
I have solved the problem, but there was numerous errors in the code (missing doctype, divs without end tags and so on), so I have recoded a lot of it. I have taken out the $locationprovider, IMO its not so great a feature, people cant bookmark the page,(unless you make a lot of changes in ie. HTACCESS). So I dont like it.
I have also updated angularjs to 1.7.8.
If you want to use locationprovider, please note that there was some changes to it when upgrading to 1.7.8.
INDEX.HTML
<!DOCTYPE html>
<html ng-app="myApp">
<meta charset="utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular-route.js"></script>
<script src="/client/delljson.js"></script>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"
/>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"
/>
<body ng-controller="myCtrl" style="background-color:orange;">
<h1><marquee width="40%" direction="right">Resume</marquee></h1>
Press
<ng-view></ng-view>
</body>
</html>
AngularJS
var app = angular.module('myApp', ['ngRoute']);
app.controller('first', function($scope){
});
app.config(function($routeProvider) {
$routeProvider.when('/main', {
templateUrl : 'main.html',
controller:'first'
}).
otherwise({
redirectTo: '/'
});
});
app.controller('myCtrl', function($scope) {
$scope.deljson = {
"personalInformation": {
"name": "Raaj Kumar",
"dob": "13/5/1994",
"fatherName": "Suresh",
"gender": "Male",
"nationality": "Indian",
"maritalStatus": "Single"
},
"educationInformation": {
"sslc": {
"institueName": "G.K.S.V.V.J.C",
"studyBoard": "CBSE",
"percentage": "45%",
"yearOfPassedout": "2009"
},
"hsc": {
"institueName": "S.V.M.H.S.S",
"studyBoard": "Matriculation",
"percentage": "55%",
"yearOfPassedout": "2011"
},
"ug": {
"institueName": "S.T. Peter'S Engineering College",
"course": "B.Tech (It)",
"percentage": "59%",
"yearOfPassedout": "2016"
}
},
"experience": {
"previousExperience": {
"companyName": "Purple Soft Technology",
"Position": "SEO Analyst",
"period": "2018-19",
"responsibility": "SEO"
}
},
"personalSkills": [
"Gaming"
],
"technicalSkills": [
"Digital Marketing",
"HTML",
"CSS",
"JS"
]
}
});
I use this library to show charts in my AngularJS application and it works fine:
AngularJS charts
The only thing I could not get done is to show the legend. Does anyone know how to do it?
Use legend: {display: true} in options
DEMO
angular.module("app", ["chart.js"])
.controller("BarCtrl", function($scope) {
$scope.options = {legend: {display: true}};
$scope.commonEstimationStats = {
rates: [{
"direction": {
"id": 13,
"name": "health",
"type": 1
},
"points": 5
}, {
"direction": {
"id": 14,
"name": "education",
"type": 1
},
"points": 3
}]
};
$scope.labels = [];
$scope.data = [];
angular.forEach($scope.commonEstimationStats.rates, function(key, value) {
$scope.labels.push(key.direction.name);
$scope.data.push(key.points);
})
$scope.datasetOverride = [{
fill: true,
backgroundColor: [
"#66ff33",
"#36A2EB",
"#FFCE56"
]
}, {
fill: true,
backgroundColor: [
"#ffff00",
"#46BFBD",
"#FDB45C"
]
}];
});
<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="jquery#*" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<script src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.0/Chart.min.js"></script>
<script src="//cdn.jsdelivr.net/angular.chartjs/latest/angular-chart.min.js"></script>
</head>
<body>
<div ng-controller="BarCtrl">
<canvas id="bar" class="chart chart-pie" chart-data="data" chart-dataset-override="datasetOverride" chart-series="series" chart-labels="labels" chart-options="options"></canvas>
</div>
</body>
</html>
Is posibble in AngularJS1.X by using ng-repeat directive, for JSON named weeks_and_days:
`[{
"week_nr": "1",
"day_nr": "1,2,3,4,5,6,7"
}, {
"week_nr": "2",
"day_nr": "8,9,10,11,12,13,14"
}, {
"week_nr": "3",
"day_nr": "15,16,17,18,19,20,21"
}, {
"week_nr": "4",
"day_nr": "22,23,24,25,26,27,28"
}, {
"week_nr": "5",
"day_nr": "29,30,31"
}]`
to get each and every day_nr, so for example, for week_nr: 1 I would sepearte results as: "1" "2" "3" "4" "5" "6" "7" ?
If it is possible how should the AngularJS {{expression}} look in this case? If it's not possible, how would have to be this JSON constructed to achive my goal?
For the request in comment I'm attaching the html files, index.html:
`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Calendar </title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="main.css" rel="stylesheet">
<!-- Include the core AngularJS library -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
<!-- Include the AngularJS routing library -->
<script src="https://code.angularjs.org/1.2.28/angular-route.min.js"></script>
</head>
<body ng-app="CalendarApp">
<div ng-view>
</div>
<!-- Modules -->
<script src="js/app.js"></script>
<!-- Controllers -->
<script src="js/controllers/DaysController.js"></script>
<!-- Services -->
<script src="js/services/days.js"></script>
</body>
</html>`
and the view test.html:
`<div ng-repeat="week in weeks_and_days">
<p> {{week}} </p>
</div> `
var app = angular.module('myApp',[]);
app.controller('ctrl', function($scope){
$scope.weeks_and_days = [{
"week_nr": "1",
"day_nr": "1,2,3,4,5,6,7"
}, {
"week_nr": "2",
"day_nr": "8,9,10,11,12,13,14"
}, {
"week_nr": "3",
"day_nr": "15,16,17,18,19,20,21"
}, {
"week_nr": "4",
"day_nr": "22,23,24,25,26,27,28"
}, {
"week_nr": "5",
"day_nr": "29,30,31"
}]
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="myApp" ng-controller="ctrl">
<div ng-repeat="week in weeks_and_days">
<p>Week : {{week.week_nr}}</p> <p>Days : {{week.day_nr}}</p>
<div>
</body>
I hope this will help.Please add the necessory style. Always consider grouping multiple data as arrays, and pass numbers as numbers itself, It will increase the performance. Thanks #Manikandan for the reference code. Thank you.
var app = angular.module('myApp',[]);
app.controller('ctrl', function($scope){
$scope.weeks_and_days = [{
"week_nr": 1,
"day_nr": [1,2,3,4,5,6,7]
}, {
"week_nr": 2,
"day_nr": [8,9,10,11,12,13,14]
}, {
"week_nr": 3,
"day_nr": [15,16,17,18,19,20,21]
}, {
"week_nr": 4,
"day_nr": [22,23,24,25,26,27,28]
}, {
"week_nr": 5,
"day_nr": [29,30,31]
}]
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp" ng-controller="ctrl">
<table>
<tr><th>Week</th><th>Day</th></tr>
<tr ng-repeat="week in weeks_and_days"><td>{{week.week_nr}}</td><td ng-repeat="day in week.day_nr">{{day}} </td></tr>
</table>
</body>
Considering your JSON is in your scope. Can't you use an ng-repeat to repeat through your weeks_and_days like:
ng-repeat="week in weeks_and_days"
Then use the following expressions to display them:
{{week.week_nr}}
{{week.day_nr}}
This is my code
// Code goes here
var app = angular.module('app', ['ui.grid']);
app.controller('MainCtrl', ['$scope', '$log', function ($scope, $log) {
$scope.gridOptions = {};
$scope.gridOptions.columnDefs = [
{ name: 'firstName',cellTemplate:'<a ng-model=firstName></a>'},
{ name: 'lastName'},
{ name: 'Hyperlink',
cellTemplate:'<div>' +
' Click me' +
'</div>' }
];
$scope.gridOptions.data = [
{
"firstName": "Cox",
"lastName": "Carney",
"company": "Enormo",
"employed": true
},
{
"firstName": "Lorraine",
"lastName": "Wise",
"company": "Comveyer",
"employed": false
},
{
"firstName": "Nancy",
"lastName": "Waters",
"company": "Fuelton",
"employed": false
}
];
}]);
<!doctype html>
<html ng-app="app">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-touch.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-animate.js"></script>
<script src="http://ui-grid.info/release/ui-grid-unstable.js"></script>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid-unstable.css" type="text/css">
<link rel="stylesheet" href="main.css" type="text/css">
</head>
<body>
<div ng-controller="MainCtrl">
<div ui-grid="gridOptions" class="grid"></div>
</div>
<script src="script.js"></script>
</body>
</html>
This is my plunker:- http://plnkr.co/edit/WFSbpkYv91af3uAbBnIp?p=preview
In the above code display firstname without link format.but i want to display firsname column data in link format.
Here is an example of cellTemplate that will display the name
cellTemplate:'{{ row.entity.firstName }}'
http://plnkr.co/edit/F5PS4nCzLkywnSzazMNx
Regards,
Eric
I wanted to add autocomplete kendo box in kendo grid using angularjs.
Sample here is in JQUERY Kendo grid in Product Name field.Click on field and edit or add new row. Please help with such implementation using AngularJS Kendo Grid,
function Editor2(container, options) {
$('<input id="autocomplete" required data-text-field="ProductName" data-value-field="ProductID" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoAutoComplete({
dataSource: dataSource,
dataTextField: "ProductName"
});
}
Please run below code in plunker to learn how to bind AngularJS Kendo Grid
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/grid/angular">
<style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.default.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.default.min.css" />
<script src="http://cdn.kendostatic.com/2014.3.1119/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1119/js/angular.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example" ng-app="KendoDemos">
<div ng-controller="MyCtrl">
<kendo-grid options="mainGridOptions">
</kendo-grid>
</div>
</div>
<script>
angular.module("KendoDemos", [ "kendo.directives" ])
.controller("MyCtrl", function($scope){
$scope.countryNames = [
"Albania",
"Andorra",
"Armenia",
"Austria",
"Azerbaijan",
"Belarus",
"Belgium",
"Bosnia & Herzegovina",
"Bulgaria",
"Croatia",
"Cyprus",
"Czech Republic",
"Denmark",
"Estonia",
"Finland",
"France",
"Georgia",
"Germany",
"Greece",
"Hungary",
"Iceland",
"Ireland",
"Italy",
"Kosovo",
"Latvia",
"Liechtenstein",
"Lithuania",
"Luxembourg",
"Macedonia",
"Malta",
"Moldova",
"Monaco",
"Montenegro",
"Netherlands",
"Norway",
"Poland",
"Portugal",
"Romania",
"Russia",
"San Marino",
"Serbia",
"Slovakia",
"Slovenia",
"Spain",
"Sweden",
"Switzerland",
"Turkey",
"Ukraine",
"United Kingdom",
"Vatican City"
];
var data = new kendo.data.DataSource({
data: [
{Name: "Albania"},
{Name:"Andorra"},
{Name:"Armenia"},
{Name:"Austria"},
{Name:"Azerbaijan"},
{Name:"Belarus"},
{Name:"Belgium"},
{Name:"Bosnia & Herzegovina"},
{Name:"Bulgaria"},
{Name:"Croatia"},
{Name:"Cyprus"},
{Name:"Czech Republic"},
{Name:"Denmark"},
{Name:"Estonia"},
{Name:"Finland"},
{Name:"France"},
{Name:"Georgia"},
{Name:"Germany"},
{Name:"Greece"},
{Name:"Hungary"},
{Name:"Iceland"},
{Name:"Ireland"},
{Name:"Italy"},
{Name:"Kosovo"},
{Name:"Latvia"},
{Name:"Liechtenstein"},
{Name:"Lithuania"},
{Name:"Luxembourg"},
{Name:"Macedonia"},
{Name:"Malta"},
{Name:"Moldova"},
{Name:"Monaco"},
{Name:"Montenegro"},
{Name:"Netherlands"},
{Name:"Norway"},
{Name:"Poland"},
{Name:"Portugal"},
{Name:"Romania"},
{Name:"Russia"},
{Name:"San Marino"},
{Name:"Serbia"},
{Name:"Slovakia"},
{Name:"Slovenia"},
{Name:"Spain"},
{Name:"Sweden"},
{Name:"Switzerland"},
{Name:"Turkey"},
{Name:"Ukraine"},
{Name: "United Kingdom"},
{Name:"Vatican City"}
]});
Editor2 = function (container, options){
$('<input data-bind="value:' + options.field + '" style="width: 100px" />')
.appendTo(container)
.kendoAutoComplete({
dataSource: options.values
});};
$scope.mainGridOptions = {
dataSource: data,
sortable: true,
pageable: true,
columns: [{
field: "Name",
title: "Name",
width: "120px",
editor: Editor2,
values: $scope.countryNames
}],editable: true
};
})
</script>
</body>
</html>
Code from http://demos.telerik.com/kendo-ui/grid/angular,
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="styles/kendo.common.min.css" />
<link rel="stylesheet" href="styles/kendo.default.min.css" />
<link rel="stylesheet" href="styles/kendo.dataviz.min.css" />
<link rel="stylesheet" href="styles/kendo.dataviz.default.min.css" />
<script src="js/jquery.min.js"></script>
<script src="js/angular.min.js"></script>
<script src="js/kendo.all.min.js"></script>
</head>
<body>
<div id="example" ng-app="KendoDemos">
<div ng-controller="MyCtrl">
<kendo-grid options="mainGridOptions">
<div k-detail-template>
<kendo-tabstrip>
<ul>
<li class="k-state-active">Orders</li>
<li>Contact information</li>
</ul>
<div>
<div kendo-grid k-options="detailGridOptions(dataItem)"></div>
</div>
<div>
<ul>
<li>Country: <input ng-model="dataItem.Country" /></li>
<li>City: <input ng-model="dataItem.City" /></li>
<li>Address: {{dataItem.Address}}</li>
<li>Home phone: {{dataItem.HomePhone}}</li>
</ul>
</div>
</kendo-tabstrip>
</div>
</kendo-grid>
</div>
</div>
<script>
angular.module("KendoDemos", [ "kendo.directives" ])
.controller("MyCtrl", function($scope){
$scope.mainGridOptions = {
dataSource: {
type: "odata",
transport: {
read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Employees"
},
pageSize: 5,
serverPaging: true,
serverSorting: true
},
sortable: true,
pageable: true,
dataBound: function() {
this.expandRow(this.tbody.find("tr.k-master-row").first());
},
columns: [{
field: "FirstName",
title: "First Name",
width: "120px"
},{
field: "LastName",
title: "Last Name",
width: "120px"
},{
field: "Country",
width: "120px"
},{
field: "City",
width: "120px"
},{
field: "Title"
}]
};
$scope.detailGridOptions = function(dataItem) {
return {
dataSource: {
type: "odata",
transport: {
read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
},
serverPaging: true,
serverSorting: true,
serverFiltering: true,
pageSize: 5,
filter: { field: "EmployeeID", operator: "eq", value: dataItem.EmployeeID }
},
scrollable: false,
sortable: true,
pageable: true,
columns: [
{ field: "OrderID", title:"ID", width: "56px" },
{ field: "ShipCountry", title:"Ship Country", width: "110px" },
{ field: "ShipAddress", title:"Ship Address" },
{ field: "ShipName", title: "Ship Name", width: "190px" }
]
};
};
})
</script>
</body>
</html>