slickdart 0.2.0+4

slickdart #

slick grid clone, for mobile,desktop devices

** Sort performance is not fast as javascript version

Parameter Description #

  • When enable 'selectActiveRow' on row selection model and with CheckboxSelectColumn in first row click on first column out side of check box will uncheck other rows if multiple row selected

Example #

Known Constraint #

  • using keyboard navigation on non-editable cell and goes out of viewport will not immediate update screen until it on editable area
  • Let forzen column editable cause display unsync in un-frozen area

GridOptions #

Grid Options have it's own class instead of Map object, Can be ignore on construction

var opt = new GridOptions()
		        ..explicitInitialization= false
		        ..multiColumnSort= false;
var grid = new SlickGrid.fromOpt(el,data,[],opt);

Formatter #

Formatter adopt TFormatter function interface.

typedef TFormatter = String Function(
    int row, int cell, dynamic value, Column columnDef, Map dataContext);

Specify formatter in inital columns will auto collect formatter to GridOption's [FormatterFactory], if dynamic swap column, and need special formatter Function, using GridOption's [FormatterFactory],

Dynamic Row Height #

limitation: visible row: when calculate numVisibleRows, when we apply dynamic row height, minimal dynamic row height must >= single row hight Current design

  • put '_height' on row object to specify pixel height
  • add {'dynamicHeight': true} option to turn on it
  • on sorting or change data, using resetDynHeight() to re-calculate height

Customer Element (need polyfill for IE) #

Initial support customer element, see example: custom-elem.dart

Compatible with angular 1/2 dart

  • must specify height of cj-grid
  • accept customize option
import 'slick_custom.dart'
registerElem();
<cj-grid>
	<style>
	.special-style-here {..}
	</style>
</cj-grid>

MetaData #

  1. support row css styles, see example: metadata.dart, add dynamic height recalculate
  2. support col span and row span, see example: cell-span.1.dart

Filtered View #

Use FilteredList.class in slick_util.dart to wrap data Example: ColumnFilter.dart

Header Row #

Not to mix with checkbox select column Example: headerRow.dart

Dropdown Menu on Header Column #

No shadow dom Example: gdoc-header.dart

  //add menu
  column.header = {'menu': {
          'items': [
            {
              'iconImage': "../images/sort-asc.gif",
              'title': "Sort Ascending",
              'command': "sort-asc"
            }]
  }};
  HeaderMenu headerMenuPlugin=new HeaderMenu({});
  headerMenuPlugin.onBeforeMenuShow.subscribe((e, args) {
    List<MenuItem> menuList = args['menu'];
  });
  headerMenuPlugin.onCommand.subscribe((e, args) {
      if(args['command']=='hide'){
        if(columnList.remove(args['column'])){
          tmpCol.add(args['column']);
        };
        args['grid'].setColumns(columnList);
      }
  });
  grid.registerPlugin(headerMenuPlugin);
<link rel="stylesheet" href="packages/slickdart/css/plugins-common.css" type="text/css" />
<link rel="stylesheet" href="packages/slickdart/css/plugins-gdoc-style.css" type="text/css" />
<link rel="stylesheet" href="packages/slickdart/css/slick.headermenu.css" type="text/css" />

Copy or Download Grid (only available in custom element: cj-grid) #

Right click on grid that show download or copy option, Example: angular/popup.dart, custom-elem.dart

Follow steps:

  1. include zero-clipboard script
  2. add "download" attribute to grid tag
    <script src="packages/slickdart/plugin/copy/ZeroClipboard.min.js"></script>
  <cj-grid download='f.csv'></cj-grid>

Collapsing use case #

Example: Bs3_tree.dart

Cell Selection #

Support one selection area only, can not cross frozen area

    grid.SlickGrid sg = new grid.SlickGrid.fromOpt(el, data, column, opt);
    var cellSelectModel = new CellSelectionModel();
    cellSelectModel.onSelectedRangesChanged.subscribe((var e, args) {
      cellSelectModel.getSelectedRanges().forEach(print);
    });
    sg.setSelectionModel(cellSelectModel);

Programming select rows #

grid.setSelectedRows([rowIndex1,rowIndex2...etc]);
grid.invalidate();

Cell Editor #

Cell editor need to extend Editor class, refer to slick_editor.dart file

  • Commit Edit cell
getEditorLock().commitCurrentEdit()
// or
commitCurrentEdit();
// or
commitEditAndSetFocus();
cancelEditAndSetFocus();

  • Enable text selection
new GridOptions()..enableTextSelectionOnCells=true;
  • Editor Flow
    1. click cell -> trigger loadValue(), serialize() value (for value change event)
    2. cell defocused, isValueChanged() -> false -> make cell back to normal. if isValueChanged()==true, call validate()
      1. if validate()==false, add invalid class to cell
      2. if validate()=true, generate Edit Command object and call serialize(), if GridOption provide editCommandHandler, call handler, else call applyValue() to update data row
  • Dropdown list Editor Drop down list editor within cell using standard input-select element, see SelectListEditor. Constructor accept a map with format as {value: display_name,...}

sample code:

  //enable editable in GridOption
  new grid.GridOptions()..editable = true
  //set editor for column
  new Column()
      ..field = "City"
      // NY is value, "New York" is display name on the Select Option
      ..editor = new SelectListEditor({"NY": "New York", "TPE": "Taipei"})
      ..formatter =(int row, int cell, value, Column columnDef, Map dataContext)
                 { return value=="NY" ? "NEW YORK" : "TAIPEI";}
}
  • Checkbox Editor A check box to reneder true/false value

Sample code:

   new grid.Column.fromMap(
        {'field': "...", 'editor': new CheckboxEditor(),  'formatter': CheckmarkFormatter}),

Simulate Row Split #

  • Add new css class with column padding left and right to zero, add cssClass in Column definition
.nopad{
      padding-left: 0px;
      padding-right: 0px;
}
new grid.Column.fromMap(
    {'field': "title",  'formatter': SplitFormatter})
  ..cssClass = 'nopad';
  • For each row, add _height to specify row height
  • Add customize formatter for target column
SplitFormatter(int row, int cell, int value, grid.Column columnDef, Map dataRow) {
  if (dataRow['_height'] != null && dataRow['_height'] > 90) {  
    return '''
        <div class="h40">
          bbbbbbb $value
          <span>$cell<span class='important'> $row
        </div>
        <hr/>
        <div>
          aaa
        </div>
        ''';
  } else {
    return value;
  }
}

Add style to upper row

.h40 {
    height: 40px;
    display: block;
    background: yellow;
    word-wrap: break-word;
    white-space: normal;
}

TODO #

  • [ ] keyboard navigation when focus on uneditable cell
  • [ ] adjust row height via mouse

Version 0.2.0+4/0.1.9+3 (2019.01) #

  • Add sample for DateEditor to accept empty string, see editor_sample.dart

Version 0.2.0+3/0.1.9+3 (2019.01) #

  • fix Column class to init id when set field

Version 0.2.0+2/0.1.9+2 (2019.01) #

  • fix type error on column editor

Version 0.2.0 (2018.08) #

  • Enable row span
  • fix defaultColumnWidth in GridOption
  • fix row frozen with top panel

Version 0.2.0-beta.2 #

  • Add EvtArgs, EvtCallback

Version 0.1.9+2(2019/01) #

Version 0.1.8+9(2017/01) #

  • fix detached state and show/hidden state

Version 0.1.8+8(2017/01) #

  • fix editor exception
  • handle detached state and show/hidden state

Version 0.1.8+6(2017/01) #

  • Recover rendering performance
  • handle detached state

Version 0.1.8+4(2016/12) #

  • remove polymer tranformer dependency

Version 0.1.8+3(2016/11) #

  • remove style before grid unsubscribe

Version 0.1.8+1(2016/09) #

  • sunset zeroClipboard, using Clipboard.js
  • update editor sample, custom-elem sample

Version 0.1.8(2016/09) #

  • add new grid option: autoCommitOnBlur and onActiveCellBlur Event object, see editor-sample.dart
  • add ignoreCase option for FilteredList and expose private members

Version 0.1.7+3(2016/08) #

  • fix scrolling behavior (enable wheel event propagate to document when scroll to head/tail)

Version 0.1.7+2(2016/06) #

  • add cell span

Version 0.1.7+1(2016/05) #

  • fix missing plugin on custom element
  • add header icon example

Version 0.1.7(2016/05) #

  • fix cross frozen area column resize

Version 0.1.7-beta.1(2016/05) #

  • add cell selection
  • fix strong mode error
  • potential break change => obsolete formatFn, using TFormatter instead

Version 0.1.6+2(2016/04) #

  • MouseWheel fix for no frozen column

Version 0.1.6+1(2016/04) #

  • MouseWheel fix

Version 0.1.6(2016/03) #

  • add scrollable on frozen column

Version 0.1.5+4(2016/03) #

  • Update drag and drop handler on column header for firefox 42+

Version 0.1.5+3(2016/02) #

  • update logging to 0.11 up
  • add sample to hide header on ColumnFilter.dart

Version 0.1.5+2 (2015/11/23) #

  • fix CSSRule in dart sdk 1.3 (tonosama-atlacatl)
  • due to max height from getComputedStyle change to IEEE754 format, fix getMaxSupportedCssHeight method

Version 0.1.5+1 (2015/11/10) #

  • fix dart sdk 1.3 (tonosama-atlacatl)

Version 0.1.5 (2015/11/08) #

  • Add tree field example: Bs3_tree.dart
  • Add DoubleEditor and HierarchFilterList

Version 0.1.4 (2015/10/20) #

  • custom element accept style over write via setStyle
  • custom element absorb style tag under content tag, e.g.: shadow-dom-height.html

Version 0.1.3+5 (2015/09/29) #

  • parseInt fixed on style

Version 0.1.3+4 (2015/09/07) #

  • polymer element embed grid (not slick custom element), and stylesheet fall into shadowdom

Version 0.1.3+2 (2015/07/21) #

  • sort indicator in custom-elem, add cols attribute for sort event object on single column sort

Version 0.1.3+1 (2015/06/21) #

  • reset data will clear selected row, see CheckBox.html

Version 0.1.3 #

  • Copy and Download, sample case: angular/popup.html, first grid of custom-elem.html

Version 0.1.2+2 (2015/06/13) #

  • fix header_row, sample case: light-dom-height.html

Version 0.1.2+1 (2015/06/04) #

  • hot fix for popup window(angular ui) to embed grid cause chrome 42,43 crash.

Version 0.1.2 (2015/05/25) #

  • enable column reorder on non-frozen columns
  • no reorder by default , set _optoins.enableColumnReorder = true to turn on it
  • duplicated field may cause reorder fail
  • add simple integer editor

Version 0.1.1+4 #

  • adapt css change in dart 1.10
  • a noticable perfomance degrade in Chrome 42.02311.90 when have large horzontal columns2

Version 0.1.1+3 #

  • fix RowSelectionModel + dynamic height + column filter
  • can be test on ColumnFilter.dart

Version 0.1.1+2 #

  • fix RowSelectionModel + CheckboxSelectioncolumn with maximum single selected row
  • can be test on CheckBox.dart

Version 0.1.1+1 #

  • fix forceFitColumn

Version 0.1.1 #

  • move grid options to GridOptions (simplify grid preparation)
  • quick way to add “visibility” to columns. (thx to Alex Lopez)
  • add default border of grid in customer element type (may cause style broken change)

Version 0.1.0+9 (2015/2/10) #

  • add add drop-down menus for header column (light dom only) , see example/gdoc-header.dart

Version 0.1.0+9 (2015/2/1) #

  • add add drop-down menus for header column (light dom only) , see example/gdoc-header.dart

Version 0.1.0+8 (2015/1/31) #

  • fix addColumn

Version 0.1.0+7 (2014/12/30) #

  • add column row sample, refer headerRow.dart

Version 0.1.0+6, (2014/12/24) #

  • delay shadow dom component render till element style is ready

Version 0.1.0+5, (2014/12/10) #

  • add column css sample

# Bug Fixes #

  • fix numeric parsing

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  slickdart: ^0.2.0+4

2. Install it

You can install packages from the command line:

with pub:


$ pub get

Alternatively, your editor might support pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:slickdart/plugin.dart';
import 'package:slickdart/slick.dart';
import 'package:slickdart/slick_custom.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
50
Health:
Code health derived from static analysis. [more]
26
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
53
Learn more about scoring.

We analyzed this package on Jul 22, 2019, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.4.0
  • pana: 0.12.19

Platforms

Detected platforms: web

Platform components identified in package: html, js.

Health suggestions

Fix lib/src/slick_grid.dart. (-34.36 points)

Analysis of lib/src/slick_grid.dart reported 84 hints, including:

line 16 col 29: Use lowercase_with_underscores when specifying a library prefix.

line 21 col 1: Prefer using /// for doc comments.

line 58 col 1: Prefer using /// for doc comments.

line 69 col 3: Prefer using /// for doc comments.

line 124 col 3: Prefer using /// for doc comments.

Fix lib/src/slick_util.dart. (-21.38 points)

Analysis of lib/src/slick_util.dart reported 48 hints, including:

line 69 col 1: Prefer using /// for doc comments.

line 99 col 3: Prefer using /// for doc comments.

line 125 col 26: Use isEmpty instead of length

line 174 col 25: Use isEmpty instead of length

line 177 col 17: Use isEmpty instead of length

Fix lib/src/slick_core.dart. (-18.98 points)

Analysis of lib/src/slick_core.dart reported 42 hints, including:

line 62 col 1: Prefer using /// for doc comments.

line 85 col 1: Prefer using /// for doc comments.

line 97 col 15: Use ; instead of {} for empty constructor bodies.

line 113 col 3: Prefer using /// for doc comments.

line 122 col 3: Prefer using /// for doc comments.

Fix additional 16 files with analysis or formatting issues. (-46.52 points)

Additional issues in the following files:

  • lib/src/slick_column.dart (35 hints)
  • lib/src/plugin/header_menu.dart (15 hints)
  • lib/src/plugin/autotooltip.dart (9 hints)
  • lib/src/meta_list.dart (8 hints)
  • lib/src/row_height.dart (6 hints)
  • lib/src/slick_cell_selection.dart (6 hints)
  • lib/src/slick_custom.dart (6 hints)
  • lib/src/parser.dart (4 hints)
  • lib/src/slick_editor.dart (4 hints)
  • lib/src/slick_selectionmodel.dart (3 hints)
  • lib/src/slick_dnd.dart (1 hint)
  • lib/plugin.dart (Run dartfmt to format lib/plugin.dart.)
  • lib/slick.dart (Run dartfmt to format lib/slick.dart.)
  • lib/slick_custom.dart (Run dartfmt to format lib/slick_custom.dart.)
  • lib/src/slick_formatters.dart (Run dartfmt to format lib/src/slick_formatters.dart.)
  • lib/src/util.dart (Run dartfmt to format lib/src/util.dart.)

Maintenance issues and suggestions

Fix analysis_options.yaml.

The analyzer can't parse analysis_options.yaml.

Maintain an example.

None of the files in the package's example/ directory matches known example patterns.

Common filename patterns include main.dart, example.dart, and slickdart.dart. Packages with multiple examples should provide example/README.md.

For more information see the pub package layout conventions.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.0.0 <3.0.0
logging >=0.11.0 <2.0.0 0.11.3+2
Dev dependencies
build_runner ^1.1.0
build_web_compilers ^1.0.0
test ^1.0.0

Admin