LIDOR SYSTEMS

Advanced User Interface Controls and Components

Angular Grid as ListBox

Created: 20 April 2016

Usually the grid displays tabular data in multiple columns with header and footer. The IntegralUI Grid for AnguarJS has an option to hide its column header and footer, and by using templates to add custom HTML content so that its appearance and behavior is similar to the standard ListBox. In this article, we will show you how to do that.


Grid directive is part of IntegralUI Studio for Web
a suite of UI Components for development of web apps

On first look, you cannot tell whether the above control is a Grid or a ListBox. By CSS modifications and templates, the Angular Grid appears as a simple list. In this example, we have chosen to show a list of device drivers.

Set the Grid to Appear as ListBox without Header and Footer

At first, in order to hide the grid column header and footer, you need to set a false value to the following properties:

  • showHeader – determines whether column header is visible or not
  • showFooter – determines whether column footer is visible or not

Next, by default the grid displays horizontal and vertical lines for its cells. To create an appearance similar to a ListBox, you can choose either to have only horizontal lines visible or to hide all lines. This can be set by changing the value of gridLines property to 'horizontal' or 'none'.

<iui-grid name="{{gridName}}" class="directive" columns="columns" rows="rows" show-header="false" show-footer="false" grid-lines="'horizontal'" allow-focus="false"></iui-grid>

/* Grid settings */

.directive

{

border: thin solid #dadada;

width: 700px;

height: 255px;

}

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

{

padding: 2px 2px;

}

.iui-grid-row-cell-content

{

padding: 10px 2px;

}

.iui-grid-row-hovered

{

background-color: #f5f5f5;

}

.iui-grid-row-selected

{

background-color: #e9e9e9;

color: black;

}

.iui-grid-lines-horizontal

{

border-bottom-color: #dedede;

}

.iui-grid-row-cell:first-child

{

border-left-color: transparent;

}

.iui-grid-row-cell:last-child

{

border-right-color: transparent;

}

.iui-grid-row-selected .iui-grid-row-cell:first-child

{

border-left-color: #d9d9d9;

}

.iui-grid-row-selected .iui-grid-row-cell:last-child

{

border-right-color: #d9d9d9;

}

Now we have a grid that appears as a simple list. Still, at this moment we can only show text in grid cells. To add a custom HTML content, you need to use templates.

Related: Angular Grid with Custom Cell Templates

Each column can have a different template. This allows you to add a HTML content for each column cell separately from other column cells.

Create Custom Template for Grid Cells

To create a template, you need to set it in your web page by using the <script> tag. In this way, it will be added to the template cache and you can access it by using its identifier.

<script type="text/ng-template" id="'driver-info.html'">

<span class="icons-medium {{obj.icon}}"></span>

<div class="driver-info">

<a href="">{{obj.category}}</a><br/>

<span>{{obj.name}}</span>

</div>

</script>

<script type="text/ng-template" id="'driver-action.html'">

<div class="button-cell">

<button ng-click="obj.updateDriver(obj)">Update</button>

</div>

</script>

/* Button Cell */

.button-cell

{

text-align: center;

}

.button-cell button

{

background: white;

border: thin solid #c8c8c8;

color: #e05d20;

padding: 5px;

width: 75px;

}

.button-cell button:hover

{

background: #e05d20;

color: white;

}

 

/* Icons */

.icons-medium

{

background-image: url(../../../resources/icons-x24.png);

background-repeat: no-repeat;

display: inline-block;

margin: 10px 5px 0 0;

overflow: hidden;

padding: 0 !important;

width: 24px;

height: 24px;

vertical-align: top;

}

.sound

{

background-position: 0 -168px;

}

.usb

{

background-position: -24px -168px;

}

.driver-info

{

display: inline-block;

}

.iui-checkbox-box

{

border: 0;

width: 16px;

height: 16px;

}

.iui-checkbox-checked

{

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

}

.iui-checkbox-unchecked

{

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

}

Each column object has a cellTemplateUrl field that as value accepts the template identifier. In this example, we have two templates:

  • Second column - displays an icon and information about device driver in two lines
  • Last column - displays a button that when clicked will show a message

Note The first column displays a checkbox, which is a built-in option from Angular Grid directive.

In first template, a <span> element is used to display an icon (the element background is rendered using a custom image), and a <div> element that shows text in two lines. The second template, contains a <div> element with a <button>.

In both cases, you can notice that we are using an object named obj, to add custom data and functionality to the template. This object is linked with the templateObj field from the grid cells, and provides a specific data for each cell separately. In this way, we are using a single HTML content to show different data in the same column.

$scope.gridName = "gridSample";

$scope.columns = [];

$scope.rows = [];

 

$scope.columns = [

{ id: 1, editorType: 'checkbox', contentAlignment: 'center', width: 30, fixedWidth: true },

{ id: 2, headerText: "Name", width: 300, cellTemplateUrl: "'driver-info.html'" },

{ id: 3, headerText: "Version", width: 120, contentAlignment: 'center' },

{ id: 4, headerText: "Date", width: 110, contentAlignment: 'center' },

{ id: 5, width: 90, contentAlignment: 'center', cellTemplateUrl: "'driver-action.html'" }

];

 

$scope.rows = [

{

id: 1,

cells: [

{ cid: 1 },

{

cid: 2,

templateObj: {

icon: 'disk',

category: 'Disk drives',

name: 'TOSHIBA DT01ACA100 ATA Device'

}

},

{ cid: 3, text: "6.1.7600.16385" },

{ cid: 4, text: "21 Jun 2015" },

{

cid: 5,

templateObj: {

id: 1,

updateDriver: function(obj){ return $scope.onUpdateDriver(obj) }

}

}

]

},

{

id: 2,

cells: [

{ cid: 1, value: true },

{

cid: 2,

templateObj: {

icon: 'pc',

category: 'Display adapters',

name: 'NVIDIA GeForce GT 730'

}

},

{ cid: 3, text: "10.18.13.5891" },

{ cid: 4, text: "05 Nov 2015" },

{

cid: 5,

templateObj: {

id: 2,

updateDriver: function(obj){ return $scope.onUpdateDriver(obj) }

}

}

]

},

 

// ... Data for other rows goes here

];

In order to provide user interaction when using templates, you need to set functions within the templateObj. This is required, because the template content is compiled against the scope of the grid directive. Although the function is the same for each grid cell, you can determine to which row this cell belongs by providing the row id within the templateObj.

var getDriverName = function(id){

var row = $gridService.findRowById($scope.gridName, id);

return row ? row.cells[1].templateObj.name : '';

}

 

$scope.onUpdateDriver = function(obj){

var driverName = getDriverName(obj.id);

alert("Update Driver for " + driverName);

}

Conclusion

By simple modification of CSS and some general properties of the Grid directive for AngularJS, you can make it to appear and act as a ListBox. Furthermore, using templates you can customize it by adding HTML elements in different layouts for each column separately.

Did you Like this Article?


Enter your e-mail address below and you will receive latest articles as well as news on upcoming events and special offers.