I am using kendo UI grid with angular and I want to bind grid using json file (model.json) stored in the root directory as the index.html (I am using visual studio 2013 and web empty project template). My javascript controller is stored in Scripts/app/ directory.
This is my json file:
{
"model": [
{
"RowNumber": "1",
"AccountNo": "10236",
"PostingDate": "20.01.2015",
"AmountDebit": "1800.0",
"AmountCredit": "1500.0",
"Balance": "300.0",
"Description": "Neki Opis"
},
{
"RowNumber": "2",
"AccountNo": "10648",
"PostingDate": "26.01.2015",
"AmountDebit": "3000.0",
"AmountCredit": "1700.0",
"Balance": "1300.0",
"Description": "skafiskafnjak"
},
{
"RowNumber": "3",
"AccountNo": "10700",
"PostingDate": "22.01.2015",
"AmountDebit": "2900.0",
"AmountCredit": "1800.0",
"Balance": "1100.0",
"Description": "knjizenje"
},
{
"RowNumber": "4",
"AccountNo": "10810",
"PostingDate": "24.01.2015",
"AmountDebit": "3800.0",
"AmountCredit": "1400.0",
"Balance": "2400.0",
"Description": "hlabuka"
},
{
"RowNumber": "5",
"AccountNo": "10101",
"PostingDate": "29.01.2015",
"AmountDebit": "3800.0",
"AmountCredit": "1500.0",
"Balance": "2300.0",
"Description": "Neki Opis"
},
{
"RowNumber": "6",
"AccountNo": "10364",
"PostingDate": "25.01.2015",
"AmountDebit": "4300.0",
"AmountCredit": "1800.0",
"Balance": "2500.0",
"Description": "TestNova"
}
]
}
This is my controller:
(function () {
'use strict';
angular.module("app", ["kendo.directives"]).controller("generalledgerController", function ($scope, $http) {
$scope.gridMaster = {
dataSource: {
dataType: "json",
transport: {
read: "model.json"
},
schema: {
data: "model"
}
},
selectable: true,
sortable: true,
pageable: {
refresh: true,
pageSize: true,
buttonCount: 5
},
columns: [
{ field: "RowNumber", title: "R. Br.", width: "50px", template: '<div style="text-align:center;">#= kendo.toString(RowNumber) #</div>' },
{ field: "AccountNo", title: " Br. Knjiženja", width: "77px", template: '<div style="text-align:left;">#= kendo.toString(AccountNo) #</div>' },
{ field: "PostingDate", title: "Datum", width: "70px" },
{ field: "Description", title: "Opis", width: "170px" },
{ field: "AmountCredit", title: "Duguje", width: "80px", template: '<div style="text-align:right;">#= kendo.toString(AmountCredit, "n2") #</div>' },
{ field: "AmountDebit", title: "Potražuje", width: "80px", template: '<div style="text-align:right;">#= kendo.toString(AmountDebit, "n2") #</div>' },
{ field: "Balance", title: "Saldo", width: "80px", template: '<div style="text-align:right;">#= kendo.toString(Balance, "n2") #</div>' }
],
toolbar: ["create"]
};
});
})();
This is my html page:
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html">
<link rel="stylesheet" type="text/css" media="all" href="content/bootstrap.css">
<link rel="stylesheet" type="text/css" media="all" href="content/metisMenu.css">
<link rel="stylesheet" type="text/css" media="all" href="content/bootstrap-theme.css.map">
<link rel="stylesheet" type="text/css" media="all" href="content/Site.css">
<link rel="stylesheet" type="text/css" media="all" href="content/kendo/2015.3.1111/kendo.common.min.css">
<link rel="stylesheet" type="text/css" media="all" href="content/kendo/2015.3.1111/kendo.mobile.all.min.css">
<link rel="stylesheet" type="text/css" media="all" href="content/kendo/2015.3.1111/kendo.dataviz.min.css">
<link rel="stylesheet" type="text/css" media="all" href="content/kendo/2015.3.1111/kendo.dataviz.default.min.css">
<link rel="stylesheet" type="text/css" media="all" href="content/kendo/2015.3.1111/kendo.metro.min.css">
<link href="content/generalledger.css" rel="stylesheet" />
<script src="scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="scripts/bootstrap.js"></script>
<script src="scripts/angular.min.js"></script>
<script type="text/javascript" src="scripts/kendo/2015.3.1111/kendo.all.min.js"></script>
<script src="scripts/kendo/2015.3.1111/kendo.web.min.js"></script>
<script type="text/javascript" src="scripts/app/generalledgercontroller.js"></script>
<title>App</title>
</head>
<body ng-app="app" ng-controller="generalledgerController">
<div id="wrapper" class="active">
<nav class="navbar navbar-inverse navbar-static-top" role="navigation" style="margin-bottom: 0">
<div class="col-lg-2">
<div class="navbar-header">
<button type="button" class="navbar-toggle"
data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<h3 class="navbar-brand" style="font-family: 'Lato', calibri;width: 100%;margin: 0;left: 3%;color: grey;font-size: 24px;font-weight: 400">Logo</h3>
</div>
</div>
<div class="collapse navbar-collapse" style="padding-right: 20px">
<ul class=" nav navbar-nav" style="padding-left:20px"></ul>
</div>
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu"></ul>
</div>
</div>
</nav>
</div>
<div id="page-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<div>
<div class="divH3Style">
<h3 class="h3LabelForm">General Ledger</h3>
</div>
<div id="tabstrip" class="k-tabstrip-wrapper" kendo-tab-strip="tabStrip">
<ul>
<li>Overview</li>
<li>Update</li>
</ul>
<div id="tabstrip-1">
<div kendo-grid k-options="gridMaster" >
</div>
</div>
<div id="tabstrip-2">
<!-- fields for input/update data -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
The grid doesn't load any data, all I see are the headers.
I watched all the relevant links to this problem:
Simple Json connection not working, Binding a kendo ui grid to a json file without generating the grid in code, http://www.telerik.com/forums/simple-json-databinding...
Any help would be appreciated.
Related
I'm not able to use gantt.section. You can see the picture below that the width of the section is zero, it seems that I miss some files. I imported in my html file :
<link rel="stylesheet" type="text/css" href="node_modules/angular-gantt/dist/angular-gantt.css" />
<link rel="stylesheet" type="text/css" href=node_modules/angular-gantt/dist/angular-gantt-plugins.css"/> <link rel="stylesheet" type="text/css" href="node_modules/angular-gantt/dist/angular-gantt-core.css" />
<link rel="stylesheet" type="text/css" href="node_modules/angular-ui-tree/dist/angular-ui-tree.min.css" />
<link rel="stylesheet" type="text/css" href="node_modules/angular-gantt/src/plugins/sections/sections.css" />
All the plugins that I use work fine except sections.
data:
[
{
"name": "Create concept",
"tasks": [
{
"name": "Create concept",
"priority": 20,
"content": "<i class=\"fa fa-cog\" ng-click=\"scope.handleTaskIconClick(task.model)\"></i> {{task.model.name}}",
"color": "#F1C232",
"from": moment(1568800800000),
"to": moment(1568808000000),
"progress": 100,
"sections": {
"items": [
{
"name": "Section #1",
"classes": [
"section-1"
],
"from": moment(1568800800000),
"to": moment(1568811600000)
},
{
"name": "Section #2",
"classes": [
"section-2"
],
"from": moment(1568811600000),
"to": moment(1568808000000)
}
]
},
"id": "10c452b2-618b-f694-b0b6-b33ebfaac4fb"
}
],
"id": "1477337d-0c9a-0174-2d08-b45befb0fe32"
}
]
the html part :
<div class="row">
<div class="col-sm-12"
gantt data="data"
filter-row="{'name': ganttOptions.filterRow}"
>
<gantt-tree></gantt-tree>
<gantt-sections disable-magnet="true"></gantt-sections>// When I leave the default disable-magnet, I find in console an error says that Cannot read property 'getMagnetDate' of undefined
<gantt-dependencies enabled="true" read-only="true" js-plumb-defaults="jsPlumbDefaults" fallback-endpoints="fallbackEndpoints"></gantt-dependencies>
</div>
I'm trying to render a kendodropdownlist like this example: http://dojo.telerik.com/IJEGo, but it displays the items on a mobile like a actionsheet, no like a dropdownlist. (See my screen link at the end)
This is my index.html header:
<link href="kendo/styles/kendo.common.min.css" rel="stylesheet">
<link href="kendo/styles/kendo.default.min.css" rel="stylesheet">
<link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet" />
<link href="styles/main.css" rel="stylesheet" />
<script src="cordova.js"></script>
<script src="kendo/js/jquery.min.js"></script>
<script src="kendo/js/kendo.all.min.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/Controlador.js"></script>
<script src="scripts/Facturas.js"></script> </head>
My view:
<div data-role="view" data-title="home" data-layout="main" data-model="APP.models.home">
<h1 data-bind="html: title" style="color:white;"></h1>
</br>
<!-- <input id="near-km2" />-->
<select id="near-km2" class=".k-dropdown">
<script>
var kmData = [{
text: "5km",
value: "5"
}, {
text: "10km",
value: "10"
},
{
text: "25km",
value: "25"
},
{
text: "50km",
value: "50"
}];
$("#near-km2").kendoDropDownList({
dataTextField: "text",
dataValueField: "value",
dataSource: kmData,
index: 1
});
</script>
</div>
What is wrong with my code ??
my screen: http://s28.postimg.org/m60mm7t25/Capture1.jpg
I will appreciate your help.
I'm developing a simple test app in angularJS for gaining knowledge and I've encountered with this problem.
KendoUI demo webpage offers a code snippet for each of its components. I'm trying to build a toolbar and a panelBar and I'm not being able to make the toolbar work. I'm using just the same code of the web demo, see here:
http://demos.telerik.com/kendo-ui/toolbar/angular
In my particular case, the toolbar does not visualize itself correctly, look at the images:
Here is the code I've written:
HTML view:
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<style>
body {
padding-top: 50px;
padding-bottom: 20px;
}
</style>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap- theme.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.dataviz.default.min.css">
</head>
<body ng-app="controlApp" ng-controller="controller as control">
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
</div>
<div id="navbar" class="navbar-collapse collapse">
</div>
<!--/.navbar-collapse -->
</div>
</nav>
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
<div class="container">
<div class="demo-section k-header">
<div kendo-toolbar k-options="control.toolbarOptions"></div>
</div>
</div>
</div>
<div class="container">
<!-- Example row of columns -->
<div class="row">
<div class="col-md-8">
</div>
<div class="col-md-4">
<ul kendo-panel-bar k-options="panelBarOptions">
<li>
Metallica - Master of Puppets 1986
<ul>
<li>Battery</li>
<li>Master of Puppets</li>
<li>The Thing That Should Not Be</li>
<li>Welcome Home (Sanitarium)</li>
<li>Disposable Heroes</li>
<li>Leper Messiah</li>
<li>Orion (Instrumental)</li>
<li>Damage, Inc.</li>
</ul>
</li>
<li>
Iron Maiden - Brave New World 2000
<ul>
<li>The Wicker Man</li>
<li>Ghost Of The Navigator</li>
<li>Brave New World</li>
<li>Blood Brothers</li>
<li>The Mercenary</li>
<li>Dream Of Mirrors</li>
<li>The Fallen Angel</li>
<li>The Nomad</li>
<li>Out Of The Silent Planet</li>
<li>The Thin Line Between Love And Hate</li>
</ul>
</li>
</ul>
</div>
</div>
<hr>
<footer>
<p>© ABANTAIL S. Coop. 2014</p>
</footer>
</div>
<!-- /container -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="app.js"></script>
<script src="controller.js"></script>
</body>
</html>
Controller:
(function () {
var controller = function () {
var scope = this;
scope.toolbarOptions = {
items: [
{ type: "button", text: "Button" },
{ type: "button", text: "Toggle Button", togglable: true },
{
type: "splitButton",
text: "Insert",
menuButtons: [
{ text: "Insert above", icon: "insert-n" },
{ text: "Insert between", icon: "insert-m" },
{ text: "Insert below", icon: "insert-s" }
]
},
{ type: "separator" },
{ template: "<label>Format:</label>" },
{
template: "<input kendo-drop-down-list k-options='formatOptions' style='width: 150px;' />",
overflow: "never"
},
{ type: "separator" },
{
type: "buttonGroup",
buttons: [
{ spriteCssClass: "k-tool-icon k-justifyLeft", text: "Left", togglable: true, group: "text-align" },
{ spriteCssClass: "k-tool-icon k-justifyCenter", text: "Center", togglable: true, group: "text-align" },
{ spriteCssClass: "k-tool-icon k-justifyRight", text: "Right", togglable: true, group: "text-align" }
]
},
{
type: "buttonGroup",
buttons: [
{ spriteCssClass: "k-tool-icon k-bold", text: "Bold", togglable: true, showText: "overflow" },
{ spriteCssClass: "k-tool-icon k-italic", text: "Italic", togglable: true, showText: "overflow" },
{ spriteCssClass: "k-tool-icon k-underline", text: "Underline", togglable: true, showText: "overflow" }
]
},
{
type: "button",
text: "Action",
overflow: "always"
},
{
type: "button",
text: "Another Action",
overflow: "always"
},
{
type: "button",
text: "Something else here",
overflow: "always"
}
]
};
scope.formatOptions = {
optionLabel: "Paragraph",
dataTextField: "text",
dataValueField: "value",
dataSource: [
{ text: "Heading 1", value: 1 },
{ text: "Heading 2", value: 2 },
{ text: "Heading 3", value: 3 },
{ text: "Title", value: 4 },
{ text: "Subtitle", value: 5 },
]
};
scope.panelBarOptions = {
};
}
//angular.module('controlCajaApp').controller('ControlCajaCtrl', controlCajaCtrl);
controlApp.controller('controller', controller);
}());
Moduler:
var controlApp = angular.module('controlApp', ['kendo.directives']);
So that's it. Any ideas of how to make the toolBar visualize in a correct way? Thanks in advance.
You are using Kendo 2014.3.1119 release version, but at the same time CSS files for the 2014.1.318, so they don't match. Update to correct version:
<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" />
and it should work fine.
Demo: http://plnkr.co/edit/HRi5bA4CaDm1HLUd3Tsq?p=preview
I make a simple after studying from this link
https://github.com/JimLiu/angular-ui-tree
and demo is here
http://jimliu.github.io/angular-ui-tree/
But it not show "+" ,"V" and "X" icon why ?
http://plnkr.co/edit/xur9RjMrhxEppNIewfo6?p=preview
<!DOCTYPE html>
<html ng-app="MyApp">
<head>
<link data-require="bootstrap-css#3.x" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<link data-require="bootstrap-css#3.x" data-semver="3.2.0" rel="stylesheet" href="https://dl.dropboxusercontent.com/s/jm6a2zekeh9kixj/angular-ui-tree.min.css" />
<script data-require="angular.js#*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script data-require="ui-bootstrap#0.10.0" data-semver="0.10.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<script src="https://dl.dropboxusercontent.com/s/nxy1if8uz0ndudn/angular-ui-tree.js?m="></script>
</head>
<body>
<div ng-controller="MainCtrl">
<div ui-tree >
<ol ui-tree-nodes="" ng-model="list">
<li ng-repeat="item in list" ui-tree-node>
<div ui-tree-handle>
{{item.title}}
</div>
<ol ui-tree-nodes="" ng-model="item.items">
<li ng-repeat="subItem in item.items" ui-tree-node>
<div ui-tree-handle>
{{subItem.title}}
</div>
</li>
</ol>
</li>
</ol>
</div>
</div>
</body>
<script>
var myAppModule = angular.module('MyApp', ['ui.tree']);
myAppModule.controller('MainCtrl', function($scope) {
$scope.list = [{
"id": 1,
"title": "1. dragon-breath",
"items": []
}, {
"id": 2,
"title": "2. moiré-vision",
"items": [{
"id": 21,
"title": "2.1. tofu-animation",
"items": [{
"id": 211,
"title": "2.1.1. spooky-giraffe",
"items": []
}, {
"id": 212,
"title": "2.1.2. bubble-burst",
"items": []
}],
}, {
"id": 22,
"title": "2.2. barehand-atomsplitting",
"items": []
}],
}, {
"id": 3,
"title": "3. unicorn-zapper",
"items": []
}, {
"id": 4,
"title": "4. romantic-transclusion",
"items": []
}];
})
</script>
</html>
where I am wrong ..? can you please tell me?
I just cleaned things up a bit from gearsdigital answer.
Here is the updated plunkr Things that i changed were
Updated the source of the angular-ui-tree (the plunkr provided used a dropbox source)
Created a new item-renderer.html. This creates a list renderer for every item which cleans up and simplifies the code. This helps in unlimited nesting.
item_renderer.html
<div ui-tree-handle class="tree-node tree-node-content">
<a class="btn btn-success btn-xs" data-nodrag ng-click="toggle(this)"><span
class="glyphicon"
ng-class="{
'glyphicon-chevron-right': collapsed,
'glyphicon-chevron-down': !collapsed
}"></span></a>
{{item.title}}
<a class="pull-right btn btn-danger btn-xs" data-nodrag ng-click="remove(this)"><span class="glyphicon glyphicon-remove"></span></a>
<a class="pull-right btn btn-primary btn-xs" data-nodrag ng-click="newSubItem(this)" style="margin-right: 8px;"><span
class="glyphicon glyphicon-plus"></span></a>
</div>
<ol ui-tree-nodes="" ng-model="item.items" ng-class="{hidden: collapsed}">
<li ng-repeat="item in item.items" ui-tree-node ng-include="'item_renderer.html'">
</li>
</ol>
index.html
<!DOCTYPE html>
<html ng-app="MyApp">
<head>
<script data-require="angular.js#*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<link data-require="bootstrap-css#3.x" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<link data-require="angular-ui-tree#*" data-semver="2.8.0" rel="stylesheet" href="https://cdn.rawgit.com/angular-ui-tree/angular-ui-tree/master/dist/angular-ui-tree.min.css" />
<script data-require="angular-ui-tree#*" data-semver="2.8.0" src="https://cdn.rawgit.com/angular-ui-tree/angular-ui-tree/master/dist/angular-ui-tree.min.js"></script>
<script data-require="ui-bootstrap#0.10.0" data-semver="0.10.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div ng-controller="MainCtrl">
<!-- Nested node template -->
<div class="row">
<div class="col-sm-6">
<div ui-tree id="tree-root">
<ol ui-tree-nodes ng-model="list">
<li ng-repeat="item in list" ui-tree-node ng-include="'item_renderer.html'"></li>
</ol>
</div>
</div>
</div>
</div>
</body>
</html>
script.js
var myAppModule = angular.module('MyApp', ['ui.tree']);
myAppModule.controller('MainCtrl', function($scope) {
$scope.remove = function (scope) {
scope.remove();
};
$scope.toggle = function (scope) {
scope.toggle();
};
$scope.moveLastToTheBeginning = function () {
var a = $scope.list.pop();
$scope.list.splice(0, 0, a);
};
$scope.newSubItem = function (scope) {
var nodeData = scope.$modelValue;
console.log(nodeData);
nodeData.items.push({
id: nodeData.id * 10 + nodeData.items.length,
title: nodeData.title + '.' + (nodeData.length + 1),
items: []
});
};
$scope.list = [{
"id": 1,
"title": "1. dragon-breath",
"items": []
}, {
"id": 2,
"title": "2. moiré-vision",
"items": [{
"id": 21,
"title": "2.1. tofu-animation",
"items": [{
"id": 211,
"title": "2.1.1. spooky-giraffe",
"items": []
}, {
"id": 212,
"title": "2.1.2. bubble-burst",
"items": []
}],
}, {
"id": 22,
"title": "2.2. barehand-atomsplitting",
"items": []
}],
}, {
"id": 3,
"title": "3. unicorn-zapper",
"items": []
}, {
"id": 4,
"title": "4. romantic-transclusion",
"items": []
}];
})
You simply included wrong ui-tree-handle Templates.
Working Version: http://plnkr.co/edit/wiOWgql8jMN2NUKYmCGl?p=preview
Use this:
<div ui-tree-handle>
<a class="btn btn-success btn-xs" data-nodrag ng-click="toggle(this)"><span class="glyphicon" ng-class="{'glyphicon-chevron-right': collapsed, 'glyphicon-chevron-down': !collapsed}"></span></a>
{{item.title}}
<a class="pull-right btn btn-danger btn-xs" data-nodrag ng-click="remove(this)"><span class="glyphicon glyphicon-remove"></span></a>
<a class="pull-right btn btn-primary btn-xs" data-nodrag ng-click="newSubItem(this)" style="margin-right: 8px;"><span class="glyphicon glyphicon-plus"></span></a>
</div>
Instead of this:
<div ui-tree-handle>
{{item.title}}
</div>
Same for your sub items.
I am tring to create a TreeView with drag and drop functionality. I use this plugin
http://ngmodules.org/modules/angular-ui-tree, a demo is available here:
http://jimliu.github.io/angular-ui-tree/
But when I do the same thing things as written in the documentation my TreeViewdoes not load - why?
Here is my code.
<html ng-app="MyApp">
<head>
<link data-require="bootstrap-css#3.x" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<link data-require="bootstrap-css#3.x" data-semver="3.2.0" rel="stylesheet" href="https://dl.dropboxusercontent.com/s/jm6a2zekeh9kixj/angular-ui-tree.min.css" />
<script data-require="angular.js#*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script data-require="ui-bootstrap#0.10.0" data-semver="0.10.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<script src="https://dl.dropboxusercontent.com/s/nxy1if8uz0ndudn/angular-ui-tree.js?m="></script>
</head>
<body>
<div ng-controller="ctr">
<div ui-tree >
<ol ui-tree-nodes="" ng-model="list">
<li ng-repeat="item in list" ui-tree-node>
<div ui-tree-handle>
{{item.title}}
</div>
<ol ui-tree-nodes="" ng-model="item.items">
<li ng-repeat="subItem in item.items" ui-tree-node>
<div ui-tree-handle>
{{subItem.title}}
</div>
</li>
</ol>
</li>
</ol>
</div>
</div>
</body>
<script>
var myAppModule = angular.module('MyApp', ['ui.tree']);
myAppModule.controller('MainCtrl', function($scope) {
$scope.item = [{
"id": 1,
"title": "1. dragon-breath",
"items": []
}, {
"id": 2,
"title": "2. moiré-vision",
"items": [{
"id": 21,
"title": "2.1. tofu-animation",
"items": [{
"id": 211,
"title": "2.1.1. spooky-giraffe",
"items": []
}, {
"id": 212,
"title": "2.1.2. bubble-burst",
"items": []
}],
}, {
"id": 22,
"title": "2.2. barehand-atomsplitting",
"items": []
}],
}, {
"id": 3,
"title": "3. unicorn-zapper",
"items": []
}, {
"id": 4,
"title": "4. romantic-transclusion",
"items": []
}];
}
</script>
</html>
Plunker :
http://plnkr.co/edit/ueIUs4pDnWIrRKbVhvDq?p=preview
There is a syntax error, the last closing ) is missing in the bottom script block.
The controller name is mismatch, the MainCtrl is registered but the ctrl is used in ng-controller.
In the first ng-repeat="item in list", it loop over $scope.list but the data is in $scope.item.
Plunker: http://plnkr.co/edit/crEDsbbN5e7wKVKbFPlZ?p=preview