CFlashGrid Samples

CFlashGrid is a jQuery grid control that supports in-place editing for not only generic HTML inputs like textboxes/listboxes, but also composite controls. It features spreadsheet-style keyboard navigation using arrows keys and row-cut/copy/paste options. Although it relies on jQuery it wasn't created as an add-in per se-- although that can easily be rectified in the future.

I built it in 3 days after fruitlessly searching for good open-sourced alternatives that mimicked the way spreadsheets work. It needs some work and cleanup behind-the-scenes, but it works nicely.

Download at the bottom of this page

Simple Sample

Simple Sample with Scrolling

(Note the scrollbar on the right and always visible header)

Advanced Sample

With listbox for Gender, a composite control, checkbok, and Radio fields... and also a readonly and hidden field.

Sample with floating header

Click to see advanced sample with header always visible on the page

Options

Below are the descriptions of the options CFlashGrid supports. View page source for examples of use.

Grid options

CFlashGridProperties(showColumnHeader, showRowHeader, headerRegionCssClass, headerAlwaysVisible, colHeaderCssClass, rowHeaderCssClass, headerHiliteCssClass, scrollRegionCssClass, rowCssClass, alternateRowCssClass, cellCssClass, enableRowOptions, allowAddNew) {
  showColumnHeader; //Show column headers at the top of the grid.
  showRowHeader; //Display a row number on the left like Excel.
  headerRegionCssClass; //CSS class for the entire header row. Can be empty and cell attributes will be used.
  headerAlwaysVisible; //Floating header which keeps the header in view when the page is scrolled. Only ONE grid on a page can have this options set.
  colHeaderCssClass; //CSS class for the cells in the header.
  rowHeaderCssClass; //CSS class for the row header on the left.
  headerHiliteCssClass; //CSS to indicate the current selected column in the header.
  scrollRegionCssClass; //CSS to define the dimensions of the grid sans the header.
  rowCssClass; //CSS to define background colors for the rows.
  alternateRowCssClass; //CSS to define background color for alternating row.
  cellCssClass; //CSS class for the individual cells.
  enableRowOptions; //Show CUT/COPY/PASTE/INSERT/DEL options
  allowAddNew; //Show the Add New row to allow new data to be entered.
}


Individual column/cell options


//Number of ColProperties objects must match number of columns in the data.
CFlashGridColProperties(label, cssClass, visible, inputCtlId, inputType, extendedProperties) {
  this.label = label; //Heading text for the column.
  this.cssClass = cssClass; //CSS to override the default width, color, etc of cells in the column defined in the gridProperties above.
  this.visible = visible; //CSS use for hidden columns such as ID columns.
  this.inputCtlId = inputCtlId; //ID of the input element to use as the editor when the user enters the cell.
  this.inputType = inputType; //Type of input (see source of this page).
  this.extendedProperties = extendedProperties //See source of this page.;
}


Download

Download script, css, and sample