LIDOR SYSTEMS

Advanced User Interface Controls and Components

IntegralUI Web

Native Angular and AngularJS UI Components


TreeGrid / Cells with ComboBox Editor


This example shows how to add drop down check 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 a check box and label.

When mouse cursor hovers over cell with a ComboBox editor, a drop down button will appear. When cell or this button is clicked, a drop down list appears, with items set in the ComboBox. By selecting an enabled item from this list, a cell value will change. In case of this example second item in the list is disabled, and it cannot become applied to a cell.

Each cell has a value field which can accept custom objects, in case of an combo box, it accepts one item object from a list of available items in the combo.

Each column has an editorSettings field, which allows you to set the behavior and appearance of applied editor. In case of the ComboBox editor, the following properites are available:

editorSettings = {

checkBoxSettings: {

showCheckBoxes, // determines whether drop down list will show items with a check box

threeState, // determines whether check boxes can accept two or three state values

style // an object that contains names of CSS classes for each part of the check box (unavailable in the moment)

},

dropDownWidth, // determines the width of drop down list

dropDownHeight, // determines the height of drop down list

itemIcon, // a default icon for all items

items, // an array of item objects dispalyed in the drop down list

maxDropDownItems, // a number of maximum visible items in the drop down list

rtl, // determines whether right-to-left layout is used (unavailable in the moment)

showIcons, // determines whether item icon is visible

style // an object that contains names of CSS classes for each part of the combo box (unavailable in the moment)

}


ComboBox editor can appear using mouse cursor or by pressing the 'ENTER' key. In case of this example, keyboard navigation is disabled, and ComboBox editor can appear only using mouse clicks.


<!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.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.checkbox.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="columns" rows="rows" row-icon="defaultIcon" cellvalue-changing="onCellValueChanging(e)" cellvalue-changed="onCellValueChanged(e)" allow-focus="false"></iui-treegrid>

</div>

</body>

</html>

angular

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

.controller("appCtrl", function($scope){

$scope.gridName = "gridSample";

$scope.sampleRows = [];

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

 

$scope.comboList = [

{ text: 'Option1' },

{ text: 'Option2', checked: true, enabled: false },

{ text: 'Option3' },

{ text: 'Option4', checked: true },

{ text: 'Option5' },

{ text: 'Option6', checked: true },

{ text: 'Option7', checked: true }

];

 

$scope.columns = [

{ headerText: 'Header1', footerText: 'Footer1', width: 300 },

{

headerText: "Header2",

footerText: 'Footer2',

editorType: 'combobox',

editorSettings: {

checkBoxSettings: {

showCheckBoxes: true,

threeState: false

},

items: $scope.comboList,

maxDropDownItems: 4

},

width: 250

},

{ headerText: 'Header3', footerText: 'Footer3', width: 300 }

];

 

$scope.rows = [

{

id: 1,

text: "Item1",

cells: [{ text: "Item11" }, { value: $scope.comboList[3] }, { text: "Item13" }],

rows: [

{ id: 11, pid: 1, text: "Item11", cells: [{ text: "Item111" }, { value: $scope.comboList[7] }, { text: "Item113" }] },

{

id: 12,

pid: 1,

text: "Item12",

cells: [{ text: "Item121" }, { value: $scope.comboList[4] }, { text: "Item123" }],

rows: [

{ id: 121, pid: 12, text: "Item121", cells: [{ text: "Item1211" }, { value: $scope.comboList[1] }, { text: "Item1213" }] },

{

id: 122,

pid: 12,

text: "Item122",

cells: [{ text: "Item1221" }, { value: $scope.comboList[6] }, { text: "Item1223" }],

expanded: false,

rows: [

{ id: 1221, pid: 122, text: "Item1221", cells: [{ text: "Item12211" }, { value: null }, { text: "Item12213" }] },

{ id: 1222, pid: 122, text: "Item1222", cells: [{ text: "Item12221" }, { value: $scope.comboList[3] }, { text: "Item12223" }] }

]

},

{ id: 123, pid: 12, text: "Item123", cells: [{ text: "Item1231" }, { value: $scope.comboList[5] }, { text: "Item1233" }] }

]

},

{ id: 13, pid: 1, text: "Item13", cells: [{ text: "Item131" }, { value: null }, { text: "Item133" }] },

{

id: 14,

pid: 1,

text: "Item14",

cells: [{ text: "Item141" }, { value: $scope.comboList[4] }, { text: "Item143" }],

rows: [

{ id: 141, pid: 14, text: "Item141", cells: [{ text: "Item1411" }, { value: $scope.comboList[7] }, { text: "Item1413" }] },

{ id: 142, pid: 14, text: "Item142", cells: [{ text: "Item1421" }, { value: $scope.comboList[1] }, { text: "Item1423" }] }

]

}

]

},

{

id: 2,

text: "Item2",

cells: [{ text: "Item21" }, { value: $scope.comboList[4] }, { text: "Item23" }],

expanded: false,

rows: [

{ id: 21, pid: 2, text: "Item21", cells: [{ text: "Item211" }, { value: $scope.comboList[3] }, { text: "Item213" }] },

{ id: 22, pid: 2, text: "Item22", cells: [{ text: "Item221" }, { value: null }, { text: "Item223" }] },

{

id: 23,

pid: 2,

text: "Item23",

cells: [{ text: "Item231" }, { value: $scope.comboList[3] }, { text: "Item233" }],

expanded: false,

rows: [

{ id: 231, pid: 23, text: "Item231", cells: [{ text: "Item2311" }, { value: $scope.comboList[4] }, { text: "Item2313" }] },

{ id: 232, pid: 23, text: "Item232", cells: [{ text: "Item2321" }, { value: $scope.comboList[5] }, { text: "Item2323" }] }

]

}

]

},

{ id: 3, text: "Item3", cells: [{ text: "Item31" }, { value: $scope.comboList[1] }, { text: "Item33" }] }

];

 

$scope.onCellValueChanging = function(e){

if (e.value && e.value.enabled == false)

return false;

}

 

$scope.onCellValueChanged = function(e){

console.log(e);

}

});

.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;

}