tag libraries
Jaffa Tags
  • buttons
  • check box
  • date/time editbox
  • drop down
  • editbox
  • grid
  • image
  • label
  • lookup
  • radio button
  • table
  • text field
  • user grid
  • Layout Controls
  • folding section
  • Guards
  • component guard
  • function guard
  • Page Controls
  • header
  • form
  • footer
  • raise errors
  • Other Tags
  • html
  • logic
  • bean
  • util
  • template
  • digester
  • JSTL
  • Sun Site
  • Taglibs
  • reference
  • widgets/grid
    <Portlet:Grid . . . compatability

    The grid widget can display a grid of other widgets. It supports features like column sorting, and also provides a 'frameless' version for use as a basic layout manager for other widgets.


    1. Grid widget
    General Attributes for Grid Tags
    Attribute Name Mandatory/Optional Description
    cssUrl Mandatory URL locataion of a css file.
    className Optional The class name to use for CSS.
    width Optional Specify the width to use. This is included using style="width: xxx"
    noRecordsKey Optional This allows a token key to be specified with a custom no records message.
    detail Optional This flag is set to true if you wish to have an event assocaited to the doubleclicking of a row.
    field Optional This is the field name that will match the corresponding getter and setter on the Form Bean.
    target Optional Specifies a literal HTML for target="".
    General Attributes for Grid Column Tags
    Attribute Name Mandatory/Optional Description
    label Mandatory allows the user to specify a literal label or a key for a token .. use [] when specifying a token.
    height Optional Specify the height to use. This is included using style="height: xxx"
    width Optional Specify the width to use. This is included using style="width: xxx"
    datatype Optional This specifies the datatype to associate to a column for sorting. Valid values are 'String' (Default), 'CaseInsensitiveString', 'Number' or 'Date'
    Event Name Description
    do_rows_Clicked(row number) This event is fired when row is double clicked
    do_Rows_View_Clicked(row number) This event is fired when the detail icon is pressed
    General Comments

    Because of the differences in the DOM manipulation between Internet Explorer and the Gecko Browsers the sorting rountines will run far slower in the Gecko Browsers.

    Grid top


    A Grid is a widget that resembles a Table. It can contain other widgets and allows the user the ability to sort columns if a datatype attribute is specified.


    In Browser

    JSP Code

    <Portlet:Grid field="model1" detail="true"
        displayOnly="true" cssClass="fredrick" cssUrl="jaffa/css/widgets/tablesorttest.css">
        <Portlet:GridColumn label="EditBox-es" dataType="CaseInsensitiveString">
            <Portlet:EditBox field="field1" validate="true"/>
            <Portlet:EditBox field="field2"/>
        <Portlet:GridColumn label="Another instance of an EditBox" key="true">
            <Portlet:EditBox field="field2" validate="true"/>
        <Portlet:GridColumn label="HTML Text" key="true">
            <h1>Plain Text </h1>

    How they work:

    Will create a complex HTML table , that is linked to various javascript JS files allowing sorting . To define columns , the GridColumTag must be defined within the enclosing GridTag. Various attributes are available, the most notable are cssURL=' ' , cssClass='' and datatype=' '. Defining a the attribute cssUrl associates the table to a different Cascading Style Sheet and cssClass to a differnt class name, and setting the datatype="" attribute , makes that column sortable.

    Controlling the widget CSS top

    Controlling the look of a Grid by CSS

    The Grid widget's corresponding CSS can be found at 'source/html/jaffa/css/widgets/tablesort.css'. Look at the diagrams to identify areas within the tables governed by the CSS. The grid widget allows you to select from different CSS files if desired.

    index.html, Last Modified 28-Jun-2003 at 04:14:10pm