LIDOR SYSTEMS

Advanced User Interface Controls and Components

IntegralUI Web

Native Angular 4 and AngularJS UI Components


TreeGrid / InCell Editor


This sample demonstrates how to enable incell editing, by creating a custom editor and place it inside a grid cell. In this case, the editor is applied to the cells in Title column.

To create a custom editor is simple, at first create a HTML content which will determine the editor appearance and behavior. Then apply a refrence of this template to the column's editorTemplate field. Next, set that editor will appear inside the cell, by specifying the editorType value to 'incell'.

In our example, editor consist of a textbox and two buttons. When a cell is clicked, the editor will pop up, with input focus set to the textbox. Whenever the Ok button is clicked, the cell value is updated. This is all customizable.

When column has a custom editor set, whenever a cell is hovered, an editor mark will appear on the right side. Currenty there are two types of custom editors: 'incell' and 'dropdown'. The appearance of this mark depends on editor type. In case of a incell editor, it is a an icon of a pencil.

Note   You can also check out the DropDown Editor.

In this sample, the following column fields, methods and events are used:

  • editorType - determines the type of the editor, in this case is 'incell'
  • editorTemplate - holds a reference to a template by which editor is created
  • closeEditor - closes the currently opened editor
  • beforeEdit - occurs before editing process starts
  • afterEdit - occurs after editing process ends

<!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">

<script type="text/ng-template" id="celleditor.html">

<div class="cell-editor" ng-model="editCell">

<input ng-model="editBox.text" iui-focus="editorFocus" onfocus="this.select()" tabindex="91" ng-keydown="onEditKeyDown($event)" />

<button ng-click="onOk(editCell)" tabindex="92">Ok</button>

<button ng-click="onCancel(editCell)" tabindex="93">Cancel</button>

</div>

</script>

<iui-treegrid name="{{gridName}}" columns="columns" rows="rows" before-edit="onBeforeEdit(e)" after-edit="onAfterEdit(e)"></iui-treegrid>

</div>

</body>

</html>

angular

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

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

$scope.gridName = "gridSample";

$scope.editCell = null;

 

$scope.columns = [

{

id: 1,

headerText: "Title",

editorType: 'incell',

editorTemplate: "'celleditor.html'",

width: 400

},

{

id: 2,

editorType: 'checkbox',

editorSettings: {

style: {

general: 'checkbox',

box: {

general: 'checkbox-box',

checked: 'checkbox-checked',

indeterminate: 'checkbox-indeterminate',

unchecked: 'checkbox-unchecked'

}

},

threeState: true

},

contentAlignment: 'center',

width: 30,

fixedWidth: true

},

{ id: 3, headerText: "Year", headerAlignment: "center", contentAlignment: "center", width: 70 },

{ id: 4, headerText: "Ratings", headerAlignment: "center", contentAlignment: "center", width: 80 },

{ id: 5, headerText: "Released", headerAlignment: "center", contentAlignment: "center", width: 130 }

];

 

$scope.rows = [

{

id: 1,

text: "Mystery",

cells: [{ cid: 1, text: "Mystery" }, { cid: 2 }],

rows: [

{

id: 11,

pid: 1,

text: "Inception",

cells: [{ cid: 1, text: "Inception" }, { cid: 2, value: 'checked' }, { cid: 3, text: "2010" }, { cid: 4, text: "8.8" }, { cid: 5, text: "16 Jul 2010" } ]

},

{

id: 12,

pid: 1,

text: "Snowpiercer",

cells: [{ cid: 1, text: "Snowpiercer" }, { cid: 2 }, { cid: 3, text: "2014" }, { cid: 4, text: "7.0" }, { cid: 5, text: "11 Jul 2014" } ]

},

{

id: 13,

pid: 1,

text: "Shutter Island",

cells: [ { cid: 1, text: "Shutter Island" }, { cid: 2, value: 'checked' }, { cid: 3, text: "2010" }, { cid: 4, text: "8.1" }, { cid: 5, text: "19 Feb 2010" } ]

},

]

},

{

id: 2,

text: "Sci-Fi",

cells: [{ cid: 1, text: "Sci-Fi" }, { cid: 2 }],

rows: [

{

id: 21,

pid: 2,

text: "Gravity",

cells: [{ cid: 1, text: "Gravity" }, { cid: 2 }, { cid: 3, text: "2013" }, { cid: 4, text: "7.9" }, { cid: 5, text: "04 Oct 2013" } ]

},

{

id: 22,

pid: 2,

text: "Prometheus",

cells: [{ cid: 1, text: "Prometheus" }, { cid: 2, value: 'checked' }, { cid: 3, text: "2012" }, { cid: 4, text: "7.0" }, { cid: 5, text: "08 Jun 2012" } ]

},

{

id: 23,

pid: 2,

text: "The Avengers",

cells: [{ cid: 1, text: "The Avengers" }, { cid: 2 }, { cid: 3, text: "2012" }, { cid: 4, text: "8.2" }, { cid: 5, text: "04 May 2012" } ]

},

{

id: 24,

pid: 2,

text: "Dawn of the Planet of the Apes",

cells: [{ cid: 1, text: "Dawn of the Planet of the Apes" }, { cid: 2, value: 'checked' }, { cid: 3, text: "2014" }, { cid: 4, text: "7.7" }, { cid: 5, text: "11 Jul 2014" } ]

},

{

id: 25,

pid: 2,

text: "Interstellar",

cells: [{ cid: 1, text: "Interstellar" }, { cid: 2 }, { cid: 3, text: "2014" }, { cid: 4, text: "8.7" }, { cid: 5, text: "07 Nov 2014" } ]

},

]

},

{

id: 3,

text: "Action",

cells: [{ cid: 1, text: "Action" }, { cid: 2, value: 'checked' }],

rows: [

{

id: 31,

pid: 3,

text: "Edge of Tomorrow",

cells: [{ cid: 1, text: "Edge of Tomorrow" }, { cid: 2, value: 'checked' }, { cid: 3, text: "2014" }, { cid: 4, text: "7.9" }, { cid: 5, text: "06 Jun 2014" } ]

},

{

id: 32,

pid: 3,

text: "The Dark Knight Rises",

cells: [{ cid: 1, text: "The Dark Knight Rises" }, { cid: 2, value: 'checked' }, { cid: 3, text: "2012" }, { cid: 4, text: "8.5" }, { cid: 5, text: "20 Jul 2012" } ]

},

]

},

{

id: 4,

text: "Drama",

cells: [{ cid: 1, text: "Drama" }, { cid: 2 }],

rows: [

{

id: 41,

pid: 4,

text: "Locke",

cells: [{ cid: 1, text: "Locke" }, { cid: 2 }, { cid: 3, text: "2014" }, { cid: 4, text: "7.1" }, { cid: 5, text: "29 May 2014" } ]

},

{

id: 42,

pid: 4,

text: "Blue Jasmine",

cells: [{ cid: 1, text: "Blue Jasmine" }, { cid: 2, value: 'checked' }, { cid: 3, text: "2013" }, { cid: 4, text: "7.3" }, { cid: 5, text: "23 Aug 2013" } ]

},

{

id: 43,

pid: 4,

text: "Black Swan",

cells: [{ cid: 1, text: "Black Swan" }, { cid: 2 }, { cid: 3, text: "2010" }, { cid: 4, text: "8.0" }, { cid: 5, text: "17 Dec 2010" } ]

},

{

id: 44,

pid: 4,

text: "American Hustle",

cells: [{ cid: 1, text: "American Hustle" }, { cid: 2 }, { cid: 3, text: "2013" }, { cid: 4, text: "7.3" }, { cid: 5, text: "20 Dec 2013" } ]

},

]

},

{

id: 5,

text: "Horror",

cells: [{ cid: 1, text: "Horror" }, { cid: 2 }],

rows: [

{

id: 51,

pid: 5,

text: "The Conjuring",

cells: [{ cid: 1, text: "The Conjuring" }, { cid: 2 }, { cid: 3, text: "2013" }, { cid: 4, text: "7.5" }, { cid: 5, text: "19 Jul 2013" } ]

},

]

},

{

id: 6,

text: "Crime",

cells: [{ cid: 1, text: "Crime" }, { cid: 2 }],

rows: [

{

id: 61,

pid: 6,

text: "Nightcrawler",

cells: [{ cid: 1, text: "Nightcrawler" }, { cid: 2, value: 'checked' }, { cid: 3, text: "2014" }, { cid: 4, text: "7.9" }, { cid: 5, text: "31 Oct 2014" } ]

},

{

id: 62,

pid: 6,

text: "Prisoners",

cells: [{ cid: 1, text: "Prisoners" }, { cid: 2 }, { cid: 3, text: "2013" }, { cid: 4, text: "8.1" }, { cid: 5, text: "20 Sep 2013" } ]

},

{

id: 63,

pid: 6,

text: "The Town",

cells: [{ cid: 1, text: "The Town" }, { cid: 2 }, { cid: 3, text: "2010" }, { cid: 4, text: "7.6" }, { cid: 5, text: "17 Sep 2010" } ]

},

]

},

{

id: 7,

text: "Biography",

cells: [{ cid: 1, text: "Biography" }, { cid: 2 }],

rows: [

{

id: 71,

pid: 7,

text: "The Social Network",

cells: [{ cid: 1, text: "The Social Network" }, { cid: 2, value: 'checked' }, { cid: 3, text: "2010" }, { cid: 4, text: "7.8" }, { cid: 5, text: "01 Oct 2010" } ]

},

{

id: 72,

pid: 7,

text: "The Wolf of Wall Street",

cells: [{ cid: 1, text: "The Wolf of Wall Street" }, { cid: 2, value: 'checked' }, { cid: 3, text: "2013" }, { cid: 4, text: "8.2" }, { cid: 5, text: "25 Dec 2013" } ]

},

{

id: 73,

pid: 7,

text: "Rush",

cells: [{ cid: 1, text: "Rush" }, { cid: 2 }, { cid: 3, text: "2013" }, { cid: 4, text: "8.2" }, { cid: 5, text: "27 Sep 2013" } ]

},

]

},

{

id: 8,

text: "Animation",

cells: [{ cid: 1, text: "Animation" }, { cid: 2 }],

rows: [

{

id: 81,

pid: 8,

text: "Frozen",

cells: [{ cid: 1, text: "Frozen" }, { cid: 2 }, { cid: 3, text: "2013" }, { cid: 4, text: "7.7" }, { cid: 5, text: "27 Nov 2013" } ]

},

{

id: 82,

pid: 8,

text: "Toy Story 3",

cells: [{ cid: 1, text: "Toy Story 3" }, { cid: 2, value: 'checked' }, { cid: 3, text: "2010" }, { cid: 4, text: "8.4" }, { cid: 5, text: "18 Jun 2010" } ]

},

]

}

];

 

$scope.editorFocus = { active: false }

$scope.editBox = { text: '' }

 

$scope.onBeforeEdit = function(e){

if (e.cell){

$scope.editCell = e.cell;

$scope.editBox.text = e.cell.text;

$scope.editorFocus.active = true;

}

}

 

$scope.onAfterEdit = function(e){

$scope.editCell = null;

$scope.editorFocus.active = false;

}

 

$scope.onOk = function(cell){

confirmEdit(cell);

}

 

$scope.onCancel = function(cell){

cancelEdit(cell);

}

 

var confirmEdit = function(cell){

if (cell)

cell.text = $scope.editBox.text;

 

$gridService.closeEditor($scope.gridName, $scope.editCell);

}

 

var cancelEdit = function(){

$gridService.closeEditor($scope.gridName, $scope.editCell);

}

 

$scope.onEditKeyDown = function(e){

switch (e.keyCode){

case 13: // ENTER

$gridService.focus($scope.gridName, $scope.editCell);

confirmEdit($scope.editCell);

break;

 

case 27: // ESCAPE

cancelEdit($scope.editCell);

break;

}

 

e.stopPropagation();

}

});

/* TreeGrid settings */

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

{

padding: 2px 2px;

}

.iui-treegrid-row-selected

{

background: transparent;

color: black;

}

.iui-treegrid-row-cell-content

{

padding: 2px 2px;

}

.checkbox

{

width: 16px;

margin: auto;

}

.checkbox-box

{

border: 0;

display: inline-block;

width: 16px;

height: 16px;

}

.checkbox-checked

{

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

}

.checkbox-indeterminate

{

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

}

.checkbox-unchecked

{

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

}

 

/* Editor Template Inline */

.cell-editor

{

background: white;

overflow: hidden;

}

.cell-editor:before

{

content: "";

display: inline-block;

vertical-align: middle;

height: 100%;

}

input

{

display: inline-block;

vertical-align: middle;

width: 200px;

}

button

{

background: #2455b0;

border: thin solid #1e4691;

color: white;

padding: 2px 5px;

display: inline-block;

vertical-align: middle;

}