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/user grid
    <Portlet:UserGrid . . . compatability

    A UserGrid was developed as an extention of the 'Grid' widget to include some 'user personalization' features. This personalization allows a user to select the visible columns of the grid, and the order of the columns. This information is persisted so each time the grid is rendered for this user, it is done to there requirements. In addition to this it has a hover capability incase you scroll away from header or key fields in a large list.

    It can render its output in three formats (Visual HTML, Excel compliant HTML and XML), all of which honor the ordering and column visiblity when used.

    As with its predicesors, the <Table> and <Grid>, its visuals can be controlled via modifying the default CSS definitions supplied with Jaffa

    For exmaples of this widget using its different output format, refer to the 'results.jsp' pages generated by the ObjectFinder pattern



    General Attributes for User Grid Tag
    Attribute Name Mandatory/Optional Description
    userGridId Mandatory This is the unique id of the folding section.This must not have the same value as any other widget on the screen
    detail Optional This flag is set to true if you wish to have an event assocaited to the doubleclicking of a row.
    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.
    outputType Optional Values are 'WebPage' (default), 'Xml', 'Excel'.

    WebPage - writes out HTML with css and javascript functionality.
    Xml - writes out as XML data using <Root> and <Row> tags and use the column label for each cell in the grid.
    Excel - writes out a plain table with no formatting except on the <TD> tag it added in the attribute <x:str> which assumes x is defined as the correct MS-Excel namespace at the top of the page (<html xmlns:x="urn:schemas-microsoft-com:office:excel">). By doing this you can marshal the output of this page straight to Excel and the x:str will preserve formatting of strings, without it any string fields containing numbers with leading zeros, get treated as strings, and you loose the leading zeros.
    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 User Grid Column Tag
    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"
    key Optional This flag sets the column as being part of the primary.
    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.

    User Grid top


    A UserGrid 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

    Main UserGrid

    Settings Menu


    JSP Code

    <Portlet:UserGrid field="model1" detail="true" userGridId="exampleUserGrid" >
      <Portlet:UserGridColumn label="EditBox-es" key="true"
                              dataType="CaseInsensitiveString" >
        <Portlet:EditBox field="field1" validate="true"/>
        <Portlet:EditBox field="field2"/>
      <Portlet:UserGridColumn label="Another instance of an EditBox"
        <Portlet:EditBox field="field2" validate="true"/>
      <Portlet:UserGridColumn label="HTML Text" key="true">
        Plain Text
    Controlling the widget CSS top

    How they work

    Will create a complex HTML table , that is linked to various javascript JS files allowing sorting and various functions. Each table will have an associated settings menu. allows the user to change round the order of the columns and what columns to be shown. To define columns , the userGridColumTag must be defined within the enclosing userGridTag. Various attributes are available, the most notable are key=' ' and datatype=' '. Defining key='true' will identify that column as being one of the primary keys of the data set, and setting the datatype="" attribute , makes that column sortable.


    Controlling the look of a User Grid by CSS

    The UserGrid 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.

    It is important to note that tr.userGridSettingsHighlightOn is used to select the highlight color for the settings menu. Also when you are setting background colors .. do not use the background-color style tag use bacground instead as this is java script compliant.

    The UserGrid widget dynamically adds in the the CSS in the header of the page as opposed to they way the other widgets work. Also you must define the button.css for the buttons to appear on the settings screen, else they will appear only as text links.

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