Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Formatter & Editor cleanup.

- Split up formatters into a separate file.
- Moved both formatters and editors into Slick.Formatters.* and
Slick.Editors.* namespaces.  Renamed some for clarity.
- Removed obscure unused formatters from old examples.
- Made the default formatter escape HTML since that seems to be the
more common expectation (issue #267).
  • Loading branch information...
commit 2cdad7efa7b7892beea0508dd52aa49894f02343 1 parent 1190b23
@mleibman authored
View
4 examples/example-checkbox-row-select.html
@@ -41,7 +41,7 @@
<script src="../plugins/slick.cellcopymanager.js"></script>
<script src="../plugins/slick.cellselectionmodel.js"></script>
<script src="../plugins/slick.rowselectionmodel.js"></script>
-<script src="../slick.editors.js"></script>
+<script src="../slick.formatters.js"></script>
<script src="../slick.grid.js"></script>
<script>
@@ -73,7 +73,7 @@
name: String.fromCharCode("A".charCodeAt(0) + i),
field: i,
width: 100,
- editor: TextCellEditor
+ editor: Slick.Editors.Text
});
}
View
15 examples/example-composite-editor-item-details.html
@@ -101,6 +101,7 @@
<script src="../slick.core.js"></script>
<script src="../plugins/slick.cellrangeselector.js"></script>
<script src="../plugins/slick.cellselectionmodel.js"></script>
+<script src="../slick.formatters.js"></script>
<script src="../slick.editors.js"></script>
<script src="../slick.grid.js"></script>
<script src="slick.compositeeditor.js"></script>
@@ -117,13 +118,13 @@
var grid;
var data = [];
var columns = [
- {id: "title", name: "Title", field: "title", width: 120, cssClass: "cell-title", editor: TextCellEditor, validator: requiredFieldValidator},
- {id: "desc", name: "Description", field: "description", width: 100, editor: TextCellEditor},
- {id: "duration", name: "Duration", field: "duration", editor: TextCellEditor},
- {id: "percent", name: "% Complete", field: "percentComplete", width: 80, resizable: false, formatter: GraphicalPercentCompleteCellFormatter, editor: PercentCompleteCellEditor},
- {id: "start", name: "Start", field: "start", minWidth: 60, editor: DateCellEditor},
- {id: "finish", name: "Finish", field: "finish", minWidth: 60, editor: DateCellEditor},
- {id: "effort-driven", name: "Effort Driven", width: 80, minWidth: 20, maxWidth: 80, cssClass: "cell-effort-driven", field: "effortDriven", formatter: BoolCellFormatter, editor: YesNoCheckboxCellEditor}
+ {id: "title", name: "Title", field: "title", width: 120, cssClass: "cell-title", editor: Slick.Editors.Text, validator: requiredFieldValidator},
+ {id: "desc", name: "Description", field: "description", width: 100, editor: Slick.Editors.Text},
+ {id: "duration", name: "Duration", field: "duration", editor: Slick.Editors.Text},
+ {id: "percent", name: "% Complete", field: "percentComplete", width: 80, resizable: false, formatter: Slick.Formatters.PercentCompleteBar, editor: Slick.Editors.PercentComplete},
+ {id: "start", name: "Start", field: "start", minWidth: 60, editor: Slick.Editors.Date},
+ {id: "finish", name: "Finish", field: "finish", minWidth: 60, editor: Slick.Editors.Date},
+ {id: "effort-driven", name: "Effort Driven", width: 80, minWidth: 20, maxWidth: 80, cssClass: "cell-effort-driven", field: "effortDriven", formatter: Slick.Formatters.Checkmark, editor: Slick.Editors.Checkbox}
];
var options = {
editable: true,
View
7 examples/example-grouping.html
@@ -77,6 +77,7 @@
<script src="../lib/jquery.event.drag-2.0.min.js"></script>
<script src="../slick.core.js"></script>
+<script src="../slick.formatters.js"></script>
<script src="../slick.editors.js"></script>
<script src="../plugins/slick.cellrangedecorator.js"></script>
<script src="../plugins/slick.cellrangeselector.js"></script>
@@ -93,12 +94,12 @@
var data = [];
var columns = [
{id: "sel", name: "#", field: "num", cssClass: "cell-selection", width: 40, resizable: false, selectable: false, focusable: false },
- {id: "title", name: "Title", field: "title", width: 120, minWidth: 120, cssClass: "cell-title", sortable: true, editor: TextCellEditor},
+ {id: "title", name: "Title", field: "title", width: 120, minWidth: 120, cssClass: "cell-title", sortable: true, editor: Slick.Editors.Text},
{id: "duration", name: "Duration", field: "duration", sortable: true},
- {id: "%", name: "% Complete", field: "percentComplete", width: 80, formatter: GraphicalPercentCompleteCellFormatter, sortable: true, groupTotalsFormatter: avgTotalsFormatter},
+ {id: "%", name: "% Complete", field: "percentComplete", width: 80, formatter: Slick.Formatters.PercentCompleteBar, sortable: true, groupTotalsFormatter: avgTotalsFormatter},
{id: "start", name: "Start", field: "start", minWidth: 60, sortable: true},
{id: "finish", name: "Finish", field: "finish", minWidth: 60, sortable: true},
- {id: "effort-driven", name: "Effort Driven", width: 80, minWidth: 20, maxWidth: 80, cssClass: "cell-effort-driven", field: "effortDriven", formatter: BoolCellFormatter, sortable: true}
+ {id: "effort-driven", name: "Effort Driven", width: 80, minWidth: 20, maxWidth: 80, cssClass: "cell-effort-driven", field: "effortDriven", formatter: Slick.Formatters.Checkmark, sortable: true}
];
var options = {
View
6 examples/example-optimizing-dataview.html
@@ -70,7 +70,7 @@
<script src="../lib/jquery.event.drag-2.0.min.js"></script>
<script src="../slick.core.js"></script>
-<script src="../slick.editors.js"></script>
+<script src="../slick.formatters.js"></script>
<script src="../slick.grid.js"></script>
<script src="../slick.dataview.js"></script>
<script src="../controls/slick.pager.js"></script>
@@ -83,10 +83,10 @@
{id: "sel", name: "#", field: "num", behavior: "select", cssClass: "cell-selection", width: 40, resizable: false, selectable: false },
{id: "title", name: "Title", field: "title", width: 120, minWidth: 120, cssClass: "cell-title"},
{id: "duration", name: "Duration", field: "duration"},
- {id: "%", name: "% Complete", field: "percentComplete", width: 80, resizable: false, formatter: GraphicalPercentCompleteCellFormatter},
+ {id: "%", name: "% Complete", field: "percentComplete", width: 80, resizable: false, formatter: Slick.Formatters.PercentCompleteBar},
{id: "start", name: "Start", field: "start", minWidth: 60},
{id: "finish", name: "Finish", field: "finish", minWidth: 60},
- {id: "effort-driven", name: "Effort Driven", width: 80, minWidth: 20, maxWidth: 80, cssClass: "cell-effort-driven", field: "effortDriven", formatter: BoolCellFormatter}
+ {id: "effort-driven", name: "Effort Driven", width: 80, minWidth: 20, maxWidth: 80, cssClass: "cell-effort-driven", field: "effortDriven", formatter: Slick.Formatters.Checkmark}
];
var options = {
View
3  examples/example-spreadsheet.html
@@ -43,7 +43,6 @@
<script src="../plugins/slick.cellrangeselector.js"></script>
<script src="../plugins/slick.cellcopymanager.js"></script>
<script src="../plugins/slick.cellselectionmodel.js"></script>
-<script src="../slick.editors.js"></script>
<script src="../slick.grid.js"></script>
<script>
@@ -81,7 +80,7 @@
*/
function FormulaEditor(args) {
var _self = this;
- var _editor = new TextCellEditor(args);
+ var _editor = new Slick.Editors.Text(args);
var _selector;
$.extend(this, _editor);
View
10 examples/example10-async-post-render.html
@@ -94,11 +94,11 @@
var data = [];
var columns = [
{id: "title", name: "Title", field: "title", sortable: false, width: 120, cssClass: "cell-title"},
- {id: "n1", name: "1", field: "n1", sortable: false, editor: IntegerCellEditor, width: 40, validator: requiredFieldValidator},
- {id: "n2", name: "2", field: "n2", sortable: false, editor: IntegerCellEditor, width: 40, validator: requiredFieldValidator},
- {id: "n3", name: "3", field: "n3", sortable: false, editor: IntegerCellEditor, width: 40, validator: requiredFieldValidator},
- {id: "n4", name: "4", field: "n4", sortable: false, editor: IntegerCellEditor, width: 40, validator: requiredFieldValidator},
- {id: "n5", name: "5", field: "n5", sortable: false, editor: IntegerCellEditor, width: 40, validator: requiredFieldValidator},
+ {id: "n1", name: "1", field: "n1", sortable: false, editor: Slick.Editors.Integer, width: 40, validator: requiredFieldValidator},
+ {id: "n2", name: "2", field: "n2", sortable: false, editor: Slick.Editors.Integer, width: 40, validator: requiredFieldValidator},
+ {id: "n3", name: "3", field: "n3", sortable: false, editor: Slick.Editors.Integer, width: 40, validator: requiredFieldValidator},
+ {id: "n4", name: "4", field: "n4", sortable: false, editor: Slick.Editors.Integer, width: 40, validator: requiredFieldValidator},
+ {id: "n5", name: "5", field: "n5", sortable: false, editor: Slick.Editors.Integer, width: 40, validator: requiredFieldValidator},
{id: "chart", name: "Chart", sortable: false, width: 60, formatter: waitingFormatter, rerenderOnResize: true, asyncPostRender: renderSparkline}
];
View
1  examples/example14-highlighting.html
@@ -59,7 +59,6 @@
<script src="../slick.core.js"></script>
<script src="../plugins/slick.cellselectionmodel.js"></script>
<script src="../plugins/slick.rowmovemanager.js"></script>
-<script src="../slick.editors.js"></script>
<script src="../slick.grid.js"></script>
<script>
View
6 examples/example2-formatters.html
@@ -39,7 +39,7 @@
<script src="../lib/jquery.event.drag-2.0.min.js"></script>
<script src="../slick.core.js"></script>
-<script src="../slick.editors.js"></script>
+<script src="../slick.formatters.js"></script>
<script src="../slick.grid.js"></script>
<script>
@@ -48,10 +48,10 @@
var columns = [
{id: "title", name: "Title", field: "title", width: 120, cssClass: "cell-title"},
{id: "duration", name: "Duration", field: "duration"},
- {id: "%", name: "% Complete", field: "percentComplete", width: 80, resizable: false, formatter: GraphicalPercentCompleteCellFormatter},
+ {id: "%", name: "% Complete", field: "percentComplete", width: 80, resizable: false, formatter: Slick.Formatters.PercentCompleteBar},
{id: "start", name: "Start", field: "start", minWidth: 60},
{id: "finish", name: "Finish", field: "finish", minWidth: 60},
- {id: "effort-driven", name: "Effort Driven", sortable: false, width: 80, minWidth: 20, maxWidth: 80, cssClass: "cell-effort-driven", field: "effortDriven", formatter: BoolCellFormatter}
+ {id: "effort-driven", name: "Effort Driven", sortable: false, width: 80, minWidth: 20, maxWidth: 80, cssClass: "cell-effort-driven", field: "effortDriven", formatter: Slick.Formatters.Checkmark}
];
var options = {
View
17 examples/example3-editing.html
@@ -44,7 +44,10 @@
<script src="../lib/jquery.event.drag-2.0.min.js"></script>
<script src="../slick.core.js"></script>
+<script src="../plugins/slick.cellrangedecorator.js"></script>
+<script src="../plugins/slick.cellrangeselector.js"></script>
<script src="../plugins/slick.cellselectionmodel.js"></script>
+<script src="../slick.formatters.js"></script>
<script src="../slick.editors.js"></script>
<script src="../slick.grid.js"></script>
@@ -60,13 +63,13 @@
var grid;
var data = [];
var columns = [
- {id: "title", name: "Title", field: "title", width: 120, cssClass: "cell-title", editor: TextCellEditor, validator: requiredFieldValidator},
- {id: "desc", name: "Description", field: "description", width: 100, editor: LongTextCellEditor},
- {id: "duration", name: "Duration", field: "duration", editor: TextCellEditor},
- {id: "%", name: "% Complete", field: "percentComplete", width: 80, resizable: false, formatter: GraphicalPercentCompleteCellFormatter, editor: PercentCompleteCellEditor},
- {id: "start", name: "Start", field: "start", minWidth: 60, editor: DateCellEditor},
- {id: "finish", name: "Finish", field: "finish", minWidth: 60, editor: DateCellEditor},
- {id: "effort-driven", name: "Effort Driven", width: 80, minWidth: 20, maxWidth: 80, cssClass: "cell-effort-driven", field: "effortDriven", formatter: BoolCellFormatter, editor: YesNoCheckboxCellEditor}
+ {id: "title", name: "Title", field: "title", width: 120, cssClass: "cell-title", editor: Slick.Editors.Text, validator: requiredFieldValidator},
+ {id: "desc", name: "Description", field: "description", width: 100, editor: Slick.Editors.LongText},
+ {id: "duration", name: "Duration", field: "duration", editor: Slick.Editors.Text},
+ {id: "%", name: "% Complete", field: "percentComplete", width: 80, resizable: false, formatter: Slick.Formatters.PercentCompleteBar, editor: Slick.Editors.PercentComplete},
+ {id: "start", name: "Start", field: "start", minWidth: 60, editor: Slick.Editors.Date},
+ {id: "finish", name: "Finish", field: "finish", minWidth: 60, editor: Slick.Editors.Date},
+ {id: "effort-driven", name: "Effort Driven", width: 80, minWidth: 20, maxWidth: 80, cssClass: "cell-effort-driven", field: "effortDriven", formatter: Slick.Formatters.Checkmark, editor: Slick.Editors.Checkbox}
];
var options = {
editable: true,
View
2  examples/example3a-compound-editors.html
@@ -43,7 +43,7 @@
var grid;
var data = [];
var columns = [
- {id: "title", name: "Title", field: "title", width: 120, cssClass: "cell-title", editor: TextCellEditor},
+ {id: "title", name: "Title", field: "title", width: 120, cssClass: "cell-title", editor: Slick.Editors.Text},
{id: "range", name: "Range", width: 120, formatter: NumericRangeFormatter, editor: NumericRangeEditor}
];
View
15 examples/example3b-editing-with-undo.html
@@ -40,6 +40,7 @@
<script src="../lib/jquery.event.drag-2.0.min.js"></script>
<script src="../slick.core.js"></script>
+<script src="../slick.formatters.js"></script>
<script src="../slick.editors.js"></script>
<script src="../slick.grid.js"></script>
@@ -55,13 +56,13 @@
var grid;
var data = [];
var columns = [
- {id: "title", name: "Title", field: "title", width: 120, cssClass: "cell-title", editor: TextCellEditor, validator: requiredFieldValidator},
- {id: "desc", name: "Description", field: "description", width: 100, editor: LongTextCellEditor},
- {id: "duration", name: "Duration", field: "duration", editor: TextCellEditor},
- {id: "%", name: "% Complete", field: "percentComplete", width: 80, resizable: false, formatter: GraphicalPercentCompleteCellFormatter, editor: PercentCompleteCellEditor},
- {id: "start", name: "Start", field: "start", minWidth: 60, editor: DateCellEditor},
- {id: "finish", name: "Finish", field: "finish", minWidth: 60, editor: DateCellEditor},
- {id: "effort-driven", name: "Effort Driven", width: 80, minWidth: 20, maxWidth: 80, cssClass: "cell-effort-driven", field: "effortDriven", formatter: BoolCellFormatter, editor: YesNoCheckboxCellEditor}
+ {id: "title", name: "Title", field: "title", width: 120, cssClass: "cell-title", editor: Slick.Editors.Text, validator: requiredFieldValidator},
+ {id: "desc", name: "Description", field: "description", width: 100, editor: Slick.Editors.LongText},
+ {id: "duration", name: "Duration", field: "duration", editor: Slick.Editors.Text},
+ {id: "%", name: "% Complete", field: "percentComplete", width: 80, resizable: false, formatter: Slick.Formatters.PercentCompleteBar, editor: Slick.Editors.PercentComplete},
+ {id: "start", name: "Start", field: "start", minWidth: 60, editor: Slick.Editors.Date},
+ {id: "finish", name: "Finish", field: "finish", minWidth: 60, editor: Slick.Editors.Date},
+ {id: "effort-driven", name: "Effort Driven", width: 80, minWidth: 20, maxWidth: 80, cssClass: "cell-effort-driven", field: "effortDriven", formatter: Slick.Formatters.Checkmark, editor: Slick.Editors.Checkbox}
];
var options = {
View
13 examples/example4-model.html
@@ -94,6 +94,7 @@
<script src="../lib/jquery.event.drag-2.0.min.js"></script>
<script src="../slick.core.js"></script>
+<script src="../slick.formatters.js"></script>
<script src="../slick.editors.js"></script>
<script src="../plugins/slick.rowselectionmodel.js"></script>
<script src="../slick.grid.js"></script>
@@ -109,12 +110,12 @@
var columns = [
{id: "sel", name: "#", field: "num", behavior: "select", cssClass: "cell-selection", width: 40, cannotTriggerInsert: true, resizable: false, selectable: false },
- {id: "title", name: "Title", field: "title", width: 120, minWidth: 120, cssClass: "cell-title", editor: TextCellEditor, validator: requiredFieldValidator, sortable: true},
- {id: "duration", name: "Duration", field: "duration", editor: TextCellEditor, sortable: true},
- {id: "%", name: "% Complete", field: "percentComplete", width: 80, resizable: false, formatter: GraphicalPercentCompleteCellFormatter, editor: PercentCompleteCellEditor, sortable: true},
- {id: "start", name: "Start", field: "start", minWidth: 60, editor: DateCellEditor, sortable: true},
- {id: "finish", name: "Finish", field: "finish", minWidth: 60, editor: DateCellEditor, sortable: true},
- {id: "effort-driven", name: "Effort Driven", width: 80, minWidth: 20, maxWidth: 80, cssClass: "cell-effort-driven", field: "effortDriven", formatter: BoolCellFormatter, editor: YesNoCheckboxCellEditor, cannotTriggerInsert: true, sortable: true}
+ {id: "title", name: "Title", field: "title", width: 120, minWidth: 120, cssClass: "cell-title", editor: Slick.Editors.Text, validator: requiredFieldValidator, sortable: true},
+ {id: "duration", name: "Duration", field: "duration", editor: Slick.Editors.Text, sortable: true},
+ {id: "%", name: "% Complete", field: "percentComplete", width: 80, resizable: false, formatter: Slick.Formatters.PercentCompleteBar, editor: Slick.Editors.PercentComplete, sortable: true},
+ {id: "start", name: "Start", field: "start", minWidth: 60, editor: Slick.Editors.Date, sortable: true},
+ {id: "finish", name: "Finish", field: "finish", minWidth: 60, editor: Slick.Editors.Date, sortable: true},
+ {id: "effort-driven", name: "Effort Driven", width: 80, minWidth: 20, maxWidth: 80, cssClass: "cell-effort-driven", field: "effortDriven", formatter: Slick.Formatters.Checkmark, editor: Slick.Editors.Checkbox, cannotTriggerInsert: true, sortable: true}
];
var options = {
View
14 examples/example5-collapsing.html
@@ -65,6 +65,7 @@
<script src="../lib/jquery.event.drag-2.0.min.js"></script>
<script src="../slick.core.js"></script>
+<script src="../slick.formatters.js"></script>
<script src="../slick.editors.js"></script>
<script src="../slick.grid.js"></script>
<script src="../slick.dataview.js"></script>
@@ -80,6 +81,7 @@
var TaskNameFormatter = function (row, cell, value, columnDef, dataContext) {
+ value = value.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;");
var spacer = "<span style='display:inline-block;height:1px;width:" + (15 * dataContext["indent"]) + "px'></span>";
var idx = dataView.getIdxById(dataContext.id);
if (data[idx + 1] && data[idx + 1].indent > data[idx].indent) {
@@ -97,12 +99,12 @@
var grid;
var data = [];
var columns = [
- {id: "title", name: "Title", field: "title", width: 220, cssClass: "cell-title", formatter: TaskNameFormatter, editor: TextCellEditor, validator: requiredFieldValidator},
- {id: "duration", name: "Duration", field: "duration", editor: TextCellEditor},
- {id: "%", name: "% Complete", field: "percentComplete", width: 80, resizable: false, formatter: GraphicalPercentCompleteCellFormatter, editor: PercentCompleteCellEditor},
- {id: "start", name: "Start", field: "start", minWidth: 60, editor: DateCellEditor},
- {id: "finish", name: "Finish", field: "finish", minWidth: 60, editor: DateCellEditor},
- {id: "effort-driven", name: "Effort Driven", width: 80, minWidth: 20, maxWidth: 80, cssClass: "cell-effort-driven", field: "effortDriven", formatter: BoolCellFormatter, editor: YesNoCheckboxCellEditor, cannotTriggerInsert: true}
+ {id: "title", name: "Title", field: "title", width: 220, cssClass: "cell-title", formatter: TaskNameFormatter, editor: Slick.Editors.Text, validator: requiredFieldValidator},
+ {id: "duration", name: "Duration", field: "duration", editor: Slick.Editors.Text},
+ {id: "%", name: "% Complete", field: "percentComplete", width: 80, resizable: false, formatter: Slick.Formatters.PercentCompleteBar, editor: Slick.Editors.PercentComplete},
+ {id: "start", name: "Start", field: "start", minWidth: 60, editor: Slick.Editors.Date},
+ {id: "finish", name: "Finish", field: "finish", minWidth: 60, editor: Slick.Editors.Date},
+ {id: "effort-driven", name: "Effort Driven", width: 80, minWidth: 20, maxWidth: 80, cssClass: "cell-effort-driven", field: "effortDriven", formatter: Slick.Formatters.Checkmark, editor: Slick.Editors.Checkbox, cannotTriggerInsert: true}
];
var options = {
View
2  examples/example7-events.html
@@ -71,7 +71,7 @@
var grid;
var data = [];
var columns = [
- {id: "title", name: "Title", field: "title", width: 200, cssClass: "cell-title", editor: TextCellEditor},
+ {id: "title", name: "Title", field: "title", width: 200, cssClass: "cell-title", editor: Slick.Editors.Text},
{id: "priority", name: "Priority", field: "priority", width: 80, selectable: false, resizable: false}
];
View
7 examples/example9-row-reordering.html
@@ -92,6 +92,7 @@
<script src="../plugins/slick.cellselectionmodel.js"></script>
<script src="../plugins/slick.rowselectionmodel.js"></script>
<script src="../plugins/slick.rowmovemanager.js"></script>
+<script src="../slick.formatters.js"></script>
<script src="../slick.editors.js"></script>
<script src="../slick.grid.js"></script>
@@ -114,7 +115,7 @@
field: "name",
width: 500,
cssClass: "cell-title",
- editor: TextCellEditor,
+ editor: Slick.Editors.Text,
validator: requiredFieldValidator
},
{
@@ -124,8 +125,8 @@
cssClass: "cell-effort-driven",
field: "complete",
cannotTriggerInsert: true,
- formatter: BoolCellFormatter,
- editor: YesNoCheckboxCellEditor
+ formatter: Slick.Formatters.Checkmark,
+ editor: Slick.Editors.Checkbox
}
];
View
8 examples/examples.css
@@ -126,7 +126,7 @@ li {
-webkit-border-radius: 3px;
}
-/* TextCellEditor, DateCellEditor */
+/* Slick.Editors.Text, Slick.Editors.Date */
input.editor-text {
width: 100%;
height: 100%;
@@ -144,7 +144,7 @@ input.editor-text {
vertical-align: top;
}
-/* PercentCompleteCellEditor */
+/* Slick.Editors.PercentComplete */
input.editor-percentcomplete {
width: 100%;
height: 100%;
@@ -212,14 +212,14 @@ input.editor-percentcomplete {
display: block;
}
-/* YesNoSelectCellEditor */
+/* Slick.Editors.YesNoSelect */
select.editor-yesno {
width: 100%;
margin: 0;
vertical-align: middle;
}
-/* YesNoCheckboxCellEditor */
+/* Slick.Editors.Checkbox */
input.editor-checkbox {
margin: 0;
height: 100%;
View
178 slick.editors.js
@@ -1,73 +1,26 @@
-/* THESE FORMATTERS & EDITORS ARE JUST SAMPLES! */
-(function ($) {
- var SlickEditor = {
- SelectorCellFormatter: function (row, cell, value, columnDef, dataContext) {
- return (!dataContext ? "" : row);
- },
-
- PercentCompleteCellFormatter: function (row, cell, value, columnDef, dataContext) {
- if (value == null || value === "") {
- return "-";
- } else if (value < 50) {
- return "<span style='color:red;font-weight:bold;'>" + value + "%</span>";
- } else {
- return "<span style='color:green'>" + value + "%</span>";
- }
- },
-
- GraphicalPercentCompleteCellFormatter: function (row, cell, value, columnDef, dataContext) {
- if (value == null || value === "") {
- return "";
- }
-
- var color;
-
- if (value < 30) {
- color = "red";
- } else if (value < 70) {
- color = "silver";
- } else {
- color = "green";
- }
-
- return "<span class='percent-complete-bar' style='background:" + color + ";width:" + value + "%'></span>";
- },
-
- YesNoCellFormatter: function (row, cell, value, columnDef, dataContext) {
- return value ? "Yes" : "No";
- },
+/***
+ * Contains basic SlickGrid editors.
+ * @module Formatters
+ * @namespace Slick
+ */
- BoolCellFormatter: function (row, cell, value, columnDef, dataContext) {
- return value ? "<img src='../images/tick.png'>" : "";
- },
-
- TaskNameFormatter: function (row, cell, value, columnDef, dataContext) {
- // todo: html encode
- var spacer = "<span style='display:inline-block;height:1px;width:" + (2 + 15 * dataContext["indent"]) + "px'></span>";
- return spacer + " <img src='../images/expand.gif'>&nbsp;" + value;
- },
-
- ResourcesFormatter: function (row, cell, value, columnDef, dataContext) {
- var resources = dataContext["resources"];
-
- if (!resources || resources.length == 0) {
- return "";
- }
-
- if (columnDef.width < 50) {
- return (resources.length > 1 ? "<center><img src='../images/user_identity_plus.gif' " : "<center><img src='../images/user_identity.gif' ") +
- " title='" + resources.join(", ") + "'></center>";
- } else {
- return resources.join(", ");
+(function ($) {
+ // register namespace
+ $.extend(true, window, {
+ "Slick": {
+ "Editors": {
+ "Text": TextEditor,
+ "Integer": IntegerEditor,
+ "Date": DateEditor,
+ "YesNoSelect": YesNoSelectEditor,
+ "Checkbox": CheckboxEditor,
+ "PercentComplete": PercentCompleteEditor,
+ "LongText": LongTextEditor
}
- },
-
- StarFormatter: function (row, cell, value, columnDef, dataContext) {
- return (value) ? "<img src='../images/bullet_star.png' align='absmiddle'>" : "";
- },
-
+ }
+ });
- TextCellEditor: function (args) {
+ function TextEditor(args) {
var $input;
var defaultValue;
var scope = this;
@@ -134,9 +87,9 @@
};
this.init();
- },
+ }
- IntegerCellEditor: function (args) {
+ function IntegerEditor(args) {
var $input;
var defaultValue;
var scope = this;
@@ -196,9 +149,9 @@
};
this.init();
- },
+ }
- DateCellEditor: function (args) {
+ function DateEditor(args) {
var $input;
var defaultValue;
var scope = this;
@@ -281,9 +234,9 @@
};
this.init();
- },
+ }
- YesNoSelectCellEditor: function (args) {
+ function YesNoSelectEditor(args) {
var $select;
var defaultValue;
var scope = this;
@@ -327,9 +280,9 @@
};
this.init();
- },
+ }
- YesNoCheckboxCellEditor: function (args) {
+ function CheckboxEditor(args) {
var $select;
var defaultValue;
var scope = this;
@@ -377,9 +330,9 @@
};
this.init();
- },
+ }
- PercentCompleteCellEditor: function (args) {
+ function PercentCompleteEditor(args) {
var $input, $picker;
var defaultValue;
var scope = this;
@@ -452,78 +405,14 @@
};
this.init();
- },
-
- StarCellEditor: function (args) {
- var $input;
- var defaultValue;
- var scope = this;
-
- function toggle(e) {
- if (e.type == "keydown" && e.which != 32) {
- return;
- }
-
- if ($input.css("opacity") == "1") {
- $input.css("opacity", 0.5);
- } else {
- $input.css("opacity", 1);
- }
-
- e.preventDefault();
- e.stopPropagation();
- return false;
- }
-
- this.init = function () {
- $input = $("<IMG src='../images/bullet_star.png' align=absmiddle tabIndex=0 title='Click or press Space to toggle' />")
- .bind("click keydown", toggle)
- .appendTo(args.container)
- .focus();
- };
-
- this.destroy = function () {
- $input.unbind("click keydown", toggle);
- $input.remove();
- };
-
- this.focus = function () {
- $input.focus();
- };
-
- this.loadValue = function (item) {
- defaultValue = item[args.column.field];
- $input.css("opacity", defaultValue ? 1 : 0.2);
- };
-
- this.serializeValue = function () {
- return ($input.css("opacity") == "1");
- };
-
- this.applyValue = function (item, state) {
- item[args.column.field] = state;
- };
-
- this.isValueChanged = function () {
- return defaultValue != ($input.css("opacity") == "1");
- };
-
- this.validate = function () {
- return {
- valid: true,
- msg: null
- };
- };
-
- this.init();
- },
+ }
/*
* An example of a "detached" editor.
* The UI is added onto document BODY and .position(), .show() and .hide() are implemented.
* KeyDown events are also handled to provide handling for Tab, Shift-Tab, Esc and Ctrl-Enter.
*/
- LongTextCellEditor: function (args) {
+ function LongTextEditor(args) {
var $input, $wrapper;
var defaultValue;
var scope = this;
@@ -620,7 +509,4 @@
this.init();
}
- };
-
- $.extend(window, SlickEditor);
})(jQuery);
View
55 slick.formatters.js
@@ -0,0 +1,55 @@
+/***
+ * Contains basic SlickGrid formatters.
+ * @module Formatters
+ * @namespace Slick
+ */
+
+(function ($) {
+ // register namespace
+ $.extend(true, window, {
+ "Slick": {
+ "Formatters": {
+ "PercentComplete": PercentCompleteFormatter,
+ "PercentCompleteBar": PercentCompleteBarFormatter,
+ "YesNo": YesNoFormatter,
+ "Checkmark": CheckmarkFormatter
+ }
+ }
+ });
+
+ function PercentCompleteFormatter(row, cell, value, columnDef, dataContext) {
+ if (value == null || value === "") {
+ return "-";
+ } else if (value < 50) {
+ return "<span style='color:red;font-weight:bold;'>" + value + "%</span>";
+ } else {
+ return "<span style='color:green'>" + value + "%</span>";
+ }
+ }
+
+ function PercentCompleteBarFormatter(row, cell, value, columnDef, dataContext) {
+ if (value == null || value === "") {
+ return "";
+ }
+
+ var color;
+
+ if (value < 30) {
+ color = "red";
+ } else if (value < 70) {
+ color = "silver";
+ } else {
+ color = "green";
+ }
+
+ return "<span class='percent-complete-bar' style='background:" + color + ";width:" + value + "%'></span>";
+ }
+
+ function YesNoFormatter(row, cell, value, columnDef, dataContext) {
+ return value ? "Yes" : "No";
+ }
+
+ function CheckmarkFormatter(row, cell, value, columnDef, dataContext) {
+ return value ? "<img src='../images/tick.png'>" : "";
+ }
+})(jQuery);
View
6 slick.grid.js
@@ -1086,7 +1086,11 @@ if (typeof Slick === "undefined") {
}
function defaultFormatter(row, cell, value, columnDef, dataContext) {
- return (value === null || value === undefined) ? "" : value;
+ if (value == null) {
+ return "";
+ } else {
+ return value.toString().replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;");
+ }
}
function getFormatter(row, column) {
View
6 tests/scrolling benchmarks.html
@@ -24,7 +24,7 @@
<script src="../slick.core.js"></script>
<script src="../slick.grid.js"></script>
- <script src="../slick.editors.js"></script>
+ <script src="../slick.formatters.js"></script>
<button onclick="grid.debug()">Debug info</button>
<button onclick="startBench(100)">Run (+= 100px)</button>
@@ -48,10 +48,10 @@
var columns = [
{id:"title", name:"Title", field:"title", width:120, cssClass:"cell-title"},
{id:"duration", name:"Duration", field:"duration", selectable:false},
- {id:"%", name:"% Complete", field:"percentComplete", width:80, resizable:false, formatter:GraphicalPercentCompleteCellFormatter},
+ {id:"%", name:"% Complete", field:"percentComplete", width:80, resizable:false, formatter:Slick.Formatters.PercentCompleteBar},
{id:"start", name:"Start", field:"start", minWidth:60},
{id:"finish", name:"Finish", field:"finish", minWidth:60},
- {id:"effort-driven", name:"Effort Driven", width:80, minWidth:20, maxWidth:80, cssClass:"cell-effort-driven", field:"effortDriven", formatter:BoolCellFormatter, asyncPostRender:testPostRender}
+ {id:"effort-driven", name:"Effort Driven", width:80, minWidth:20, maxWidth:80, cssClass:"cell-effort-driven", field:"effortDriven", formatter:Slick.Formatters.Checkmark, asyncPostRender:testPostRender}
];
for (var i=0; i<extraColumns; i++) {
Please sign in to comment.
Something went wrong with that request. Please try again.