We use Kendo UI diagram to represent a BPMN diagram (activity flow).
We also use Angular.
How can I bind an array of objects to the shapes Data Source, aka, every change to this array will mimic the same change in the Kendo UI diagram?
Update:
I found an example without Angular JS: http://dojo.telerik.com/ILUCOQ
Here you can defined scope and pass to function as a parameter and you can change dynamically change scope, and on scope change re-call those function that render UI with new parameter[scope].
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/diagram/angular">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.504/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.504/styles/kendo.material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.504/styles/kendo.material.mobile.min.css" />
<script src="https://kendo.cdn.telerik.com/2017.2.504/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.2.504/js/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.2.504/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example" ng-app="KendoDemos">
<div class="demo-section k-content wide" ng-controller="MyCtrl">
<div kendo-diagram k-options="options"></div>
</div>
</div>
<script>
angular.module("KendoDemos", ["kendo.directives"])
.controller("MyCtrl", function($scope){
$scope.change = [3,3,2]; // You Can Dynamically Change this scope that will reflect the UI
$scope.options = {
dataSource: {
data: diagramNodes($scope.c),
schema: {
model: {
children: "items"
}
}
},
layout: {
type: "tree",
subtype: "down",
horizontalSeparation: 30,
verticalSeparation: 20
},
shapeDefaults: {
width: 40,
height: 40
}
};
})
function diagramNodes(data) {
var root = { name: "0", items: [] };
addNodes(root, data);
return [root];
}
function addNodes(root, levels) {
if (levels.length > 0) {
for (var i = 0; i < levels[0]; i++) {
var node = { name: "0", items: [] };
root.items.push(node);
addNodes(node, levels.slice(1));
}
}
}
</script>
</body>
</html>
Related
I need to bind an event in my controller to be called when there is a change in value of a dropdown. This dropdown is a multi-select dropdown -which is in a directive.
I have been able to customize the dropdown using the settings available - however, unable to bind the event.
Here is the code
HTML:
<html>
<head>
<meta charset="utf-8">
<title>AngularJS Dropdown Multiselect</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<script src="./angular.min.js"></script>
<!--<script src="./ui-bootstrap-tpls.js"></script>-->
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.7.0/lodash.min.js"></script>
<script src="./app.js"></script>
<style>
.noscroll {
overflow: hidden;
}
</style>
</head>
<body>
<div ng-app="myApp" ng-controller="AppCtrl">
<div ng-dropdown-multiselect="" options="fruitdata"
selected-model="fruitmodel" checkboxes="true"
extra-settings="fruitsettings" events="extraEvents">
</div>
Selected Model: {{fruitmodel}} | json
</div>
</body>
</html>
JS:
'use strict';
var app = angular.module('myApp', ['angularjs-dropdown-multiselect']);
app.controller('AppCtrl', function ($scope) {
$scope.fruitmodel = [];
$scope.fruitsettings = {
enableSearch: false
};
$scope.fruitdata = [{
"label": "Apple",
"id": 1
}, {
"label": "Banana",
"id": 2
}, {
"label": "Orange",
"id": 3
}, {
"label": "Pineapple",
"id": 4
}, {
"label": "Strawberry",
"id": 5
}];
$scope.example2settings = {
displayProp: 'id'
};
$scope.extraEvents = {
onItemDeselect: '$scope.onChange'
};
$scope.onChange = function() {
console.log($scope.fruitdata);
};
});
I need to detect the change to the model and take action based on this. I tried two approaches - adding ng-change to the dropdown as below - however, this does not work.
<div ng-dropdown-multiselect="" options="fruitdata"
selected-model="fruitmodel" checkboxes="true"
extra-settings="fruitsettings" ng-change="onChange()">
</div>
The directive does seem to allow extending the event handling - however, I guess I am not getting it right.
Snapshot from AngularJS Dropdown Multiselect
Seems like you have to use:
<div ng-dropdown-multiselect="" ... events="eventsCallback"></div>
and into your controller:
$scope.eventsCallback = {
onItemSelect: function () { ... },
onSelectionChanged: function () { ... }
}
Is $scope.fruitmodel where you are storing the selected items? You can use $scope.$watchCollection to act on changes.
$scope.$watchCollection('fruitmodel', function(newValue, oldValue) {
console.log(newValue, oldValue);
});
I'm trying to use Yandex Maps with this AngularJS module.
Here they have demonstrations, and here's my code:
index.html
<!DOCTYPE html>
<html lang="ru" xmlns:vml="urn:schemas-microsoft-com:vml" ng-app="myApp" ng-controller="myController">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1" />
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" href="style.css">
<script src="angular.min.js"></script>
<script src="ya-map-2.1.min.js"></script>
<script src="script.js" type="text/javascript"></script>
</head>
<body>
<div id="map" class="w3-col s10 w3-dark w3-border">
<!--
<ya-map ya-zoom="8" ya-center="[37.64,55.76]" style="width:400px;height:500px;"></ya-map>
-->
</div>
</body>
</html>
script.js
console.log("script starts");
var myApp = angular
.module('myApp', ['yaMap'])
.controller("myController", function ($scope) {
console.log("In the controller");
var _map;
$scope.afterMapInit = function (map) {
_map = map;
};
$scope.del = function () {
_map.destroy();
};
console.log("After $scope ops");
$scope.initialize = function () {
var mapOptions = {
center: [50.5, 30.5],
zoom: 8
};
ymaps.ready(function () {
$scope.map = new ymaps.Map("map", mapOptions);
})
}
});
style.css
body {
background-color: #fff;
margin: 40px;
}
#body {
margin: 0 15px 0 15px;
}
#frmMain {
width: 100%;
height: 100%;
}
Please, if you know why I can't load the map and what's wrong with that code, (I suppose it's all wrong though), tell me about it!
I'm total novice in AngularJS and Yandex Maps, so, it may appear a silly question for you, but I cannot find anything useful on the Internet.
Promblem here in style for non-standard tag ya-map. By default browser set it display property to "inline", so without text element collapse to width:0, height:0.
Also, you not use any functions declared in controller.
You can see samples in Demo Page
var myApp = angular
.module('myApp', ['yaMap'])
.controller("myController", function($scope) {
var _map;
$scope.afterMapInit = function(map) {
_map = map;
};
$scope.del = function() {
_map.destroy();
};
});
ya-map {
display: block;
width: 400px;
height: 500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
<script src="//rawgit.com/tulov/angular-yandex-map/master/ya-map-2.1.min.js"></script>
<div id="map" class="w3-col s10 w3-dark w3-border" ng-app="myApp" ng-controller="myController">
<ya-map ya-zoom="8" ya-center="[37.64,55.76]" ya-after-init="afterMapInit($target)"></ya-map>
<button ng-click="del()">Удалить</button>
</div>
I am using ui-grid in angular, I want to have a "click me" button that when clicked, alerts or logs the contents of the specific row data or index that is associated. How do I get to that? Right now I can trigger an alert box, but not get the actual contents of the row (or even for example, a specific key).
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Angularjs Show No Records Found in UI Grid</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.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">
<script type="text/javascript">
var myApp = angular.module('sampleapp', ['ui.grid', 'ui.grid.selection', 'ui.grid.exporter']);
myApp.controller("appcontroller", function ($scope, $http) {
$scope.gridOptions = {
data: 'sampledata',
columnDefs: [
{ field: 'name' },
{ field: 'gender' },
{ field: 'company' },
{ field: 'click', cellTemplate: '<button class="btn primary" ng-click="grid.appScope.sampledetails()">Click Me</button>' }
]
};
$scope.sampledata = { "data": [] };
$http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json')
.success(function (data) {
$scope.sampledata = data;
});
$scope.sampledetails = function () {
alert('Hi Click is working');
return false;
};
});
</script>
<style type="text/css">
.grid {
width: 500px;
height: 400px;
}
.nodatatxt {
position: absolute;
top : 80px;
opacity: 0.25;
font-size: 1.5em;
width: 100%;
text-align: center;
z-index: 1000;
}
</style>
</head>
<body>
<form id="form1">
<div ng-app="sampleapp" ng-controller="appcontroller">
<br /><br />
<div ui-grid="gridOptions" ui-grid-selection ui-grid-exporter class="grid">
<div class="nodatatxt" ng-if="sampledata.data.length==0">No Records Found</div>
</div>
</div>
</form>
</body>
</html>
At first, your code is unreadable. Use embedded code snippets, jsfiddle, codepen or plunkr
Secondly, if you will take a look at template of your ui-grid, you will see that it just uses ng-repeat. Something like this:
ng-repeat="(rowRenderIndex, row) in rowContainer.renderedRows track by $index"
So you can override cell template:
var actionCellTemplate = '<div class="ui-grid-cell-contents"' +
'ng-model="row.entity.username"' +
'ng-click="clickMe(row)">....</div>'
$scope.gridOptions = {
columnDefs: [
....
{
name: 'action',
cellTemplate: actionCellTemplate
}
]
};
I am using ag-grid plugin in a project. I get json data using $http service. But the grid shows blank in web page. But when json data is applied directly, grid works. I think this is probably due to delay in getting the data from $http. But as per angular concept, the grid should be updated when data comes. Is there any solution to show the html page only when data comes from the server.
Below is my javascript file 'fileBrowser.js':
var fileBrowserModule = angular.module('fileBrowser', ['agGrid']);
fileBrowserModule.controller('fileBrowserController', function($scope, $http) {
$scope.rowData=[
];
$http.get("http://localhost:8080/KKR/flow/sin/allSins.json")
.success(function(data) {
$scope.rowData=JSON.parse("["+JSON.stringify(data)+"]");
console.log($scope.rowData);
});
/*
$scope.rowData=[
{"group":true,"data":{"name":"joe"},
"children":[
{"group":true,"data":{"name":"pat"},
"children":[{"group":true,
"data":{"name":"maya"},
"children":[{"group":false,
"data":{"name":"brook"},
"children":[]},{"group":true,
"data":{"name":"kery"},
"children":[{"group":false,
"data":{"name":"santosh"},
"children":[]}]}]}]},
{"group":false,
"data":{"name":"aravind"},"children":[]}]}
]
*/
var columnDefs = [
{headerName: "Name", field: "name", width: 250,
cellRenderer: {
renderer: 'group',
innerRenderer: innerCellRenderer
}},
{headerName: "Size", field: "size", width: 70, cellStyle: sizeCellStyle},
{headerName: "Type", field: "type", width: 150},
{headerName: "Date Modified", field: "dateModified", width: 150}
];
$scope.gridOptions = {
columnDefs: columnDefs,
rowData: $scope.rowData,
rowSelection: 'multiple',
rowsAlreadyGrouped: true,
enableColResize: true,
enableSorting: true,
rowHeight: 20,
icons: {
groupExpanded: '<i class="fa fa-minus-square-o"/>',
groupContracted: '<i class="fa fa-plus-square-o"/>'
},
onRowClicked: rowClicked
};
$scope.selectedFile = 'Select a file below...';
function rowClicked(params) {
var node = params.node;
var path = node.data.name;
while (node.parent) {
node = node.parent;
path = node.data.name + '\\' + path;
}
$scope.selectedFile = path;
}
function sizeCellStyle() {
return {'text-align': 'right'};
}
function innerCellRenderer(params) {
var image;
if (params.node.group) {
image = params.node.level === 0 ? 'disk' : 'folder';
} else {
image = 'file';
}
var imageFullUrl = '/example-file-browser/' + image + '.png';
return '<img src="'+imageFullUrl+'" style="padding-left: 4px;" /> ' + params.data.name;
}
});
Below is my html file:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link href="styles/angular/fileBrowser.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<!-- <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
-->
<script src=" https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
<!-- you don't need ignore=notused in your code, this is just here to trick the cache -->
<script src="scripts/angular/ag-grid.js?ignore=notused10"></script>
<link rel="stylesheet" type="text/css" href="styles/angular/ag-grid.css?ignore=notused10">
<link rel="stylesheet" type="text/css" href="styles/angular/theme-fresh.css?ignore=notused10">
<script src="scripts/angular/fileBrowser.js"></script>
</head>
<body ng-app="fileBrowser">
<div ng-controller="fileBrowserController"
style="border: 1px solid darkgrey;
width: 600px;
background-color: lightgrey;
border-radius: 5px;
padding: 3px;">
<div style="border: 1px solid darkgrey; margin-bottom: 2px; background-color: white;"> {{selectedFile}}</div>
<div style="width: 100%; height: 400px;"
ag-grid="gridOptions"
class="ag-file-browser">
</div>
</div>
</body>
</html>
Use the ag-Grid API for setting the row data.
Look at this example "Further Example Starting Point" to see.
Code is
$scope.gridOptions.api.setRows(res.data);
I have modified previous answer. Instead of setRows we can use setRowData. This works for me:
$scope.gridOptions.api.setRowData(res.data);
I need to render joint js as a directive in angularjs.I am new to both the frameworks.Currently im rendering it using div. How do i do it using angular directive.
<!DOCTYPE html>
<html ng-app="jointjsApp">
<head>
<meta charset="ISO-8859-1">
<link rel="stylesheet" href="css/joint.min.css" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script src="lib/joint.min.js"></script>
<script src="lib/angular.min.js"></script>
</head>
<title>Test</title>
<body>
<div id="myholder"> </div>
</body>
<script>
var graph = new joint.dia.Graph;
var paper = new joint.dia.Paper({
el: $('#myholder'),
width: 600,
height: 200,
model: graph
});
var rect = new joint.shapes.basic.Rect({
position: { x: 100, y: 30 },
size: { width: 100, height: 30 },
attrs: { rect: { fill: 'blue' }, text: { text: 'my box', fill: 'white' } }
});
var rect2 = rect.clone();
rect2.translate(300);
var link = new joint.dia.Link({
source: { id: rect.id },
target: { id: rect2.id }
});
graph.addCells([rect, rect2, link]);
</script>
</html>
How to i do the same using an angular directive