- slickdart
- Parameter Description
- Example
- Known Constraint
- GridOptions
- Formatter
- Dynamic Row Height
- Customer Element (need polyfill for IE)
- MetaData
- Filtered View
- Header Row
- Dropdown Menu on Header Column
- Copy or Download Grid (only available in custom element: cj-grid)
- Collapsing use case
- Cell Selection
- Programming select rows
- Cell Editor
- Simulate Row Split
- TODO
slick grid clone, for mobile,desktop devices
** Sort performance is not fast as javascript version
- 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
- Live Sample
- examples in web/example folder
- 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
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 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],
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
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>
- support row css styles, see example: metadata.dart, add dynamic height recalculate
- support col span and row span, see example: cell-span.1.dart
Use FilteredList.class in slick_util.dart to wrap data Example: ColumnFilter.dart
Not to mix with checkbox select column Example: headerRow.dart
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" />
Right click on grid that show download or copy option, Example: angular/popup.dart, custom-elem.dart
Follow steps:
- include zero-clipboard script
- add "download" attribute to grid tag
<script src="packages/slickdart/plugin/copy/ZeroClipboard.min.js"></script>
<cj-grid download='f.csv'></cj-grid>
Example: Bs3_tree.dart
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);
grid.setSelectedRows([rowIndex1,rowIndex2...etc]);
grid.invalidate();
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
- click cell -> trigger
loadValue()
,serialize()
value (for value change event) - cell defocused,
isValueChanged()
-> false -> make cell back to normal. ifisValueChanged()==true
, callvalidate()
- if
validate()==false
, addinvalid
class to cell - if
validate()=true
, generate Edit Command object and callserialize()
, if GridOption provide editCommandHandler, call handler, else callapplyValue()
to update data row
- if
- click cell -> trigger
-
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}),
- Add new css class with column padding left and right to zero, add
cssClass
inColumn
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;
}
- keyboard navigation when focus on uneditable cell
- adjust row height via mouse