Permalink
Browse files

*** BREAKING CHANGES ***

BREAKING Editor API changes:
- REMOVED: .saveValue(item) method
- ADDED: .serializeValue() method
- ADDED: .applyValue(item,serializedValue) method

These changes have been made to make the interface more flexible and to support functionality similar to what "setValueHandler" column option used to offer.  This is especially useful for implementing remote edits using AJAX and undo/redo.

IMPORTANT: .applyValue(item,serializedValue) will be called after the editor is destroyed - treat this method as static

Grid changes:
- CHANGED: the grid now calls .loadValue(item) on the editor during construction so you no longer need to do it in the .init()
- ADDED: new "editCommandHandler" grid option: options.editCommandHandler(item,column,editCommand)
When specified, the handler will be called instead of immediately applying the changes.  The client can the call editCommand.execute() to apply the changes.

editCommand:
  row - the row of the cell that has been edited
  cell - the column of the cell that has been edited
  editor - cell editor
  prevSerializedValue - the serialized value prior to user edit
  serializedValue - the serialized value after the user edit
  execute() - a delegate to apply the changes and update the row
  undo() - a delegate to undo the changes and update the row
  • Loading branch information...
1 parent 0965cd1 commit 19d2f3ce2c786ac2c71e1216e408b498a121562a unknown committed Jun 10, 2010
@@ -73,7 +73,6 @@ <h2>Demonstrates:</h2>
.appendTo(args.container)
.bind("keydown", scope.handleKeyDown);
- scope.loadValue(args.item);
scope.focus();
};
@@ -91,16 +90,20 @@ <h2>Demonstrates:</h2>
$from.focus();
};
+ this.serializeValue = function() {
+ return {from:parseInt($from.val(),10), to:parseInt($to.val(),10)};
+ };
+
+ this.applyValue = function(item,state) {
+ item.from = state.from;
+ item.to = state.to;
+ };
+
this.loadValue = function(item) {
$from.val(item.from);
$to.val(item.to);
};
- this.saveValue = function(item) {
- item.from = parseInt($from.val(),10);
- item.to = parseInt($to.val(),10);
- };
-
this.isValueChanged = function() {
return args.item.from != parseInt($from.val(),10) || args.item.to != parseInt($from.val(),10);
};
@@ -0,0 +1,111 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+ <head>
+ <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
+ <title>SlickGrid example 3: Editing</title>
+ <link rel="stylesheet" href="../slick.grid.css" type="text/css" media="screen" charset="utf-8" />
+ <link rel="stylesheet" href="../css/custom-theme/jquery-ui-1.7.2.custom.css" type="text/css" media="screen" charset="utf-8" />
+ <link rel="stylesheet" href="examples.css" type="text/css" media="screen" charset="utf-8" />
+ <style>
+ .cell-title {
+ font-weight: bold;
+ }
+
+ .cell-effort-driven {
+ text-align: center;
+ }
+ </style>
+ </head>
+ <body>
+
+
+ <div style="width:600px;float:left;">
+ <div id="myGrid" style="width:100%;height:500px;"></div>
+ </div>
+
+ <div class="options-panel" style="width:320px;margin-left:650px;">
+ <h2>Demonstrates:</h2>
+ <ul>
+ <li>Using "editCommandHandler" option to intercept edit commands and implement undo support</li>
+ </ul>
+
+ <h2>Controls:</h2>
+ <button onclick="undo()"><img src="../images/arrow_undo.png" align="absmiddle"> Undo</button>
+ </div>
+
+ <script language="JavaScript" src="../lib/firebugx.js"></script>
+
+ <script language="JavaScript" src="../lib/jquery-1.4.2.min.js"></script>
+ <script language="JavaScript" src="../lib/jquery-ui-1.7.2.custom.min.js"></script>
+ <script language="JavaScript" src="../lib/jquery.rule-1.0.1.1-min.js"></script>
+ <script language="JavaScript" src="../lib/jquery.event.drag.custom.js"></script>
+
+ <script language="JavaScript" src="../slick.editors.js"></script>
+ <script language="JavaScript" src="../slick.grid.js"></script>
+
+ <script>
+ function requiredFieldValidator(value) {
+ if (value == null || value == undefined || !value.length)
+ return {valid:false, msg:"This is a required field"};
+ else
+ return {valid:true, msg:null};
+ }
+
+ 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}
+ ];
+
+ var options = {
+ editable: true,
+ enableAddRow: false,
+ enableCellNavigation: true,
+ asyncEditorLoading: false,
+ autoEdit: false,
+ editCommandHandler: queueAndExecuteCommand
+ };
+
+ var commandQueue = [];
+
+ function queueAndExecuteCommand(item,column,editCommand) {
+ commandQueue.push(editCommand);
+ editCommand.execute();
+ }
+
+ function undo() {
+ var command = commandQueue.pop();
+ if (command && Slick.GlobalEditorLock.cancelCurrentEdit()) {
+ command.undo();
+ grid.gotoCell(command.row,command.cell,false);
+ }
+ }
+
+ $(function()
+ {
+ for (var i=0; i<500; i++) {
+ var d = (data[i] = {});
+
+ d["title"] = "Task " + i;
+ d["description"] = "This is a sample task description.\n It can be multiline";
+ d["duration"] = "5 days";
+ d["percentComplete"] = Math.round(Math.random() * 100);
+ d["start"] = "01/01/2009";
+ d["finish"] = "01/05/2009";
+ d["effortDriven"] = (i % 5 == 0);
+ }
+
+ grid = new Slick.Grid($("#myGrid"), data, columns, options);
+ })
+
+ </script>
+
+ </body>
+</html>
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Oops, something went wrong.

0 comments on commit 19d2f3c

Please sign in to comment.