LIDOR SYSTEMS

Advanced User Interface Controls and Components

IntegralUI Web

Native Angular 4 and AngularJS UI Components


TreeGrid / Overview


IntegralUI TreeGrid is a native AngularJS directive with high performance during data load and update even with very large data sets. You can create and modify hierarchical data structures in multiple columns on the fly, with fast data load either from local or remote data source. It has multiple public methods optimized to quickly update the grid structure and current view. It is fully customizable with option to change its appearance during run-time.

Using links in left panel, you can check out different features.

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" href="css/integralui.css" />

<link rel="stylesheet" href="css/integralui.checkbox.css" />

<link rel="stylesheet" href="css/integralui.treegrid.css" />

<link rel="stylesheet" href="css/themes/theme-flat-blue.css" />

<script type="text/javascript" src="external/angular.min.js"></script>

<script type="text/javascript" src="js/angular.integralui.min.js"></script>

<script type="text/javascript" src="js/angular.integralui.lists.min.js"></script>

<script type="text/javascript" src="js/angular.integralui.checkbox.min.js"></script>

<script type="text/javascript" src="js/angular.integralui.treegrid.min.js"></script>

</head>

<body>

<div ng-app="appModule" ng-controller="appCtrl">

<iui-treegrid name="{{gridName}}" columns="columns" rows="rows" control-style="ctrlStyle"></iui-treegrid>

</div>

</body>

</html>

angular

.module("appModule", ["integralui"])

.controller("appCtrl", ["$scope", "IntegralUITreeGridService", "$timeout", function($scope, $gridService, $timeout){

$scope.gridName = "gridSample";

$scope.rows = [];

 

$scope.ctrlStyle = {

row: {

general: {

hovered: 'row-hovered',

selected: 'row-selected'

},

cell: {

hovered: 'row-cell-hovered'

}

}

}

 

$scope.columns = [

{

id: 1,

editorType: 'checkbox',

editorSettings: {

style: {

general: 'checkbox',

box: {

general: 'checkbox-box',

checked: 'checkbox-checked',

unchecked: 'checkbox-unchecked'

}

}

},

contentAlignment: "right",

width: 45,

fixedWidth: true

},

{ id: 2, headerText: "Category/Name", width: 225 },

{

headerText: 'Details',

headerAlignment: 'center',

columns: [

{

id: 3,

headerText: 'Author/Supplier',

headerAlignment: 'center',

contentAlignment: "center",

width: 160

},

{

id: 4,

headerText: 'Price',

headerAlignment: 'center',

contentAlignment: "right",

width: 70

},

{

id: 5,

headerText: 'Rating',

editorType: 'image',

headerAlignment: 'center',

contentAlignment: "center",

width: 120

}

]

}

];

 

$scope.flatData = [

{

id: 1,

text: "Books",

cells: [{ cid: 2, text: "Books" }]

},

{

id: 11,

pid: 1,

text: "History",

cells: [{ cid: 2, text: "History" }]

},

{

id: 111,

pid: 11,

text: "The Wright Brothers",

cells: [{ cid: 1, value: true }, { cid: 2, text: "The Wright Brothers" }, { cid: 3, text: "David McCullough" }, { cid: 4, text: "$18.00" }, { cid: 5, value: '../../../resources/stars-small-5.png' }]

},

{

id: 112,

pid: 11,

text: "Capital in the Twenty-First Century",

cells: [{ cid: 1 }, { cid: 2, text: "Capital in the Twenty-First Century" }, { cid: 3, text: "Thomas Piketty" }, { cid: 4, text: "$22.99" }, { cid: 5, value: '../../../resources/stars-small-4.png' }]

},

{

id: 12,

pid: 1,

text: "Science",

cells: [{ cid: 2, text: "Science" }]

},

{

id: 121,

pid: 12,

text: "Thinking, Fast and Slow",

cells: [{ cid: 1 }, { cid: 2, text: "Thinking, Fast and Slow" }, { cid: 3, text: "Daniel Kahneman" }, { cid: 4, text: "$9.07" }, { cid: 5, value: '../../../resources/stars-small-5.png' }]

},

{

id: 122,

pid: 12,

text: "A Brief History of Time",

cells: [{ cid: 1, value: true }, { cid: 2, text: "A Brief History of Time" }, { cid: 3, text: "Stephen Hawking" }, { cid: 4, text: "$19.95" }, { cid: 5, value: '../../../resources/stars-small-5.png' }]

},

{

id: 123,

pid: 12,

text: "Alan Turing: The Enigma",

cells: [{ cid: 1 }, { cid: 2, text: "Alan Turing: The Enigma" }, { cid: 3, text: "Andrew Hodges" }, { cid: 4, text: "$10.17" }, { cid: 5, value: '../../../resources/stars-small-3.png' }]

},

{

id: 2,

text: "Electronics",

cells: [{ cid: 2, text: "Electronics" }]

},

{

id: 21,

pid: 2,

text: "Laptops",

cells: [{ cid: 2, text: "Laptops" }]

},

{

id: 211,

pid: 21,

text: "Acer Aspire E 15 ES1-512-C88M",

cells: [{ cid: 1, value: true }, { cid: 2, text: "Acer Aspire E 15 ES1-512-C88M" }, { cid: 3, text: "Acer" }, { cid: 4, text: "$229.00" }, { cid: 5, value: '../../../resources/stars-small-4.png' }]

},

{

id: 212,

pid: 21,

text: "Lenovo Flex 2 14 14.0-Inch",

cells: [{ cid: 1 }, { cid: 2, text: "Lenovo Flex 2 14 14.0-Inch" }, { cid: 3, text: "Lenovo" }, { cid: 4, text: "$489.99" }, { cid: 5, value: '../../../resources/stars-small-3.png' }]

},

{

id: 213,

pid: 21,

text: "HP Stream 11",

cells: [{ cid: 1, value: true }, { cid: 2, text: "HP Stream 11" }, { cid: 3, text: "HP" }, { cid: 4, text: "$199.99" }, { cid: 5, value: '../../../resources/stars-small-4.png' }]

},

{

id: 214,

pid: 21,

text: "ASUS ROG GL551JW-DS74",

cells: [{ cid: 1 }, { cid: 2, text: "ASUS ROG GL551JW-DS74" }, { cid: 3, text: "ASUS" }, { cid: 4, text: "$1,199.00" }, { cid: 5, value: '../../../resources/stars-small-5.png' }]

},

{

id: 22,

pid: 2,

text: "Printers",

cells: [{ cid: 2, text: "Printers" }]

},

{

id: 221,

pid: 22,

text: "Canon PIXMA MX922 Wireless",

cells: [{ cid: 1, value: true }, { cid: 2, text: "Canon PIXMA MX922 Wireless" }, { cid: 3, text: "Canon" }, { cid: 4, text: "$99.99" }, { cid: 5, value: '../../../resources/stars-small-4.png' }]

},

{

id: 222,

pid: 22,

text: "Lexmark MX81x/MX71x 550-Sheet Tray",

cells: [{ cid: 1 }, { cid: 2, text: "Lexmark MX81x/MX71x 550-Sheet Tray" }, { cid: 3, text: "Lexmark" }, { cid: 4, text: "$253.96" }, { cid: 5, value: '../../../resources/stars-small-3.png' }]

},

{

id: 3,

text: "Video Games",

cells: [{ cid: 2, text: "Video Games" }]

},

{

id: 31,

pid: 3,

text: "PlayStation 4",

expanded: false,

cells: [{ cid: 2, text: "PlayStation 4" }]

},

{

id: 311,

pid: 31,

text: "Mortal Kombat X",

cells: [{ cid: 1 }, { cid: 2, text: "Mortal Kombat X" }, { cid: 3, text: "Warner Home Video - Games" }, { cid: 4, text: "$59.96" }, { cid: 5, value: '../../../resources/stars-small-4.png' }]

},

{

id: 312,

pid: 31,

text: "Bloodborne",

cells: [{ cid: 1 }, { cid: 2, text: "Bloodborne" }, { cid: 3, text: "Sony Computer Entertainment" }, { cid: 4, text: "$59.96" }, { cid: 5, value: '../../../resources/stars-small-5.png' }]

},

{

id: 313,

pid: 31,

text: "Destiny",

cells: [{ cid: 1 }, { cid: 2, text: "Destiny" }, { cid: 3, text: "Activision Inc." }, { cid: 4, text: "$35.94" }, { cid: 5, value: '../../../resources/stars-small-3.png' }]

},

{

id: 31,

pid: 3,

text: "PC Games",

cells: [{ cid: 2, text: "PC Games" }]

},

{

id: 311,

pid: 31,

text: "Grand Theft Auto V",

cells: [{ cid: 1 }, { cid: 2, text: "Grand Theft Auto V" }, { cid: 3, text: "Rockstar Games" }, { cid: 4, text: "$59.99" }, { cid: 5, value: '../../../resources/stars-small-3.png' }]

},

{

id: 312,

pid: 31,

text: "The Elder Scrolls V: Skyrim",

cells: [{ cid: 1, value: true }, { cid: 2, text: "The Elder Scrolls V: Skyrim" }, { cid: 3, text: "Bethesda Softworks" }, { cid: 4, text: "$39.99" }, { cid: 5, value: '../../../resources/stars-small-5.png' }]

}

];

 

var initTimer = $timeout(function(){

$gridService.expandColIndex($scope.gridName, 1);

$gridService.loadData($scope.gridName, $scope.flatData);

 

$timeout.cancel(initTimer);

}, 1);

});

.iui-treegrid-column-header-cell, .iui-treegrid-column-footer-cell

{

padding: 2px 2px;

}

.iui-treegrid-row-cell-content

{

padding: 2px 2px;

}

.row-hovered

{

background-color: #efefef;

}

.row-cell-hovered

{

color: #000080;

}

.row-selected

{

background-color: #dedede;

color: #008000;

}

.checkbox

{

width: 32px;

margin: auto;

}

.checkbox-box

{

border: 0;

display: inline-block;

width: 32px;

height: 14px;

}

.checkbox-checked

{

background-image: url("../../../resources/checkbox/checkbox-checked-3.png");

}

.checkbox-unchecked

{

background-image: url("../../../resources/checkbox/checkbox-unchecked-3.png");

}