• If you are citizen of an European Union member nation, you may not use this service unless you are at least 16 years old.

  • You already know Dokkio is an AI-powered assistant to organize & manage your digital files & messages. Very soon, Dokkio will support Outlook as well as One Drive. Check it out today!

View
 

Grid-Markup

Page history last edited by Jörn Zaefferer 12 years, 5 months ago

Research notes for the Grid widget.

 


Review of existing implementations

 


1 SlickGrid Markup

 

SlickGrid markup is based around DIV elements. DIV elements are used for the grid container, head, column header, body, rows, and cells.

 

1.1 SlickGrid Container

 

The SlickGrid container has a dynically generated class and contains four divs, (seemingly) three for the head and one for the body.

 

<div class="slickgrid_%randomnumber% ui-widget">

    <div class="slick-header ui-state-default"></div>

    <div class="slick-headerrow"></div>

    <div class="slick-top-panel-scroller"></div>

    <div class="slick-viewport"></div>

</div>

 

In all the SlickGrid examples, the .slick-headerrow and .slick-top-panel-scroller divs are hidden. I'm not yet sure what they're used for.

 

Grid Container HTML | <div class=slickgrid_%randomnumber%>

class

  • slickgrid_%randomnumber%
  • ui-widget 

style

  • width: ___px; height: ___px
  • overflow: hidden;
  • outline: 0px none;
  • position: relative;

tabindex

  • 0

hidefocus

  • true

 

Grid Container CSS | .slickgrid_%randomnumber%

(none)

 

Grid Container Notes

  • There is no generic class on the slickgrid container such as 'slickgrid' or 'slick-grid' meaning there's no way to style or select all grid container elements. For this reason, there are no static css rules for the grid container.
  • The dynamic class such as slickgrid_18615 or slickgrid_36487 is not used for styling the slickgrid container itself, only for dynamically sizing descendent elements such as column headers and cells. Example:
    • .slickgrid_933474 .slick-headerrow-columns { height: 25px; }
  • The explicit width and height on the slickgrid container are required in the markup, otherwise the grid body is not visible (height:1px) and the grid gets the width of the grid header (width:100000px).
  • The style=outline:0px none; as well as the (IE-only) attribute hidefocus=true means there is no visual indicator of the slickgrid having the focus. This could have implications for a11y.

 

1.2 SlickGrid Head

 

Grid Head HTML | <div class=slick-header>

class

  • slick-header
  • ui-state-default

style

  • overflow: hidden;
  • position: relative;

 

Grid Head CSS | .slick-header

 

Grid Column Headers

 

Grid Column Header

 

1.3 SlickGrid Column Header

 

1.4 SlickGrid Body

 

The SlickGrid body is two nested divs. The inner div, .grid-canvas contains all the visible rows, each with a .slick-row class

 

<div class="slick-viewport">

    <div class="grid-canvas">

        <div class="ui-widget-content slick-row even" row="0"></div>

        <div class="ui-widget-content slick-row odd" row="1"></div>

        <div class="ui-widget-content slick-row even" row="2"></div>

        ...

        <div class="ui-widget-content slick-row even" row="38"></div>

    </div>

</div>

 

Grid Body HTML | <div class=slick-viewport>

class

  • slick-viewport

style

  • width: 100%;
  • overflow: auto;
  • outline: 0pt none;
  • position: relative;
  • height: ___px;

hidefocus

  • ""

tabindex

  • 0

 

Grid Body HTML | <div class=grid-canvas>

class

  • grid-canvas

style

  • width: ___px;
  • height: _____px;

hidefocus

  • ""

tabindex

  • 0

 

1.5 SlickGrid Row

 

Grid Row HTML | <div class=slick-row row=%number%>

class

  • slick-row
  • ui-widget-content
  • even %OR% odd

style

  • top: ___px;

row

  • %number%

 

1.6 SlickGrid Cell

Cells have their widths set by the dynamically generated "c%number%" CSS classes and are stacked in the row via "float:left".

 

Grid Cell HTML | <div class=slick-cell>

class

  • slick-cell
  • c%number%

 

2 jqGrid Markup

 

jqGrid markup is based around 2 TABLE elements and DIV elements. The column headings are in a TABLE with only a THEAD + TRs + THs. The rows and cells are in a TABLE with only a TBODY + TRs + TDs.

 

2.1 jqGrid Container

 

Grid Container HTML |

 

Grid Container CSS |

 

2.2 jqGrid Head

 

Grid Head HTML |

 

Grid Head CSS |

 

2.3 jqGrid Column Header

 

2.4 jqGrid Body

 

Grid Body HTML |

 

2.5 jqGrid Row

 

Grid Row HTML |

 

2.6 jqGrid Cell

 

Grid Cell HTML |

 

3 DataTables Markup

 

 


The Big Table Issue

 

http://www.8164.org/the-big-table-issue/

 


Table UI Patterns

  • Alternating rows styling
  • Full row selection
  • Table sections
  • Sorting
  • Filtering
  • Pagination
  • Continuous scrolling
  • Fixed table header
  • Headerless table
  • Expandable rows
  • Row actions
    • Inline actions
    • Hover actions
    • Menu actions
  • Actions on multiple rows

source: http://www.jankoatwarpspeed.com/post/2010/02/26/table-ui-patterns.aspx

 

  • Inline Editing
  • Super Wide Tables
  • In-Column Filtering

source: http://designingwebinterfaces.com/ultimate-guide-to-table-ui-patterns

 


Goals (from 2010-March planning mtg notes)

 

  • Creating/populating the titlebar from caption
  • Loading data from the table
  • Set column width (defaults to auto, have an 'equal' option, and specify width)
  • Div around both tables, can support horizontal scrolling
  • Set table height (data-ui-height?) can be a  pixel or 'auto' (auto expands to full contents)
    • If this is not specified, then we should expand height/width (needs investigation)
  • Trimming table cell contents to keep them from wrapping
  • A way to highlight a column explicitly
  • A way to refresh the table or an individual row
  • Alignment of columns
  • Ability to Show Row # in a column (dynamic  column)
  • Theming
    • Hover Row / Hover Column / Hover Cell
    • Striping
  • If height is specified, and row body height could have scrollbar

 

Comments (0)

You don't have permission to comment on this page.