LIDOR SYSTEMS

Advanced User Interface Controls and Components

IntegralUI Web

Native Angular 4 and AngularJS UI Components


TreeGrid / Cells with DropDown List


This example shows how to add a simple drop down list to cells in TreeGrid, AngularJS. This is done by setting the editorType field of specified column to 'combobox', which allows ComboBox component with a drop down list to appear below a cell. The drop down list contains items with an icon and label.

In this example, cells that belong to the 'Ship Via' column have a ComboBox editor. The editor can appear using mouse cursor or by pressing the 'ENTER' key when cell has the input focus. In either case, when item is selected from the drop down list, the cell value will change. During this process, two events are fired:

  • cellvalueChanging - occurs when cell value is about to change
  • cellvalueChanged - occurs when cell value has changed

By adding handlers for these events in your application code, you can set custom conditions and change the end result. For example, you can prevent some cell to change its value.

In case of ComboBox editor, each cell accept only values from the drop down list. If any other value is used, it will be discarded when editor appears.

For more information on how to set and use ComboBox editor, check out this sample: TreeGrid / ComboBox Editor.

<!DOCTYPE html>

<html>

<head>

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

<link rel="stylesheet" href="css/integralui.combobox.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.combobox.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="sampleColumns" rows="sampleRows" row-icon="defaultIcon" show-footer="false" tabindex="0">></iui-treegrid>

</div>

</body>

</html>

angular

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

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

$scope.gridName = "gridSample";

$scope.sampleRows = [];

$scope.defaultIcon = "icons-medium empty-doc";

 

$scope.comboList = [

{ icon: 'icons-medium speed', text: 'Speedy Express' },

{ icon: 'icons-medium empty', text: 'Federal Shipping' },

{ icon: 'icons-medium transfer', text: 'United Package' }

];

 

$scope.sampleColumns = [

{ id: 1, columnTitle: "Customer/Order ID", columnAlignment: "center", size: 250 },

{ id: 2, columnTitle: "Ordered", columnAlignment: "center", cellAlignment: "center", size: 120 },

{ id: 3, columnTitle: "Shipped", columnAlignment: "center", cellAlignment: "center", size: 120 },

{

id: 4,

columnTitle: "Ship Via",

columnAlignment: "center",

editorType: 'combobox',

editorSettings: {

items: $scope.comboList,

dropDownWidth: 175,

maxDropDownItems: 3

},

size: 130

},

{ id: 5, columnTitle: "Freight", columnAlignment: "center", cellAlignment: "right", size: 100 },

{ id: 8, columnTitle: "Country", columnAlignment: "center", cellAlignment: 'center' }

];

 

$scope.flatData = [

{

rowID: 1,

icon: "icons-medium people",

rowText: "Piccolo und mehr",

cells: [{ cid: 1, cellText: "Piccolo und mehr" }, { cid: 6, cellText: "Geislweg 14" }, { cid: 7, cellText: "Salzburg" }, { cid: 8, cellText: "Austria" }]

},

{

rowID: 11,

parentID: 1,

rowText: "Order #10259",

cells: [{ cid: 1, cellText: "10259" }, { cid: 2, cellText: "9/13/2012" }, { cid: 3, cellText: "9/27/2012" }, { cid: 4, value: $scope.comboList[0] }, { cid: 5, cellText: "360.63" }]

},

{

rowID: 12,

parentID: 1,

rowText: "Order #11094",

cells: [{ cid: 1, cellText: "11094" }, { cid: 2, cellText: "1/20/2013" }, { cid: 3, cellText: "2/5/2013" }, { cid: 4, value: $scope.comboList[0] }, { cid: 5, cellText: "200.14" }]

},

{

rowID: 2,

icon: "icons-medium people",

rowText: "Frankenversand",

cells: [{ cid: 1, cellText: "Frankenversand" }, { cid: 6, cellText: "Berliner Platz 43" }, { cid: 7, cellText: "Munchen" }, { cid: 8, cellText: "Germany" }]

},

{

rowID: 21,

parentID: 2,

rowText: "Order #11536",

cells: [{ cid: 1, cellText: "11536" }, { cid: 2, cellText: "12/9/2013" }, { cid: 3, cellText: "1/7/2014" }, { cid: 4, value: $scope.comboList[1] }, { cid: 5, cellText: "85.53" } ]

},

{

rowID: 22,

parentID: 2,

rowText: "Order #14472",

cells: [{ cid: 1, cellText: "14472" }, { cid: 2, cellText: "11/14/2014" }, { cid: 3, cellText: "11/25/2014" }, { cid: 4, value: $scope.comboList[1] }, { cid: 5, cellText: "112.30" } ]

},

{

rowID: 3,

icon: "icons-medium people",

rowText: "Laughing Bacchus Wine Cellars",

cells: [{ cid: 1, cellText: "Laughing Bacchus Wine Cellars" }, { cid: 6, cellText: "1900 Oak St." }, { cid: 7, cellText: "Vancouver" }, { cid: 8, cellText: "Canada" }]

},

{

rowID: 31,

parentID: 3,

rowText: "Order #11495",

cells: [{ cid: 1, cellText: "11495" }, { cid: 2, cellText: "8/7/2013" }, { cid: 3, cellText: "9/20/2013" }, { cid: 4, value: $scope.comboList[2] }, { cid: 5, cellText: "49.28" } ]

}

];

 

$scope.dataFields = {

column: {

headerText: 'columnTitle',

headerAlignment: 'columnAlignment',

contentAlignment: 'cellAlignment',

width: 'size'

},

row: {

id: 'rowID',

pid: 'parentID',

text: 'rowText'

},

cell: {

text: 'cellText'

}

}

 

var loadTimer = $timeout(function(){

$gridService.loadData($scope.gridName, $scope.flatData, null, $scope.dataFields, true);

 

$timeout.cancel(loadTimer);

}, 1);

}]);

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

{

padding: 1px 3px;

}

.iui-treegrid-row-cell-content

{

padding: 1px 3px;

}

.iui-list

{

font-size: 0.75em;

}

.iui-list-item

{

padding: 0;

}

.iui-list-item-content

{

margin-left: 3px;

}