BBjGrid

Description

In BBj 7.00 and higher, the BBjGrid is the abstract base class for BBjStandardGrid, BBjDataAwareGrid and BBjDataBoundGrid. BBjGrid contains the methods that are common to BBjStandardGrid, BBjDataAwareGrid, and BBjDataBoundGrid.

Extended Interfaces

DragSource, DropTarget, CommonGrid, Focusable, MouseWheelEnabled, Scrollable.TabTraversable

Methods of BBjGrid – Drag and Drop

Methods of BBjGrid – Grid CSS Style

Methods of BBjGrid – Grid Headers

Methods of BBjGrid – Grid Rows and Columns

Methods of BBjGrid – Grid Scrolling

Methods of BBjGrid – Grid Cell Contents

Methods of BBjGrid – Grid Cell Editing

Methods of BBjGrid – Grid Cell Style

Methods of BBjGrid – Grid Cell Alignment

Methods of BBjGrid – Grid Cell Selection

Methods of BBjGrid – Grid Colors

Methods of BBjGrid – Grid Fonts

Methods of BBjGrid – Icon Functions

Methods of BBjGrid – Miscellaneous Grid Functions

Methods of BBjGrid implemented for CommonGrid

Methods of BBjGrid implemented for Focusable

Methods of BBjGrid implemented for MouseWheelEnabled

Methods of BBjGrid implemented for Scrollable

Methods of BBjGrid implemented for TabTraversable

Methods of BBjGrid inherited from BBjControl

Events

CSS

The visual appearance of BUI controls is defined using CSS (cascading style sheets) rules. Easily change the default colors, border, and other settings by customizing these rules, all without changing any application code. See CSS API for a high-level overview of BUI CSS.

The BBjGrid is a complex structured control with several nested layers. It defines the following style names:

As with all BBjControls, the top level style name, .BBjGrid, corresponds to the control name. The next level in is .BBjGrid-masterPanel. For implementation reasons, this is the level that defines the default outer border. The master panel contains four separate areas:  The main body of the grid, with a style name of .BBjGrid-fieldPanel; column and row headers, with style names of .BBjGrid-columnHeader and .BBjGrid-rowHeader; and the small leftover piece in the upper left corner, .BBjGrid-corner.

Within the main grid and column headers, individual cells have the style names .BBjGrid-mainGridCell, .BBjGrid-columnHeaderCell, or .BBjGrid-rowHeaderCell. Each cell is also assigned several additional style names based on the type of cell (the default type is .BBjGrid-inputECell), the cell row and column (.BBjGid-row0,  .BBjGrid-column0, etc.), .BBjGrid-evenRow or .BBjGrid-oddRow, and a style based on whether the column is currently sorted (.BBjGrid-unsorted, .BBjGrid-ascending, .BBjGrid-descending).

When a given cell is in edit mode, it also has the style name .BBjGrid-editingCell. Within the body of the grid, .BBjGrid.bbj-selected is applied to the selected cell(s). Row and column headers corresponding to selected cells can be highlighted using the style name .BBjGrid .bbj-highlighted.

The easiest way to understand this complex structure is with a simple grid sample. This is a very basic 3x3 grid, with row and column headers:

rem ' grid.txt

sysgui = unt
open (sysgui)"X0"
sysgui! = bbjapi().getSysGui()
window! = sysgui!.addWindow(25,25,300,150,"Grid",$00090003$,$$)
window!.setCallback(window!.ON_CLOSE,"eoj")
grid = 101, colhdr = 102, rowhdr = 103, rows = 3, cols = 3
grid! = window!.addGrid(grid,rowhdr,colhdr,10,10,280,135,$81ce$,rows,cols)
grid!.setAllColumnsUserSortable(1)
grid!.setEditable(1)
grid!.setRowHeaderWidth(30)
grid!.setRowHeight(30)
grid!.setFitToGrid(cols)
for col = 0 to cols - 1
    for row = 0 to rows - 1
        grid!.setCellText(row,col,str(row)+","+str(col))
    next row
next col
process_events

eoj:
release

By default, this is how BUI renders that grid:

Now we define a few simple CSS rules: Eliminate all interior borders; set the highlight color to a CSS gradient; and add drop shadows to the selected and edited grid cell.

.BBjGrid
{
  background: linear-gradient(to bottom right, #FFFFFF 0%, #00A3EF 100%);
}
.BBjGrid-mainGridCell
{
   border: none;
}
.BBjGrid .bbj-selected
{
  background: linear-gradient(to bottom, rgba(73,155,234,1) 0%,rgba(32,124,229,1) 100%);
  box-shadow: 7px 7px 5px rgba(69, 117, 210, 0.5);
}
.BBjGrid-editingCell
{
  box-shadow: 7px 7px 5px rgba(50, 50, 50, 0.5);
}
.BBjGrid-evenRow, .BBjGrid-oddRow
{
  background: transparent;
}
.BBjGrid:not(.bbj-disabled) tr:hover .BBjGrid-mainGridCell.BBjGrid-evenRow,
.BBjGrid:not(.bbj-disabled) tr:hover .BBjGrid-mainGridCell.BBjGrid-oddRow
{
  background: transparent;
}

With those CSS rules, the grid looks like this:

Remarks

None.

Constants

Constants inherited from BBjControl

Example

BBjGrid is an abstract class and cannot be instantiated. For examples, see BBjStandardGrid, and BBjDataAwareGrid.

See Also

BBjAPI

BBjStandardGrid

BBjDataAwareGrid

BBjDataBoundGrid

BBj Object Variables

BBj Object Assignment

BBj Object Error Handling

BBj Object Operators

CALLBACK Verb - Register BBj Subroutine

See the BBj Object Diagram for an illustration of the relationship between BBj Objects.