# <netui-data:imageColumn> Tag

This tag renders an image into each data cell in a column.

## Syntax

<netui-data:imageColumn
[alt="string_alt"]
[border="integer_border"]
[filterAction="string_filterAction"]
[filterable="boolean_filterable"]
[height="integer_height"]
[name="string_name"]
[sortAction="string_sortAction"]
[sortable="boolean_sortable"]
src="literal_or_expression_src"
[styleClassPrefix="string_styleClassPrefix"]
title="string_title"
[width="integer_width"] />

## Description

This tag renders an image into each data cell in a column. The image that is rendered is specified with the `src` attribute and can be further parameterized with attributes to constrain its width, height, alternate text, and border. If the height and width attributes are not specified, the image is rendered at its actual size.

## Attributes

alt | The alternate text to display in the browser if the image can not be displayed.
Required | Supports runtime expression evaluation | Data bindable
No | No | No
border | Integer. The width of the border around the image.
Required | Supports runtime expression evaluation | Data bindable
No | No | No
filterAction | The action method that will handle the filter operation.
Required | Supports runtime expression evaluation | Data bindable
No | No | No
filterable | Boolean. Determines whether or not the column is filterable
Required | Supports runtime expression evaluation | Data bindable
No | No | No
height | Integer. The height of the image to be displayed in pixels.
Required | Supports runtime expression evaluation | Data bindable
No | No | No
name | Specifies the RowSet field to be rendered by the <netui-data:basicColumn> tag. The `name` attribute specifies which data in the RowSet should be extracted and rendered as a column. The `name` attribute should match one of the fields in the RowSet schema. For example, suppose you have the following RowSet schema (located in the RowSet control file), containing four data fields: `ITEMNUMBER`, `ITEMNAME`, `QUANTITYAVAILABLE`, and `PRICE`.
           <xsd:element name="ITEMNUMBER" type="xsd:int" ...>
           </xsd:element>
           <xsd:element name="ITEMNAME" type="xsd:string" ...>
           </xsd:element>
           <xsd:element name="QUANTITYAVAILABLE" type="xsd:int" ...>
           </xsd:element>
           <xsd:element name="PRICE" type="xsd:double" ...>
           </xsd:element>
The value of the `name` attribute should match one of the four values: `ITEMNUMBER`, `ITEMNAME`, `QUANTITYAVAILABLE`, or `PRICE`.
           <netui-data:basicColumn name="ITEMNUMBER" filterable="true" title="Itemnumber" sortable="true"/>
Required | Supports runtime expression evaluation | Data bindable
No | No | No
sortAction | The action method that will handle the sort operation.
Required | Supports runtime expression evaluation | Data bindable
No | No | No
sortable | Boolean. Determines whether or not the column is sortable.
Required | Supports runtime expression evaluation | Data bindable
No | No | No
src | The source of the image to display.
Required | Supports runtime expression evaluation | Data bindable
Yes | No | Read Only
styleClassPrefix | The style class prefix used to make the style class name in the header, data, and footer cells. The `styleClassPrefix` will be concatinated with a suffix to create style class names that are rendered inside of the <td> tags for each cell in this column. Assuming the value of this attribute is `foo`, the style class names rendered for each part of the column are shown in the table below.
Column Region | Style class
Header | foo-td-header
Data | foo-td-data
Footer | foo-td-footer
Required | Supports runtime expression evaluation | Data bindable
No | No | No
title | The text that will be rendered in the columns header.
Required | Supports runtime expression evaluation | Data bindable
Yes | No | No
width | Integer. The width of the image to be displayed in pixels.
Required | Supports runtime expression evaluation | Data bindable
No | No | No

## Sample

In this sample, a <netui-data:imageColumn> tag is nested within <netui-data:grid> and <netui-data:columns> tags to present a column that contains a different image in each cell.

     ...
     <netui:grid>
         <netui:columns>
     	...
     	  <netui-data:imageColumn title="Sale Items" border="1" alt="Sale Items"
     		                  src="/resources/images/{container.item.image}"/>
         </netui:columns>
     </netui:grid>

## Code Sample

[BEA_HOME]/weblogic81/samples/workshop/SamplesApp/WebApp/handlingData/binaryFlow/grid.jsp

## Related Topics

Handling Binary Data Sample

<netui-data:grid> Tag