diff options
Diffstat (limited to 'examples/example-composite-editor-item-details.html')
| -rw-r--r-- | examples/example-composite-editor-item-details.html | 233 |
1 files changed, 233 insertions, 0 deletions
diff --git a/examples/example-composite-editor-item-details.html b/examples/example-composite-editor-item-details.html new file mode 100644 index 0000000..978067f --- /dev/null +++ b/examples/example-composite-editor-item-details.html @@ -0,0 +1,233 @@ +<!DOCTYPE HTML> +<html> + <head> + <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> + <title>SlickGrid example: CompositeEditor</title> + <link rel="stylesheet" href="../slick.grid.css" type="text/css" media="screen" charset="utf-8" /> + <link rel="stylesheet" href="../css/smoothness/jquery-ui-1.8.5.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; + } + + .item-details-form { + display:inline-block; + border:1px solid black; + margin:8px; + padding:10px; + background: #efefef; + -moz-box-shadow: 0px 0px 15px black; + -webkit-box-shadow: 0px 0px 15px black; + box-shadow: 0px 0px 15px black; + + position:absolute; + top: 10px; + left: 150px; + } + + .item-details-form-buttons { + float: right; + } + + .item-details-row { + + } + + .item-details-label { + margin-left:10px; + margin-top:20px; + display:block; + font-weight:bold; + } + + .item-details-editor-container { + width:200px; + height:20px; + border:1px solid silver; + background:white; + display:block; + margin:10px; + margin-top:4px; + padding:0; + padding-left:4px; + padding-right:4px; + } + </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 a CompositeEditor to implement detached item edit form</li> + </ul> + + <h2>Options:</h2> + <button onclick="openDetails()">Open Item Edit for active row</button> + + + </div> + + + <script id="itemDetailsTemplate" type="text/x-jquery-tmpl"> + <div class='item-details-form'> + {{each columns}} + <div class='item-details-label'> + ${name} + </div> + <div class='item-details-editor-container' data-editorid='${id}'></div> + {{/each}} + + <hr/> + <div class='item-details-form-buttons'> + <button data-action='save'>Save</button> + <button data-action='cancel'>Cancel</button> + </div> + </div> + </script> + + + + <script src="../lib/firebugx.js"></script> + + <script src="../lib/jquery-1.4.3.min.js"></script> + <script src="../lib/jquery-ui-1.8.5.custom.min.js"></script> + <script src="../lib/jquery.event.drag-2.0.min.js"></script> + <script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script> + + <script src="../slick.core.js"></script> + <script src="../plugins/slick.cellrangeselector.js"></script> + <script src="../plugins/slick.cellselectionmodel.js"></script> + <script src="../slick.editors.js"></script> + <script src="../slick.grid.js"></script> + <script src="slick.compositeeditor.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:TextCellEditor}, + {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: true, + enableCellNavigation: true, + asyncEditorLoading: false, + autoEdit: false + }; + + + + function openDetails() { + if (grid.getEditorLock().isActive() && !grid.getEditorLock().commitCurrentEdit()) { + return; + } + + var $modal = $("<div class='item-details-form'></div>"); + + $modal = $("#itemDetailsTemplate") + .tmpl({ + context: grid.getDataItem(grid.getActiveCell().row), + columns: columns + }) + .appendTo("body"); + + $modal.keydown(function(e) { + if (e.which == $.ui.keyCode.ENTER) { + grid.getEditController().commitCurrentEdit(); + e.stopPropagation(); + e.preventDefault(); + } + else if (e.which == $.ui.keyCode.ESCAPE) { + grid.getEditController().cancelCurrentEdit(); + e.stopPropagation(); + e.preventDefault(); + } + }); + + $modal.find("[data-action=save]").click(function() { + grid.getEditController().commitCurrentEdit(); + }); + + $modal.find("[data-action=cancel]").click(function() { + grid.getEditController().cancelCurrentEdit(); + }); + + + var containers = $.map(columns, function(c) { return $modal.find("[data-editorid=" + c.id + "]"); }); + + var compositeEditor = new Slick.CompositeEditor( + columns, + containers, + { + destroy: function () { $modal.remove(); } + } + ); + + grid.editActiveCell(compositeEditor); + } + + $(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); + + grid.onAddNewRow.subscribe(function(e, args) { + var item = args.item; + var column = args.column; + grid.invalidateRow(data.length); + data.push(item); + grid.updateRowCount(); + grid.render(); + }); + + + grid.onValidationError.subscribe(function(e, args) { + // handle validation errors originating from the CompositeEditor + if (args.editor && (args.editor instanceof Slick.CompositeEditor)) { + var err; + var idx = args.validationResults.errors.length; + while (idx--) { + err = args.validationResults.errors[idx]; + $(err.container).stop(true,true).effect("highlight", {color:"red"}); + } + } + }); + + grid.setActiveCell(0, 0); + }) + </script> + </body> +</html> |