diff options
Diffstat (limited to 'examples')
27 files changed, 3911 insertions, 3801 deletions
diff --git a/examples/example-checkbox-row-select.html b/examples/example-checkbox-row-select.html index 99b78d1..e1d0124 100644 --- a/examples/example-checkbox-row-select.html +++ b/examples/example-checkbox-row-select.html @@ -1,31 +1,31 @@ <!DOCTYPE HTML> <html> <head> - <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> - <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.16.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> - .slick-cell-checkboxsel { - background: #f0f0f0; - border-right-color: silver; - border-right-style: solid; - } - </style> + <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> + <link rel="stylesheet" href="../slick.grid.css" type="text/css" /> + <link rel="stylesheet" href="../css/smoothness/jquery-ui-1.8.16.custom.css" type="text/css" /> + <link rel="stylesheet" href="examples.css" type="text/css" /> + <style> + .slick-cell-checkboxsel { + background: #f0f0f0; + border-right-color: silver; + border-right-style: solid; + } + </style> </head> <body> - <div style="position:relative"> - <div style="width:600px;"> - <div id="myGrid" style="width:100%;height:500px;"></div> - </div> +<div style="position:relative"> + <div style="width:600px;"> + <div id="myGrid" style="width:100%;height:500px;"></div> + </div> - <div class="options-panel"> - <h2>Demonstrates:</h2> - <ul> - <li>Checkbox row select column</li> - </ul> - </div> - </div> + <div class="options-panel"> + <h2>Demonstrates:</h2> + <ul> + <li>Checkbox row select column</li> + </ul> + </div> +</div> <script src="../lib/firebugx.js"></script> @@ -45,46 +45,42 @@ <script src="../slick.grid.js"></script> <script> - var grid; - var data = []; - var options = { - editable: true, - enableCellNavigation: true, - asyncEditorLoading: false, - autoEdit: false - }; - var columns = []; + var grid; + var data = []; + var options = { + editable:true, + enableCellNavigation:true, + asyncEditorLoading:false, + autoEdit:false + }; + var columns = []; + $(function () { + for (var i = 0; i < 100; i++) { + var d = (data[i] = {}); + d[0] = "Row " + i; + } - $(function() - { - for (var i=0; i<100; i++) { - var d = (data[i] = {}); - d[0] = "Row " + i; - } + var checkboxSelector = new Slick.CheckboxSelectColumn({ + cssClass:"slick-cell-checkboxsel" + }); - var checkboxSelector = new Slick.CheckboxSelectColumn({ - cssClass: "slick-cell-checkboxsel" - }); + columns.push(checkboxSelector.getColumnDefinition()); - columns.push(checkboxSelector.getColumnDefinition()); + for (var i = 0; i < 5; i++) { + columns.push({ + id:i, + name:String.fromCharCode("A".charCodeAt(0) + i), + field:i, + width:100, + editor:TextCellEditor + }); + } - for (var i = 0; i < 5; i++) { - columns.push({ - id: i, - name: String.fromCharCode("A".charCodeAt(0) + i), - field: i, - width: 100, - editor: TextCellEditor - }); - } - - - grid = new Slick.Grid("#myGrid", data, columns, options); - grid.setSelectionModel(new Slick.RowSelectionModel({selectActiveRow:false})); - grid.registerPlugin(checkboxSelector); - - }) + grid = new Slick.Grid("#myGrid", data, columns, options); + grid.setSelectionModel(new Slick.RowSelectionModel({selectActiveRow:false})); + grid.registerPlugin(checkboxSelector); + }) </script> </body> </html> diff --git a/examples/example-colspan.html b/examples/example-colspan.html index c6a2c81..4f17f47 100644 --- a/examples/example-colspan.html +++ b/examples/example-colspan.html @@ -1,89 +1,89 @@ <!DOCTYPE HTML> <html> - <head> - <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.16.custom.css" type="text/css" media="screen" charset="utf-8" /> - <link rel="stylesheet" href="examples.css" type="text/css" media="screen" charset="utf-8" /> - </head> - <body> - <table width="100%"> - <tr> - <td valign="top" width="50%"> - <div id="myGrid" style="width:600px;height:500px;"></div> - </td> - <td valign="top"> - <h2>Demonstrates:</h2> - <ul> - <li>column span</li> - </ul> - </td> - </tr> - </table> +<head> + <link rel="stylesheet" href="../slick.grid.css" type="text/css" /> + <link rel="stylesheet" href="../css/smoothness/jquery-ui-1.8.16.custom.css" type="text/css" /> + <link rel="stylesheet" href="examples.css" type="text/css" /> +</head> +<body> +<table width="100%"> + <tr> + <td valign="top" width="50%"> + <div id="myGrid" style="width:600px;height:500px;"></div> + </td> + <td valign="top"> + <h2>Demonstrates:</h2> + <ul> + <li>column span</li> + </ul> + </td> + </tr> +</table> - <script src="../lib/jquery-1.7.min.js"></script> - <script src="../lib/jquery.event.drag-2.0.min.js"></script> +<script src="../lib/jquery-1.7.min.js"></script> +<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.grid.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.grid.js"></script> - <script> - var grid; +<script> + var grid; - var columns = [ - {id:"title", name:"Title", field:"title"}, - {id:"duration", name:"Duration", field:"duration"}, - {id:"%", name:"% Complete", field:"percentComplete", selectable:false}, - {id:"start", name:"Start", field:"start"}, - {id:"finish", name:"Finish", field:"finish"}, - {id:"effort-driven", name:"Effort Driven", field:"effortDriven"} - ]; + var columns = [ + {id:"title", name:"Title", field:"title"}, + {id:"duration", name:"Duration", field:"duration"}, + {id:"%", name:"% Complete", field:"percentComplete", selectable:false}, + {id:"start", name:"Start", field:"start"}, + {id:"finish", name:"Finish", field:"finish"}, + {id:"effort-driven", name:"Effort Driven", field:"effortDriven"} + ]; - var options = { - enableCellNavigation: true, - enableColumnReorder: false - }; + var options = { + enableCellNavigation:true, + enableColumnReorder:false + }; - $(function() { - var data = []; - for (var i = 0; i < 10; i++) { - data[i] = { - title: "Task " + i, - duration: "5 days", - percentComplete: Math.round(Math.random() * 100), - start: "01/01/2009", - finish: "01/05/2009", - effortDriven: (i % 5 == 0) - }; - } + $(function () { + var data = []; + for (var i = 0; i < 10; i++) { + data[i] = { + title:"Task " + i, + duration:"5 days", + percentComplete:Math.round(Math.random() * 100), + start:"01/01/2009", + finish:"01/05/2009", + effortDriven:(i % 5 == 0) + }; + } - data.getItemMetadata = function (row) { - if (row % 2 === 1) { - return { - "columns": { - "duration": { - "colspan": 3 - } - } - }; - } - else { - return { - "columns": { - 0: { - "colspan": "*" - } - } - }; - } - }; + data.getItemMetadata = function (row) { + if (row % 2 === 1) { + return { + "columns":{ + "duration":{ + "colspan":3 + } + } + }; + } + else { + return { + "columns":{ + 0:{ + "colspan":"*" + } + } + }; + } + }; - grid = new Slick.Grid("#myGrid", data, columns, options); + grid = new Slick.Grid("#myGrid", data, columns, options); - grid.setSelectionModel(new Slick.CellSelectionModel()); - }) - </script> - </body> + grid.setSelectionModel(new Slick.CellSelectionModel()); + }) +</script> +</body> </html> diff --git a/examples/example-composite-editor-item-details.html b/examples/example-composite-editor-item-details.html index 4b07f8d..b27399c 100644 --- a/examples/example-composite-editor-item-details.html +++ b/examples/example-composite-editor-item-details.html @@ -1,233 +1,236 @@ <!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.16.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 { - z-index: 10000; - 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="position:relative"> - <div style="width:600px;"> - <div id="myGrid" style="width:100%;height:500px;"></div> - </div> - - <div class="options-panel"> - <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> - </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.7.min.js"></script> - <script src="../lib/jquery-ui-1.8.16.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; +<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" /> + <link rel="stylesheet" href="../css/smoothness/jquery-ui-1.8.16.custom.css" type="text/css" /> + <link rel="stylesheet" href="examples.css" type="text/css" /> + <style> + .cell-title { + font-weight: bold; + } + + .cell-effort-driven { + text-align: center; + } + + .item-details-form { + z-index: 10000; + 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="position:relative"> + <div style="width:600px;"> + <div id="myGrid" style="width:100%;height:500px;"></div> + </div> + + <div class="options-panel"> + <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> +</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.7.min.js"></script> +<script src="../lib/jquery-ui-1.8.16.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(); + } } - - 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); + ); + + 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"}); } + } + }); - $(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> + grid.setActiveCell(0, 0); + }) +</script> +</body> </html> diff --git a/examples/example-custom-column-value-extractor.html b/examples/example-custom-column-value-extractor.html index 934a822..53f64bd 100644 --- a/examples/example-custom-column-value-extractor.html +++ b/examples/example-custom-column-value-extractor.html @@ -1,76 +1,76 @@ <!DOCTYPE HTML> <html> - <head> - <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> - <title>SlickGrid example: Custom column value extractor</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.16.custom.css" type="text/css" media="screen" charset="utf-8" /> - <link rel="stylesheet" href="examples.css" type="text/css" media="screen" charset="utf-8" /> - </head> - <body> - <table width="100%"> - <tr> - <td valign="top" width="50%"> - <div id="myGrid" style="width:600px;height:500px;"></div> - </td> - <td valign="top"> - <h2>Demonstrates:</h2> - <ul> - <li>using <u>dataItemColumnValueExtractor</u> option to specify a custom column value extractor</li> - </ul> - </td> - </tr> - </table> +<head> + <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> + <title>SlickGrid example: Custom column value extractor</title> + <link rel="stylesheet" href="../slick.grid.css" type="text/css" /> + <link rel="stylesheet" href="../css/smoothness/jquery-ui-1.8.16.custom.css" type="text/css" /> + <link rel="stylesheet" href="examples.css" type="text/css" /> +</head> +<body> +<table width="100%"> + <tr> + <td valign="top" width="50%"> + <div id="myGrid" style="width:600px;height:500px;"></div> + </td> + <td valign="top"> + <h2>Demonstrates:</h2> + <ul> + <li>using <u>dataItemColumnValueExtractor</u> option to specify a custom column value extractor</li> + </ul> + </td> + </tr> +</table> - <script src="../lib/jquery-1.7.min.js"></script> - <script src="../lib/jquery.event.drag-2.0.min.js"></script> +<script src="../lib/jquery-1.7.min.js"></script> +<script src="../lib/jquery.event.drag-2.0.min.js"></script> - <script src="../slick.core.js"></script> - <script src="../slick.grid.js"></script> +<script src="../slick.core.js"></script> +<script src="../slick.grid.js"></script> - <script> +<script> - var grid; + var grid; - var columns = [ - {id:"title", name:"Name", field:"name"}, - {id:"field1", name:"Field1", field:"values", fieldIdx: 0}, - {id:"field2", name:"Field2", field:"values", fieldIdx: 1}, - {id:"field3", name:"Field3", field:"values", fieldIdx: 2} - ]; + var columns = [ + {id:"title", name:"Name", field:"name"}, + {id:"field1", name:"Field1", field:"values", fieldIdx:0}, + {id:"field2", name:"Field2", field:"values", fieldIdx:1}, + {id:"field3", name:"Field3", field:"values", fieldIdx:2} + ]; - var options = { - enableCellNavigation: true, - enableColumnReorder: false, - dataItemColumnValueExtractor: getItemColumnValue - }; + var options = { + enableCellNavigation:true, + enableColumnReorder:false, + dataItemColumnValueExtractor:getItemColumnValue + }; - // Get the item column value using a custom 'fieldIdx' column param - function getItemColumnValue(item, column) { - var values = item[column.field]; - if (column.fieldIdx !== undefined) { - return values && values[column.fieldIdx]; - } else { - return values; - } - } + // Get the item column value using a custom 'fieldIdx' column param + function getItemColumnValue(item, column) { + var values = item[column.field]; + if (column.fieldIdx !== undefined) { + return values && values[column.fieldIdx]; + } else { + return values; + } + } - $(function() { - var data = []; - for (var i = 0; i < 500; i++) { - data[i] = { - name: "Item " + i, - values: [ - Math.round(Math.random() * 100), - Math.round(Math.random() * 100), - Math.round(Math.random() * 100) - ] - }; - } + $(function () { + var data = []; + for (var i = 0; i < 500; i++) { + data[i] = { + name:"Item " + i, + values:[ + Math.round(Math.random() * 100), + Math.round(Math.random() * 100), + Math.round(Math.random() * 100) + ] + }; + } - grid = new Slick.Grid("#myGrid", data, columns, options); - }) + grid = new Slick.Grid("#myGrid", data, columns, options); + }) - </script> - </body> +</script> +</body> </html> diff --git a/examples/example-grouping.html b/examples/example-grouping.html index 3e3c883..132f6a8 100644 --- a/examples/example-grouping.html +++ b/examples/example-grouping.html @@ -1,350 +1,361 @@ <!DOCTYPE HTML> <html> - <head> - <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> - <title>SlickGrid example: Grouping</title> - <link rel="stylesheet" href="../slick.grid.css" type="text/css" media="screen" charset="utf-8" /> - <link rel="stylesheet" href="../controls/slick.pager.css" type="text/css" media="screen" charset="utf-8" /> - <link rel="stylesheet" href="../css/smoothness/jquery-ui-1.8.16.custom.css" type="text/css" media="screen" charset="utf-8" /> - <link rel="stylesheet" href="examples.css" type="text/css" media="screen" charset="utf-8" /> - <link rel="stylesheet" href="../controls/slick.columnpicker.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="position:relative"> - <div style="width:600px;"> - <div class="grid-header" style="width:100%"> - <label>SlickGrid</label> - </div> - <div id="myGrid" style="width:100%;height:500px;"></div> - <div id="pager" style="width:100%;height:20px;"></div> - </div> - - <div class="options-panel"> - <b>Options:</b> - <hr/> - <div style="padding:6px;"> - <label style="width:200px;float:left">Show tasks with % at least: </label> - <div style="padding:2px;"> - <div style="width:100px;display:inline-block;" id="pcSlider"></div> - </div> - <br/> - <label style="width:200px;float:left">And title including:</label> - <input type=text id="txtSearch" style="width:100px;"> - <br/><br/> - <hr/> - <button onclick="clearGrouping()">Clear grouping</button><br/> - <button onclick="groupByDuration()">Group by duration & sort groups by value</button><br/> - <button onclick="groupByDurationOrderByCount()">Group by duration & sort groups by count</button><br/> - <button onclick="groupByDurationOrderByCountGroupCollapsed()">Group by duration & sort groups by count, group collapsed</button><br/> - <br/> - <button onclick="collapseAllGroups()">Collapse all groups</button><br/> - <button onclick="expandAllGroups()">Expand all groups</button><br/> - </div> - <hr/> - <h2>Demonstrates:</h2> - <ul> - <li> - Fully dynamic and interactive grouping with filtering and aggregates over <b>50'000</b> items<br> - Personally, this is just the coolest slickest thing I've ever seen done with DHTML grids! - </li> - </ul> - </div> - </div> - - - <script src="../lib/firebugx.js"></script> - - <script src="../lib/jquery-1.7.min.js"></script> - <script src="../lib/jquery-ui-1.8.16.custom.min.js"></script> - <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="../plugins/slick.cellrangedecorator.js"></script> - <script src="../plugins/slick.cellrangeselector.js"></script> - <script src="../plugins/slick.cellselectionmodel.js"></script> - <script src="../slick.grid.js"></script> - <script src="../slick.groupitemmetadataprovider.js"></script> - <script src="../slick.dataview.js"></script> - <script src="../controls/slick.pager.js"></script> - <script src="../controls/slick.columnpicker.js"></script> - - <script> - var dataView; - var grid; - 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:"duration", name:"Duration", field:"duration", sortable:true}, - {id:"%", name:"% Complete", field:"percentComplete", width:80, formatter:GraphicalPercentCompleteCellFormatter, 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} - ]; - - var options = { - enableCellNavigation: true, - editable: true - }; - - var sortcol = "title"; - var sortdir = 1; - var percentCompleteThreshold = 0; - var prevPercentCompleteThreshold = 0; - var searchString = ""; - - function avgTotalsFormatter(totals, columnDef) { - return "avg: " + Math.round(totals.avg[columnDef.field]) + "%"; +<head> + <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> + <title>SlickGrid example: Grouping</title> + <link rel="stylesheet" href="../slick.grid.css" type="text/css" /> + <link rel="stylesheet" href="../controls/slick.pager.css" type="text/css" /> + <link rel="stylesheet" href="../css/smoothness/jquery-ui-1.8.16.custom.css" type="text/css" /> + <link rel="stylesheet" href="examples.css" type="text/css" /> + <link rel="stylesheet" href="../controls/slick.columnpicker.css" type="text/css" /> + <style> + .cell-title { + font-weight: bold; + } + + .cell-effort-driven { + text-align: center; + } + </style> +</head> +<body> +<div style="position:relative"> + <div style="width:600px;"> + <div class="grid-header" style="width:100%"> + <label>SlickGrid</label> + </div> + <div id="myGrid" style="width:100%;height:500px;"></div> + <div id="pager" style="width:100%;height:20px;"></div> + </div> + + <div class="options-panel"> + <b>Options:</b> + <hr/> + <div style="padding:6px;"> + <label style="width:200px;float:left">Show tasks with % at least: </label> + + <div style="padding:2px;"> + <div style="width:100px;display:inline-block;" id="pcSlider"></div> + </div> + <br/> + <label style="width:200px;float:left">And title including:</label> + <input type=text id="txtSearch" style="width:100px;"> + <br/><br/> + <hr/> + <button onclick="clearGrouping()">Clear grouping</button> + <br/> + <button onclick="groupByDuration()">Group by duration & sort groups by value</button> + <br/> + <button onclick="groupByDurationOrderByCount()">Group by duration & sort groups by count</button> + <br/> + <button onclick="groupByDurationOrderByCountGroupCollapsed()">Group by duration & sort groups by count, group + collapsed + </button> + <br/> + <br/> + <button onclick="collapseAllGroups()">Collapse all groups</button> + <br/> + <button onclick="expandAllGroups()">Expand all groups</button> + <br/> + </div> + <hr/> + <h2>Demonstrates:</h2> + <ul> + <li> + Fully dynamic and interactive grouping with filtering and aggregates over <b>50'000</b> items<br> + Personally, this is just the coolest slickest thing I've ever seen done with DHTML grids! + </li> + </ul> + </div> +</div> + + +<script src="../lib/firebugx.js"></script> + +<script src="../lib/jquery-1.7.min.js"></script> +<script src="../lib/jquery-ui-1.8.16.custom.min.js"></script> +<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="../plugins/slick.cellrangedecorator.js"></script> +<script src="../plugins/slick.cellrangeselector.js"></script> +<script src="../plugins/slick.cellselectionmodel.js"></script> +<script src="../slick.grid.js"></script> +<script src="../slick.groupitemmetadataprovider.js"></script> +<script src="../slick.dataview.js"></script> +<script src="../controls/slick.pager.js"></script> +<script src="../controls/slick.columnpicker.js"></script> + +<script> +var dataView; +var grid; +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:"duration", name:"Duration", field:"duration", sortable:true}, + {id:"%", name:"% Complete", field:"percentComplete", width:80, formatter:GraphicalPercentCompleteCellFormatter, 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} +]; + +var options = { + enableCellNavigation:true, + editable:true +}; + +var sortcol = "title"; +var sortdir = 1; +var percentCompleteThreshold = 0; +var prevPercentCompleteThreshold = 0; +var searchString = ""; + +function avgTotalsFormatter(totals, columnDef) { + return "avg: " + Math.round(totals.avg[columnDef.field]) + "%"; +} + +function myFilter(item, args) { + return item["percentComplete"] >= args.percentComplete && + (args.searchString == "" || + item["title"].indexOf(args.searchString) == -1); +} + +function percentCompleteSort(a, b) { + return a["percentComplete"] - b["percentComplete"]; +} + +function comparer(a, b) { + var x = a[sortcol], y = b[sortcol]; + return (x == y ? 0 : (x > y ? 1 : -1)); +} + +function collapseAllGroups() { + dataView.beginUpdate(); + for (var i = 0; i < dataView.getGroups().length; i++) { + dataView.collapseGroup(dataView.getGroups()[i].value); + } + dataView.endUpdate(); +} + +function expandAllGroups() { + dataView.beginUpdate(); + for (var i = 0; i < dataView.getGroups().length; i++) { + dataView.expandGroup(dataView.getGroups()[i].value); + } + dataView.endUpdate(); +} + +function clearGrouping() { + dataView.groupBy(null); +} + +function groupByDuration() { + dataView.groupBy( + "duration", + function (g) { + return "Duration: " + g.value + " <span style='color:green'>(" + g.count + " items)</span>"; + }, + function (a, b) { + return a.value - b.value; + } + ); + dataView.setAggregators([ + new Slick.Data.Aggregators.Avg("percentComplete") + ], false); +} + +function groupByDurationOrderByCount() { + dataView.groupBy( + "duration", + function (g) { + return "Duration: " + g.value + " <span style='color:green'>(" + g.count + " items)</span>"; + }, + function (a, b) { + return a.count - b.count; + } + ); + dataView.setAggregators([ + new Slick.Data.Aggregators.Avg("percentComplete") + ], false); +} + +function groupByDurationOrderByCountGroupCollapsed() { + dataView.groupBy( + "duration", + function (g) { + return "Duration: " + g.value + " <span style='color:green'>(" + g.count + " items)</span>"; + }, + function (a, b) { + return a.count - b.count; + } + ); + dataView.setAggregators([ + new Slick.Data.Aggregators.Avg("percentComplete") + ], true); +} + +$(".grid-header .ui-icon") + .addClass("ui-state-default ui-corner-all") + .mouseover(function (e) { + $(e.target).addClass("ui-state-hover") + }) + .mouseout(function (e) { + $(e.target).removeClass("ui-state-hover") + }); + +$(function () { + // prepare the data + for (var i = 0; i < 50000; i++) { + var d = (data[i] = {}); + + d["id"] = "id_" + i; + d["num"] = i; + d["title"] = "Task " + i; + d["duration"] = Math.round(Math.random() * 14); + d["percentComplete"] = Math.round(Math.random() * 100); + d["start"] = "01/01/2009"; + d["finish"] = "01/05/2009"; + d["effortDriven"] = (i % 5 == 0); + } + + var groupItemMetadataProvider = new Slick.Data.GroupItemMetadataProvider(); + dataView = new Slick.Data.DataView({ + groupItemMetadataProvider:groupItemMetadataProvider + }); + grid = new Slick.Grid("#myGrid", dataView, columns, options); + + // register the group item metadata provider to add expand/collapse group handlers + grid.registerPlugin(groupItemMetadataProvider); + grid.setSelectionModel(new Slick.CellSelectionModel()); + + var pager = new Slick.Controls.Pager(dataView, grid, $("#pager")); + var columnpicker = new Slick.Controls.ColumnPicker(columns, grid, options); + + + grid.onSort.subscribe(function (e, args) { + sortdir = args.sortAsc ? 1 : -1; + sortcol = args.sortCol.field; + + if ($.browser.msie && $.browser.version <= 8) { + // using temporary Object.prototype.toString override + // more limited and does lexicographic sort only by default, but can be much faster + + var percentCompleteValueFn = function () { + var val = this["percentComplete"]; + if (val < 10) { + return "00" + val; } - - function myFilter(item, args) { - return item["percentComplete"] >= args.percentComplete && - (args.searchString == "" || - item["title"].indexOf(args.searchString) == -1); - } - - function percentCompleteSort(a,b) { - return a["percentComplete"] - b["percentComplete"]; - } - - function comparer(a,b) { - var x = a[sortcol], y = b[sortcol]; - return (x == y ? 0 : (x > y ? 1 : -1)); - } - - function collapseAllGroups() { - dataView.beginUpdate(); - for (var i = 0; i < dataView.getGroups().length; i++) { - dataView.collapseGroup(dataView.getGroups()[i].value); - } - dataView.endUpdate(); + else if (val < 100) { + return "0" + val; } - - function expandAllGroups() { - dataView.beginUpdate(); - for (var i = 0; i < dataView.getGroups().length; i++) { - dataView.expandGroup(dataView.getGroups()[i].value); - } - dataView.endUpdate(); + else { + return val; } - - function clearGrouping() { - dataView.groupBy(null); - } - - function groupByDuration() { - dataView.groupBy( - "duration", - function (g) { - return "Duration: " + g.value + " <span style='color:green'>(" + g.count + " items)</span>"; - }, - function (a, b) { - return a.value - b.value; - } - ); - dataView.setAggregators([ - new Slick.Data.Aggregators.Avg("percentComplete") - ], false); - } - - function groupByDurationOrderByCount() { - dataView.groupBy( - "duration", - function (g) { - return "Duration: " + g.value + " <span style='color:green'>(" + g.count + " items)</span>"; - }, - function (a, b) { - return a.count - b.count; - } - ); - dataView.setAggregators([ - new Slick.Data.Aggregators.Avg("percentComplete") - ], false); - } - - function groupByDurationOrderByCountGroupCollapsed() { - dataView.groupBy( - "duration", - function (g) { - return "Duration: " + g.value + " <span style='color:green'>(" + g.count + " items)</span>"; - }, - function (a, b) { - return a.count - b.count; - } - ); - dataView.setAggregators([ - new Slick.Data.Aggregators.Avg("percentComplete") - ], true); - } - - $(".grid-header .ui-icon") - .addClass("ui-state-default ui-corner-all") - .mouseover(function(e) { - $(e.target).addClass("ui-state-hover") - }) - .mouseout(function(e) { - $(e.target).removeClass("ui-state-hover") - }); - - $(function() - { - // prepare the data - for (var i=0; i<50000; i++) { - var d = (data[i] = {}); - - d["id"] = "id_" + i; - d["num"] = i; - d["title"] = "Task " + i; - d["duration"] = Math.round(Math.random() * 14); - d["percentComplete"] = Math.round(Math.random() * 100); - d["start"] = "01/01/2009"; - d["finish"] = "01/05/2009"; - d["effortDriven"] = (i % 5 == 0); - } - - var groupItemMetadataProvider = new Slick.Data.GroupItemMetadataProvider(); - dataView = new Slick.Data.DataView({ - groupItemMetadataProvider: groupItemMetadataProvider - }); - grid = new Slick.Grid("#myGrid", dataView, columns, options); - - // register the group item metadata provider to add expand/collapse group handlers - grid.registerPlugin(groupItemMetadataProvider); - grid.setSelectionModel(new Slick.CellSelectionModel()); - - var pager = new Slick.Controls.Pager(dataView, grid, $("#pager")); - var columnpicker = new Slick.Controls.ColumnPicker(columns, grid, options); - - - grid.onSort.subscribe(function(e, args) { - sortdir = args.sortAsc ? 1 : -1; - sortcol = args.sortCol.field; - - if ($.browser.msie && $.browser.version <= 8) { - // using temporary Object.prototype.toString override - // more limited and does lexicographic sort only by default, but can be much faster - - var percentCompleteValueFn = function() { - var val = this["percentComplete"]; - if (val < 10) - return "00" + val; - else if (val < 100) - return "0" + val; - else - return val; - }; - - // use numeric sort of % and lexicographic for everything else - dataView.fastSort((sortcol=="percentComplete")?percentCompleteValueFn:sortcol,args.sortAsc); - } - else { - // using native sort with comparer - // preferred method but can be very slow in IE with huge datasets - dataView.sort(comparer, args.sortAsc); - } - }); - - // wire up model events to drive the grid - dataView.onRowCountChanged.subscribe(function(e,args) { - grid.updateRowCount(); - grid.render(); - }); - - dataView.onRowsChanged.subscribe(function(e,args) { - grid.invalidateRows(args.rows); - grid.render(); - }); - - - var h_runfilters = null; - - // wire up the slider to apply the filter to the model - $("#pcSlider,#pcSlider2").slider({ - "range": "min", - "slide": function(event,ui) { - Slick.GlobalEditorLock.cancelCurrentEdit(); - - if (percentCompleteThreshold != ui.value) - { - window.clearTimeout(h_runfilters); - h_runfilters = window.setTimeout(filterAndUpdate, 10); - percentCompleteThreshold = ui.value; - } - } - }); - - - // wire up the search textbox to apply the filter to the model - $("#txtSearch,#txtSearch2").keyup(function(e) { - Slick.GlobalEditorLock.cancelCurrentEdit(); - - // clear on Esc - if (e.which == 27) - this.value = ""; - - searchString = this.value; - dataView.refresh(); - }); - - - function filterAndUpdate() { - var isNarrowing = percentCompleteThreshold > prevPercentCompleteThreshold; - var isExpanding = percentCompleteThreshold < prevPercentCompleteThreshold; - var renderedRange = grid.getRenderedRange(); - - dataView.setFilterArgs({ - percentComplete: percentCompleteThreshold, - searchString: searchString - }); - dataView.setRefreshHints({ - ignoreDiffsBefore:renderedRange.top, - ignoreDiffsAfter:renderedRange.bottom + 1, - isFilterNarrowing:isNarrowing, - isFilterExpanding:isExpanding - }); - dataView.refresh(); - - prevPercentCompleteThreshold = percentCompleteThreshold; - } - - // initialize the model after all the events have been hooked up - dataView.beginUpdate(); - dataView.setItems(data); - dataView.setFilter(myFilter); - dataView.setFilterArgs({ - percentComplete: percentCompleteThreshold, - searchString: searchString - }); - dataView.groupBy( - "duration", - function (g) { - return "Duration: " + g.value + " <span style='color:green'>(" + g.count + " items)</span>"; - }, - function (a, b) { - return a.value - b.value; - } - ); - dataView.setAggregators([ - new Slick.Data.Aggregators.Avg("percentComplete") - ], false); - dataView.collapseGroup(0); - dataView.endUpdate(); - - $("#gridContainer").resizable(); - }) - - </script> - - </body> + }; + + // use numeric sort of % and lexicographic for everything else + dataView.fastSort((sortcol == "percentComplete") ? percentCompleteValueFn : sortcol, args.sortAsc); + } + else { + // using native sort with comparer + // preferred method but can be very slow in IE with huge datasets + dataView.sort(comparer, args.sortAsc); + } + }); + + // wire up model events to drive the grid + dataView.onRowCountChanged.subscribe(function (e, args) { + grid.updateRowCount(); + grid.render(); + }); + + dataView.onRowsChanged.subscribe(function (e, args) { + grid.invalidateRows(args.rows); + grid.render(); + }); + + + var h_runfilters = null; + + // wire up the slider to apply the filter to the model + $("#pcSlider,#pcSlider2").slider({ + "range":"min", + "slide":function (event, ui) { + Slick.GlobalEditorLock.cancelCurrentEdit(); + + if (percentCompleteThreshold != ui.value) { + window.clearTimeout(h_runfilters); + h_runfilters = window.setTimeout(filterAndUpdate, 10); + percentCompleteThreshold = ui.value; + } + } + }); + + + // wire up the search textbox to apply the filter to the model + $("#txtSearch,#txtSearch2").keyup(function (e) { + Slick.GlobalEditorLock.cancelCurrentEdit(); + + // clear on Esc + if (e.which == 27) { + this.value = ""; + } + + searchString = this.value; + dataView.refresh(); + }); + + + function filterAndUpdate() { + var isNarrowing = percentCompleteThreshold > prevPercentCompleteThreshold; + var isExpanding = percentCompleteThreshold < prevPercentCompleteThreshold; + var renderedRange = grid.getRenderedRange(); + + dataView.setFilterArgs({ + percentComplete:percentCompleteThreshold, + searchString:searchString + }); + dataView.setRefreshHints({ + ignoreDiffsBefore:renderedRange.top, + ignoreDiffsAfter:renderedRange.bottom + 1, + isFilterNarrowing:isNarrowing, + isFilterExpanding:isExpanding + }); + dataView.refresh(); + + prevPercentCompleteThreshold = percentCompleteThreshold; + } + + // initialize the model after all the events have been hooked up + dataView.beginUpdate(); + dataView.setItems(data); + dataView.setFilter(myFilter); + dataView.setFilterArgs({ + percentComplete:percentCompleteThreshold, + searchString:searchString + }); + dataView.groupBy( + "duration", + function (g) { + return "Duration: " + g.value + " <span style='color:green'>(" + g.count + " items)</span>"; + }, + function (a, b) { + return a.value - b.value; + } + ); + dataView.setAggregators([ + new Slick.Data.Aggregators.Avg("percentComplete") + ], false); + dataView.collapseGroup(0); + dataView.endUpdate(); + + $("#gridContainer").resizable(); +}) + +</script> + +</body> </html> diff --git a/examples/example-header-row.html b/examples/example-header-row.html index 9f03a4f..ba3532a 100644 --- a/examples/example-header-row.html +++ b/examples/example-header-row.html @@ -1,139 +1,138 @@ <!DOCTYPE HTML> <html> - <head> - <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> - <link rel="stylesheet" href="../css/smoothness/jquery-ui-1.8.16.custom.css" type="text/css" media="screen" charset="utf-8" /> - <link rel="stylesheet" href="../slick.grid.css" type="text/css" media="screen" charset="utf-8" /> - <link rel="stylesheet" href="examples.css" type="text/css" media="screen" charset="utf-8" /> - <style> - .slick-headerrow-column { - background: #87ceeb; - } - - .slick-headerrow-column input { - margin: 0; - padding: 0; - } - </style> - </head> - <body> - <div style="position:relative"> - <div style="width:600px;"> - <div id="myGrid" style="width:100%;height:500px;"></div> - </div> - - <div class="options-panel"> - <h2>Demonstrates:</h2> - <ul> - <li>Using a fixed header row to implement column-level filters</li> - <li>Type numbers in textboxes to filter grid data</li> - </ul> - </div> - </div> - - <script src="../lib/firebugx.js"></script> - - <script src="../lib/jquery-1.7.min.js"></script> - <script src="../lib/jquery-ui-1.8.16.custom.min.js"></script> - <script src="../lib/jquery.event.drag-2.0.min.js"></script> - - <script src="../slick.core.js"></script> - <script src="../slick.dataview.js"></script> - <script src="../slick.grid.js"></script> - - <script> - var dataView; - var grid; - var data = []; - var options = { - enableCellNavigation: true, - showHeaderRow: true - }; - var columns = []; - var columnFilters = {}; - - for (var i = 0; i < 10; i++) { - columns.push({ - id: i, - name: String.fromCharCode("A".charCodeAt(0) + i), - field: i, - width: 60 - }); +<head> + <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> + <link rel="stylesheet" href="../css/smoothness/jquery-ui-1.8.16.custom.css" type="text/css" /> + <link rel="stylesheet" href="../slick.grid.css" type="text/css" /> + <link rel="stylesheet" href="examples.css" type="text/css" /> + <style> + .slick-headerrow-column { + background: #87ceeb; + } + + .slick-headerrow-column input { + margin: 0; + padding: 0; + } + </style> +</head> +<body> +<div style="position:relative"> + <div style="width:600px;"> + <div id="myGrid" style="width:100%;height:500px;"></div> + </div> + + <div class="options-panel"> + <h2>Demonstrates:</h2> + <ul> + <li>Using a fixed header row to implement column-level filters</li> + <li>Type numbers in textboxes to filter grid data</li> + </ul> + </div> +</div> + +<script src="../lib/firebugx.js"></script> + +<script src="../lib/jquery-1.7.min.js"></script> +<script src="../lib/jquery-ui-1.8.16.custom.min.js"></script> +<script src="../lib/jquery.event.drag-2.0.min.js"></script> + +<script src="../slick.core.js"></script> +<script src="../slick.dataview.js"></script> +<script src="../slick.grid.js"></script> + +<script> + var dataView; + var grid; + var data = []; + var options = { + enableCellNavigation:true, + showHeaderRow:true + }; + var columns = []; + var columnFilters = {}; + + for (var i = 0; i < 10; i++) { + columns.push({ + id:i, + name:String.fromCharCode("A".charCodeAt(0) + i), + field:i, + width:60 + }); + } + + + function updateHeaderRow() { + for (var i = 0; i < columns.length; i++) { + if (columns[i].id !== "selector") { + var header = grid.getHeaderRowColumn(columns[i].id); + $(header).empty(); + $("<input type='text'>") + .data("columnId", columns[i].id) + .width($(header).width() - 4) + .val(columnFilters[columns[i].id]) + .appendTo(header); + } + } + } + + function filter(item) { + for (var columnId in columnFilters) { + if (columnId !== undefined && columnFilters[columnId] !== "") { + var c = grid.getColumns()[grid.getColumnIndex(columnId)]; + if (item[c.field] != columnFilters[columnId]) { + return false; } - - - function updateHeaderRow() { - for (var i = 0; i < columns.length; i++) { - if (columns[i].id !== "selector") { - var header = grid.getHeaderRowColumn(columns[i].id); - $(header).empty(); - $("<input type='text'>") - .data("columnId", columns[i].id) - .width($(header).width() - 4) - .val(columnFilters[columns[i].id]) - .appendTo(header); - } - } - } - - function filter(item) { - for (var columnId in columnFilters) { - if (columnId !== undefined && columnFilters[columnId] !== "") { - var c = grid.getColumns()[grid.getColumnIndex(columnId)]; - if (item[c.field] != columnFilters[columnId]) { - return false; - } - } - } - return true; - } - - $(function() - { - for (var i=0; i<100; i++) { - var d = (data[i] = {}); - d["id"] = i; - for (var j=0; j<columns.length; j++) { - d[j] = Math.round(Math.random() * 10); - } - } - - dataView = new Slick.Data.DataView(); - grid = new Slick.Grid("#myGrid", dataView, columns, options); - - - dataView.onRowCountChanged.subscribe(function(e,args) { - grid.updateRowCount(); - grid.render(); - }); - - dataView.onRowsChanged.subscribe(function(e,args) { - grid.invalidateRows(args.rows); - grid.render(); - }); - - $(grid.getHeaderRow()).delegate(":input", "change keyup", function(e) { - columnFilters[$(this).data("columnId")] = $.trim($(this).val()); - dataView.refresh(); - }); - - - grid.onColumnsReordered.subscribe(function(e, args) { - updateHeaderRow(); - }); - - grid.onColumnsResized.subscribe(function(e, args) { - updateHeaderRow(); - }); - - dataView.beginUpdate(); - dataView.setItems(data); - dataView.setFilter(filter); - dataView.endUpdate(); - - updateHeaderRow(); - - }) - </script> - </body> + } + } + return true; + } + + $(function () { + for (var i = 0; i < 100; i++) { + var d = (data[i] = {}); + d["id"] = i; + for (var j = 0; j < columns.length; j++) { + d[j] = Math.round(Math.random() * 10); + } + } + + dataView = new Slick.Data.DataView(); + grid = new Slick.Grid("#myGrid", dataView, columns, options); + + + dataView.onRowCountChanged.subscribe(function (e, args) { + grid.updateRowCount(); + grid.render(); + }); + + dataView.onRowsChanged.subscribe(function (e, args) { + grid.invalidateRows(args.rows); + grid.render(); + }); + + $(grid.getHeaderRow()).delegate(":input", "change keyup", function (e) { + columnFilters[$(this).data("columnId")] = $.trim($(this).val()); + dataView.refresh(); + }); + + + grid.onColumnsReordered.subscribe(function (e, args) { + updateHeaderRow(); + }); + + grid.onColumnsResized.subscribe(function (e, args) { + updateHeaderRow(); + }); + + dataView.beginUpdate(); + dataView.setItems(data); + dataView.setFilter(filter); + dataView.endUpdate(); + + updateHeaderRow(); + + }) +</script> +</body> </html> diff --git a/examples/example-optimizing-dataview.html b/examples/example-optimizing-dataview.html index 864c1d2..740781b 100644 --- a/examples/example-optimizing-dataview.html +++ b/examples/example-optimizing-dataview.html @@ -1,66 +1,67 @@ <!DOCTYPE HTML> <html> <head> - <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> - <title>SlickGrid example: Optimizing DataView</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.16.custom.css" type="text/css" media="screen" - charset="utf-8"/> - <link rel="stylesheet" href="../controls/slick.pager.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; - } + <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> + <title>SlickGrid example: Optimizing DataView</title> + <link rel="stylesheet" href="../slick.grid.css" type="text/css" /> + <link rel="stylesheet" href="../css/smoothness/jquery-ui-1.8.16.custom.css" type="text/css" /> + <link rel="stylesheet" href="../controls/slick.pager.css" type="text/css" /> + <link rel="stylesheet" href="examples.css" type="text/css" /> + <style> + .cell-title { + font-weight: bold; + } - .cell-effort-driven { - text-align: center; - } + .cell-effort-driven { + text-align: center; + } - .cell-selection { - border-right-color: silver; - border-right-style: solid; - background: #f5f5f5; - color: gray; - text-align: right; - font-size: 10px; - } - </style> + .cell-selection { + border-right-color: silver; + border-right-style: solid; + background: #f5f5f5; + color: gray; + text-align: right; + font-size: 10px; + } + </style> </head> <body> <div style="position:relative"> - <div style="width:600px;"> - <div class="grid-header" style="width:100%"> - <label>SlickGrid</label> - </div> - <div id="myGrid" style="width:100%;height:500px;"></div> - <div id="pager" style="width:100%;height:20px;"></div> + <div style="width:600px;"> + <div class="grid-header" style="width:100%"> + <label>SlickGrid</label> </div> - - <div class="options-panel"> - <b>Search:</b> - <hr/> - <div style="padding:6px;"> - <label style="width:200px;float:left">Show tasks with % at least: </label> - <div style="padding:2px;"> - <div style="width:100px;display:inline-block;" id="pcSlider"></div> - </div> - </div> - <br/> - - <p> - This page demonstrates various techniques for optimizing DataView performance - for large client-side datasets. This page displays an interactive grid with - 500'000 rows with real-time filtering.<br/> - This is achieved by: - <ul> - <li>Using a batch filtering function to cut down on the cost of function calls.</li> - <li>Providing hints to indicate whether a filtering operation will result in - narrowing or expanding scope or whether the scope is unchanged.</li> - <li>Providing a range of rows for which onRowsChanged even should be fired.</li> - </ul> - </p> + <div id="myGrid" style="width:100%;height:500px;"></div> + <div id="pager" style="width:100%;height:20px;"></div> + </div> + + <div class="options-panel"> + <b>Search:</b> + <hr/> + <div style="padding:6px;"> + <label style="width:200px;float:left">Show tasks with % at least: </label> + + <div style="padding:2px;"> + <div style="width:100px;display:inline-block;" id="pcSlider"></div> + </div> </div> + <br/> + + <p> + This page demonstrates various techniques for optimizing DataView performance + for large client-side datasets. This page displays an interactive grid with + 500'000 rows with real-time filtering.<br/> + This is achieved by: + <ul> + <li>Using a batch filtering function to cut down on the cost of function calls.</li> + <li>Providing hints to indicate whether a filtering operation will result in + narrowing or expanding scope or whether the scope is unchanged. + </li> + <li>Providing a range of rows for which onRowsChanged even should be fired.</li> + </ul> + </p> + </div> </div> @@ -75,105 +76,105 @@ <script src="../controls/slick.pager.js"></script> <script> - var dataView; - var grid; - var data = []; - - var columns = [ - {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:"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} - ]; - - var options = { - editable:false, - enableAddRow:false, - enableCellNavigation:true - }; - - var percentCompleteThreshold = 0; - var prevPercentCompleteThreshold = 0; - var searchString = ""; - var h_runfilters = null; - - function myFilter(item, args) { - return item["percentComplete"] >= args; + var dataView; + var grid; + var data = []; + + var columns = [ + {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:"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} + ]; + + var options = { + editable:false, + enableAddRow:false, + enableCellNavigation:true + }; + + var percentCompleteThreshold = 0; + var prevPercentCompleteThreshold = 0; + var searchString = ""; + var h_runfilters = null; + + function myFilter(item, args) { + return item["percentComplete"] >= args; + } + + function DataItem(i) { + this.num = i; + this.id = "id_" + i; + this.percentComplete = Math.round(Math.random() * 100); + this.effortDriven = (i % 5 == 0); + this.start = "01/01/2009"; + this.finish = "01/05/2009"; + this.title = "Task " + i; + this.duration = "5 days"; + } + + + $(function () { + // prepare the data + for (var i = 0; i < 500000; i++) { + data[i] = new DataItem(i); } - function DataItem(i) { - this.num = i; - this.id = "id_" + i; - this.percentComplete = Math.round(Math.random() * 100); - this.effortDriven = (i % 5 == 0); - this.start = "01/01/2009"; - this.finish = "01/05/2009"; - this.title = "Task " + i; - this.duration = "5 days"; - } - - - $(function() { - // prepare the data - for (var i = 0; i < 500000; i++) { - data[i] = new DataItem(i); - } - - dataView = new Slick.Data.DataView(); - grid = new Slick.Grid("#myGrid", dataView, columns, options); - var pager = new Slick.Controls.Pager(dataView, grid, $("#pager")); - - // wire up model events to drive the grid - dataView.onRowCountChanged.subscribe(function(e, args) { - grid.updateRowCount(); - grid.render(); - }); - - dataView.onRowsChanged.subscribe(function(e, args) { - grid.invalidateRows(args.rows); - grid.render(); - }); - - - // wire up the slider to apply the filter to the model - $("#pcSlider").slider({ - "range":"min", - "slide":function(event, ui) { - if (percentCompleteThreshold != ui.value) { - window.clearTimeout(h_runfilters); - h_runfilters = window.setTimeout(filterAndUpdate, 10); - percentCompleteThreshold = ui.value; - } - } - }); - - function filterAndUpdate() { - var isNarrowing = percentCompleteThreshold > prevPercentCompleteThreshold; - var isExpanding = percentCompleteThreshold < prevPercentCompleteThreshold; - var renderedRange = grid.getRenderedRange(); - - dataView.setFilterArgs(percentCompleteThreshold); - dataView.setRefreshHints({ - ignoreDiffsBefore:renderedRange.top, - ignoreDiffsAfter:renderedRange.bottom + 1, - isFilterNarrowing:isNarrowing, - isFilterExpanding:isExpanding - }); - dataView.refresh(); - - prevPercentCompleteThreshold = percentCompleteThreshold; + dataView = new Slick.Data.DataView(); + grid = new Slick.Grid("#myGrid", dataView, columns, options); + var pager = new Slick.Controls.Pager(dataView, grid, $("#pager")); + + // wire up model events to drive the grid + dataView.onRowCountChanged.subscribe(function (e, args) { + grid.updateRowCount(); + grid.render(); + }); + + dataView.onRowsChanged.subscribe(function (e, args) { + grid.invalidateRows(args.rows); + grid.render(); + }); + + + // wire up the slider to apply the filter to the model + $("#pcSlider").slider({ + "range": "min", + "slide": function (event, ui) { + if (percentCompleteThreshold != ui.value) { + window.clearTimeout(h_runfilters); + h_runfilters = window.setTimeout(filterAndUpdate, 10); + percentCompleteThreshold = ui.value; } + } + }); + + function filterAndUpdate() { + var isNarrowing = percentCompleteThreshold > prevPercentCompleteThreshold; + var isExpanding = percentCompleteThreshold < prevPercentCompleteThreshold; + var renderedRange = grid.getRenderedRange(); + + dataView.setFilterArgs(percentCompleteThreshold); + dataView.setRefreshHints({ + ignoreDiffsBefore:renderedRange.top, + ignoreDiffsAfter:renderedRange.bottom + 1, + isFilterNarrowing:isNarrowing, + isFilterExpanding:isExpanding + }); + dataView.refresh(); + + prevPercentCompleteThreshold = percentCompleteThreshold; + } - // initialize the model after all the events have been hooked up - dataView.beginUpdate(); - dataView.setItems(data); - dataView.setFilter(myFilter); - dataView.setFilterArgs(0); - dataView.endUpdate(); - }) + // initialize the model after all the events have been hooked up + dataView.beginUpdate(); + dataView.setItems(data); + dataView.setFilter(myFilter); + dataView.setFilterArgs(0); + dataView.endUpdate(); + }) </script> </body> </html> diff --git a/examples/example-spreadsheet.html b/examples/example-spreadsheet.html index 01f51a0..d1054b2 100644 --- a/examples/example-spreadsheet.html +++ b/examples/example-spreadsheet.html @@ -1,169 +1,169 @@ <!DOCTYPE HTML> <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/smoothness/jquery-ui-1.8.16.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> - .slick-cell.copied { - background: blue; - background: rgba(0,0,255,0.2); - -webkit-transition: 0.5s background; - } - </style> - </head> - <body> - <div style="position:relative"> - <div style="width:600px;"> - <div id="myGrid" style="width:100%;height:500px;"></div> - </div> - - <div class="options-panel"> - <h2>Demonstrates:</h2> - <ul> - <li>Select a range of cells with a mouse</li> - <li>Use Ctrl-C and Ctrl-V keyboard shortcuts to cut and paste cells</li> - <li>Use Esc to cancel a copy and paste operation</li> - <li>Edit the cell and select a cell range to paste the range</li> - </ul> - </div> - </div> - - <script src="../lib/firebugx.js"></script> - - <script src="../lib/jquery-1.7.min.js"></script> - <script src="../lib/jquery-ui-1.8.16.custom.min.js"></script> - <script src="../lib/jquery.event.drag-2.0.min.js"></script> - - <script src="../slick.core.js"></script> - <script src="../plugins/slick.autotooltips.js"></script> - <script src="../plugins/slick.cellrangedecorator.js"></script> - <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> - var grid; - var data = []; - var options = { - editable: true, - enableAddRow: true, - enableCellNavigation: true, - asyncEditorLoading: false, - autoEdit: false - }; - - var columns = [{ - id: "selector", - name: "", - field: "num", - width: 30 - }]; - - for (var i = 0; i < 26; i++) { - columns.push({ - id: i, - name: String.fromCharCode("A".charCodeAt(0) + i), - field: i, - width: 60, - editor: FormulaEditor - }); +<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" /> + <link rel="stylesheet" href="../css/smoothness/jquery-ui-1.8.16.custom.css" type="text/css" /> + <link rel="stylesheet" href="examples.css" type="text/css" /> + <style> + .slick-cell.copied { + background: blue; + background: rgba(0, 0, 255, 0.2); + -webkit-transition: 0.5s background; + } + </style> +</head> +<body> +<div style="position:relative"> + <div style="width:600px;"> + <div id="myGrid" style="width:100%;height:500px;"></div> + </div> + + <div class="options-panel"> + <h2>Demonstrates:</h2> + <ul> + <li>Select a range of cells with a mouse</li> + <li>Use Ctrl-C and Ctrl-V keyboard shortcuts to cut and paste cells</li> + <li>Use Esc to cancel a copy and paste operation</li> + <li>Edit the cell and select a cell range to paste the range</li> + </ul> + </div> +</div> + +<script src="../lib/firebugx.js"></script> + +<script src="../lib/jquery-1.7.min.js"></script> +<script src="../lib/jquery-ui-1.8.16.custom.min.js"></script> +<script src="../lib/jquery.event.drag-2.0.min.js"></script> + +<script src="../slick.core.js"></script> +<script src="../plugins/slick.autotooltips.js"></script> +<script src="../plugins/slick.cellrangedecorator.js"></script> +<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> + var grid; + var data = []; + var options = { + editable:true, + enableAddRow:true, + enableCellNavigation:true, + asyncEditorLoading:false, + autoEdit:false + }; + + var columns = [ + { + id:"selector", + name:"", + field:"num", + width:30 + } + ]; + + for (var i = 0; i < 26; i++) { + columns.push({ + id:i, + name:String.fromCharCode("A".charCodeAt(0) + i), + field:i, + width:60, + editor:FormulaEditor + }); + } + + /*** + * A proof-of-concept cell editor with Excel-like range selection and insertion. + */ + function FormulaEditor(args) { + var _self = this; + var _editor = new TextCellEditor(args); + var _selector; + + $.extend(this, _editor); + + function init() { + // register a plugin to select a range and append it to the textbox + // since events are fired in reverse order (most recently added are executed first), + // this will override other plugins like moverows or selection model and will + // not require the grid to not be in the edit mode + _selector = new Slick.CellRangeSelector(); + _selector.onCellRangeSelected.subscribe(_self.handleCellRangeSelected); + args.grid.registerPlugin(_selector); + } + + this.destroy = function () { + _selector.onCellRangeSelected.unsubscribe(_self.handleCellRangeSelected); + grid.unregisterPlugin(_selector); + _editor.destroy(); + }; + + this.handleCellRangeSelected = function (e, args) { + _editor.setValue( + _editor.getValue() + + grid.getColumns()[args.range.fromCell].name + + args.range.fromRow + + ":" + + grid.getColumns()[args.range.toCell].name + + args.range.toRow + ); + }; + + + init(); + } + + + $(function () { + for (var i = 0; i < 100; i++) { + var d = (data[i] = {}); + d["num"] = i; + } + + grid = new Slick.Grid("#myGrid", data, columns, options); + + grid.setSelectionModel(new Slick.CellSelectionModel()); + grid.registerPlugin(new Slick.AutoTooltips()); + + // set keyboard focus on the grid + grid.getCanvasNode().focus(); + + var copyManager = new Slick.CellCopyManager(); + grid.registerPlugin(copyManager); + + copyManager.onPasteCells.subscribe(function (e, args) { + if (args.from.length !== 1 || args.to.length !== 1) { + throw "This implementation only supports single range copy and paste operations"; + } + + var from = args.from[0]; + var to = args.to[0]; + var val; + for (var i = 0; i <= from.toRow - from.fromRow; i++) { + for (var j = 0; j <= from.toCell - from.fromCell; j++) { + if (i <= to.toRow - to.fromRow && j <= to.toCell - to.fromCell) { + val = data[from.fromRow + i][columns[from.fromCell + j].field]; + data[to.fromRow + i][columns[to.fromCell + j].field] = val; + grid.invalidateRow(to.fromRow + i); + } } - - /*** - * A proof-of-concept cell editor with Excel-like range selection and insertion. - */ - function FormulaEditor(args) { - var _self = this; - var _editor = new TextCellEditor(args); - var _selector; - - $.extend(this, _editor); - - function init() { - // register a plugin to select a range and append it to the textbox - // since events are fired in reverse order (most recently added are executed first), - // this will override other plugins like moverows or selection model and will - // not require the grid to not be in the edit mode - _selector = new Slick.CellRangeSelector(); - _selector.onCellRangeSelected.subscribe(_self.handleCellRangeSelected); - args.grid.registerPlugin(_selector); - } - - this.destroy = function() { - _selector.onCellRangeSelected.unsubscribe(_self.handleCellRangeSelected); - grid.unregisterPlugin(_selector); - _editor.destroy(); - }; - - this.handleCellRangeSelected = function(e, args) { - _editor.setValue( - _editor.getValue() + - grid.getColumns()[args.range.fromCell].name + - args.range.fromRow + - ":" + - grid.getColumns()[args.range.toCell].name + - args.range.toRow - ); - }; - - - init(); - } - - - - $(function() - { - for (var i=0; i<100; i++) { - var d = (data[i] = {}); - d["num"] = i; - } - - grid = new Slick.Grid("#myGrid", data, columns, options); - - grid.setSelectionModel(new Slick.CellSelectionModel()); - grid.registerPlugin(new Slick.AutoTooltips()); - - // set keyboard focus on the grid - grid.getCanvasNode().focus(); - - var copyManager = new Slick.CellCopyManager(); - grid.registerPlugin(copyManager); - - copyManager.onPasteCells.subscribe(function(e,args) { - if (args.from.length !== 1 || args.to.length !== 1) { - throw "This implementation only supports single range copy and paste operations"; - } - - var from = args.from[0]; - var to = args.to[0]; - var val; - for (var i = 0; i <= from.toRow - from.fromRow; i++) { - for (var j = 0; j <= from.toCell - from.fromCell; j++) { - if (i <= to.toRow - to.fromRow && j <= to.toCell - to.fromCell) { - val = data[from.fromRow + i][columns[from.fromCell + j].field]; - data[to.fromRow + i][columns[to.fromCell + j].field] = val; - grid.invalidateRow(to.fromRow + i); - } - } - } - grid.render(); - }); - - 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(); - }); - }) - </script> - </body> + } + grid.render(); + }); + + 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(); + }); + }) +</script> +</body> </html> diff --git a/examples/example1-simple.html b/examples/example1-simple.html index 768f4f0..dfa7697 100644 --- a/examples/example1-simple.html +++ b/examples/example1-simple.html @@ -1,69 +1,68 @@ <!DOCTYPE HTML> <html> - <head> - <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> - <title>SlickGrid example 1: Basic grid</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.16.custom.css" type="text/css" media="screen" charset="utf-8" /> - <link rel="stylesheet" href="examples.css" type="text/css" media="screen" charset="utf-8" /> - </head> - <body> - <table width="100%"> - <tr> - <td valign="top" width="50%"> - <div id="myGrid" style="width:600px;height:500px;display:none;"></div> - </td> - <td valign="top"> - <h2>Demonstrates:</h2> - <ul> - <li>basic grid with minimal configuration</li> - </ul> - </td> - </tr> - </table> +<head> + <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> + <title>SlickGrid example 1: Basic grid</title> + <link rel="stylesheet" href="../slick.grid.css" type="text/css" /> + <link rel="stylesheet" href="../css/smoothness/jquery-ui-1.8.16.custom.css" type="text/css" /> + <link rel="stylesheet" href="examples.css" type="text/css" /> +</head> +<body> +<table width="100%"> + <tr> + <td valign="top" width="50%"> + <div id="myGrid" style="width:600px;height:500px;display:none;"></div> + </td> + <td valign="top"> + <h2>Demonstrates:</h2> + <ul> + <li>basic grid with minimal configuration</li> + </ul> + </td> + </tr> +</table> - <script src="../lib/jquery-1.7.min.js"></script> - <script src="../lib/jquery.event.drag-2.0.min.js"></script> +<script src="../lib/jquery-1.7.min.js"></script> +<script src="../lib/jquery.event.drag-2.0.min.js"></script> - <script src="../slick.core.js"></script> - <script src="../slick.grid.js"></script> +<script src="../slick.core.js"></script> +<script src="../slick.grid.js"></script> - <script> +<script> - var grid; + var grid; - var columns = [ - {id:"title", name:"Title", field:"title"}, - {id:"duration", name:"Duration", field:"duration"}, - {id:"%", name:"% Complete", field:"percentComplete"}, - {id:"start", name:"Start", field:"start"}, - {id:"finish", name:"Finish", field:"finish"}, - {id:"effort-driven", name:"Effort Driven", field:"effortDriven"} - ]; + var columns = [ + {id:"title", name:"Title", field:"title"}, + {id:"duration", name:"Duration", field:"duration"}, + {id:"%", name:"% Complete", field:"percentComplete"}, + {id:"start", name:"Start", field:"start"}, + {id:"finish", name:"Finish", field:"finish"}, + {id:"effort-driven", name:"Effort Driven", field:"effortDriven"} + ]; - var options = { - enableCellNavigation: true, - enableColumnReorder: false - }; + var options = { + enableCellNavigation:true, + enableColumnReorder:false + }; - $(function() { - var data = []; - for (var i = 0; i < 500; i++) { - data[i] = { - title: "Task " + i, - duration: "5 days", - percentComplete: Math.round(Math.random() * 100), - start: "01/01/2009", - finish: "01/05/2009", - effortDriven: (i % 5 == 0) - }; - } + $(function () { + var data = []; + for (var i = 0; i < 500; i++) { + data[i] = { + title: "Task " + i, + duration: "5 days", + percentComplete: Math.round(Math.random() * 100), + start: "01/01/2009", + finish: "01/05/2009", + effortDriven: (i % 5 == 0) + }; + } - grid = new Slick.Grid("#myGrid", data, columns, options); + grid = new Slick.Grid("#myGrid", data, columns, options); - $("#myGrid").show(); - }) - - </script> - </body> + $("#myGrid").show(); + }) +</script> +</body> </html> diff --git a/examples/example10-async-post-render.html b/examples/example10-async-post-render.html index 74b4a05..0b275e0 100644 --- a/examples/example10-async-post-render.html +++ b/examples/example10-async-post-render.html @@ -1,126 +1,134 @@ <!DOCTYPE HTML> <html> - <head> - <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> - <title>SlickGrid example 10: Async post render</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.16.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; - } - - .description * { - font-size: 11pt; - } - </style> - </head> - <body> - <div style="width:600px;float:left;"> - <div class="grid-header" style="width:100%"> - <label>Scores:</label> - </div> - <div id="myGrid" style="width:100%;height:500px;"></div> - </div> - - <div style="margin-left:650px;margin-top:40px;" class="description"> - <h2>Demonstrates:</h2> - <p> - With SlickGrid, you can still have rich, complex cells rendered against the actual DOM nodes while still preserving the speed and responsiveness. - This is achieved through async background post-rendering. - SlickGrid exposes a <u>asyncPostRender</u> property on a column which you can use to set your own function that will manipulate the cell DOM node directly. - The event is fired one by one for all visible rows in the viewport on a timer so it doesn't impact the UI responsiveness. - You should still make sure that post-processing one row doesn't take too long though. - SlickGrid will figure out what and when needs to be updated for you. - </p> - <p> - The example below is a list of 500 rows with a title and 5 integer cells followed by graphical representation of these integers. - The graph is drawn using a CANVAS element in the background. - The grid is editable, so you can edit the numbers and see the changes reflected (almost) immediately in the graph. - The graph cell behaves just like an ordinary cell and can be resized/reordered. - The graphs themselves are created using the excellent <a href="http://www.omnipotent.net/jquery.sparkline/" target="_blank">jQuery Sparklines</a> library. - </p> - </div> - - <script src="../lib/firebugx.js"></script> - - <script src="../lib/jquery-1.7.min.js"></script> - <script src="../lib/jquery-ui-1.8.16.custom.min.js"></script> - <script src="../lib/jquery.event.drag-2.0.min.js"></script> - <script src="../lib/jquery.sparkline.min.js"></script> - - <script src="../slick.core.js"></script> - <script src="../slick.editors.js"></script> - <script 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}; - } - - function waitingFormatter(value) { - return "wait..."; - } - - function renderSparkline(cellNode, row, dataContext, colDef) { - var vals = [ - dataContext["n1"], - dataContext["n2"], - dataContext["n3"], - dataContext["n4"], - dataContext["n5"] - ]; - - $(cellNode).empty().sparkline(vals, {width:"100%"}); - } - - var grid; - - 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:"chart", name:"Chart", sortable:false, width:60, formatter:waitingFormatter, rerenderOnResize:true, asyncPostRender:renderSparkline} - ]; - - var options = { - editable: true, - enableAddRow: false, - enableCellNavigation: true, - asyncEditorLoading: false, - enableAsyncPostRender: true - }; - - - $(function() - { - for (var i=0; i<500; i++) { - var d = (data[i] = {}); - - d["title"] = "Record " + i; - d["n1"] = Math.round(Math.random() * 10); - d["n2"] = Math.round(Math.random() * 10); - d["n3"] = Math.round(Math.random() * 10); - d["n4"] = Math.round(Math.random() * 10); - d["n5"] = Math.round(Math.random() * 10); - } - - - grid = new Slick.Grid("#myGrid", data, columns, options); - }) - </script> - </body> +<head> + <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> + <title>SlickGrid example 10: Async post render</title> + <link rel="stylesheet" href="../slick.grid.css" type="text/css" /> + <link rel="stylesheet" href="../css/smoothness/jquery-ui-1.8.16.custom.css" type="text/css" /> + <link rel="stylesheet" href="examples.css" type="text/css" /> + <style> + .cell-title { + font-weight: bold; + } + + .cell-effort-driven { + text-align: center; + } + + .description * { + font-size: 11pt; + } + </style> +</head> +<body> +<div style="width:600px;float:left;"> + <div class="grid-header" style="width:100%"> + <label>Scores:</label> + </div> + <div id="myGrid" style="width:100%;height:500px;"></div> +</div> + +<div style="margin-left:650px;margin-top:40px;" class="description"> + <h2>Demonstrates:</h2> + + <p> + With SlickGrid, you can still have rich, complex cells rendered against the actual DOM nodes while still preserving + the speed and responsiveness. + This is achieved through async background post-rendering. + SlickGrid exposes a <u>asyncPostRender</u> property on a column which you can use to set your own function that will + manipulate the cell DOM node directly. + The event is fired one by one for all visible rows in the viewport on a timer so it doesn't impact the UI + responsiveness. + You should still make sure that post-processing one row doesn't take too long though. + SlickGrid will figure out what and when needs to be updated for you. + </p> + + <p> + The example below is a list of 500 rows with a title and 5 integer cells followed by graphical representation of + these integers. + The graph is drawn using a CANVAS element in the background. + The grid is editable, so you can edit the numbers and see the changes reflected (almost) immediately in the graph. + The graph cell behaves just like an ordinary cell and can be resized/reordered. + The graphs themselves are created using the excellent <a href="http://www.omnipotent.net/jquery.sparkline/" + target="_blank">jQuery Sparklines</a> library. + </p> +</div> + +<script src="../lib/firebugx.js"></script> + +<script src="../lib/jquery-1.7.min.js"></script> +<script src="../lib/jquery-ui-1.8.16.custom.min.js"></script> +<script src="../lib/jquery.event.drag-2.0.min.js"></script> +<script src="../lib/jquery.sparkline.min.js"></script> + +<script src="../slick.core.js"></script> +<script src="../slick.editors.js"></script> +<script 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}; + } + } + + function waitingFormatter(value) { + return "wait..."; + } + + function renderSparkline(cellNode, row, dataContext, colDef) { + var vals = [ + dataContext["n1"], + dataContext["n2"], + dataContext["n3"], + dataContext["n4"], + dataContext["n5"] + ]; + + $(cellNode).empty().sparkline(vals, {width:"100%"}); + } + + var grid; + + 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:"chart", name:"Chart", sortable:false, width:60, formatter:waitingFormatter, rerenderOnResize:true, asyncPostRender:renderSparkline} + ]; + + var options = { + editable:true, + enableAddRow:false, + enableCellNavigation:true, + asyncEditorLoading:false, + enableAsyncPostRender:true + }; + + + $(function () { + for (var i = 0; i < 500; i++) { + var d = (data[i] = {}); + + d["title"] = "Record " + i; + d["n1"] = Math.round(Math.random() * 10); + d["n2"] = Math.round(Math.random() * 10); + d["n3"] = Math.round(Math.random() * 10); + d["n4"] = Math.round(Math.random() * 10); + d["n5"] = Math.round(Math.random() * 10); + } + + + grid = new Slick.Grid("#myGrid", data, columns, options); + }) +</script> +</body> </html> diff --git a/examples/example11-autoheight.html b/examples/example11-autoheight.html index 885d60e..072bd60 100644 --- a/examples/example11-autoheight.html +++ b/examples/example11-autoheight.html @@ -1,65 +1,84 @@ <!DOCTYPE html> <html lang="en"> - <head> - <meta http-equiv="X-UA-Compatible" content="IE=edge" /> - <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> - <title>SlickGrid example 11: No vertical scrolling (autoHeight)</title> - <link rel="stylesheet" href="../slick.grid.css" type="text/css" media="screen" charset="utf-8" /> - <link rel="stylesheet" href="examples.css" type="text/css" media="screen" charset="utf-8" /> - <style> - html,body { margin:0; padding:0; overflow:auto; } - body { font:11px Helvetica,Arial,sans-serif; } - #container { margin:10px; border:solid 1px gray; width:480px; background:white;} - #description { position:fixed; top:30px; right:30px; width:25em; } - </style> - </head> - <body> - <div id="container"></div> - <div id="description"> - <h2>Demonstrates:</h2> - <ul> - <li>autoHeight:true grid option</li> - </ul> - </div> +<head> + <meta http-equiv="X-UA-Compatible" content="IE=edge"/> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> + <title>SlickGrid example 11: No vertical scrolling (autoHeight)</title> + <link rel="stylesheet" href="../slick.grid.css" type="text/css" /> + <link rel="stylesheet" href="examples.css" type="text/css" /> + <style> + html, body { + margin: 0; + padding: 0; + overflow: auto; + } - <script src="../lib/jquery-1.7.min.js"></script> - <script src="../lib/jquery-ui-1.8.16.custom.min.js"></script> - <script src="../lib/jquery.event.drag-2.0.min.js"></script> + body { + font: 11px Helvetica, Arial, sans-serif; + } - <script src="../slick.core.js"></script> - <script src="../slick.grid.js"></script> + #container { + margin: 10px; + border: solid 1px gray; + width: 480px; + background: white; + } - <script> - var grid, - data = [], - columns = [ - { id:"title", name:"Title", field:"title" }, - { id:"duration", name:"Duration", field:"duration" }, - { id:"%", name:"% Complete", field:"percentComplete" }, - { id:"start", name:"Start", field:"start" }, - { id:"finish", name:"Finish", field:"finish" }, - { id:"effort-driven", name:"Effort Driven", field:"effortDriven" } - ], - options = { - editable: false, - enableAddRow: false, - enableCellNavigation: false, - autoHeight: true - }; + #description { + position: fixed; + top: 30px; + right: 30px; + width: 25em; + } + </style> +</head> +<body> +<div id="container"></div> +<div id="description"> + <h2>Demonstrates:</h2> + <ul> + <li>autoHeight:true grid option</li> + </ul> +</div> - for (var i = 100; i-- > 0;) { - data[i] = { - title: "Task " + i, - duration: "5 days", - percentComplete: Math.round(Math.random() * 100), - start: "01/01/2009", - finish: "01/05/2009", - effortDriven: (i % 5 == 0) - }; - } +<script src="../lib/jquery-1.7.min.js"></script> +<script src="../lib/jquery-ui-1.8.16.custom.min.js"></script> +<script src="../lib/jquery.event.drag-2.0.min.js"></script> - grid = new Slick.Grid("#container", data, columns, options); - </script> +<script src="../slick.core.js"></script> +<script src="../slick.grid.js"></script> - </body> +<script> + var grid, + data = [], + columns = [ + { id:"title", name:"Title", field:"title" }, + { id:"duration", name:"Duration", field:"duration" }, + { id:"%", name:"% Complete", field:"percentComplete" }, + { id:"start", name:"Start", field:"start" }, + { id:"finish", name:"Finish", field:"finish" }, + { id:"effort-driven", name:"Effort Driven", field:"effortDriven" } + ], + options = { + editable:false, + enableAddRow:false, + enableCellNavigation:false, + autoHeight:true + }; + + for (var i = 100; i-- > 0;) { + data[i] = { + title:"Task " + i, + duration:"5 days", + percentComplete:Math.round(Math.random() * 100), + start:"01/01/2009", + finish:"01/05/2009", + effortDriven:(i % 5 == 0) + }; + } + + grid = new Slick.Grid("#container", data, columns, options); +</script> + +</body> </html>
\ No newline at end of file diff --git a/examples/example12-fillbrowser.html b/examples/example12-fillbrowser.html index 5c728eb..464cda6 100644 --- a/examples/example12-fillbrowser.html +++ b/examples/example12-fillbrowser.html @@ -1,86 +1,113 @@ <!DOCTYPE html> <html lang="en"> - <head> - <meta http-equiv="X-UA-Compatible" content="IE=edge" /> - <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> - <title>SlickGrid example 12: Fill browser</title> - <link rel="stylesheet" href="../slick.grid.css" type="text/css" media="screen" charset="utf-8" /> - <link rel="stylesheet" href="examples.css" type="text/css" media="screen" charset="utf-8" /> - <style> - html,body { margin:0; padding:0; background-color:White; overflow:auto; } - body { font:11px Helvetica,Arial,sans-serif; } - #container { position:absolute; top:0; left:0; right:0; bottom:0; } - #description { position:fixed; top:30px; right:30px; width:25em; background:beige; border:solid 1px gray; z-index:1000; } - #description h2 { padding-left:0.5em; } - </style> - </head> - <body> - <div id="container"></div> - <div id="description"> - <h2>Demonstrates:</h2> - <ul> - <li>Grid filling browser window completely (using absolute positioning)</li> - <li>Grid resizing when browser window changes size</li> - <li>Overall performance of the grid when displaying large tabular data (17 columns x 10,000 rows)</li> - </ul> - </div> +<head> + <meta http-equiv="X-UA-Compatible" content="IE=edge"/> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> + <title>SlickGrid example 12: Fill browser</title> + <link rel="stylesheet" href="../slick.grid.css" type="text/css" /> + <link rel="stylesheet" href="examples.css" type="text/css" /> + <style> + html, body { + margin: 0; + padding: 0; + background-color: White; + overflow: auto; + } - <script src="../lib/jquery-1.7.min.js"></script> - <script src="../lib/jquery.event.drag-2.0.min.js"></script> + body { + font: 11px Helvetica, Arial, sans-serif; + } - <script src="../slick.core.js"></script> - <script src="../slick.grid.js"></script> - <script> - var grid, - data = [], - columns = [ - { id:"title", name:"Title", field:"title", width:120 }, - { id:"duration", name:"Duration", field:"duration", width:120 }, - { id:"%", name:"% Complete", field:"percentComplete", width:120 }, - { id:"start", name:"Start", field:"start", width:120 }, - { id:"finish", name:"Finish", field:"finish", width:120 }, - { id:"effort-driven", name:"Effort Driven", field:"effortDriven", width:120 }, - { id:"c7", name:"C7", field:"c7", width:120 }, - { id:"c8", name:"C8", field:"c8", width:120 }, - { id:"c9", name:"C9", field:"c9", width:120 }, - { id:"c10", name:"C10", field:"c10", width:120 }, - { id:"c11", name:"C11", field:"c11", width:120 }, - { id:"c12", name:"C12", field:"c12", width:120 }, - { id:"c13", name:"C13", field:"c13", width:120 }, - { id:"c14", name:"C14", field:"c14", width:120 }, - { id:"c15", name:"C15", field:"c15", width:120 }, - { id:"c16", name:"C16", field:"c16", width:120 }, - { id:"c17", name:"C17", field:"c17", width:120 } - ], - options = { - enableCellNavigation: false, - enableColumnReorder: false - }; + #container { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + } - for (var i = 10000; i-- > 0;) { - data[i] = { - title: "Task " + i, - duration: "5 days", - percentComplete: Math.round(Math.random() * 100), - start: "01/01/2009", - finish: "01/05/2009", - effortDriven: (i % 5 == 0), - c7: "C7-" + i, - c8: "C8-" + i, - c9: "C9-" + i, - c10: "C10-" + i, - c11: "C11-" + i, - c12: "C12-" + i, - c13: "C13-" + i, - c14: "C14-" + i, - c15: "C15-" + i, - c16: "C16-" + i, - c17: "C17-" + i - }; - } + #description { + position: fixed; + top: 30px; + right: 30px; + width: 25em; + background: beige; + border: solid 1px gray; + z-index: 1000; + } - grid = new Slick.Grid("#container", data, columns, options); - </script> + #description h2 { + padding-left: 0.5em; + } + </style> +</head> +<body> +<div id="container"></div> +<div id="description"> + <h2>Demonstrates:</h2> + <ul> + <li>Grid filling browser window completely (using absolute positioning)</li> + <li>Grid resizing when browser window changes size</li> + <li>Overall performance of the grid when displaying large tabular data (17 columns x 10,000 rows)</li> + </ul> +</div> - </body> +<script src="../lib/jquery-1.7.min.js"></script> +<script src="../lib/jquery.event.drag-2.0.min.js"></script> + +<script src="../slick.core.js"></script> +<script src="../slick.grid.js"></script> +<script> + var grid, + data = [], + columns = [ + { id:"title", name:"Title", field:"title", width:120 }, + { id:"duration", name:"Duration", field:"duration", width:120 }, + { id:"%", name:"% Complete", field:"percentComplete", width:120 }, + { id:"start", name:"Start", field:"start", width:120 }, + { id:"finish", name:"Finish", field:"finish", width:120 }, + { id:"effort-driven", name:"Effort Driven", field:"effortDriven", width:120 }, + { id:"c7", name:"C7", field:"c7", width:120 }, + { id:"c8", name:"C8", field:"c8", width:120 }, + { id:"c9", name:"C9", field:"c9", width:120 }, + { id:"c10", name:"C10", field:"c10", width:120 }, + { id:"c11", name:"C11", field:"c11", width:120 }, + { id:"c12", name:"C12", field:"c12", width:120 }, + { id:"c13", name:"C13", field:"c13", width:120 }, + { id:"c14", name:"C14", field:"c14", width:120 }, + { id:"c15", name:"C15", field:"c15", width:120 }, + { id:"c16", name:"C16", field:"c16", width:120 }, + { id:"c17", name:"C17", field:"c17", width:120 } + ], + options = { + enableCellNavigation:false, + enableColumnReorder:false + }; + + for (var i = 10000; i-- > 0;) { + data[i] = { + title:"Task " + i, + duration:"5 days", + percentComplete:Math.round(Math.random() * 100), + start:"01/01/2009", + finish:"01/05/2009", + effortDriven:(i % 5 == 0), + c7:"C7-" + i, + c8:"C8-" + i, + c9:"C9-" + i, + c10:"C10-" + i, + c11:"C11-" + i, + c12:"C12-" + i, + c13:"C13-" + i, + c14:"C14-" + i, + c15:"C15-" + i, + c16:"C16-" + i, + c17:"C17-" + i + }; + } + + grid = new Slick.Grid("#container", data, columns, options); +</script> + +</body> </html>
\ No newline at end of file diff --git a/examples/example13-getItem-sorting.html b/examples/example13-getItem-sorting.html index 1fb2656..bf693f8 100644 --- a/examples/example13-getItem-sorting.html +++ b/examples/example13-getItem-sorting.html @@ -1,97 +1,124 @@ <!DOCTYPE html> <html lang="en"> - <head> - <meta http-equiv="X-UA-Compatible" content="IE=edge" /> - <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> - <title>SlickGrid example 13: Indexed Sorting using Functional Data Provider</title> - <link rel="stylesheet" href="../slick.grid.css" type="text/css" media="screen" charset="utf-8" /> - <link rel="stylesheet" href="examples.css" type="text/css" media="screen" charset="utf-8" /> - <style> - html,body { margin:0; padding:0; background-color:White; overflow:auto; } - body { font:11px Helvetica,Arial,sans-serif; } - #container { position:absolute; top:0; left:0; right:0; bottom:0; } - #description { position:fixed; top:30px; right:30px; width:25em; background-color:beige; border:solid 1px gray; z-index:1000; } - #description h2 { padding-left:0.5em; } - </style> - </head> - <body> - <div id="container"></div> - <div id="description"> - <h2>Demonstrates:</h2> - <ul> - <li>Sorting grid items by an index</li> - <li>Using the getItem method to provide data</li> - </ul> - </div> +<head> + <meta http-equiv="X-UA-Compatible" content="IE=edge"/> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> + <title>SlickGrid example 13: Indexed Sorting using Functional Data Provider</title> + <link rel="stylesheet" href="../slick.grid.css" type="text/css" /> + <link rel="stylesheet" href="examples.css" type="text/css" /> + <style> + html, body { + margin: 0; + padding: 0; + background-color: White; + overflow: auto; + } - <script src="../lib/jquery-1.7.min.js"></script> - <script src="../lib/jquery.event.drag-2.0.min.js"></script> - <script src="../slick.core.js"></script> - <script src="../slick.grid.js"></script> + body { + font: 11px Helvetica, Arial, sans-serif; + } - <script> - var grid, - data = [], - columns = [ - { id: "title", name: "Title", field: "title", width: 240, sortable: true }, - { id: "c1", name: "Sort 1", field: "c1", width: 240, sortable: true }, - { id: "c2", name: "Sort 2", field: "c2", width: 240, sortable: true }, - { id: "c3", name: "Sort 3", field: "c3", width: 240, sortable: true } - ], - options = { - enableCellNavigation: false, - enableColumnReorder: false - }, numberOfItems = 25000, items = [], indices, isAsc = true, currentSortCol = { id: "title" }, i; + #container { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + } + #description { + position: fixed; + top: 30px; + right: 30px; + width: 25em; + background-color: beige; + border: solid 1px gray; + z-index: 1000; + } - function randomize(items) { - /// <summary> - /// Copies and shuffles the specified array and returns a new shuffled array. - /// </summary> - var randomItems = $.extend(true, null, items), randomIndex, temp, index; - for (index = items.length; index-- > 0;) { - randomIndex = Math.round(Math.random() * items.length - 1); - if (randomIndex > -1) { - temp = randomItems[randomIndex]; - randomItems[randomIndex] = randomItems[index]; - randomItems[index] = temp; - } - } - return randomItems; - } + #description h2 { + padding-left: 0.5em; + } + </style> +</head> +<body> +<div id="container"></div> +<div id="description"> + <h2>Demonstrates:</h2> + <ul> + <li>Sorting grid items by an index</li> + <li>Using the getItem method to provide data</li> + </ul> +</div> - /// Build the items and indices. - for (i = numberOfItems; i-- > 0;) { - items[i] = i; - data[i] = { - title: "Task ".concat(i + 1) - }; - } - indices = { title: items, c1: randomize(items), c2: randomize(items), c3: randomize(items) }; +<script src="../lib/jquery-1.7.min.js"></script> +<script src="../lib/jquery.event.drag-2.0.min.js"></script> +<script src="../slick.core.js"></script> +<script src="../slick.grid.js"></script> - // Assign values to the data. - for (i = numberOfItems; i-- > 0;) { - data[indices.c1[i]].c1 = "Value ".concat(i + 1); - data[indices.c2[i]].c2 = "Value ".concat(i + 1); - data[indices.c3[i]].c3 = "Value ".concat(i + 1); - } +<script> + var grid, + data = [], + columns = [ + { id:"title", name:"Title", field:"title", width:240, sortable:true }, + { id:"c1", name:"Sort 1", field:"c1", width:240, sortable:true }, + { id:"c2", name:"Sort 2", field:"c2", width:240, sortable:true }, + { id:"c3", name:"Sort 3", field:"c3", width:240, sortable:true } + ], + options = { + enableCellNavigation:false, + enableColumnReorder:false + }, numberOfItems = 25000, items = [], indices, isAsc = true, currentSortCol = { id:"title" }, i; - // Define function used to get the data and sort it. - function getItem(index) { - return isAsc ? data[indices[currentSortCol.id][index]] : data[indices[currentSortCol.id][(data.length - 1) - index]]; - } - function getLength() { - return data.length; - } - grid = new Slick.Grid("#container", {getLength: getLength, getItem: getItem}, columns, options); - grid.onSort.subscribe(function(e,args) { - currentSortCol = args.sortCol; - isAsc = args.sortAsc; - grid.invalidateAllRows(); - grid.render(); - }); - </script> + function randomize(items) { + /// <summary> + /// Copies and shuffles the specified array and returns a new shuffled array. + /// </summary> + var randomItems = $.extend(true, null, items), randomIndex, temp, index; + for (index = items.length; index-- > 0;) { + randomIndex = Math.round(Math.random() * items.length - 1); + if (randomIndex > -1) { + temp = randomItems[randomIndex]; + randomItems[randomIndex] = randomItems[index]; + randomItems[index] = temp; + } + } + return randomItems; + } - </body> + /// Build the items and indices. + for (i = numberOfItems; i-- > 0;) { + items[i] = i; + data[i] = { + title:"Task ".concat(i + 1) + }; + } + indices = { title:items, c1:randomize(items), c2:randomize(items), c3:randomize(items) }; + + // Assign values to the data. + for (i = numberOfItems; i-- > 0;) { + data[indices.c1[i]].c1 = "Value ".concat(i + 1); + data[indices.c2[i]].c2 = "Value ".concat(i + 1); + data[indices.c3[i]].c3 = "Value ".concat(i + 1); + } + + // Define function used to get the data and sort it. + function getItem(index) { + return isAsc ? data[indices[currentSortCol.id][index]] : data[indices[currentSortCol.id][(data.length - 1) - index]]; + } + function getLength() { + return data.length; + } + + grid = new Slick.Grid("#container", {getLength:getLength, getItem:getItem}, columns, options); + grid.onSort.subscribe(function (e, args) { + currentSortCol = args.sortCol; + isAsc = args.sortAsc; + grid.invalidateAllRows(); + grid.render(); + }); +</script> + +</body> </html>
\ No newline at end of file diff --git a/examples/example14-highlighting.html b/examples/example14-highlighting.html index 3ac061f..928feae 100644 --- a/examples/example14-highlighting.html +++ b/examples/example14-highlighting.html @@ -1,149 +1,156 @@ <!DOCTYPE HTML> <html> - <head> - <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> - <title>SlickGrid example 14: Highlighting and Flashing cells</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.16.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> - .load-medium { - color: orange; - font-weight: bold; - } - .load-hi { - color: red; - font-weight: bold; - } - .changed { - background: pink; - } - .current-server { - border: 1px solid black; - background: orange; - } - </style> - </head> - <body> - <div style="position:relative"> - <div style="width:520px;"> - <div id="myGrid" style="width:100%;height:500px;"></div> - </div> - - <div class="options-panel"> - <h2>About</h2> - This example simulates a real-time display of CPU utilization in a web farm. - Data is updated in real-time, and cells with changed data are highlighted. - You can also click "Find current server" to scroll the row displaying data for the current - server into view and flash it. - <h2>Demonstrates</h2> - <ul> - <li>setHighlightedCells()</li> - <li>flashCell()</li> - </ul> - <h2>Controls</h2> - <button onclick="simulateRealTimeUpdates()">Start simulation</button> - <button onclick="findCurrentServer()">Find current server</button> - </div> - </div> - - <script src="../lib/firebugx.js"></script> - - <script src="../lib/jquery-1.7.min.js"></script> - <script src="../lib/jquery-ui-1.8.16.custom.min.js"></script> - <script src="../lib/jquery.event.drag-2.0.min.js"></script> - - <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> - var grid; - var data = []; - var columns = [{id:"server", name:"Server", field:"server", width:180}]; - var currentServer; - - function cpuUtilizationFormatter(row, cell, value, columnDef, dataContext) { - if (value > 90) - return "<span class='load-hi'>" + value + "%</span>"; - else if (value > 70) - return "<span class='load-medium'>" + value + "%</span>"; - else - return value + "%"; - } - - for (var i=0; i<4; i++) { - columns.push({ - id: "cpu" + i, - name: "CPU" + i, - field: i, - width: 80, - formatter: cpuUtilizationFormatter - }); - } - - var options = { - editable: false, - enableAddRow: false, - enableCellNavigation: true, - cellHighlightCssClass: "changed", - cellFlashingCssClass: "current-server" - }; - - - - $(function() - { - for (var i=0; i<500; i++) { - var d = (data[i] = {}); - d.server = "Server " + i; - for (var j=0; j<columns.length; j++) { - d[j] = Math.round(Math.random()*100); - } - } - - grid = new Slick.Grid("#myGrid", data, columns, options); - - currentServer = Math.round(Math.random()*(data.length-1)); - }); - - - function simulateRealTimeUpdates() { - var changes = {}; - var numberOfUpdates = Math.round(Math.random()*(data.length/10)); - for (var i=0; i<numberOfUpdates; i++) { - var server = Math.round(Math.random()*(data.length-1)); - var cpu = Math.round(Math.random()*(columns.length-1)); - var delta = Math.round(Math.random()*50)-25; - var col = grid.getColumnIndex("cpu" + cpu); - var val = data[server][col] + delta; - val = Math.max(0,val); - val = Math.min(100,val); - - data[server][col] = val; - - if (!changes[server]) - changes[server] = {}; - - changes[server]["cpu" + cpu] = "changed"; - - grid.invalidateRow(server); - } - - grid.setCellCssStyles("highlight", changes); - grid.render(); - - setTimeout(simulateRealTimeUpdates, 500); - } - - function findCurrentServer() { - grid.scrollRowIntoView(currentServer); - grid.flashCell(currentServer,grid.getColumnIndex("server"),100); - } - - </script> - - </body> +<head> + <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> + <title>SlickGrid example 14: Highlighting and Flashing cells</title> + <link rel="stylesheet" href="../slick.grid.css" type="text/css" /> + <link rel="stylesheet" href="../css/smoothness/jquery-ui-1.8.16.custom.css" type="text/css" /> + <link rel="stylesheet" href="examples.css" type="text/css" /> + <style> + .load-medium { + color: orange; + font-weight: bold; + } + + .load-hi { + color: red; + font-weight: bold; + } + + .changed { + background: pink; + } + + .current-server { + border: 1px solid black; + background: orange; + } + </style> +</head> +<body> +<div style="position:relative"> + <div style="width:520px;"> + <div id="myGrid" style="width:100%;height:500px;"></div> + </div> + + <div class="options-panel"> + <h2>About</h2> + This example simulates a real-time display of CPU utilization in a web farm. + Data is updated in real-time, and cells with changed data are highlighted. + You can also click "Find current server" to scroll the row displaying data for the current + server into view and flash it. + <h2>Demonstrates</h2> + <ul> + <li>setHighlightedCells()</li> + <li>flashCell()</li> + </ul> + <h2>Controls</h2> + <button onclick="simulateRealTimeUpdates()">Start simulation</button> + <button onclick="findCurrentServer()">Find current server</button> + </div> +</div> + +<script src="../lib/firebugx.js"></script> + +<script src="../lib/jquery-1.7.min.js"></script> +<script src="../lib/jquery-ui-1.8.16.custom.min.js"></script> +<script src="../lib/jquery.event.drag-2.0.min.js"></script> + +<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> + var grid; + var data = []; + var columns = [ + {id:"server", name:"Server", field:"server", width:180} + ]; + var currentServer; + + function cpuUtilizationFormatter(row, cell, value, columnDef, dataContext) { + if (value > 90) { + return "<span class='load-hi'>" + value + "%</span>"; + } + else if (value > 70) { + return "<span class='load-medium'>" + value + "%</span>"; + } + else { + return value + "%"; + } + } + + for (var i = 0; i < 4; i++) { + columns.push({ + id:"cpu" + i, + name:"CPU" + i, + field:i, + width:80, + formatter:cpuUtilizationFormatter + }); + } + + var options = { + editable:false, + enableAddRow:false, + enableCellNavigation:true, + cellHighlightCssClass:"changed", + cellFlashingCssClass:"current-server" + }; + + + $(function () { + for (var i = 0; i < 500; i++) { + var d = (data[i] = {}); + d.server = "Server " + i; + for (var j = 0; j < columns.length; j++) { + d[j] = Math.round(Math.random() * 100); + } + } + + grid = new Slick.Grid("#myGrid", data, columns, options); + + currentServer = Math.round(Math.random() * (data.length - 1)); + }); + + + function simulateRealTimeUpdates() { + var changes = {}; + var numberOfUpdates = Math.round(Math.random() * (data.length / 10)); + for (var i = 0; i < numberOfUpdates; i++) { + var server = Math.round(Math.random() * (data.length - 1)); + var cpu = Math.round(Math.random() * (columns.length - 1)); + var delta = Math.round(Math.random() * 50) - 25; + var col = grid.getColumnIndex("cpu" + cpu); + var val = data[server][col] + delta; + val = Math.max(0, val); + val = Math.min(100, val); + + data[server][col] = val; + + if (!changes[server]) { + changes[server] = {}; + } + + changes[server]["cpu" + cpu] = "changed"; + + grid.invalidateRow(server); + } + + grid.setCellCssStyles("highlight", changes); + grid.render(); + + setTimeout(simulateRealTimeUpdates, 500); + } + + function findCurrentServer() { + grid.scrollRowIntoView(currentServer); + grid.flashCell(currentServer, grid.getColumnIndex("server"), 100); + } + +</script> + +</body> </html> diff --git a/examples/example2-formatters.html b/examples/example2-formatters.html index d7f77e3..e260535 100644 --- a/examples/example2-formatters.html +++ b/examples/example2-formatters.html @@ -1,85 +1,79 @@ <!DOCTYPE HTML> <html> - <head> - <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> - <title>SlickGrid example 2: Formatters</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.16.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; - } +<head> + <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> + <title>SlickGrid example 2: Formatters</title> + <link rel="stylesheet" href="../slick.grid.css" type="text/css" /> + <link rel="stylesheet" href="../css/smoothness/jquery-ui-1.8.16.custom.css" type="text/css" /> + <link rel="stylesheet" href="examples.css" type="text/css" /> + <style> + .cell-title { + font-weight: bold; + } - .cell-effort-driven { - text-align: center; - } - </style> - </head> - <body> - <table width="100%"> - <tr> - <td valign="top" width="50%"> - <div id="myGrid" style="width:600px;height:500px;"></div> - </td> - <td valign="top"> - <h2>Demonstrates:</h2> - <ul> - <li>width, minWidth, maxWidth, resizable, cssClass column attributes</li> - <li>custom column formatters</li> - </ul> - </td> - </tr> - </table> + .cell-effort-driven { + text-align: center; + } + </style> +</head> +<body> +<table width="100%"> + <tr> + <td valign="top" width="50%"> + <div id="myGrid" style="width:600px;height:500px;"></div> + </td> + <td valign="top"> + <h2>Demonstrates:</h2> + <ul> + <li>width, minWidth, maxWidth, resizable, cssClass column attributes</li> + <li>custom column formatters</li> + </ul> + </td> + </tr> +</table> - <script src="../lib/firebugx.js"></script> +<script src="../lib/firebugx.js"></script> - <script src="../lib/jquery-1.7.min.js"></script> - <script src="../lib/jquery-ui-1.8.16.custom.min.js"></script> - <script src="../lib/jquery.event.drag-2.0.min.js"></script> +<script src="../lib/jquery-1.7.min.js"></script> +<script src="../lib/jquery-ui-1.8.16.custom.min.js"></script> +<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.grid.js"></script> +<script src="../slick.core.js"></script> +<script src="../slick.editors.js"></script> +<script src="../slick.grid.js"></script> - <script> - var grid; +<script> + var grid; + var data = []; + 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:"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} + ]; - var data = []; + var options = { + editable:false, + enableAddRow:false, + enableCellNavigation:true + }; - 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:"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} - ]; + $(function () { + for (var i = 0; i < 500; i++) { + var d = (data[i] = {}); - var options = { - editable: false, - enableAddRow: false, - enableCellNavigation: true - }; + d["title"] = "Task " + i; + d["duration"] = "5 days"; + d["percentComplete"] = Math.min(100, Math.round(Math.random() * 110)); + d["start"] = "01/01/2009"; + d["finish"] = "01/05/2009"; + d["effortDriven"] = (i % 5 == 0); + } - - $(function() - { - for (var i=0; i<500; i++) { - var d = (data[i] = {}); - - d["title"] = "Task " + i; - d["duration"] = "5 days"; - d["percentComplete"] = Math.min(100, Math.round(Math.random() * 110)); - 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> + grid = new Slick.Grid("#myGrid", data, columns, options); + }) +</script> +</body> </html> diff --git a/examples/example3-editing.html b/examples/example3-editing.html index 154a6e5..d0c79f6 100644 --- a/examples/example3-editing.html +++ b/examples/example3-editing.html @@ -1,111 +1,106 @@ <!DOCTYPE HTML> <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/smoothness/jquery-ui-1.8.16.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; - } +<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" /> + <link rel="stylesheet" href="../css/smoothness/jquery-ui-1.8.16.custom.css" type="text/css" /> + <link rel="stylesheet" href="examples.css" type="text/css" /> + <style> + .cell-title { + font-weight: bold; + } - .cell-effort-driven { - text-align: center; - } - </style> - </head> - <body> - <div style="position:relative"> - <div style="width:600px;"> - <div id="myGrid" style="width:100%;height:500px;"></div> - </div> + .cell-effort-driven { + text-align: center; + } + </style> +</head> +<body> +<div style="position:relative"> + <div style="width:600px;"> + <div id="myGrid" style="width:100%;height:500px;"></div> + </div> - <div class="options-panel"> - <h2>Demonstrates:</h2> - <ul> - <li>adding basic keyboard navigation and editing</li> - <li>custom editors and validators</li> - <li>auto-edit settings</li> - </ul> + <div class="options-panel"> + <h2>Demonstrates:</h2> + <ul> + <li>adding basic keyboard navigation and editing</li> + <li>custom editors and validators</li> + <li>auto-edit settings</li> + </ul> - <h2>Options:</h2> - <button onclick="grid.setOptions({autoEdit:true})">Auto-edit ON</button> - - <button onclick="grid.setOptions({autoEdit:false})">Auto-edit OFF</button> - </div> - </div> + <h2>Options:</h2> + <button onclick="grid.setOptions({autoEdit:true})">Auto-edit ON</button> + + <button onclick="grid.setOptions({autoEdit:false})">Auto-edit OFF</button> + </div> +</div> - <script src="../lib/firebugx.js"></script> +<script src="../lib/firebugx.js"></script> - <script src="../lib/jquery-1.7.min.js"></script> - <script src="../lib/jquery-ui-1.8.16.custom.min.js"></script> - <script src="../lib/jquery.event.drag-2.0.min.js"></script> +<script src="../lib/jquery-1.7.min.js"></script> +<script src="../lib/jquery-ui-1.8.16.custom.min.js"></script> +<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.editors.js"></script> - <script src="../slick.grid.js"></script> +<script src="../slick.core.js"></script> +<script src="../plugins/slick.cellselectionmodel.js"></script> +<script src="../slick.editors.js"></script> +<script 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}; - } +<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: true, - enableCellNavigation: true, - asyncEditorLoading: false, - autoEdit: false - }; + 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:true, + enableCellNavigation:true, + asyncEditorLoading:false, + autoEdit:false + }; - $(function() - { - for (var i=0; i<500; i++) { - var d = (data[i] = {}); + $(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); - } + 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 = new Slick.Grid("#myGrid", data, columns, options); - //grid.registerPlugin(new Slick.CellRangeSelector()); + grid.setSelectionModel(new Slick.CellSelectionModel()); - grid.setSelectionModel(new Slick.CellSelectionModel()); - - 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(); - }); - }) - </script> - </body> + grid.onAddNewRow.subscribe(function (e, args) { + var item = args.item; + grid.invalidateRow(data.length); + data.push(item); + grid.updateRowCount(); + grid.render(); + }); + }) +</script> +</body> </html> diff --git a/examples/example3a-compound-editors.html b/examples/example3a-compound-editors.html index b80b306..c5bcfbe 100644 --- a/examples/example3a-compound-editors.html +++ b/examples/example3a-compound-editors.html @@ -1,143 +1,144 @@ <!DOCTYPE HTML> <html> - <head> - <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> - <title>SlickGrid example 3a: Advanced Editing</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.16.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; - } - </style> - </head> - <body> - - <div style="position:relative"> - <div style="width:600px;"> - <div id="myGrid" style="width:100%;height:500px;"></div> - </div> - - <div class="options-panel"> - <h2>Demonstrates:</h2> - <ul> - <li>compound cell editors driving multiple fields from one cell</li> - <li>providing validation from the editor</li> - <li>hooking into validation events</li> - </ul> - </div> - </div> - - <script src="../lib/firebugx.js"></script> - - <script src="../lib/jquery-1.7.min.js"></script> - <script src="../lib/jquery-ui-1.8.16.custom.min.js"></script> - <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.grid.js"></script> - - <script> - var grid; - var data = []; - - var columns = [ - {id:"title", name:"Title", field:"title", width:120, cssClass:"cell-title", editor:TextCellEditor}, - {id:"range", name:"Range", width:120, formatter:NumericRangeFormatter, editor:NumericRangeEditor} - ]; - - var options = { - editable: true, - enableAddRow: false, - enableCellNavigation: true, - asyncEditorLoading: false - }; - - function NumericRangeFormatter(row, cell, value, columnDef, dataContext) { - return dataContext.from + " - " + dataContext.to; - } - - function NumericRangeEditor(args) { - var $from, $to; - var scope = this; - - this.init = function() { - $from = $("<INPUT type=text style='width:40px' />") - .appendTo(args.container) - .bind("keydown", scope.handleKeyDown); - - $(args.container).append(" to "); - - $to = $("<INPUT type=text style='width:40px' />") - .appendTo(args.container) - .bind("keydown", scope.handleKeyDown); - - scope.focus(); - }; - - this.handleKeyDown = function(e) { - if (e.keyCode == $.ui.keyCode.LEFT || e.keyCode == $.ui.keyCode.RIGHT || e.keyCode == $.ui.keyCode.TAB) { - e.stopImmediatePropagation(); - } - }; - - this.destroy = function() { - $(args.container).empty(); - }; - - this.focus = function() { - $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.isValueChanged = function() { - return args.item.from != parseInt($from.val(),10) || args.item.to != parseInt($from.val(),10); - }; - - this.validate = function() { - if (isNaN(parseInt($from.val(),10)) || isNaN(parseInt($to.val(),10))) - return {valid: false, msg: "Please type in valid numbers."}; - - if (parseInt($from.val(),10) > parseInt($to.val(),10)) - return {valid: false, msg: "'from' cannot be greater than 'to'"}; - - return {valid: true, msg: null}; - }; - - this.init(); - } - - $(function() - { - for (var i=0; i<500; i++) { - var d = (data[i] = {}); - - d["title"] = "Task " + i; - d["from"] = Math.round(Math.random() * 100); - d["to"] = d["from"] + Math.round(Math.random() * 100); - } - - grid = new Slick.Grid("#myGrid", data, columns, options); - - grid.onValidationError.subscribe(function(e,args) { - alert(args.validationResults.msg); - }); - }) - </script> - </body> +<head> + <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> + <title>SlickGrid example 3a: Advanced Editing</title> + <link rel="stylesheet" href="../slick.grid.css" type="text/css" /> + <link rel="stylesheet" href="../css/smoothness/jquery-ui-1.8.16.custom.css" type="text/css" /> + <link rel="stylesheet" href="examples.css" type="text/css" /> + <style> + .cell-title { + font-weight: bold; + } + </style> +</head> +<body> + +<div style="position:relative"> + <div style="width:600px;"> + <div id="myGrid" style="width:100%;height:500px;"></div> + </div> + + <div class="options-panel"> + <h2>Demonstrates:</h2> + <ul> + <li>compound cell editors driving multiple fields from one cell</li> + <li>providing validation from the editor</li> + <li>hooking into validation events</li> + </ul> + </div> +</div> + +<script src="../lib/firebugx.js"></script> + +<script src="../lib/jquery-1.7.min.js"></script> +<script src="../lib/jquery-ui-1.8.16.custom.min.js"></script> +<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.grid.js"></script> + +<script> + var grid; + var data = []; + + var columns = [ + {id:"title", name:"Title", field:"title", width:120, cssClass:"cell-title", editor:TextCellEditor}, + {id:"range", name:"Range", width:120, formatter:NumericRangeFormatter, editor:NumericRangeEditor} + ]; + + var options = { + editable:true, + enableAddRow:false, + enableCellNavigation:true, + asyncEditorLoading:false + }; + + function NumericRangeFormatter(row, cell, value, columnDef, dataContext) { + return dataContext.from + " - " + dataContext.to; + } + + function NumericRangeEditor(args) { + var $from, $to; + var scope = this; + + this.init = function () { + $from = $("<INPUT type=text style='width:40px' />") + .appendTo(args.container) + .bind("keydown", scope.handleKeyDown); + + $(args.container).append(" to "); + + $to = $("<INPUT type=text style='width:40px' />") + .appendTo(args.container) + .bind("keydown", scope.handleKeyDown); + + scope.focus(); + }; + + this.handleKeyDown = function (e) { + if (e.keyCode == $.ui.keyCode.LEFT || e.keyCode == $.ui.keyCode.RIGHT || e.keyCode == $.ui.keyCode.TAB) { + e.stopImmediatePropagation(); + } + }; + + this.destroy = function () { + $(args.container).empty(); + }; + + this.focus = function () { + $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.isValueChanged = function () { + return args.item.from != parseInt($from.val(), 10) || args.item.to != parseInt($from.val(), 10); + }; + + this.validate = function () { + if (isNaN(parseInt($from.val(), 10)) || isNaN(parseInt($to.val(), 10))) { + return {valid:false, msg:"Please type in valid numbers."}; + } + + if (parseInt($from.val(), 10) > parseInt($to.val(), 10)) { + return {valid:false, msg:"'from' cannot be greater than 'to'"}; + } + + return {valid:true, msg:null}; + }; + + this.init(); + } + + $(function () { + for (var i = 0; i < 500; i++) { + var d = (data[i] = {}); + + d["title"] = "Task " + i; + d["from"] = Math.round(Math.random() * 100); + d["to"] = d["from"] + Math.round(Math.random() * 100); + } + + grid = new Slick.Grid("#myGrid", data, columns, options); + + grid.onValidationError.subscribe(function (e, args) { + alert(args.validationResults.msg); + }); + }) +</script> +</body> </html> diff --git a/examples/example3b-editing-with-undo.html b/examples/example3b-editing-with-undo.html index b1a318e..1301145 100644 --- a/examples/example3b-editing-with-undo.html +++ b/examples/example3b-editing-with-undo.html @@ -1,109 +1,110 @@ <!DOCTYPE HTML> <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/smoothness/jquery-ui-1.8.16.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="position:relative"> - <div style="width:600px;"> - <div id="myGrid" style="width:100%;height:500px;"></div> - </div> - - <div class="options-panel"> - <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> - </div> - - <script src="../lib/firebugx.js"></script> - - <script src="../lib/jquery-1.7.min.js"></script> - <script src="../lib/jquery-ui-1.8.16.custom.min.js"></script> - <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.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> +<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" /> + <link rel="stylesheet" href="../css/smoothness/jquery-ui-1.8.16.custom.css" type="text/css" /> + <link rel="stylesheet" href="examples.css" type="text/css" /> + <style> + .cell-title { + font-weight: bold; + } + + .cell-effort-driven { + text-align: center; + } + </style> +</head> +<body> +<div style="position:relative"> + <div style="width:600px;"> + <div id="myGrid" style="width:100%;height:500px;"></div> + </div> + + <div class="options-panel"> + <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> +</div> + +<script src="../lib/firebugx.js"></script> + +<script src="../lib/jquery-1.7.min.js"></script> +<script src="../lib/jquery-ui-1.8.16.custom.min.js"></script> +<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.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> diff --git a/examples/example4-model.html b/examples/example4-model.html index 0ff1fa3..d717fad 100644 --- a/examples/example4-model.html +++ b/examples/example4-model.html @@ -1,372 +1,383 @@ <!DOCTYPE HTML> <html> - <head> - <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> - <title>SlickGrid example 4: Model</title> - <link rel="stylesheet" href="../slick.grid.css" type="text/css" media="screen" charset="utf-8" /> - <link rel="stylesheet" href="../controls/slick.pager.css" type="text/css" media="screen" charset="utf-8" /> - <link rel="stylesheet" href="../css/smoothness/jquery-ui-1.8.16.custom.css" type="text/css" media="screen" charset="utf-8" /> - <link rel="stylesheet" href="examples.css" type="text/css" media="screen" charset="utf-8" /> - <link rel="stylesheet" href="../controls/slick.columnpicker.css" type="text/css" media="screen" charset="utf-8" /> - <style> - .cell-title { - font-weight: bold; - } - - .cell-effort-driven { - text-align: center; - } - - .cell-selection { - border-right-color: silver; - border-right-style: solid; - background: #f5f5f5; - color: gray; - text-align: right; - font-size: 10px; +<head> + <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> + <title>SlickGrid example 4: Model</title> + <link rel="stylesheet" href="../slick.grid.css" type="text/css" /> + <link rel="stylesheet" href="../controls/slick.pager.css" type="text/css" /> + <link rel="stylesheet" href="../css/smoothness/jquery-ui-1.8.16.custom.css" type="text/css" /> + <link rel="stylesheet" href="examples.css" type="text/css" /> + <link rel="stylesheet" href="../controls/slick.columnpicker.css" type="text/css" /> + <style> + .cell-title { + font-weight: bold; + } + + .cell-effort-driven { + text-align: center; + } + + .cell-selection { + border-right-color: silver; + border-right-style: solid; + background: #f5f5f5; + color: gray; + text-align: right; + font-size: 10px; + } + + .slick-row.selected .cell-selection { + background-color: transparent; /* show default selected row background */ + } + </style> +</head> +<body> +<div style="position:relative"> + <div style="width:600px;"> + <div class="grid-header" style="width:100%"> + <label>SlickGrid</label> + <span style="float:right" class="ui-icon ui-icon-search" title="Toggle search panel" + onclick="toggleFilterRow()"></span> + </div> + <div id="myGrid" style="width:100%;height:500px;"></div> + <div id="pager" style="width:100%;height:20px;"></div> + </div> + + <div class="options-panel"> + <b>Search:</b> + <hr/> + <div style="padding:6px;"> + <label style="width:200px;float:left">Show tasks with % at least: </label> + + <div style="padding:2px;"> + <div style="width:100px;display:inline-block;" id="pcSlider"></div> + </div> + <br/> + <label style="width:200px;float:left">And title including:</label> + <input type=text id="txtSearch" style="width:100px;"> + <br/><br/> + <button id="btnSelectRows">Select first 10 rows</button> + + <br/> + + <h2>Demonstrates:</h2> + <ul> + <li>a filtered Model (DataView) as a data source instead of a simple array</li> + <li>grid reacting to model events (onRowCountChanged, onRowsChanged)</li> + <li> + <b>FAST</b> DataView recalculation and <b>real-time</b> grid updating in response to data changes.<br/> + The grid holds <b>50'000</b> rows, yet you are able to sort, filter, scroll, navigate and edit as if it had 50 + rows. + </li> + <li>adding new rows, bidirectional sorting</li> + <li>column options: cannotTriggerInsert</li> + <li>events: onCellChange, onAddNewRow, onKeyDown, onSelectedRowsChanged, onSort</li> + <li><font color=red>NOTE:</font> all filters are immediately applied to new/edited rows</li> + <li>Handling row selection against model changes.</li> + <li>Paging.</li> + <li>inline filter panel</li> + </ul> + </div> + </div> +</div> + +<div id="inlineFilterPanel" style="display:none;background:#dddddd;padding:3px;color:black;"> + Show tasks with title including <input type="text" id="txtSearch2"> + and % at least + <div style="width:100px;display:inline-block;" id="pcSlider2"></div> +</div> + +<script src="../lib/firebugx.js"></script> + +<script src="../lib/jquery-1.7.min.js"></script> +<script src="../lib/jquery-ui-1.8.16.custom.min.js"></script> +<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="../plugins/slick.rowselectionmodel.js"></script> +<script src="../slick.grid.js"></script> +<script src="../slick.dataview.js"></script> +<script src="../controls/slick.pager.js"></script> +<script src="../controls/slick.columnpicker.js"></script> + +<script> +var dataView; +var grid; +var data = []; +var selectedRowIds = []; + +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} +]; + +var options = { + editable:true, + enableAddRow:true, + enableCellNavigation:true, + asyncEditorLoading:true, + forceFitColumns:false, + topPanelHeight:25 +}; + +var sortcol = "title"; +var sortdir = 1; +var percentCompleteThreshold = 0; +var searchString = ""; + +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}; + } +} + +function myFilter(item, args) { + if (item["percentComplete"] < args.percentCompleteThreshold) { + return false; + } + + if (args.searchString != "" && item["title"].indexOf(args.searchString) == -1) { + return false; + } + + return true; +} + +function percentCompleteSort(a, b) { + return a["percentComplete"] - b["percentComplete"]; +} + +function comparer(a, b) { + var x = a[sortcol], y = b[sortcol]; + return (x == y ? 0 : (x > y ? 1 : -1)); +} + +function toggleFilterRow() { + if ($(grid.getTopPanel()).is(":visible")) { + grid.hideTopPanel(); + } else { + grid.showTopPanel(); + } +} + + +$(".grid-header .ui-icon") + .addClass("ui-state-default ui-corner-all") + .mouseover(function (e) { + $(e.target).addClass("ui-state-hover") + }) + .mouseout(function (e) { + $(e.target).removeClass("ui-state-hover") + }); + +$(function () { + // prepare the data + for (var i = 0; i < 50000; i++) { + var d = (data[i] = {}); + + d["id"] = "id_" + i; + d["num"] = i; + d["title"] = "Task " + i; + 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); + } + + + dataView = new Slick.Data.DataView(); + grid = new Slick.Grid("#myGrid", dataView, columns, options); + grid.setSelectionModel(new Slick.RowSelectionModel()); + + var pager = new Slick.Controls.Pager(dataView, grid, $("#pager")); + var columnpicker = new Slick.Controls.ColumnPicker(columns, grid, options); + + + // move the filter panel defined in a hidden div into grid top panel + $("#inlineFilterPanel") + .appendTo(grid.getTopPanel()) + .show(); + + grid.onCellChange.subscribe(function (e, args) { + dataView.updateItem(args.item.id, args.item); + }); + + grid.onAddNewRow.subscribe(function (e, args) { + var item = {"num":data.length, "id":"new_" + (Math.round(Math.random() * 10000)), "title":"New task", "duration":"1 day", "percentComplete":0, "start":"01/01/2009", "finish":"01/01/2009", "effortDriven":false}; + $.extend(item, args.item); + dataView.addItem(item); + }); + + grid.onKeyDown.subscribe(function (e) { + // select all rows on ctrl-a + if (e.which != 65 || !e.ctrlKey) { + return false; + } + + var rows = []; + selectedRowIds = []; + + for (var i = 0; i < dataView.getLength(); i++) { + rows.push(i); + selectedRowIds.push(dataView.getItem(i).id); + } + + grid.setSelectedRows(rows); + e.preventDefault(); + }); + + grid.onSelectedRowsChanged.subscribe(function (e) { + selectedRowIds = []; + var rows = grid.getSelectedRows(); + for (var i = 0, l = rows.length; i < l; i++) { + var item = dataView.getItem(rows[i]); + if (item) { + selectedRowIds.push(item.id); + } + } + }); + + grid.onSort.subscribe(function (e, args) { + sortdir = args.sortAsc ? 1 : -1; + sortcol = args.sortCol.field; + + if ($.browser.msie && $.browser.version <= 8) { + // using temporary Object.prototype.toString override + // more limited and does lexicographic sort only by default, but can be much faster + + var percentCompleteValueFn = function () { + var val = this["percentComplete"]; + if (val < 10) { + return "00" + val; + } else if (val < 100) { + return "0" + val; + } else { + return val; } - - .slick-row.selected .cell-selection { - background-color: transparent; /* show default selected row background */ - } - </style> - </head> - <body> - <div style="position:relative"> - <div style="width:600px;"> - <div class="grid-header" style="width:100%"> - <label>SlickGrid</label> - <span style="float:right" class="ui-icon ui-icon-search" title="Toggle search panel" onclick="toggleFilterRow()"></span> - </div> - <div id="myGrid" style="width:100%;height:500px;"></div> - <div id="pager" style="width:100%;height:20px;"></div> - </div> - - <div class="options-panel"> - <b>Search:</b> - <hr/> - <div style="padding:6px;"> - <label style="width:200px;float:left">Show tasks with % at least: </label> - <div style="padding:2px;"> - <div style="width:100px;display:inline-block;" id="pcSlider"></div> - </div> - <br/> - <label style="width:200px;float:left">And title including:</label> - <input type=text id="txtSearch" style="width:100px;"> - <br/><br/> - <button id="btnSelectRows">Select first 10 rows</button> - - <br/> - <h2>Demonstrates:</h2> - <ul> - <li>a filtered Model (DataView) as a data source instead of a simple array</li> - <li>grid reacting to model events (onRowCountChanged, onRowsChanged)</li> - <li> - <b>FAST</b> DataView recalculation and <b>real-time</b> grid updating in response to data changes.<br/> - The grid holds <b>50'000</b> rows, yet you are able to sort, filter, scroll, navigate and edit as if it had 50 rows. - </li> - <li>adding new rows, bidirectional sorting</li> - <li>column options: cannotTriggerInsert</li> - <li>events: onCellChange, onAddNewRow, onKeyDown, onSelectedRowsChanged, onSort</li> - <li><font color=red>NOTE:</font> all filters are immediately applied to new/edited rows</li> - <li>Handling row selection against model changes.</li> - <li>Paging.</li> - <li>inline filter panel</li> - </ul> - </div> - </div> - </div> - - <div id="inlineFilterPanel" style="display:none;background:#dddddd;padding:3px;color:black;"> - Show tasks with title including <input type="text" id="txtSearch2"> - and % at least <div style="width:100px;display:inline-block;" id="pcSlider2"></div> - </div> - - <script src="../lib/firebugx.js"></script> - - <script src="../lib/jquery-1.7.min.js"></script> - <script src="../lib/jquery-ui-1.8.16.custom.min.js"></script> - <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="../plugins/slick.rowselectionmodel.js"></script> - <script src="../slick.grid.js"></script> - <script src="../slick.dataview.js"></script> - <script src="../controls/slick.pager.js"></script> - <script src="../controls/slick.columnpicker.js"></script> - - <script> - var dataView; - var grid; - var data = []; - var selectedRowIds = []; - - 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} - ]; - - var options = { - editable: true, - enableAddRow: true, - enableCellNavigation: true, - asyncEditorLoading: true, - forceFitColumns: false, - topPanelHeight: 25 - }; - - var sortcol = "title"; - var sortdir = 1; - var percentCompleteThreshold = 0; - var searchString = ""; - - 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}; - } - - function myFilter(item, args) { - if (item["percentComplete"] < args.percentCompleteThreshold) - return false; - - if (args.searchString != "" && item["title"].indexOf(args.searchString) == -1) - return false; - - return true; - } - - function percentCompleteSort(a,b) { - return a["percentComplete"] - b["percentComplete"]; - } - - function comparer(a,b) { - var x = a[sortcol], y = b[sortcol]; - return (x == y ? 0 : (x > y ? 1 : -1)); - } - - function toggleFilterRow() { - if ($(grid.getTopPanel()).is(":visible")) - grid.hideTopPanel(); - else - grid.showTopPanel(); + }; + + // use numeric sort of % and lexicographic for everything else + dataView.fastSort((sortcol == "percentComplete") ? percentCompleteValueFn : sortcol, args.sortAsc); + } else { + // using native sort with comparer + // preferred method but can be very slow in IE with huge datasets + dataView.sort(comparer, args.sortAsc); + } + }); + + // wire up model events to drive the grid + dataView.onRowCountChanged.subscribe(function (e, args) { + grid.updateRowCount(); + grid.render(); + }); + + dataView.onRowsChanged.subscribe(function (e, args) { + grid.invalidateRows(args.rows); + grid.render(); + + if (selectedRowIds.length > 0) { + // since how the original data maps onto rows has changed, + // the selected rows in the grid need to be updated + var selRows = []; + for (var i = 0; i < selectedRowIds.length; i++) { + var idx = dataView.getRowById(selectedRowIds[i]); + if (idx != undefined) { + selRows.push(idx); } - - - $(".grid-header .ui-icon") - .addClass("ui-state-default ui-corner-all") - .mouseover(function(e) { - $(e.target).addClass("ui-state-hover") - }) - .mouseout(function(e) { - $(e.target).removeClass("ui-state-hover") - }); - - $(function() - { - // prepare the data - for (var i=0; i<50000; i++) { - var d = (data[i] = {}); - - d["id"] = "id_" + i; - d["num"] = i; - d["title"] = "Task " + i; - 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); - } - - - dataView = new Slick.Data.DataView(); - grid = new Slick.Grid("#myGrid", dataView, columns, options); - grid.setSelectionModel(new Slick.RowSelectionModel()); - - var pager = new Slick.Controls.Pager(dataView, grid, $("#pager")); - var columnpicker = new Slick.Controls.ColumnPicker(columns, grid, options); - - - // move the filter panel defined in a hidden div into grid top panel - $("#inlineFilterPanel") - .appendTo(grid.getTopPanel()) - .show(); - - grid.onCellChange.subscribe(function(e,args) { - dataView.updateItem(args.item.id,args.item); - }); - - grid.onAddNewRow.subscribe(function(e,args) { - var item = {"num": data.length, "id": "new_" + (Math.round(Math.random()*10000)), "title":"New task", "duration":"1 day", "percentComplete":0, "start":"01/01/2009", "finish":"01/01/2009", "effortDriven":false}; - $.extend(item,args.item); - dataView.addItem(item); - }); - - grid.onKeyDown.subscribe(function(e) { - // select all rows on ctrl-a - if (e.which != 65 || !e.ctrlKey) - return false; - - var rows = []; - selectedRowIds = []; - - for (var i = 0; i < dataView.getLength(); i++) { - rows.push(i); - selectedRowIds.push(dataView.getItem(i).id); - } - - grid.setSelectedRows(rows); - e.preventDefault(); - }); - - grid.onSelectedRowsChanged.subscribe(function(e) { - selectedRowIds = []; - var rows = grid.getSelectedRows(); - for (var i = 0, l = rows.length; i < l; i++) { - var item = dataView.getItem(rows[i]); - if (item) selectedRowIds.push(item.id); - } - }); - - grid.onSort.subscribe(function(e, args) { - sortdir = args.sortAsc ? 1 : -1; - sortcol = args.sortCol.field; - - if ($.browser.msie && $.browser.version <= 8) { - // using temporary Object.prototype.toString override - // more limited and does lexicographic sort only by default, but can be much faster - - var percentCompleteValueFn = function() { - var val = this["percentComplete"]; - if (val < 10) - return "00" + val; - else if (val < 100) - return "0" + val; - else - return val; - }; - - // use numeric sort of % and lexicographic for everything else - dataView.fastSort((sortcol=="percentComplete")?percentCompleteValueFn:sortcol,args.sortAsc); - } - else { - // using native sort with comparer - // preferred method but can be very slow in IE with huge datasets - dataView.sort(comparer, args.sortAsc); - } - }); - - // wire up model events to drive the grid - dataView.onRowCountChanged.subscribe(function(e,args) { - grid.updateRowCount(); - grid.render(); - }); - - dataView.onRowsChanged.subscribe(function(e,args) { - grid.invalidateRows(args.rows); - grid.render(); - - if (selectedRowIds.length > 0) - { - // since how the original data maps onto rows has changed, - // the selected rows in the grid need to be updated - var selRows = []; - for (var i = 0; i < selectedRowIds.length; i++) - { - var idx = dataView.getRowById(selectedRowIds[i]); - if (idx != undefined) - selRows.push(idx); - } - - grid.setSelectedRows(selRows); - } - }); - - dataView.onPagingInfoChanged.subscribe(function(e,pagingInfo) { - var isLastPage = pagingInfo.pageSize*(pagingInfo.pageNum+1)-1 >= pagingInfo.totalRows; - var enableAddRow = isLastPage || pagingInfo.pageSize==0; - var options = grid.getOptions(); - - if (options.enableAddRow != enableAddRow) - grid.setOptions({enableAddRow:enableAddRow}); - }); - - - - var h_runfilters = null; - - // wire up the slider to apply the filter to the model - $("#pcSlider,#pcSlider2").slider({ - "range": "min", - "slide": function(event,ui) { - Slick.GlobalEditorLock.cancelCurrentEdit(); - - if (percentCompleteThreshold != ui.value) - { - window.clearTimeout(h_runfilters); - h_runfilters = window.setTimeout(updateFilter, 10); - percentCompleteThreshold = ui.value; - } - } - }); - - - // wire up the search textbox to apply the filter to the model - $("#txtSearch,#txtSearch2").keyup(function(e) { - Slick.GlobalEditorLock.cancelCurrentEdit(); - - // clear on Esc - if (e.which == 27) - this.value = ""; - - searchString = this.value; - updateFilter(); - }); - - function updateFilter() { - dataView.setFilterArgs({ - percentCompleteThreshold: percentCompleteThreshold, - searchString: searchString - }); - dataView.refresh(); - } - - $("#btnSelectRows").click(function() { - if (!Slick.GlobalEditorLock.commitCurrentEdit()) { return; } - - var rows = []; - selectedRowIds = []; - - for (var i=0; i<10 && i<dataView.getLength(); i++) { - rows.push(i); - selectedRowIds.push(dataView.getItem(i).id); - } - - grid.setSelectedRows(rows); - }); - - - // initialize the model after all the events have been hooked up - dataView.beginUpdate(); - dataView.setItems(data); - dataView.setFilterArgs({ - percentCompleteThreshold: percentCompleteThreshold, - searchString: searchString - }); - dataView.setFilter(myFilter); - dataView.endUpdate(); - - $("#gridContainer").resizable(); - }) - - </script> - - </body> + } + + grid.setSelectedRows(selRows); + } + }); + + dataView.onPagingInfoChanged.subscribe(function (e, pagingInfo) { + var isLastPage = pagingInfo.pageSize * (pagingInfo.pageNum + 1) - 1 >= pagingInfo.totalRows; + var enableAddRow = isLastPage || pagingInfo.pageSize == 0; + var options = grid.getOptions(); + + if (options.enableAddRow != enableAddRow) { + grid.setOptions({enableAddRow:enableAddRow}); + } + }); + + + var h_runfilters = null; + + // wire up the slider to apply the filter to the model + $("#pcSlider,#pcSlider2").slider({ + "range": "min", + "slide": function (event, ui) { + Slick.GlobalEditorLock.cancelCurrentEdit(); + + if (percentCompleteThreshold != ui.value) { + window.clearTimeout(h_runfilters); + h_runfilters = window.setTimeout(updateFilter, 10); + percentCompleteThreshold = ui.value; + } + } + }); + + + // wire up the search textbox to apply the filter to the model + $("#txtSearch,#txtSearch2").keyup(function (e) { + Slick.GlobalEditorLock.cancelCurrentEdit(); + + // clear on Esc + if (e.which == 27) { + this.value = ""; + } + + searchString = this.value; + updateFilter(); + }); + + function updateFilter() { + dataView.setFilterArgs({ + percentCompleteThreshold:percentCompleteThreshold, + searchString:searchString + }); + dataView.refresh(); + } + + $("#btnSelectRows").click(function () { + if (!Slick.GlobalEditorLock.commitCurrentEdit()) { + return; + } + + var rows = []; + selectedRowIds = []; + + for (var i = 0; i < 10 && i < dataView.getLength(); i++) { + rows.push(i); + selectedRowIds.push(dataView.getItem(i).id); + } + + grid.setSelectedRows(rows); + }); + + + // initialize the model after all the events have been hooked up + dataView.beginUpdate(); + dataView.setItems(data); + dataView.setFilterArgs({ + percentCompleteThreshold:percentCompleteThreshold, + searchString:searchString + }); + dataView.setFilter(myFilter); + dataView.endUpdate(); + + $("#gridContainer").resizable(); +}) +</script> +</body> </html> diff --git a/examples/example5-collapsing.html b/examples/example5-collapsing.html index a874dd8..40a7223 100644 --- a/examples/example5-collapsing.html +++ b/examples/example5-collapsing.html @@ -1,262 +1,275 @@ <!DOCTYPE HTML> <html> - <head> - <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> - <title>SlickGrid example 5: Collapsing</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.16.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; - } - - .toggle { - height: 9px; - width: 9px; - display: inline-block; - } - - .toggle.expand { - background: url(../images/expand.gif) no-repeat center center; - } - - .toggle.collapse { - background: url(../images/collapse.gif) no-repeat center center; - } - - </style> - </head> - <body> - <table width="100%"> - <tr> - <td valign="top" width="50%"> - <div style="border:1px solid gray;background:wheat;padding:6px;"> - <label>Show tasks with % at least: </label> - <div style="padding:4px;"> - <div style="width:100px;" id="pcSlider"></div> - </div> - <br/> - <label>And title including:</label> - <input type=text id="txtSearch"> - </div> - <br/> - <div id="myGrid" style="width:600px;height:500px;"></div> - </td> - <td valign="top"> - <h2>Demonstrates:</h2> - <ul> - <li>implementing expand/collapse as a filter for DataView</li> - </ul> - </td> - </tr> - </table> - - <script src="../lib/firebugx.js"></script> - - <script src="../lib/jquery-1.7.min.js"></script> - <script src="../lib/jquery-ui-1.8.16.custom.min.js"></script> - <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.grid.js"></script> - <script src="../slick.dataview.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 TaskNameFormatter = function(row, cell, value, columnDef, dataContext) { - 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) { - if (dataContext._collapsed) - return spacer + " <span class='toggle expand'></span> " + value; - else - return spacer + " <span class='toggle collapse'></span> " + value; - } - else - return spacer + " <span class='toggle'></span> " + value; - }; - - var dataView; - 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} - ]; - - var options = { - editable: true, - enableAddRow: true, - enableCellNavigation: true, - asyncEditorLoading: false - }; - - - var percentCompleteThreshold = 0; - var searchString = ""; - - function myFilter(item) { - if (item["percentComplete"] < percentCompleteThreshold) - return false; - - if (searchString != "" && item["title"].indexOf(searchString) == -1) - return false; - - var idx = dataView.getIdxById(item.id); - - if (item.parent != null) { - var parent = data[item.parent]; - - while (parent) { - if (parent._collapsed || (parent["percentComplete"] < percentCompleteThreshold) || (searchString != "" && parent["title"].indexOf(searchString) == -1) ) - return false; - - parent = data[parent.parent]; - } - } - - return true; - } - - function percentCompleteSort(a,b) { - return a["percentComplete"] - b["percentComplete"]; - } - - $(function() - { - var indent = 0; - var parents = []; - - // prepare the data - for (var i=0; i<1000; i++) { - var d = (data[i] = {}); - var parent = null; - - if (Math.random() > 0.8) { - indent++; - parent = i - 1; - parents.push(parent); - } - else if (Math.random() < 0.3 && indent > 0) { - indent--; - parent = parents.pop(); - } - else if (parents.length > 0) - parent = parents[parents.length-1]; - - if (indent == 0) - parent = null; - - d["id"] = "id_" + i; - d["indent"] = indent; - d["parent"] = parent; - d["title"] = "Task " + i; - 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); - } - - - // initialize the model - dataView = new Slick.Data.DataView(); - dataView.beginUpdate(); - dataView.setItems(data); - dataView.setFilter(myFilter); - dataView.endUpdate(); - - - // initialize the grid - grid = new Slick.Grid("#myGrid", dataView, columns, options); - - grid.onCellChange.subscribe(function(e,args) { - dataView.updateItem(args.item.id,args.item); - }); - - grid.onAddNewRow.subscribe(function(e,args) { - var item = {"id": "new_" + (Math.round(Math.random()*10000)), "indent":0, "title":"New task", "duration":"1 day", "percentComplete":0, "start":"01/01/2009", "finish":"01/01/2009", "effortDriven":false}; - $.extend(item,args.item); - dataView.addItem(item); - }); - - grid.onClick.subscribe(function(e,args) { - if ($(e.target).hasClass("toggle")) { - var item = dataView.getItem(args.row); - if (item) { - if (!item._collapsed) - item._collapsed = true; - else - item._collapsed = false; - - dataView.updateItem(item.id, item); - } - e.stopImmediatePropagation(); - } - }); - - - // wire up model events to drive the grid - dataView.onRowCountChanged.subscribe(function(e,args) { - grid.updateRowCount(); - grid.render(); - }); - - dataView.onRowsChanged.subscribe(function(e,args) { - grid.invalidateRows(args.rows); - grid.render(); - }); - - - var h_runfilters = null; - - // wire up the slider to apply the filter to the model - $("#pcSlider").slider({ - "range": "min", - "slide": function(event,ui) { - Slick.GlobalEditorLock.cancelCurrentEdit(); - - if (percentCompleteThreshold != ui.value) - { - window.clearTimeout(h_runfilters); - h_runfilters = window.setTimeout(dataView.refresh, 10); - percentCompleteThreshold = ui.value; - } - } - }); - - - // wire up the search textbox to apply the filter to the model - $("#txtSearch").keyup(function(e) { - Slick.GlobalEditorLock.cancelCurrentEdit(); - - // clear on Esc - if (e.which == 27) - this.value = ""; - - searchString = this.value; - dataView.refresh(); - }) - }) - </script> - </body> +<head> + <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> + <title>SlickGrid example 5: Collapsing</title> + <link rel="stylesheet" href="../slick.grid.css" type="text/css" /> + <link rel="stylesheet" href="../css/smoothness/jquery-ui-1.8.16.custom.css" type="text/css" /> + <link rel="stylesheet" href="examples.css" type="text/css" /> + <style> + .cell-title { + font-weight: bold; + } + + .cell-effort-driven { + text-align: center; + } + + .toggle { + height: 9px; + width: 9px; + display: inline-block; + } + + .toggle.expand { + background: url(../images/expand.gif) no-repeat center center; + } + + .toggle.collapse { + background: url(../images/collapse.gif) no-repeat center center; + } + + </style> +</head> +<body> +<table width="100%"> + <tr> + <td valign="top" width="50%"> + <div style="border:1px solid gray;background:wheat;padding:6px;"> + <label>Show tasks with % at least: </label> + + <div style="padding:4px;"> + <div style="width:100px;" id="pcSlider"></div> + </div> + <br/> + <label>And title including:</label> + <input type=text id="txtSearch"> + </div> + <br/> + + <div id="myGrid" style="width:600px;height:500px;"></div> + </td> + <td valign="top"> + <h2>Demonstrates:</h2> + <ul> + <li>implementing expand/collapse as a filter for DataView</li> + </ul> + </td> + </tr> +</table> + +<script src="../lib/firebugx.js"></script> + +<script src="../lib/jquery-1.7.min.js"></script> +<script src="../lib/jquery-ui-1.8.16.custom.min.js"></script> +<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.grid.js"></script> +<script src="../slick.dataview.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 TaskNameFormatter = function (row, cell, value, columnDef, dataContext) { + 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) { + if (dataContext._collapsed) { + return spacer + " <span class='toggle expand'></span> " + value; + } + else { + return spacer + " <span class='toggle collapse'></span> " + value; + } + } + else { + return spacer + " <span class='toggle'></span> " + value; + } + }; + + var dataView; + 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} + ]; + + var options = { + editable:true, + enableAddRow:true, + enableCellNavigation:true, + asyncEditorLoading:false + }; + + + var percentCompleteThreshold = 0; + var searchString = ""; + + function myFilter(item) { + if (item["percentComplete"] < percentCompleteThreshold) { + return false; + } + + if (searchString != "" && item["title"].indexOf(searchString) == -1) { + return false; + } + + var idx = dataView.getIdxById(item.id); + + if (item.parent != null) { + var parent = data[item.parent]; + + while (parent) { + if (parent._collapsed || (parent["percentComplete"] < percentCompleteThreshold) || (searchString != "" && parent["title"].indexOf(searchString) == -1)) { + return false; + } + + parent = data[parent.parent]; + } + } + + return true; + } + + function percentCompleteSort(a, b) { + return a["percentComplete"] - b["percentComplete"]; + } + + $(function () { + var indent = 0; + var parents = []; + + // prepare the data + for (var i = 0; i < 1000; i++) { + var d = (data[i] = {}); + var parent = null; + + if (Math.random() > 0.8) { + indent++; + parent = i - 1; + parents.push(parent); + } + else if (Math.random() < 0.3 && indent > 0) { + indent--; + parent = parents.pop(); + } + else if (parents.length > 0) { + parent = parents[parents.length - 1]; + } + + if (indent == 0) { + parent = null; + } + + d["id"] = "id_" + i; + d["indent"] = indent; + d["parent"] = parent; + d["title"] = "Task " + i; + 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); + } + + + // initialize the model + dataView = new Slick.Data.DataView(); + dataView.beginUpdate(); + dataView.setItems(data); + dataView.setFilter(myFilter); + dataView.endUpdate(); + + + // initialize the grid + grid = new Slick.Grid("#myGrid", dataView, columns, options); + + grid.onCellChange.subscribe(function (e, args) { + dataView.updateItem(args.item.id, args.item); + }); + + grid.onAddNewRow.subscribe(function (e, args) { + var item = {"id":"new_" + (Math.round(Math.random() * 10000)), "indent":0, "title":"New task", "duration":"1 day", "percentComplete":0, "start":"01/01/2009", "finish":"01/01/2009", "effortDriven":false}; + $.extend(item, args.item); + dataView.addItem(item); + }); + + grid.onClick.subscribe(function (e, args) { + if ($(e.target).hasClass("toggle")) { + var item = dataView.getItem(args.row); + if (item) { + if (!item._collapsed) { + item._collapsed = true; + } + else { + item._collapsed = false; + } + + dataView.updateItem(item.id, item); + } + e.stopImmediatePropagation(); + } + }); + + + // wire up model events to drive the grid + dataView.onRowCountChanged.subscribe(function (e, args) { + grid.updateRowCount(); + grid.render(); + }); + + dataView.onRowsChanged.subscribe(function (e, args) { + grid.invalidateRows(args.rows); + grid.render(); + }); + + + var h_runfilters = null; + + // wire up the slider to apply the filter to the model + $("#pcSlider").slider({ + "range":"min", + "slide":function (event, ui) { + Slick.GlobalEditorLock.cancelCurrentEdit(); + + if (percentCompleteThreshold != ui.value) { + window.clearTimeout(h_runfilters); + h_runfilters = window.setTimeout(dataView.refresh, 10); + percentCompleteThreshold = ui.value; + } + } + }); + + + // wire up the search textbox to apply the filter to the model + $("#txtSearch").keyup(function (e) { + Slick.GlobalEditorLock.cancelCurrentEdit(); + + // clear on Esc + if (e.which == 27) { + this.value = ""; + } + + searchString = this.value; + dataView.refresh(); + }) + }) +</script> +</body> </html> diff --git a/examples/example6-ajax-loading.html b/examples/example6-ajax-loading.html index a2c9624..978ca7e 100644 --- a/examples/example6-ajax-loading.html +++ b/examples/example6-ajax-loading.html @@ -1,156 +1,154 @@ <!DOCTYPE HTML> <html> - <head> - <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> - <title>SlickGrid example 6: AJAX Load</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.16.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-story { - white-space: normal!important; - line-height: 19px!important; - } - - .loading-indicator { - display: inline-block; - padding: 12px; - background: white; - -opacity: 0.5; - color: black; - font-weight: bold; - z-index: 9999; - border: 1px solid red; - -moz-border-radius: 10px; - -webkit-border-radius: 10px; - -moz-box-shadow: 0 0 5px red; - -webkit-box-shadow: 0px 0px 5px red; - -text-shadow: 1px 1px 1px white; - } - - .loading-indicator label { - padding-left: 20px; - background: url('../images/ajax-loader-small.gif') no-repeat center left; - } - </style> - </head> - <body> - <div style="width:700px;float:left;"> - <div class="grid-header" style="width:100%"> - <label>Digg stories</label> +<head> + <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> + <title>SlickGrid example 6: AJAX Load</title> + <link rel="stylesheet" href="../slick.grid.css" type="text/css" /> + <link rel="stylesheet" href="../css/smoothness/jquery-ui-1.8.16.custom.css" type="text/css" /> + <link rel="stylesheet" href="examples.css" type="text/css" /> + <style> + .cell-story { + white-space: normal !important; + line-height: 19px !important; + } + + .loading-indicator { + display: inline-block; + padding: 12px; + background: white; + -opacity: 0.5; + color: black; + font-weight: bold; + z-index: 9999; + border: 1px solid red; + -moz-border-radius: 10px; + -webkit-border-radius: 10px; + -moz-box-shadow: 0 0 5px red; + -webkit-box-shadow: 0px 0px 5px red; + -text-shadow: 1px 1px 1px white; + } + + .loading-indicator label { + padding-left: 20px; + background: url('../images/ajax-loader-small.gif') no-repeat center left; + } + </style> +</head> +<body> +<div style="width:700px;float:left;"> + <div class="grid-header" style="width:100%"> + <label>Digg stories</label> <span style="float:right;display:inline-block;"> Search: <input type="text" id="txtSearch" value="apple"> </span> - </div> - <div id="myGrid" style="width:100%;height:600px;"></div> - <div id="pager" style="width:100%;height:20px;"></div> - </div> - <div style="margin-left:750px;margin-top:40px;;"> - <h2>Demonstrates:</h2> - <ul> - <li>loading data through AJAX</li> - <li>custom row height</li> - </ul> - - <h2>WARNING:</h2> - <ul> - <li>Digg API uses request rate limiting. You may occasionally get an error if you do a frequent scrolling/resorting/searching.</li> - </ul> - </div> - - <script src="../lib/firebugx.js"></script> - - <script src="../lib/jquery-1.7.min.js"></script> - <script src="../lib/jquery-ui-1.8.16.custom.min.js"></script> - <script src="../lib/jquery.event.drag-2.0.min.js"></script> - <script src="../lib/jquery.jsonp-1.1.0.min.js"></script> - - <script src="../slick.core.js"></script> - <script src="../slick.remotemodel.js"></script> - <script src="../slick.grid.js"></script> - - <script> - var grid; - var data = []; - var loader = new Slick.Data.RemoteModel(); - - var storyTitleFormatter = function(row, cell, value, columnDef, dataContext) { - return "<b><a href='" + dataContext["link"] + "' target=_blank>" + dataContext["title"] + "</a></b><br/>" + dataContext["description"]; - }; - - - var columns = [ - {id:"num", name:"#", field:"index", width:40}, - {id:"story", name:"Story", width:580, formatter:storyTitleFormatter, cssClass:"cell-story"}, - {id:"diggs", name:"Diggs", field:"diggs", width:60, sortable:true} - ]; - - var options = { - rowHeight: 64, - editable: false, - enableAddRow: false, - enableCellNavigation: false - }; - - var loadingIndicator = null; - - - - $(function() - { - grid = new Slick.Grid("#myGrid", loader.data, columns, options); - - grid.onViewportChanged.subscribe(function(e,args) { - var vp = grid.getViewport(); - loader.ensureData(vp.top, vp.bottom); - }); - - grid.onSort.subscribe(function(e,args) { - loader.setSort(args.sortCol.field, args.sortAsc ? 1 : -1); - var vp = grid.getViewport(); - loader.ensureData(vp.top, vp.bottom); - }); - - loader.onDataLoading.subscribe(function() { - if (!loadingIndicator) - { - loadingIndicator = $("<span class='loading-indicator'><label>Buffering...</label></span>").appendTo(document.body); - var $g = $("#myGrid"); - - loadingIndicator - .css("position", "absolute") - .css("top", $g.position().top + $g.height()/2 - loadingIndicator.height()/2) - .css("left", $g.position().left + $g.width()/2 - loadingIndicator.width()/2) - } - - loadingIndicator.show(); - }); - - loader.onDataLoaded.subscribe(function(e,args) { - for (var i = args.from; i <= args.to; i++) { - grid.invalidateRow(i); - } - - grid.updateRowCount(); - grid.render(); - - loadingIndicator.fadeOut(); - }); - - $("#txtSearch").keyup(function(e) { - if (e.which == 13) { - loader.setSearch($(this).val()); - var vp = grid.getViewport(); - loader.ensureData(vp.top, vp.bottom); - } - }); - - - - // load the first page - grid.onViewportChanged.notify(); - }) - </script> - </body> + </div> + <div id="myGrid" style="width:100%;height:600px;"></div> + <div id="pager" style="width:100%;height:20px;"></div> +</div> +<div style="margin-left:750px;margin-top:40px;;"> + <h2>Demonstrates:</h2> + <ul> + <li>loading data through AJAX</li> + <li>custom row height</li> + </ul> + + <h2>WARNING:</h2> + <ul> + <li>Digg API uses request rate limiting. You may occasionally get an error if you do a frequent + scrolling/resorting/searching. + </li> + </ul> +</div> + +<script src="../lib/firebugx.js"></script> + +<script src="../lib/jquery-1.7.min.js"></script> +<script src="../lib/jquery-ui-1.8.16.custom.min.js"></script> +<script src="../lib/jquery.event.drag-2.0.min.js"></script> +<script src="../lib/jquery.jsonp-1.1.0.min.js"></script> + +<script src="../slick.core.js"></script> +<script src="../slick.remotemodel.js"></script> +<script src="../slick.grid.js"></script> + +<script> + var grid; + var data = []; + var loader = new Slick.Data.RemoteModel(); + + var storyTitleFormatter = function (row, cell, value, columnDef, dataContext) { + return "<b><a href='" + dataContext["link"] + "' target=_blank>" + dataContext["title"] + "</a></b><br/>" + dataContext["description"]; + }; + + + var columns = [ + {id:"num", name:"#", field:"index", width:40}, + {id:"story", name:"Story", width:580, formatter:storyTitleFormatter, cssClass:"cell-story"}, + {id:"diggs", name:"Diggs", field:"diggs", width:60, sortable:true} + ]; + + var options = { + rowHeight:64, + editable:false, + enableAddRow:false, + enableCellNavigation:false + }; + + var loadingIndicator = null; + + + $(function () { + grid = new Slick.Grid("#myGrid", loader.data, columns, options); + + grid.onViewportChanged.subscribe(function (e, args) { + var vp = grid.getViewport(); + loader.ensureData(vp.top, vp.bottom); + }); + + grid.onSort.subscribe(function (e, args) { + loader.setSort(args.sortCol.field, args.sortAsc ? 1 : -1); + var vp = grid.getViewport(); + loader.ensureData(vp.top, vp.bottom); + }); + + loader.onDataLoading.subscribe(function () { + if (!loadingIndicator) { + loadingIndicator = $("<span class='loading-indicator'><label>Buffering...</label></span>").appendTo(document.body); + var $g = $("#myGrid"); + + loadingIndicator + .css("position", "absolute") + .css("top", $g.position().top + $g.height() / 2 - loadingIndicator.height() / 2) + .css("left", $g.position().left + $g.width() / 2 - loadingIndicator.width() / 2) + } + + loadingIndicator.show(); + }); + + loader.onDataLoaded.subscribe(function (e, args) { + for (var i = args.from; i <= args.to; i++) { + grid.invalidateRow(i); + } + + grid.updateRowCount(); + grid.render(); + + loadingIndicator.fadeOut(); + }); + + $("#txtSearch").keyup(function (e) { + if (e.which == 13) { + loader.setSearch($(this).val()); + var vp = grid.getViewport(); + loader.ensureData(vp.top, vp.bottom); + } + }); + + + // load the first page + grid.onViewportChanged.notify(); + }) +</script> +</body> </html> diff --git a/examples/example7-events.html b/examples/example7-events.html index 4d0b44e..33ccc83 100644 --- a/examples/example7-events.html +++ b/examples/example7-events.html @@ -3,9 +3,9 @@ <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>SlickGrid example 7: Events</title> - <link rel="stylesheet" href="../slick.grid.css" type="text/css" /> - <link rel="stylesheet" href="../css/smoothness/jquery-ui-1.8.16.custom.css" type="text/css" /> - <link rel="stylesheet" href="examples.css" type="text/css" /> + <link rel="stylesheet" href="../slick.grid.css" type="text/css"/> + <link rel="stylesheet" href="../css/smoothness/jquery-ui-1.8.16.custom.css" type="text/css"/> + <link rel="stylesheet" href="examples.css" type="text/css"/> <style> .cell-title { font-weight: bold; @@ -97,10 +97,10 @@ e.preventDefault(); var cell = grid.getCellFromEvent(e); $("#contextMenu") - .data("row", cell.row) - .css("top", e.pageY) - .css("left", e.pageX) - .show(); + .data("row", cell.row) + .css("top", e.pageY) + .css("left", e.pageX) + .show(); $("body").one("click", function () { $("#contextMenu").hide(); @@ -119,8 +119,9 @@ }); $("#contextMenu").click(function (e) { - if (!$(e.target).is("li")) + if (!$(e.target).is("li")) { return; + } var row = $(this).data("row"); data[row].priority = $(e.target).attr("data"); diff --git a/examples/example8-alternative-display.html b/examples/example8-alternative-display.html index 8fe622e..acf0f6b 100644 --- a/examples/example8-alternative-display.html +++ b/examples/example8-alternative-display.html @@ -1,174 +1,176 @@ <!DOCTYPE HTML> <html> - <head> - <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> - <title>SlickGrid example 8: Alternative display</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.16.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> - .slick-cell { - background: white!important; - border-color: transparent!important; - line-height: 19px!important; - } - - /* alternating offsets */ - .slick-row .cell-inner { - margin-right: 60px; - } - - .slick-row[row$="1"] .cell-inner, .slick-row[row$="3"] .cell-inner, .slick-row[row$="5"] .cell-inner, - .slick-row[row$="7"] .cell-inner, .slick-row[row$="9"] .cell-inner { - margin-left: 60px; - margin-right: 0; - } - - .contact-card-cell { - border-color: transparent!important; - } - - .cell-inner { - height: 80px; - margin: 10px; - padding: 10px; - background: #fafafa; - border: 1px solid gray; - -moz-border-radius: 10px; - -webkit-border-radius: 10px; - -moz-box-shadow: 1px 1px 5px silver; - -webkit-box-shadow: 1px 1px 5px silver; - -webkit-transition: all 0.5s; - } - - .cell-inner:hover { - background: #f0f0f0; - } - - .cell-left { - width: 40px; - height: 100%; - float: left; - border-right: 1px dotted gray; - background: url("../images/user_identity.gif") no-repeat top center; - } - - .cell-main { - margin-left: 50px; - } - </style> - </head> - <body> - <table width="100%"> - <tr> - <td valign="top" width="50%"> - <div id="myGrid" style="width:600px;height:500px;"></div> - </td> - <td valign="top"> - <h2>Demonstrates:</h2> - - <ul> - <li>Template-based rendering using John Resig's <a href="http://ejohn.org/blog/javascript-micro-templating/" target=_blank>micro-templates</a> while still using SlickGrid's virtual rendering technology.</li> - </ul> - </td> - </tr> - </table> - - <!-- cell template --> - <script type="text/html" id="cell_template"> - <div class="cell-inner"> - <div class="cell-left"></div> - <div class="cell-main"> - <b><%=name%></b><br/> - <%=title%><br/> - <%=email%><br/> - <%=phone%> - </div> - </div> - </script> - - <script src="../lib/firebugx.js"></script> - - <script src="../lib/jquery-1.7.min.js"></script> - <script src="../lib/jquery.event.drag-2.0.min.js"></script> - - <script src="../slick.core.js"></script> - <script src="../slick.grid.js"></script> - - <script> - // Simple JavaScript Templating - // John Resig - http://ejohn.org/ - MIT Licensed - (function(){ - var cache = {}; - - this.tmpl = function tmpl(str, data){ - // Figure out if we're getting a template, or if we need to - // load the template - and be sure to cache the result. - var fn = !/\W/.test(str) ? - cache[str] = cache[str] || - tmpl(document.getElementById(str).innerHTML) : - - // Generate a reusable function that will serve as a template - // generator (and which will be cached). - new Function("obj", - "var p=[],print=function(){p.push.apply(p,arguments);};" + - - // Introduce the data as local variables using with(){} - "with(obj){p.push('" + - - // Convert the template into pure JavaScript - str - .replace(/[\r\t\n]/g, " ") - .split("<%").join("\t") - .replace(/((^|%>)[^\t]*)'/g, "$1\r") - .replace(/\t=(.*?)%>/g, "',$1,'") - .split("\t").join("');") - .split("%>").join("p.push('") - .split("\r").join("\\'") - + "');}return p.join('');"); - - // Provide some basic currying to the user - return data ? fn( data ) : fn; - }; - })(); - - - var grid; - var data = []; - - var columns = [ - {id:"contact-card", name:"Contacts", formatter:renderCell, width:500, cssClass:"contact-card-cell"} - ]; - - var options = { - rowHeight: 140, - editable: false, - enableAddRow: false, - enableCellNavigation: false, - enableColumnReorder: false - }; - - var compiled_template = tmpl("cell_template"); - - function renderCell(row, cell, value, columnDef, dataContext) { - return compiled_template(dataContext); - } - - $(function() - { - for (var i=0; i<100; i++) { - var d = (data[i] = {}); - - d["name"] = "User " + i; - d["email"] = "test.user@nospam.org"; - d["title"] = "Regional sales manager"; - d["phone"] = "206-000-0000"; - } - - - grid = new Slick.Grid("#myGrid", data, columns, options); - }) - - </script> - </body> +<head> + <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> + <title>SlickGrid example 8: Alternative display</title> + <link rel="stylesheet" href="../slick.grid.css" type="text/css" /> + <link rel="stylesheet" href="../css/smoothness/jquery-ui-1.8.16.custom.css" type="text/css" /> + <link rel="stylesheet" href="examples.css" type="text/css" /> + <style> + .slick-cell { + background: white !important; + border-color: transparent !important; + line-height: 19px !important; + } + + /* alternating offsets */ + .slick-row .cell-inner { + margin-right: 60px; + } + + .slick-row[row$="1"] .cell-inner, .slick-row[row$="3"] .cell-inner, .slick-row[row$="5"] .cell-inner, + .slick-row[row$="7"] .cell-inner, .slick-row[row$="9"] .cell-inner { + margin-left: 60px; + margin-right: 0; + } + + .contact-card-cell { + border-color: transparent !important; + } + + .cell-inner { + height: 80px; + margin: 10px; + padding: 10px; + background: #fafafa; + border: 1px solid gray; + -moz-border-radius: 10px; + -webkit-border-radius: 10px; + -moz-box-shadow: 1px 1px 5px silver; + -webkit-box-shadow: 1px 1px 5px silver; + -webkit-transition: all 0.5s; + } + + .cell-inner:hover { + background: #f0f0f0; + } + + .cell-left { + width: 40px; + height: 100%; + float: left; + border-right: 1px dotted gray; + background: url("../images/user_identity.gif") no-repeat top center; + } + + .cell-main { + margin-left: 50px; + } + </style> +</head> +<body> +<table width="100%"> + <tr> + <td valign="top" width="50%"> + <div id="myGrid" style="width:600px;height:500px;"></div> + </td> + <td valign="top"> + <h2>Demonstrates:</h2> + + <ul> + <li>Template-based rendering using John Resig's <a href="http://ejohn.org/blog/javascript-micro-templating/" + target=_blank>micro-templates</a> while still using + SlickGrid's virtual rendering technology. + </li> + </ul> + </td> + </tr> +</table> + +<!-- cell template --> +<script type="text/html" id="cell_template"> + <div class="cell-inner"> + <div class="cell-left"></div> + <div class="cell-main"> + <b><%=name%></b><br/> + <%=title%><br/> + <%=email%><br/> + <%=phone%> + </div> + </div> +</script> + +<script src="../lib/firebugx.js"></script> + +<script src="../lib/jquery-1.7.min.js"></script> +<script src="../lib/jquery.event.drag-2.0.min.js"></script> + +<script src="../slick.core.js"></script> +<script src="../slick.grid.js"></script> + +<script> + // Simple JavaScript Templating + // John Resig - http://ejohn.org/ - MIT Licensed + (function () { + var cache = {}; + + this.tmpl = function tmpl(str, data) { + // Figure out if we're getting a template, or if we need to + // load the template - and be sure to cache the result. + var fn = !/\W/.test(str) ? + cache[str] = cache[str] || + tmpl(document.getElementById(str).innerHTML) : + + // Generate a reusable function that will serve as a template + // generator (and which will be cached). + new Function("obj", + "var p=[],print=function(){p.push.apply(p,arguments);};" + + + // Introduce the data as local variables using with(){} + "with(obj){p.push('" + + + // Convert the template into pure JavaScript + str + .replace(/[\r\t\n]/g, " ") + .split("<%").join("\t") + .replace(/((^|%>)[^\t]*)'/g, "$1\r") + .replace(/\t=(.*?)%>/g, "',$1,'") + .split("\t").join("');") + .split("%>").join("p.push('") + .split("\r").join("\\'") + + "');}return p.join('');"); + + // Provide some basic currying to the user + return data ? fn(data) : fn; + }; + })(); + + + var grid; + var data = []; + + var columns = [ + {id:"contact-card", name:"Contacts", formatter:renderCell, width:500, cssClass:"contact-card-cell"} + ]; + + var options = { + rowHeight:140, + editable:false, + enableAddRow:false, + enableCellNavigation:false, + enableColumnReorder:false + }; + + var compiled_template = tmpl("cell_template"); + + function renderCell(row, cell, value, columnDef, dataContext) { + return compiled_template(dataContext); + } + + $(function () { + for (var i = 0; i < 100; i++) { + var d = (data[i] = {}); + + d["name"] = "User " + i; + d["email"] = "test.user@nospam.org"; + d["title"] = "Regional sales manager"; + d["phone"] = "206-000-0000"; + } + + + grid = new Slick.Grid("#myGrid", data, columns, options); + }) + +</script> +</body> </html> diff --git a/examples/example9-row-reordering.html b/examples/example9-row-reordering.html index fa3920e..fbfd18a 100644 --- a/examples/example9-row-reordering.html +++ b/examples/example9-row-reordering.html @@ -1,305 +1,314 @@ <!DOCTYPE HTML> <html> - <head> - <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> - <title>SlickGrid example 9: Row reordering</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.16.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 { - zfont-weight: bold; - } - .cell-effort-driven { - text-align: center; - } - .cell-reorder { - cursor: move; - background: url("../images/drag-handle.png") no-repeat center center; - } - - .cell-selection { - border-right-color: silver; - border-right-style: solid; - background: #f5f5f5; - color: gray; - text-align: right; - font-size: 10px; - } - - .slick-row.selected .cell-selection { - background-color: transparent; /* show default selected row background */ - } - - .recycle-bin { - width: 120px; - border: 1px solid gray; - background: beige; - padding: 4px; - font-size: 12pt; - font-weight: bold; - color: black; - text-align: center; - -moz-border-radius: 10px; - } - - .red { - background: red; - } - - .bold { - font-weight: bold; - } - </style> - </head> - <body> - <div style="position:relative"> - <div style="width:600px;"> - <div class="grid-header" style="width:100%"> - <label>Santa's TODO list:</label> - </div> - <div id="myGrid" style="width:100%;height:500px;"></div> - </div> - <div class="options-panel"> - <b>Tips:</b> - <hr/> - <div style="padding:6px;"> - Click to select, Ctrl-click to toggle selection, Shift-click to select a range.<br/> - Drag one or more rows by the handle to reorder.<br/> - Drag one or more rows to the recycle bin to delete. - - <br/> - <br/> - <div id="dropzone" class="recycle-bin"> - Recycle Bin - </div> - </div> - </div> - </div> - - <script src="../lib/firebugx.js"></script> - - <script src="../lib/jquery-1.7.min.js"></script> - <script src="../lib/jquery-ui-1.8.16.custom.min.js"></script> - <script src="../lib/jquery.event.drag-2.0.min.js"></script> - <script src="../lib/jquery.event.drop-2.0.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="../plugins/slick.rowselectionmodel.js"></script> - <script src="../plugins/slick.rowmovemanager.js"></script> - <script src="../slick.editors.js"></script> - <script src="../slick.grid.js"></script> - - <script> - var grid; - var data = []; - - var columns = [ - { - id: "#", - name: "", - width: 40, - behavior: "selectAndMove", - selectable: false, - resizable: false, - cssClass: "cell-reorder dnd" - }, - { - id: "name", - name: "Name", - field: "name", - width: 500, - cssClass: "cell-title", - editor: TextCellEditor, - validator: requiredFieldValidator - }, - { - id: "complete", - name: "Complete", - width: 60, - cssClass: "cell-effort-driven", - field: "complete", - cannotTriggerInsert: true, - formatter: BoolCellFormatter, - editor: YesNoCheckboxCellEditor +<head> + <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> + <title>SlickGrid example 9: Row reordering</title> + <link rel="stylesheet" href="../slick.grid.css" type="text/css" /> + <link rel="stylesheet" href="../css/smoothness/jquery-ui-1.8.16.custom.css" type="text/css" /> + <link rel="stylesheet" href="examples.css" type="text/css" /> + <style> + .cell-title { + zfont-weight: bold; + } + + .cell-effort-driven { + text-align: center; + } + + .cell-reorder { + cursor: move; + background: url("../images/drag-handle.png") no-repeat center center; + } + + .cell-selection { + border-right-color: silver; + border-right-style: solid; + background: #f5f5f5; + color: gray; + text-align: right; + font-size: 10px; + } + + .slick-row.selected .cell-selection { + background-color: transparent; /* show default selected row background */ + } + + .recycle-bin { + width: 120px; + border: 1px solid gray; + background: beige; + padding: 4px; + font-size: 12pt; + font-weight: bold; + color: black; + text-align: center; + -moz-border-radius: 10px; + } + + .red { + background: red; + } + + .bold { + font-weight: bold; + } + </style> +</head> +<body> +<div style="position:relative"> + <div style="width:600px;"> + <div class="grid-header" style="width:100%"> + <label>Santa's TODO list:</label> + </div> + <div id="myGrid" style="width:100%;height:500px;"></div> + </div> + <div class="options-panel"> + <b>Tips:</b> + <hr/> + <div style="padding:6px;"> + Click to select, Ctrl-click to toggle selection, Shift-click to select a range.<br/> + Drag one or more rows by the handle to reorder.<br/> + Drag one or more rows to the recycle bin to delete. + + <br/> + <br/> + + <div id="dropzone" class="recycle-bin"> + Recycle Bin + </div> + </div> + </div> +</div> + +<script src="../lib/firebugx.js"></script> + +<script src="../lib/jquery-1.7.min.js"></script> +<script src="../lib/jquery-ui-1.8.16.custom.min.js"></script> +<script src="../lib/jquery.event.drag-2.0.min.js"></script> +<script src="../lib/jquery.event.drop-2.0.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="../plugins/slick.rowselectionmodel.js"></script> +<script src="../plugins/slick.rowmovemanager.js"></script> +<script src="../slick.editors.js"></script> +<script src="../slick.grid.js"></script> + +<script> +var grid; +var data = []; + +var columns = [ + { + id:"#", + name:"", + width:40, + behavior:"selectAndMove", + selectable:false, + resizable:false, + cssClass:"cell-reorder dnd" + }, + { + id:"name", + name:"Name", + field:"name", + width:500, + cssClass:"cell-title", + editor:TextCellEditor, + validator:requiredFieldValidator + }, + { + id:"complete", + name:"Complete", + width:60, + cssClass:"cell-effort-driven", + field:"complete", + cannotTriggerInsert:true, + formatter:BoolCellFormatter, + editor:YesNoCheckboxCellEditor + } +]; + +var options = { + editable:true, + enableAddRow:true, + enableRowReordering:true, + enableCellNavigation:true, + forceFitColumns:true, + autoEdit:false +}; + +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}; + } +} + +$(function () { + data = [ + { name:"Make a list", complete:true}, + { name:"Check it twice", complete:false}, + { name:"Find out who's naughty", complete:false}, + { name:"Find out who's nice", complete:false} + ]; + + grid = new Slick.Grid("#myGrid", data, columns, options); + + grid.setSelectionModel(new Slick.RowSelectionModel()); + + var moveRowsPlugin = new Slick.RowMoveManager(); + + moveRowsPlugin.onBeforeMoveRows.subscribe(function (e, data) { + for (var i = 0; i < data.rows.length; i++) { + // no point in moving before or after itself + if (data.rows[i] == data.insertBefore || data.rows[i] == data.insertBefore - 1) { + e.stopPropagation(); + return false; + } + } + + return true; + }); + + moveRowsPlugin.onMoveRows.subscribe(function (e, args) { + var extractedRows = [], left, right; + var rows = args.rows; + var insertBefore = args.insertBefore; + left = data.slice(0, insertBefore); + right = data.slice(insertBefore, data.length); + + for (var i = 0; i < rows.length; i++) { + extractedRows.push(data[rows[i]]); + } + + rows.sort().reverse(); + + for (var i = 0; i < rows.length; i++) { + var row = rows[i]; + if (row < insertBefore) { + left.splice(row, 1); + } + else { + right.splice(row - insertBefore, 1); + } + } + + data = left.concat(extractedRows.concat(right)); + + var selectedRows = []; + for (var i = 0; i < rows.length; i++) + selectedRows.push(left.length + i); + + grid.resetActiveCell(); + grid.setData(data); + grid.setSelectedRows(selectedRows); + grid.render(); + }); + + grid.registerPlugin(moveRowsPlugin); + + grid.onDragInit.subscribe(function (e, dd) { + // prevent the grid from cancelling drag'n'drop by default + e.stopImmediatePropagation(); + }); + + grid.onDragStart.subscribe(function (e, dd) { + var cell = grid.getCellFromEvent(e); + if (!cell) { + return; + } + + dd.row = cell.row; + if (!data[dd.row]) { + return; + } + + if (Slick.GlobalEditorLock.isActive()) { + return; + } + + e.stopImmediatePropagation(); + dd.mode = "recycle"; + + var selectedRows = grid.getSelectedRows(); + + if (!selectedRows.length || $.inArray(dd.row, selectedRows) == -1) { + selectedRows = [dd.row]; + grid.setSelectedRows(selectedRows); + } + + dd.rows = selectedRows; + dd.count = selectedRows.length; + + var proxy = $("<span></span>") + .css({ + position:"absolute", + display:"inline-block", + padding:"4px 10px", + background:"#e0e0e0", + border:"1px solid gray", + "z-index":99999, + "-moz-border-radius":"8px", + "-moz-box-shadow":"2px 2px 6px silver" + }) + .text("Drag to Recycle Bin to delete " + dd.count + " selected row(s)") + .appendTo("body"); + + dd.helper = proxy; + + $(dd.available).css("background", "pink"); + + return proxy; + }); + + grid.onDrag.subscribe(function (e, dd) { + if (dd.mode != "recycle") { + return; + } + e.stopImmediatePropagation(); + dd.helper.css({top:e.pageY + 5, left:e.pageX + 5}); + }); + + grid.onDragEnd.subscribe(function (e, dd) { + if (dd.mode != "recycle") { + return; + } + e.stopImmediatePropagation(); + dd.helper.remove(); + $(dd.available).css("background", "beige"); + }); + + + $("#dropzone") + .bind("dropstart", function (e, dd) { + $(this).css("background", "yellow"); + }) + .bind("dropend", function (e, dd) { + $(dd.available).css("background", "pink"); + }) + .bind("drop", function (e, dd) { + var rowsToDelete = dd.rows.sort().reverse(); + for (var i = 0; i < rowsToDelete.length; i++) { + data.splice(rowsToDelete[i], 1); } - ]; - - var options = { - editable: true, - enableAddRow: true, - enableRowReordering: true, - enableCellNavigation: true, - forceFitColumns: true, - autoEdit: false - }; - - 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}; - } - - $(function() - { - data = [ - { name: "Make a list", complete: true}, - { name: "Check it twice", complete: false}, - { name: "Find out who's naughty", complete: false}, - { name: "Find out who's nice", complete: false} - ]; - - grid = new Slick.Grid("#myGrid", data, columns, options); - - grid.setSelectionModel(new Slick.RowSelectionModel()); - - var moveRowsPlugin = new Slick.RowMoveManager(); - - moveRowsPlugin.onBeforeMoveRows.subscribe(function(e,data) { - for (var i = 0; i < data.rows.length; i++) { - // no point in moving before or after itself - if (data.rows[i] == data.insertBefore || data.rows[i] == data.insertBefore - 1) { - e.stopPropagation(); - return false; - } - } - - return true; - }); - - moveRowsPlugin.onMoveRows.subscribe(function(e,args) { - var extractedRows = [], left, right; - var rows = args.rows; - var insertBefore = args.insertBefore; - left = data.slice(0,insertBefore); - right = data.slice(insertBefore,data.length); - - for (var i=0; i<rows.length; i++) { - extractedRows.push(data[rows[i]]); - } - - rows.sort().reverse(); - - for (var i=0; i<rows.length; i++) { - var row = rows[i]; - if (row < insertBefore) - left.splice(row,1); - else - right.splice(row-insertBefore,1); - } - - data = left.concat(extractedRows.concat(right)); - - var selectedRows = []; - for (var i=0; i<rows.length; i++) - selectedRows.push(left.length+i); - - grid.resetActiveCell(); - grid.setData(data); - grid.setSelectedRows(selectedRows); - grid.render(); - }); - - grid.registerPlugin(moveRowsPlugin); - - grid.onDragInit.subscribe(function(e,dd) { - // prevent the grid from cancelling drag'n'drop by default - e.stopImmediatePropagation(); - }); - - grid.onDragStart.subscribe(function(e,dd) { - var cell = grid.getCellFromEvent(e); - if (!cell) - return; - - dd.row = cell.row; - if (!data[dd.row]) - return; - - if (Slick.GlobalEditorLock.isActive()) - return; - - e.stopImmediatePropagation(); - dd.mode = "recycle"; - - var selectedRows = grid.getSelectedRows(); - - if (!selectedRows.length || $.inArray(dd.row,selectedRows) == -1) { - selectedRows = [dd.row]; - grid.setSelectedRows(selectedRows); - } - - dd.rows = selectedRows; - dd.count = selectedRows.length; - - var proxy = $("<span></span>") - .css({ - position: "absolute", - display: "inline-block", - padding: "4px 10px", - background: "#e0e0e0", - border: "1px solid gray", - "z-index": 99999, - "-moz-border-radius": "8px", - "-moz-box-shadow": "2px 2px 6px silver" - }) - .text("Drag to Recycle Bin to delete " + dd.count + " selected row(s)") - .appendTo("body"); - - dd.helper = proxy; - - $(dd.available).css("background","pink"); - - return proxy; - }); - - grid.onDrag.subscribe(function(e,dd) { - if (dd.mode != "recycle") { - return; - } - e.stopImmediatePropagation(); - dd.helper.css({top: e.pageY + 5, left: e.pageX + 5}); - }); - - grid.onDragEnd.subscribe(function(e,dd) { - if (dd.mode != "recycle") { - return; - } - e.stopImmediatePropagation(); - dd.helper.remove(); - $(dd.available).css("background","beige"); - }); - - - $("#dropzone") - .bind("dropstart", function(e,dd) { - $(this).css("background","yellow"); - }) - .bind("dropend", function(e,dd) { - $(dd.available).css("background","pink"); - }) - .bind("drop", function(e,dd) { - var rowsToDelete = dd.rows.sort().reverse(); - for (var i=0; i<rowsToDelete.length; i++) { - data.splice(rowsToDelete[i],1); - } - grid.invalidate(); - grid.setSelectedRows([]); - }); - - - grid.onAddNewRow.subscribe(function(e, args) { - var item = {name:"New task", complete: false}; - $.extend(item, args.item); - data.push(item); - grid.invalidateRows([data.length - 1]); - grid.updateRowCount(); - grid.render(); - }); - }) - </script> - </body> + grid.invalidate(); + grid.setSelectedRows([]); + }); + + + grid.onAddNewRow.subscribe(function (e, args) { + var item = {name:"New task", complete:false}; + $.extend(item, args.item); + data.push(item); + grid.invalidateRows([data.length - 1]); + grid.updateRowCount(); + grid.render(); + }); +}) +</script> +</body> </html> diff --git a/examples/examples.css b/examples/examples.css index 63b63e3..8e7d746 100644 --- a/examples/examples.css +++ b/examples/examples.css @@ -1,239 +1,230 @@ @import url('slick-default-theme.css'); * { - font-family: arial; - font-size: 8pt; + font-family: arial; + font-size: 8pt; } body { - background: beige; - padding: 0; - margin: 8; + background: beige; + padding: 0; + margin: 8; } h2 { - font-size: 10pt; - border-bottom: 1px dotted gray; + font-size: 10pt; + border-bottom: 1px dotted gray; } ul { - margin-left: 0; - padding: 0; - cursor: default; + margin-left: 0; + padding: 0; + cursor: default; } li { - background: url("../images/arrow_right_spearmint.png") no-repeat center left; - padding: 0 0 0 14px; + background: url("../images/arrow_right_spearmint.png") no-repeat center left; + padding: 0 0 0 14px; - list-style: none; - margin: 0; -} + list-style: none; + margin: 0; +} #myGrid { - background: white; - outline: 0; - border: 1px solid gray; + background: white; + outline: 0; + border: 1px solid gray; } .grid-header { - border: 1px solid gray; - border-bottom: 0; - border-top: 0; - background: url('../images/header-bg.gif') repeat-x center top; - color: black; - height: 24px; - line-height: 24px; -} + border: 1px solid gray; + border-bottom: 0; + border-top: 0; + background: url('../images/header-bg.gif') repeat-x center top; + color: black; + height: 24px; + line-height: 24px; +} .grid-header label { - display: inline-block; - font-weight: bold; - margin: auto auto auto 6px; + display: inline-block; + font-weight: bold; + margin: auto auto auto 6px; } .grid-header .ui-icon { - margin: 4px 4px auto 6px; - background-color: transparent; - border-color: transparent; + margin: 4px 4px auto 6px; + background-color: transparent; + border-color: transparent; } .grid-header .ui-icon.ui-state-hover { - background-color: white; + background-color: white; } .grid-header #txtSearch { - margin: 0 4px 0 4px; - padding: 2px 2px; - -moz-border-radius: 2px; - -webkit-border-radius: 2px; - border: 1px solid silver; + margin: 0 4px 0 4px; + padding: 2px 2px; + -moz-border-radius: 2px; + -webkit-border-radius: 2px; + border: 1px solid silver; } .options-panel { - -moz-border-radius: 6px; - -webkit-border-radius: 6px; - border: 1px solid silver; - background: #f0f0f0; - padding: 4px; - margin-bottom: 20px; - width:320px; - position:absolute; - top:0px; - left:650px; + -moz-border-radius: 6px; + -webkit-border-radius: 6px; + border: 1px solid silver; + background: #f0f0f0; + padding: 4px; + margin-bottom: 20px; + width: 320px; + position: absolute; + top: 0px; + left: 650px; } - - /* Individual cell styles */ .slick-cell.task-name { - font-weight: bold; - text-align: right; + font-weight: bold; + text-align: right; } - .slick-cell.task-percent { - text-align: right; + text-align: right; } - .slick-cell.cell-move-handle { - font-weight: bold; - text-align: right; - border-right: solid gray; + font-weight: bold; + text-align: right; + border-right: solid gray; - background: #efefef; - cursor: move; + background: #efefef; + cursor: move; } .cell-move-handle:hover { - background: #b6b9bd; + background: #b6b9bd; } .slick-row.selected .cell-move-handle { - background: #D5DC8D; + background: #D5DC8D; } .slick-row .cell-actions { - text-align: left; + text-align: left; } .slick-row.complete { - background-color: #DFD; - color: #555; + background-color: #DFD; + color: #555; } .percent-complete-bar { - display: inline-block; - height: 6px; - -moz-border-radius: 3px; - -webkit-border-radius: 3px; + display: inline-block; + height: 6px; + -moz-border-radius: 3px; + -webkit-border-radius: 3px; } - /* TextCellEditor, DateCellEditor */ input.editor-text { - width: 100%; - height: 100%; - border: 0; - margin: 0; - background: transparent; - outline: 0; - padding: 0; + width: 100%; + height: 100%; + border: 0; + margin: 0; + background: transparent; + outline: 0; + padding: 0; } .ui-datepicker-trigger { - margin-top: 2px; - padding: 0; - vertical-align: top; + margin-top: 2px; + padding: 0; + vertical-align: top; } /* PercentCompleteCellEditor */ input.editor-percentcomplete { - width: 100%; - height: 100%; - border: 0; - margin: 0; - background: transparent; - outline: 0; - padding: 0; + width: 100%; + height: 100%; + border: 0; + margin: 0; + background: transparent; + outline: 0; + padding: 0; - float: left; + float: left; } .editor-percentcomplete-picker { - position: relative; - display: inline-block; - width: 16px; - height: 100%; - background: url("../images/pencil.gif") no-repeat center center; - overflow: visible; - z-index: 1000; - float: right; -} - + position: relative; + display: inline-block; + width: 16px; + height: 100%; + background: url("../images/pencil.gif") no-repeat center center; + overflow: visible; + z-index: 1000; + float: right; +} + .editor-percentcomplete-helper { - border: 0 solid gray; - position: absolute; - top: -2px; - left: -9px; - background: url("../images/editor-helper-bg.gif") no-repeat top left; - padding-left: 9px; + border: 0 solid gray; + position: absolute; + top: -2px; + left: -9px; + background: url("../images/editor-helper-bg.gif") no-repeat top left; + padding-left: 9px; - width: 120px; - height: 140px; - display: none; - overflow: visible; + width: 120px; + height: 140px; + display: none; + overflow: visible; } - .editor-percentcomplete-wrapper { - background:beige; - padding: 20px 8px; + background: beige; + padding: 20px 8px; - width:100%; - height:98px; - border:1px solid gray; - border-left:0; + width: 100%; + height: 98px; + border: 1px solid gray; + border-left: 0; } .editor-percentcomplete-buttons { - float: right; + float: right; } .editor-percentcomplete-buttons button { - width: 80px; + width: 80px; } - .editor-percentcomplete-slider { - float: left; + float: left; } - .editor-percentcomplete-picker:hover .editor-percentcomplete-helper { - display: block; +.editor-percentcomplete-picker:hover .editor-percentcomplete-helper { + display: block; } .editor-percentcomplete-helper:hover { - display: block; + display: block; } - - /* YesNoSelectCellEditor */ select.editor-yesno { - width: 100%; - margin: 0; - vertical-align: middle; + width: 100%; + margin: 0; + vertical-align: middle; } /* YesNoCheckboxCellEditor */ input.editor-checkbox { - margin: 0; - height: 100%; - padding: 0; - border: 0; + margin: 0; + height: 100%; + padding: 0; + border: 0; } diff --git a/examples/slick-default-theme.css b/examples/slick-default-theme.css index 5c96b9f..c1f3f2d 100644 --- a/examples/slick-default-theme.css +++ b/examples/slick-default-theme.css @@ -6,100 +6,99 @@ classes should alter those! */ .slick-header-columns { - background: url('../images/header-columns-bg.gif') repeat-x center bottom; - border-bottom: 1px solid silver; + background: url('../images/header-columns-bg.gif') repeat-x center bottom; + border-bottom: 1px solid silver; } .slick-header-column { - background: url('../images/header-columns-bg.gif') repeat-x center bottom; - border-right: 1px solid silver; + background: url('../images/header-columns-bg.gif') repeat-x center bottom; + border-right: 1px solid silver; } .slick-header-column:hover, .slick-header-column-active { - background: white url('../images/header-columns-over-bg.gif') repeat-x center bottom; + background: white url('../images/header-columns-over-bg.gif') repeat-x center bottom; } .slick-headerrow { - background: #fafafa; + background: #fafafa; } .slick-headerrow-column { - background: #fafafa; - border-bottom: 0; - height: 100%; + background: #fafafa; + border-bottom: 0; + height: 100%; } .slick-row.ui-state-active { - background: #F5F7D7; + background: #F5F7D7; } .slick-row { - position: absolute; - background: white; - border: 0px; - line-height: 20px; + position: absolute; + background: white; + border: 0px; + line-height: 20px; } .slick-row.selected { - z-index: 10; - background: #DFE8F6; + z-index: 10; + background: #DFE8F6; } .slick-cell { - padding-left: 4px; - padding-right: 4px; + padding-left: 4px; + padding-right: 4px; } .slick-group { - border-bottom: 2px solid silver; + border-bottom: 2px solid silver; } .slick-group-toggle { - width: 9px; - height: 9px; - margin-right: 5px; + width: 9px; + height: 9px; + margin-right: 5px; } .slick-group-toggle.expanded { - background: url(../images/collapse.gif) no-repeat center center; + background: url(../images/collapse.gif) no-repeat center center; } .slick-group-toggle.collapsed { - background: url(../images/expand.gif) no-repeat center center; + background: url(../images/expand.gif) no-repeat center center; } .slick-group-totals { - color: gray; - background: white; + color: gray; + background: white; } .slick-cell.selected { - background-color: beige; + background-color: beige; } .slick-cell.active { - border-color: gray; - border-style: solid; + border-color: gray; + border-style: solid; } - .slick-sortable-placeholder { - background: silver!important; + background: silver !important; } -.slick-row[row$="1"], .slick-row[row$="3"], .slick-row[row$="5"], .slick-row[row$="7"], .slick-row[row$="9"] { - background: #fafafa; +.slick-row[row$="1"], .slick-row[row$="3"], .slick-row[row$="5"], .slick-row[row$="7"], .slick-row[row$="9"] { + background: #fafafa; } .slick-row.ui-state-active { - background: #F5F7D7; + background: #F5F7D7; } .slick-row.loading { - opacity: 0.5; - filter: alpha(opacity=50); + opacity: 0.5; + filter: alpha(opacity = 50); } .slick-cell.invalid { - border-color: red; + border-color: red; }
\ No newline at end of file diff --git a/examples/slick.compositeeditor.js b/examples/slick.compositeeditor.js index 9dbbc41..9854672 100644 --- a/examples/slick.compositeeditor.js +++ b/examples/slick.compositeeditor.js @@ -1,213 +1,211 @@ -;(function($) { +; +(function ($) { + $.extend(true, window, { + Slick:{ + CompositeEditor:CompositeEditor + } + }); + + + /*** + * A composite SlickGrid editor factory. + * Generates an editor that is composed of multiple editors for given columns. + * Individual editors are provided given containers instead of the original cell. + * Validation will be performed on all editors individually and the results will be aggregated into one + * validation result. + * + * + * The returned editor will have its prototype set to CompositeEditor, so you can use the "instanceof" check. + * + * NOTE: This doesn't work for detached editors since they will be created and positioned relative to the + * active cell and not the provided container. + * + * @namespace Slick + * @class CompositeEditor + * @constructor + * @param columns {Array} Column definitions from which editors will be pulled. + * @param containers {Array} Container HTMLElements in which editors will be placed. + * @param options {Object} Options hash: + * validationFailedMsg - A generic failed validation message set on the aggregated validation resuls. + * hide - A function to be called when the grid asks the editor to hide itself. + * show - A function to be called when the grid asks the editor to show itself. + * position - A function to be called when the grid asks the editor to reposition itself. + * destroy - A function to be called when the editor is destroyed. + */ + function CompositeEditor(columns, containers, options) { + var defaultOptions = { + validationFailedMsg:"Some of the fields have failed validation", + show:null, + hide:null, + position:null, + destroy:null + }; + + var noop = function () { + }; + + var firstInvalidEditor; + + options = $.extend({}, defaultOptions, options); + + + function getContainerBox(i) { + var c = containers[i]; + var offset = $(c).offset(); + var w = $(c).width(); + var h = $(c).height(); + + return { + top:offset.top, + left:offset.left, + bottom:offset.top + h, + right:offset.left + w, + width:w, + height:h, + visible:true + }; + } + + + function editor(args) { + var editors = []; + + + function init() { + var newArgs = {}; + var idx = columns.length; + while (idx--) { + if (columns[idx].editor) { + newArgs = $.extend({}, args); + newArgs.container = containers[idx]; + newArgs.column = columns[idx]; + newArgs.position = getContainerBox(idx); + newArgs.commitChanges = noop; + newArgs.cancelChanges = noop; + + editors[idx] = new (columns[idx].editor)(newArgs); + } + } + } + - $.extend(true, window, { - Slick: { - CompositeEditor: CompositeEditor + this.destroy = function () { + var idx = editors.length; + while (idx--) { + editors[idx].destroy(); } - }); - - - /*** - * A composite SlickGrid editor factory. - * Generates an editor that is composed of multiple editors for given columns. - * Individual editors are provided given containers instead of the original cell. - * Validation will be performed on all editors individually and the results will be aggregated into one - * validation result. - * - * - * The returned editor will have its prototype set to CompositeEditor, so you can use the "instanceof" check. - * - * NOTE: This doesn't work for detached editors since they will be created and positioned relative to the - * active cell and not the provided container. - * - * @namespace Slick - * @class CompositeEditor - * @constructor - * @param columns {Array} Column definitions from which editors will be pulled. - * @param containers {Array} Container HTMLElements in which editors will be placed. - * @param options {Object} Options hash: - * validationFailedMsg - A generic failed validation message set on the aggregated validation resuls. - * hide - A function to be called when the grid asks the editor to hide itself. - * show - A function to be called when the grid asks the editor to show itself. - * position - A function to be called when the grid asks the editor to reposition itself. - * destroy - A function to be called when the editor is destroyed. - */ - function CompositeEditor(columns, containers, options) { - var defaultOptions = { - validationFailedMsg: "Some of the fields have failed validation", - show: null, - hide: null, - position: null, - destroy: null - }; - - var noop = function () {}; - - var firstInvalidEditor; - - options = $.extend({}, defaultOptions, options); - - - function getContainerBox(i) { - var c = containers[i]; - var offset = $(c).offset(); - var w = $(c).width(); - var h = $(c).height(); - - return { - top: offset.top, - left: offset.left, - bottom: offset.top + h, - right: offset.left + w, - width: w, - height: h, - visible: true - }; + + options.destroy && options.destroy(); + }; + + + this.focus = function () { + // if validation has failed, set the focus to the first invalid editor + (firstInvalidEditor || editors[0]).focus(); + }; + + + this.isValueChanged = function () { + var idx = editors.length; + while (idx--) { + if (editors[idx].isValueChanged()) { + return true; + } + } + return false; + }; + + + this.serializeValue = function () { + var serializedValue = []; + var idx = editors.length; + while (idx--) { + serializedValue[idx] = editors[idx].serializeValue(); } + return serializedValue; + }; - function editor(args) { - var editors = []; - - - function init() { - var newArgs = {}; - var idx = columns.length; - while (idx--) { - if (columns[idx].editor) { - newArgs = $.extend({}, args); - newArgs.container = containers[idx]; - newArgs.column = columns[idx]; - newArgs.position = getContainerBox(idx); - newArgs.commitChanges = noop; - newArgs.cancelChanges = noop; - - editors[idx] = new (columns[idx].editor)(newArgs); - } - } - } - - - this.destroy = function () { - var idx = editors.length; - while (idx--) { - editors[idx].destroy(); - } - - options.destroy && options.destroy(); - }; - - - this.focus = function () { - // if validation has failed, set the focus to the first invalid editor - (firstInvalidEditor || editors[0]).focus(); - }; - - - this.isValueChanged = function () { - var idx = editors.length; - while (idx--) { - if (editors[idx].isValueChanged()) { - return true; - } - } - return false; - }; - - - this.serializeValue = function () { - var serializedValue = []; - var idx = editors.length; - while (idx--) { - serializedValue[idx] = editors[idx].serializeValue(); - } - return serializedValue; - }; - - - this.applyValue = function (item, state) { - var idx = editors.length; - while (idx--) { - editors[idx].applyValue(item, state[idx]); - } - }; - - - this.loadValue = function (item) { - var idx = editors.length; - while (idx--) { - editors[idx].loadValue(item); - } - }; - - - this.validate = function () { - var validationResults; - var errors = []; - - firstInvalidEditor = null; - - var idx = editors.length; - while (idx--) { - validationResults = editors[idx].validate(); - if (!validationResults.valid) { - firstInvalidEditor = editors[idx]; - errors.push({ - index: idx, - editor: editors[idx], - container: containers[idx], - msg: validationResults.msg - }); - } - } - - if (errors.length) { - return { - valid: false, - msg: options.validationFailedMsg, - errors: errors - }; - } - else { - return { - valid: true, - msg: "" - }; - } - }; - - - this.hide = function () { - var idx = editors.length; - while (idx--) { - editors[idx].hide && editors[idx].hide(); - } - - options.hide && options.hide(); - }; - - - this.show = function () { - var idx = editors.length; - while (idx--) { - editors[idx].show && editors[idx].show(); - } - - options.show && options.show(); - }; - - - this.position = function (box) { - options.position && options.position(box); - }; - - - init(); + this.applyValue = function (item, state) { + var idx = editors.length; + while (idx--) { + editors[idx].applyValue(item, state[idx]); } + }; - // so we can do "editor instanceof Slick.CompositeEditor - editor.prototype = this; - return editor; + this.loadValue = function (item) { + var idx = editors.length; + while (idx--) { + editors[idx].loadValue(item); + } + }; + + + this.validate = function () { + var validationResults; + var errors = []; + + firstInvalidEditor = null; + + var idx = editors.length; + while (idx--) { + validationResults = editors[idx].validate(); + if (!validationResults.valid) { + firstInvalidEditor = editors[idx]; + errors.push({ + index:idx, + editor:editors[idx], + container:containers[idx], + msg:validationResults.msg + }); + } + } + + if (errors.length) { + return { + valid:false, + msg:options.validationFailedMsg, + errors:errors + }; + } else { + return { + valid:true, + msg:"" + }; + } + }; + + + this.hide = function () { + var idx = editors.length; + while (idx--) { + editors[idx].hide && editors[idx].hide(); + } + options.hide && options.hide(); + }; + + + this.show = function () { + var idx = editors.length; + while (idx--) { + editors[idx].show && editors[idx].show(); + } + options.show && options.show(); + }; + + + this.position = function (box) { + options.position && options.position(box); + }; + + + init(); } + + // so we can do "editor instanceof Slick.CompositeEditor + editor.prototype = this; + + return editor; + } })(jQuery);
\ No newline at end of file |