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.
Related
I am using the jquery sim tree plugin to show tree categories. Sim Tree
I have added a search bar to the filter tree data. What I want is to expand the inner ul li elements.
Working Fiddle --> https://jsfiddle.net/dnetk0s9/
The issue is when I search the text second it does not work. (the panel is not expanding).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://www.jqueryscript.net/demo/Checkable-Hierarchical-Tree/dist/simTree.css">
<link href="https://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<title>sim-tree: Checkable Hierarchical Tree Demo</title>
<style>
body { min-height: 100vh; background-color: #fafafa;}
.container { margin: 150px auto; max-width: 640px; }
</style>
</head>
<body>
</script>
<div class="container">
<input type="text" name="search" class="form-control" value="" id="demo_2" placeholder="" autofocus style="margin-top:10px;"/>
<br/><br/>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" class="ul-laspe" data-parent="#accordion" href="#collapse1">
One
</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">
<div class="tree">
<div id="tree"></div>
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" class="ul-laspe" data-parent="#accordion" href="#collapse2">
Two
</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">
<div class="tree">
<div id="tree2"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://www.jqueryscript.net/demo/Checkable-Hierarchical-Tree/dist/simTree.js"></script>
<script>
var list = [{
"id": '1',
"pid": '',
"name": "hi foo bar",
},
{
"id": '11',
"pid": '1', // parent ID
"name": "bye tar"
},
{
"id": '12',
"pid": '1',
"name": "welcome rat"
},{
"id": '13',
"pid": '1',
"name": "why this"
},{
"id": '14',
"pid": '1',
"name": "match this"
},
{
"id": '2',
"pid": '',
"name": "raw input"
},
{
"id": '21',
"pid": '2',
"name": ""
}
];
var list2 = [{
"id": '1',
"pid": '',
"name": "X JavaScript",
},
{
"id": '11',
"pid": '1', // parent ID
"name": "X Angular"
},
{
"id": '12',
"pid": '1',
"name": "X React"
},{
"id": '13',
"pid": '1',
"name": "X Vuejs"
},{
"id": '14',
"pid": '1',
"name": "XY jQueryScript.Net"
},
{
"id": '2',
"pid": '',
"name": "X HTML5"
},
{
"id": '21',
"pid": '2',
"name": ""
}
];
var tree = simTree({
el: '#tree',
data: list,
check: true,
linkParent: true,
//check: true,
onClick: function (item) {
console.log(item)
},
onChange: function (item) {
console.log(item)
}
});
var tree = simTree({
el: '#tree2',
data: list2,
check: true,
linkParent: true,
//check: true,
onClick: function (item) {
console.log(item)
},
onChange: function (item) {
console.log(item)
}
});
$('.sim-tree li').each(function(){
$(this).attr('data-search-term', $(this).text().toLowerCase());
});
$('#demo_2').on('change', function() {
//$('.panel-collapse').collapse('hide');
var searchVal = $(this).val().toLowerCase();
var searchTerm = $(this).val().toLowerCase();
if (searchVal != '') {
$('.sim-tree li').each(function() {
var currentLiText = $(this).text().toLowerCase();
showCurrentLi = currentLiText.indexOf(searchVal) !== -1;
if (showCurrentLi) {
$(this).closest('.panel-collapse').collapse('show');
$(this).children("i").click();
$(this).find("ul").addClass("show"); //show ul inside li
} else {
$(this).closest('.panel-collapse').collapse('hide');
$('.panel-collapse').collapse('hide');
$(this).children("i").addClass("layui-icon-r").removeClass("layui-icon-d")
$(this).find("ul").removeClass("show");
}
});
} else {
// $('.panel-collapse').collapse('hide');
$(".sim-tree").find("ul").removeClass("show") //find any ul has show class remove it
$(".sim-tree").children("li").children("i").addClass("layui-icon-r").removeClass("layui-icon-d") //find li children `i` change icon
}
});
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</body>
</html>
I'm trying to make that when I click on the button to maximize div number 2 scroll down and place the div on top with a padding-top: 50px; and so on with the other elements, the idea is to scroll and place these elements at the top of the screen.
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$scope.items = [
{
"idUnidad": 1,
"idIdentidad": 1,
"Nombre": "Quito"
},
{
"idUnidad": 2,
"idIdentidad": 1,
"Nombre": "Guayaquil"
},
{
"idUnidad": 3,
"idIdentidad": 2,
"Nombre": "Cochabamba"
},
{
"idUnidad": 4,
"idIdentidad": 2,
"Nombre": "La paz"
},
{
"idUnidad": 5,
"idIdentidad": 3,
"Nombre": "Cusco"
}
];
$scope.addAactiveToItem = function(item) {
item.active = true;
$scope.activate = true;
}
$scope.minItem = function(item) {
item.active = false;
}
});
.container-div {
background-color: red;
width: 300px;
height: 150px;
margin: 15px;
}
.expanded-div {
height: 400px;
width: 200px;
}
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<div class="container">
<div ng-repeat="item in items track by $index" style="padding: 15px;">
<div class="container-div" ng-class="{'expanded-div': item.active}">
<h1>{{ item.idUnidad }}</h1>
<button class="btn btn-primary" ng-click="addAactiveToItem(item);" ng-if="!item.active">Maximizar este div</button>
<button class="btn btn-primary" ng-click="minItem(item);" ng-if="item.active">Minimizar</button>
</div>
</div>
</div>
</body>
</html>
I hope that I understood you correctly. I wrote some code, test it out and call me if that is not what you wanted
Here is your controller:
app.controller('myCtrl', ['$scope', '$http', function($scope, $http) {
/*ADDING A ORDER ATTRIBUTE SO YOU CAN ORDER BY IT*/
$scope.items = [
{
"idUnidad": 1,
"idIdentidad": 1,
"Nombre": "Quito",
"Order": 1
},
{
"idUnidad": 2,
"idIdentidad": 1,
"Nombre": "Guayaquil",
"Order": 2
},
{
"idUnidad": 3,
"idIdentidad": 2,
"Nombre": "Cochabamba",
"Order": 3
},
{
"idUnidad": 4,
"idIdentidad": 2,
"Nombre": "La paz",
"Order": 4
},
{
"idUnidad": 5,
"idIdentidad": 3,
"Nombre": "Cusco",
"Order": 5
}
];
$scope.addAactiveToItem = function(item) {
item.active = true;
$scope.activate = true;
var index = $scope.items.indexOf(item); //GETTING THE INDEX OF THE ITEM YOU CLICKED ON THE ARRAY
$scope.items.splice(index, 1); //REMOVING THIS ITEM FROM ITS CURRENT POSITION
$scope.items.unshift(item); //PUTTING IT TO THE FIRST POSITION OF YOUR ARRAY
window.scrollTo( 0, 0); //SCROLLING TO THE TOP (0,0)
}
$scope.minItem = function(item) {
item.active = false;
}
}]);
Here is your HTML, just changed the orderby and removed the track by $index which is not needed this case.
<html>
<head>
<title>Example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="../styles/style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="../scripts/app.js" ></script>
<script src="../scripts/controller.js" ></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<div class="container">
<div ng-repeat="item in items | orderBy: item.order" style="padding: 15px;">
<div class="container-div" ng-class="{'expanded-div': item.active}">
<h1>{{ item.idUnidad }}</h1>
<button class="btn btn-primary" ng-click="addAactiveToItem(item);" ng-if="!item.active">Maximizar este div</button>
<button class="btn btn-primary" ng-click="minItem(item);" ng-if="item.active">Minimizar</button>
</div>
</div>
</div>
</body>
</html>
i want to make dynamic code
strong text
// angular.bootstrap(document.getElementById('app'), ['app']);
var app=angular.module("App",[]);
app.controller("AppCtrl",function($scope){
$scope.adults = [
{
"Name": "pro1",
"categories": [
'cat1'
]
},
{
"Name": "pro2",
"categories": [
'cat2'
]
},
{
"Name": "pro3",
"categories": [
'cat3','cat1'
]
}
];
$scope.Name =$scope.adults[0].Name;
$scope.updateList = function(x) {
$scope.childrens=$scope.adults[x].Name;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!-- <div id="app">
<div ui-view></div>
</div> -->
<div id="library">
<h1>shop</h1>
</div>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<!DOCTYPE html>
<html ng-app="App">
<!-- <head>
<meta charset="utf-8" />
<script data-require="angular.js#1.4.9" data-semver="1.4.9" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
</head> -->
<body>
<div ng-controller="AppCtrl" >
<ul>
<li class="list-group-item" ><a ng-click="updateList(0)">cat1</a>
</li>
<li class="list-group-item" ng-click="updateList(1)"><a ng-click="updateList(1)">cat2</a>
</li>
<li class="list-group-item" ng-click="updateList(2)"><a ng-click="updateList(2)">cat3</a>
</li>
</ul>
<div class="col-md-6"><h2>product</h2><br>
<ul>
<li class="list-group-item" ng-repeat="a in adults">
{{a.Name}}
</li>
</ul>
</div>
</div>
</body>
</html>
guys, i am facing some issue in angular js. I want to display categories list on the left side and display product name on right side panel when you click on cat1 display all include categories product name.as an example when you click cat1 that time display name as "pro1" and "pro3" for reference check image
is it possible in angular.ja 1.6.x? enter image description here
var shop = {
categories: [
'cat1','cat2','cat3'
],
products: [
{
name: 'pro1',
categories: ['cat1']
},
{
name: 'pro2',
categories: ['cat2']
},
{
name: 'pro3',
categories: ['cat1','cat3']
}
]
};
Check the code below :
// angular.bootstrap(document.getElementById('app'), ['app']);
var app=angular.module("App",[]);
app.controller("AppCtrl",function($scope){
$scope.adults = [
{
"Name": "pro1",
"categories": [
'cat1'
]
},
{
"Name": "pro2",
"categories": [
'cat2'
]
},
{
"Name": "pro3",
"categories": [
'cat3','cat1'
]
}
];
$scope.Name =$scope.adults[0].Name;
$scope.updateList = function(cat) {
$scope.childrens = $scope.adults.filter(function(adult){
return adult.categories.includes(cat);
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!-- <div id="app">
<div ui-view></div>
</div> -->
<div id="library">
<h1>shop</h1>
</div>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<!DOCTYPE html>
<html ng-app="App">
<!-- <head>
<meta charset="utf-8" />
<script data-require="angular.js#1.4.9" data-semver="1.4.9" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
</head> -->
<body>
<div ng-controller="AppCtrl" >
<ul>
<li class="list-group-item" ><a ng-click="updateList('cat1')">cat1</a>
</li>
<li class="list-group-item"><a ng-click="updateList('cat2')">cat2</a>
</li>
<li class="list-group-item"><a ng-click="updateList('cat3')">cat3</a>
</li>
</ul>
<div class="col-md-6"><h2>product</h2><br>
<ul>
<li class="list-group-item" ng-repeat="a in childrens">
{{a.Name}}
</li>
</ul>
</div>
</div>
</body>
</html>
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.
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