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 Weba 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:

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

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.

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.

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.

Tab content switching

Newsletter

Sign-up to our newsletter and you will receive news on upcoming events, latest articles, samples and special offers.

Name:

Email: *

*By checking this box, I agree to receive a newsletter from Lidor Systems in accordance with the Privacy Policy. I understand that I can unsubscribe from these communications at any time by clicking on the unsubscribe link in all emails.