diff options
39 files changed, 1200 insertions, 1252 deletions
diff --git a/examples/example-checkbox-row-select.html b/examples/example-checkbox-row-select.html index e1d0124..142dc44 100644 --- a/examples/example-checkbox-row-select.html +++ b/examples/example-checkbox-row-select.html @@ -2,9 +2,9 @@ <html> <head> <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" /> + <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; @@ -48,10 +48,10 @@ var grid; var data = []; var options = { - editable:true, - enableCellNavigation:true, - asyncEditorLoading:false, - autoEdit:false + editable: true, + enableCellNavigation: true, + asyncEditorLoading: false, + autoEdit: false }; var columns = []; @@ -62,23 +62,23 @@ } var checkboxSelector = new Slick.CheckboxSelectColumn({ - cssClass:"slick-cell-checkboxsel" + cssClass: "slick-cell-checkboxsel" }); 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 + 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.setSelectionModel(new Slick.RowSelectionModel({selectActiveRow: false})); grid.registerPlugin(checkboxSelector); }) </script> diff --git a/examples/example-colspan.html b/examples/example-colspan.html index 4f17f47..c3eb969 100644 --- a/examples/example-colspan.html +++ b/examples/example-colspan.html @@ -1,9 +1,9 @@ <!DOCTYPE HTML> <html> <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" /> + <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%"> @@ -31,49 +31,47 @@ <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"} + {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 + 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) + 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 + "columns": { + "duration": { + "colspan": 3 } } }; - } - else { + } else { return { - "columns":{ - 0:{ - "colspan":"*" + "columns": { + 0: { + "colspan": "*" } } }; diff --git a/examples/example-composite-editor-item-details.html b/examples/example-composite-editor-item-details.html index b27399c..aa1256a 100644 --- a/examples/example-composite-editor-item-details.html +++ b/examples/example-composite-editor-item-details.html @@ -3,9 +3,9 @@ <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" /> + <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; @@ -35,10 +35,6 @@ float: right; } - .item-details-row { - - } - .item-details-label { margin-left: 10px; margin-top: 20px; @@ -112,30 +108,29 @@ <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}; + 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} + {id: "title", name: "Title", field: "title", width: 120, cssClass: "cell-title", editor: TextCellEditor, validator: requiredFieldValidator}, + {id: "desc", name: "Description", field: "description", width: 100, editor: TextCellEditor}, + {id: "duration", name: "Duration", field: "duration", editor: TextCellEditor}, + {id: "percent", name: "% Complete", field: "percentComplete", width: 80, resizable: false, formatter: GraphicalPercentCompleteCellFormatter, editor: PercentCompleteCellEditor}, + {id: "start", name: "Start", field: "start", minWidth: 60, editor: DateCellEditor}, + {id: "finish", name: "Finish", field: "finish", minWidth: 60, editor: DateCellEditor}, + {id: "effort-driven", name: "Effort Driven", width: 80, minWidth: 20, maxWidth: 80, cssClass: "cell-effort-driven", field: "effortDriven", formatter: BoolCellFormatter, editor: YesNoCheckboxCellEditor} ]; var options = { - editable:true, - enableAddRow:true, - enableCellNavigation:true, - asyncEditorLoading:false, - autoEdit:false + editable: true, + enableAddRow: true, + enableCellNavigation: true, + asyncEditorLoading: false, + autoEdit: false }; @@ -147,19 +142,18 @@ var $modal = $("<div class='item-details-form'></div>"); $modal = $("#itemDetailsTemplate") - .tmpl({ - context:grid.getDataItem(grid.getActiveCell().row), - columns:columns - }) - .appendTo("body"); + .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) { + } else if (e.which == $.ui.keyCode.ESCAPE) { grid.getEditController().cancelCurrentEdit(); e.stopPropagation(); e.preventDefault(); @@ -180,13 +174,13 @@ }); var compositeEditor = new Slick.CompositeEditor( - columns, - containers, - { - destroy:function () { - $modal.remove(); - } - } + columns, + containers, + { + destroy: function () { + $modal.remove(); + } + } ); grid.editActiveCell(compositeEditor); @@ -224,7 +218,7 @@ var idx = args.validationResults.errors.length; while (idx--) { err = args.validationResults.errors[idx]; - $(err.container).stop(true, true).effect("highlight", {color:"red"}); + $(err.container).stop(true, true).effect("highlight", {color: "red"}); } } }); diff --git a/examples/example-custom-column-value-extractor.html b/examples/example-custom-column-value-extractor.html index 53f64bd..f7769fb 100644 --- a/examples/example-custom-column-value-extractor.html +++ b/examples/example-custom-column-value-extractor.html @@ -3,9 +3,9 @@ <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" /> + <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%"> @@ -29,20 +29,18 @@ <script src="../slick.grid.js"></script> <script> - 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} + {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 + enableCellNavigation: true, + enableColumnReorder: false, + dataItemColumnValueExtractor: getItemColumnValue }; // Get the item column value using a custom 'fieldIdx' column param @@ -59,8 +57,8 @@ var data = []; for (var i = 0; i < 500; i++) { data[i] = { - name:"Item " + i, - values:[ + name: "Item " + i, + values: [ Math.round(Math.random() * 100), Math.round(Math.random() * 100), Math.round(Math.random() * 100) @@ -70,7 +68,6 @@ grid = new Slick.Grid("#myGrid", data, columns, options); }) - </script> </body> </html> diff --git a/examples/example-grouping.html b/examples/example-grouping.html index 132f6a8..28b685d 100644 --- a/examples/example-grouping.html +++ b/examples/example-grouping.html @@ -3,11 +3,11 @@ <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" /> + <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; @@ -91,20 +91,19 @@ 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} + {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 + enableCellNavigation: true, + editable: true }; var sortcol = "title"; @@ -119,8 +118,7 @@ function avgTotalsFormatter(totals, columnDef) { function myFilter(item, args) { return item["percentComplete"] >= args.percentComplete && - (args.searchString == "" || - item["title"].indexOf(args.searchString) == -1); + (args.searchString == "" || item["title"].indexOf(args.searchString) == -1); } function percentCompleteSort(a, b) { @@ -154,13 +152,13 @@ function clearGrouping() { 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; - } + "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") @@ -169,13 +167,13 @@ function groupByDuration() { 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; - } + "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") @@ -184,13 +182,13 @@ function groupByDurationOrderByCount() { 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; - } + "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") @@ -198,13 +196,13 @@ function groupByDurationOrderByCountGroupCollapsed() { } $(".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") - }); + .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 @@ -223,7 +221,7 @@ $(function () { var groupItemMetadataProvider = new Slick.Data.GroupItemMetadataProvider(); dataView = new Slick.Data.DataView({ - groupItemMetadataProvider:groupItemMetadataProvider + groupItemMetadataProvider: groupItemMetadataProvider }); grid = new Slick.Grid("#myGrid", dataView, columns, options); @@ -247,11 +245,9 @@ $(function () { var val = this["percentComplete"]; if (val < 10) { return "00" + val; - } - else if (val < 100) { + } else if (val < 100) { return "0" + val; - } - else { + } else { return val; } }; @@ -282,8 +278,8 @@ $(function () { // wire up the slider to apply the filter to the model $("#pcSlider,#pcSlider2").slider({ - "range":"min", - "slide":function (event, ui) { + "range": "min", + "slide": function (event, ui) { Slick.GlobalEditorLock.cancelCurrentEdit(); if (percentCompleteThreshold != ui.value) { @@ -315,14 +311,14 @@ $(function () { var renderedRange = grid.getRenderedRange(); dataView.setFilterArgs({ - percentComplete:percentCompleteThreshold, - searchString:searchString + percentComplete: percentCompleteThreshold, + searchString: searchString }); dataView.setRefreshHints({ - ignoreDiffsBefore:renderedRange.top, - ignoreDiffsAfter:renderedRange.bottom + 1, - isFilterNarrowing:isNarrowing, - isFilterExpanding:isExpanding + ignoreDiffsBefore: renderedRange.top, + ignoreDiffsAfter: renderedRange.bottom + 1, + isFilterNarrowing: isNarrowing, + isFilterExpanding: isExpanding }); dataView.refresh(); @@ -334,17 +330,17 @@ $(function () { dataView.setItems(data); dataView.setFilter(myFilter); dataView.setFilterArgs({ - percentComplete:percentCompleteThreshold, - searchString:searchString + 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; - } + "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") @@ -354,8 +350,6 @@ $(function () { $("#gridContainer").resizable(); }) - </script> - </body> </html> diff --git a/examples/example-header-row.html b/examples/example-header-row.html index ba3532a..400a9d7 100644 --- a/examples/example-header-row.html +++ b/examples/example-header-row.html @@ -2,9 +2,9 @@ <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" /> - <link rel="stylesheet" href="../slick.grid.css" type="text/css" /> - <link rel="stylesheet" href="examples.css" type="text/css" /> + <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; @@ -46,18 +46,18 @@ var grid; var data = []; var options = { - enableCellNavigation:true, - showHeaderRow:true + 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 + id: i, + name: String.fromCharCode("A".charCodeAt(0) + i), + field: i, + width: 60 }); } @@ -68,10 +68,10 @@ 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); + .data("columnId", columns[i].id) + .width($(header).width() - 4) + .val(columnFilters[columns[i].id]) + .appendTo(header); } } } @@ -131,7 +131,6 @@ dataView.endUpdate(); updateHeaderRow(); - }) </script> </body> diff --git a/examples/example-optimizing-dataview.html b/examples/example-optimizing-dataview.html index 740781b..b97929f 100644 --- a/examples/example-optimizing-dataview.html +++ b/examples/example-optimizing-dataview.html @@ -3,10 +3,10 @@ <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" /> - <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" /> + <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; @@ -79,26 +79,24 @@ 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} + {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 + editable: false, + enableAddRow: false, + enableCellNavigation: true }; var percentCompleteThreshold = 0; var prevPercentCompleteThreshold = 0; - var searchString = ""; var h_runfilters = null; function myFilter(item, args) { @@ -158,10 +156,10 @@ dataView.setFilterArgs(percentCompleteThreshold); dataView.setRefreshHints({ - ignoreDiffsBefore:renderedRange.top, - ignoreDiffsAfter:renderedRange.bottom + 1, - isFilterNarrowing:isNarrowing, - isFilterExpanding:isExpanding + ignoreDiffsBefore: renderedRange.top, + ignoreDiffsAfter: renderedRange.bottom + 1, + isFilterNarrowing: isNarrowing, + isFilterExpanding: isExpanding }); dataView.refresh(); diff --git a/examples/example-spreadsheet.html b/examples/example-spreadsheet.html index d1054b2..b5194c7 100644 --- a/examples/example-spreadsheet.html +++ b/examples/example-spreadsheet.html @@ -3,9 +3,9 @@ <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" /> + <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; @@ -50,29 +50,29 @@ var grid; var data = []; var options = { - editable:true, - enableAddRow:true, - enableCellNavigation:true, - asyncEditorLoading:false, - autoEdit:false + editable: true, + enableAddRow: true, + enableCellNavigation: true, + asyncEditorLoading: false, + autoEdit: false }; var columns = [ { - id:"selector", - name:"", - field:"num", - width:30 + 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 + id: i, + name: String.fromCharCode("A".charCodeAt(0) + i), + field: i, + width: 60, + editor: FormulaEditor }); } @@ -104,12 +104,12 @@ 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 + _editor.getValue() + + grid.getColumns()[args.range.fromCell].name + + args.range.fromRow + + ":" + + grid.getColumns()[args.range.toCell].name + + args.range.toRow ); }; diff --git a/examples/example1-simple.html b/examples/example1-simple.html index dfa7697..b728db6 100644 --- a/examples/example1-simple.html +++ b/examples/example1-simple.html @@ -3,9 +3,9 @@ <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" /> + <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%"> @@ -29,21 +29,19 @@ <script src="../slick.grid.js"></script> <script> - 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"} + {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 + enableCellNavigation: true, + enableColumnReorder: false }; $(function () { diff --git a/examples/example10-async-post-render.html b/examples/example10-async-post-render.html index 0b275e0..85125d8 100644 --- a/examples/example10-async-post-render.html +++ b/examples/example10-async-post-render.html @@ -3,9 +3,9 @@ <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" /> + <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; @@ -68,10 +68,9 @@ <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}; + return {valid: false, msg: "This is a required field"}; + } else { + return {valid: true, msg: null}; } } @@ -88,29 +87,27 @@ dataContext["n5"] ]; - $(cellNode).empty().sparkline(vals, {width:"100%"}); + $(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} + {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 + editable: true, + enableAddRow: false, + enableCellNavigation: true, + asyncEditorLoading: false, + enableAsyncPostRender: true }; @@ -126,7 +123,6 @@ d["n5"] = Math.round(Math.random() * 10); } - grid = new Slick.Grid("#myGrid", data, columns, options); }) </script> diff --git a/examples/example11-autoheight.html b/examples/example11-autoheight.html index 072bd60..f818ca9 100644 --- a/examples/example11-autoheight.html +++ b/examples/example11-autoheight.html @@ -4,8 +4,8 @@ <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" /> + <link rel="stylesheet" href="../slick.grid.css" type="text/css"/> + <link rel="stylesheet" href="examples.css" type="text/css"/> <style> html, body { margin: 0; @@ -50,35 +50,34 @@ <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 - }; + 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) + 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 464cda6..c17496c 100644 --- a/examples/example12-fillbrowser.html +++ b/examples/example12-fillbrowser.html @@ -4,8 +4,8 @@ <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" /> + <link rel="stylesheet" href="../slick.grid.css" type="text/css"/> + <link rel="stylesheet" href="examples.css" type="text/css"/> <style> html, body { margin: 0; @@ -59,55 +59,54 @@ <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 - }; + 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 + 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 bf693f8..6825021 100644 --- a/examples/example13-getItem-sorting.html +++ b/examples/example13-getItem-sorting.html @@ -4,8 +4,8 @@ <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" /> + <link rel="stylesheet" href="../slick.grid.css" type="text/css"/> + <link rel="stylesheet" href="examples.css" type="text/css"/> <style> html, body { margin: 0; @@ -58,23 +58,21 @@ <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; - + 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; + // Copies and shuffles the specified array and returns a new shuffled array. 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); @@ -91,10 +89,10 @@ for (i = numberOfItems; i-- > 0;) { items[i] = i; data[i] = { - title:"Task ".concat(i + 1) + title: "Task ".concat(i + 1) }; } - indices = { title:items, c1:randomize(items), c2:randomize(items), c3:randomize(items) }; + indices = { title: items, c1: randomize(items), c2: randomize(items), c3: randomize(items) }; // Assign values to the data. for (i = numberOfItems; i-- > 0;) { @@ -111,7 +109,7 @@ return data.length; } - grid = new Slick.Grid("#container", {getLength:getLength, getItem:getItem}, columns, options); + grid = new Slick.Grid("#container", {getLength: getLength, getItem: getItem}, columns, options); grid.onSort.subscribe(function (e, args) { currentSortCol = args.sortCol; isAsc = args.sortAsc; @@ -119,6 +117,5 @@ grid.render(); }); </script> - </body> </html>
\ No newline at end of file diff --git a/examples/example14-highlighting.html b/examples/example14-highlighting.html index 928feae..fbba47b 100644 --- a/examples/example14-highlighting.html +++ b/examples/example14-highlighting.html @@ -3,9 +3,9 @@ <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" /> + <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; @@ -66,7 +66,7 @@ var grid; var data = []; var columns = [ - {id:"server", name:"Server", field:"server", width:180} + {id: "server", name: "Server", field: "server", width: 180} ]; var currentServer; @@ -84,20 +84,20 @@ for (var i = 0; i < 4; i++) { columns.push({ - id:"cpu" + i, - name:"CPU" + i, - field:i, - width:80, - formatter:cpuUtilizationFormatter + 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" + editable: false, + enableAddRow: false, + enableCellNavigation: true, + cellHighlightCssClass: "changed", + cellFlashingCssClass: "current-server" }; @@ -149,8 +149,6 @@ 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 e260535..0cc8d81 100644 --- a/examples/example2-formatters.html +++ b/examples/example2-formatters.html @@ -3,9 +3,9 @@ <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" /> + <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; @@ -46,18 +46,18 @@ 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} + {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 options = { - editable:false, - enableAddRow:false, - enableCellNavigation:true + editable: false, + enableAddRow: false, + enableCellNavigation: true }; $(function () { diff --git a/examples/example3-editing.html b/examples/example3-editing.html index d0c79f6..aeb0ec2 100644 --- a/examples/example3-editing.html +++ b/examples/example3-editing.html @@ -3,9 +3,9 @@ <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" /> + <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; @@ -51,29 +51,29 @@ <script> function requiredFieldValidator(value) { if (value == null || value == undefined || !value.length) { - return {valid:false, msg:"This is a required field"}; + return {valid: false, msg: "This is a required field"}; } else { - return {valid:true, msg:null}; + 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} + {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 + editable: true, + enableAddRow: true, + enableCellNavigation: true, + asyncEditorLoading: false, + autoEdit: false }; $(function () { diff --git a/examples/example3a-compound-editors.html b/examples/example3a-compound-editors.html index c5bcfbe..6c806a0 100644 --- a/examples/example3a-compound-editors.html +++ b/examples/example3a-compound-editors.html @@ -3,9 +3,9 @@ <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" /> + <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; @@ -42,17 +42,16 @@ <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} + {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 + editable: true, + enableAddRow: false, + enableCellNavigation: true, + asyncEditorLoading: false }; function NumericRangeFormatter(row, cell, value, columnDef, dataContext) { @@ -65,14 +64,14 @@ this.init = function () { $from = $("<INPUT type=text style='width:40px' />") - .appendTo(args.container) - .bind("keydown", scope.handleKeyDown); + .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); + .appendTo(args.container) + .bind("keydown", scope.handleKeyDown); scope.focus(); }; @@ -92,7 +91,7 @@ }; this.serializeValue = function () { - return {from:parseInt($from.val(), 10), to:parseInt($to.val(), 10)}; + return {from: parseInt($from.val(), 10), to: parseInt($to.val(), 10)}; }; this.applyValue = function (item, state) { @@ -111,14 +110,14 @@ this.validate = function () { if (isNaN(parseInt($from.val(), 10)) || isNaN(parseInt($to.val(), 10))) { - return {valid:false, msg:"Please type in valid numbers."}; + 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: false, msg: "'from' cannot be greater than 'to'"}; } - return {valid:true, msg:null}; + return {valid: true, msg: null}; }; this.init(); diff --git a/examples/example3b-editing-with-undo.html b/examples/example3b-editing-with-undo.html index 1301145..1463198 100644 --- a/examples/example3b-editing-with-undo.html +++ b/examples/example3b-editing-with-undo.html @@ -3,9 +3,9 @@ <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" /> + <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; @@ -46,33 +46,31 @@ <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}; + 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} + {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 + editable: true, + enableAddRow: false, + enableCellNavigation: true, + asyncEditorLoading: false, + autoEdit: false, + editCommandHandler: queueAndExecuteCommand }; var commandQueue = []; diff --git a/examples/example4-model.html b/examples/example4-model.html index d717fad..5cffe2b 100644 --- a/examples/example4-model.html +++ b/examples/example4-model.html @@ -3,11 +3,11 @@ <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" /> + <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; @@ -108,22 +108,22 @@ 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} + {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 + editable: true, + enableAddRow: true, + enableCellNavigation: true, + asyncEditorLoading: true, + forceFitColumns: false, + topPanelHeight: 25 }; var sortcol = "title"; @@ -133,10 +133,10 @@ var searchString = ""; function requiredFieldValidator(value) { if (value == null || value == undefined || !value.length) { - return {valid:false, msg:"This is a required field"}; + return {valid: false, msg: "This is a required field"}; } else { - return {valid:true, msg:null}; + return {valid: true, msg: null}; } } @@ -171,13 +171,13 @@ function toggleFilterRow() { $(".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") - }); + .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 @@ -213,7 +213,7 @@ $(function () { }); 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}; + 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); }); @@ -306,7 +306,7 @@ $(function () { var options = grid.getOptions(); if (options.enableAddRow != enableAddRow) { - grid.setOptions({enableAddRow:enableAddRow}); + grid.setOptions({enableAddRow: enableAddRow}); } }); @@ -343,8 +343,8 @@ $(function () { function updateFilter() { dataView.setFilterArgs({ - percentCompleteThreshold:percentCompleteThreshold, - searchString:searchString + percentCompleteThreshold: percentCompleteThreshold, + searchString: searchString }); dataView.refresh(); } @@ -370,8 +370,8 @@ $(function () { dataView.beginUpdate(); dataView.setItems(data); dataView.setFilterArgs({ - percentCompleteThreshold:percentCompleteThreshold, - searchString:searchString + percentCompleteThreshold: percentCompleteThreshold, + searchString: searchString }); dataView.setFilter(myFilter); dataView.endUpdate(); diff --git a/examples/example5-collapsing.html b/examples/example5-collapsing.html index 40a7223..e8b5eb0 100644 --- a/examples/example5-collapsing.html +++ b/examples/example5-collapsing.html @@ -3,9 +3,9 @@ <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" /> + <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; @@ -70,206 +70,203 @@ <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}; - } +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 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; } - }; - - 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} - ]; + } 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; + } - var options = { - editable:true, - enableAddRow:true, - enableCellNavigation:true, - asyncEditorLoading:false - }; + if (searchString != "" && item["title"].indexOf(searchString) == -1) { + return false; + } + if (item.parent != null) { + var parent = data[item.parent]; - var percentCompleteThreshold = 0; - var searchString = ""; + while (parent) { + if (parent._collapsed || (parent["percentComplete"] < percentCompleteThreshold) || (searchString != "" && parent["title"].indexOf(searchString) == -1)) { + return false; + } - function myFilter(item) { - if (item["percentComplete"] < percentCompleteThreshold) { - return false; + parent = data[parent.parent]; } + } - if (searchString != "" && item["title"].indexOf(searchString) == -1) { - return false; + 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]; } - 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]; - } + if (indent == 0) { + parent = null; } - return true; + 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); } - 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]; - } + // 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; + } - if (indent == 0) { - parent = null; + dataView.updateItem(item.id, item); } - - 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); + e.stopImmediatePropagation(); } + }); - // initialize the model - dataView = new Slick.Data.DataView(); - dataView.beginUpdate(); - dataView.setItems(data); - dataView.setFilter(myFilter); - dataView.endUpdate(); - + // wire up model events to drive the grid + dataView.onRowCountChanged.subscribe(function (e, args) { + grid.updateRowCount(); + grid.render(); + }); - // initialize the grid - grid = new Slick.Grid("#myGrid", dataView, columns, options); + dataView.onRowsChanged.subscribe(function (e, args) { + grid.invalidateRows(args.rows); + grid.render(); + }); - 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(); - } - }); + var h_runfilters = null; - // 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(); + // 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; - } + 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(); + // 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 = ""; - } + // clear on Esc + if (e.which == 27) { + this.value = ""; + } - searchString = this.value; - dataView.refresh(); - }) + searchString = this.value; + dataView.refresh(); }) +}) </script> </body> </html> diff --git a/examples/example6-ajax-loading.html b/examples/example6-ajax-loading.html index 978ca7e..a85fa2d 100644 --- a/examples/example6-ajax-loading.html +++ b/examples/example6-ajax-loading.html @@ -3,9 +3,9 @@ <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" /> + <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; @@ -38,10 +38,10 @@ <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> + <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> @@ -74,25 +74,25 @@ <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"]; + 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} + {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 + rowHeight: 64, + editable: false, + enableAddRow: false, + enableCellNavigation: false }; var loadingIndicator = null; @@ -118,9 +118,9 @@ 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) + .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(); @@ -145,7 +145,6 @@ } }); - // load the first page grid.onViewportChanged.notify(); }) diff --git a/examples/example7-events.html b/examples/example7-events.html index 33ccc83..300ee85 100644 --- a/examples/example7-events.html +++ b/examples/example7-events.html @@ -70,18 +70,17 @@ <script> var grid; var data = []; - var columns = [ - {id:"title", name:"Title", field:"title", width:200, cssClass:"cell-title", editor:TextCellEditor}, - {id:"priority", name:"Priority", field:"priority", width:80, selectable:false, resizable:false} + {id: "title", name: "Title", field: "title", width: 200, cssClass: "cell-title", editor: TextCellEditor}, + {id: "priority", name: "Priority", field: "priority", width: 80, selectable: false, resizable: false} ]; var options = { - editable:true, - enableAddRow:false, - enableCellNavigation:true, - asyncEditorLoading:false, - rowHeight:30 + editable: true, + enableAddRow: false, + enableCellNavigation: true, + asyncEditorLoading: false, + rowHeight: 30 }; $(function () { @@ -97,10 +96,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(); @@ -110,7 +109,7 @@ grid.onClick.subscribe(function (e) { var cell = grid.getCellFromEvent(e); if (grid.getColumns()[cell.cell].id == "priority") { - var states = { "Low":"Medium", "Medium":"High", "High":"Low" }; + var states = { "Low": "Medium", "Medium": "High", "High": "Low" }; data[cell.row].priority = states[data[cell.row].priority]; grid.updateRow(cell.row); e.stopPropagation(); diff --git a/examples/example8-alternative-display.html b/examples/example8-alternative-display.html index acf0f6b..64a5e69 100644 --- a/examples/example8-alternative-display.html +++ b/examples/example8-alternative-display.html @@ -3,9 +3,9 @@ <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" /> + <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; @@ -108,47 +108,44 @@ // 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) : + 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('');"); + 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"} + {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 + rowHeight: 140, + editable: false, + enableAddRow: false, + enableCellNavigation: false, + enableColumnReorder: false }; var compiled_template = tmpl("cell_template"); @@ -167,10 +164,8 @@ 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 fbfd18a..15baa65 100644 --- a/examples/example9-row-reordering.html +++ b/examples/example9-row-reordering.html @@ -3,9 +3,9 @@ <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" /> + <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; @@ -98,62 +98,60 @@ <script> var grid; var data = []; - var columns = [ { - id:"#", - name:"", - width:40, - behavior:"selectAndMove", - selectable:false, - resizable:false, - cssClass:"cell-reorder dnd" + 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: "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 + 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 + 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}; + 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} + { 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); @@ -170,7 +168,6 @@ $(function () { return false; } } - return true; }); @@ -191,8 +188,7 @@ $(function () { var row = rows[i]; if (row < insertBefore) { left.splice(row, 1); - } - else { + } else { right.splice(row - insertBefore, 1); } } @@ -245,18 +241,18 @@ $(function () { 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"); + .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; @@ -270,7 +266,7 @@ $(function () { return; } e.stopImmediatePropagation(); - dd.helper.css({top:e.pageY + 5, left:e.pageX + 5}); + dd.helper.css({top: e.pageY + 5, left: e.pageX + 5}); }); grid.onDragEnd.subscribe(function (e, dd) { @@ -284,24 +280,24 @@ $(function () { $("#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([]); - }); + .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}; + var item = {name: "New task", complete: false}; $.extend(item, args.item); data.push(item); grid.invalidateRows([data.length - 1]); diff --git a/examples/slick.compositeeditor.js b/examples/slick.compositeeditor.js index 9854672..eb49f27 100644 --- a/examples/slick.compositeeditor.js +++ b/examples/slick.compositeeditor.js @@ -1,8 +1,8 @@ ; (function ($) { $.extend(true, window, { - Slick:{ - CompositeEditor:CompositeEditor + Slick: { + CompositeEditor: CompositeEditor } }); @@ -34,11 +34,11 @@ */ function CompositeEditor(columns, containers, options) { var defaultOptions = { - validationFailedMsg:"Some of the fields have failed validation", - show:null, - hide:null, - position:null, - destroy:null + validationFailedMsg: "Some of the fields have failed validation", + show: null, + hide: null, + position: null, + destroy: null }; var noop = function () { @@ -56,13 +56,13 @@ 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 + top: offset.top, + left: offset.left, + bottom: offset.top + h, + right: offset.left + w, + width: w, + height: h, + visible: true }; } @@ -154,24 +154,24 @@ if (!validationResults.valid) { firstInvalidEditor = editors[idx]; errors.push({ - index:idx, - editor:editors[idx], - container:containers[idx], - msg:validationResults.msg + index: idx, + editor: editors[idx], + container: containers[idx], + msg: validationResults.msg }); } } if (errors.length) { return { - valid:false, - msg:options.validationFailedMsg, - errors:errors + valid: false, + msg: options.validationFailedMsg, + errors: errors }; } else { return { - valid:true, - msg:"" + valid: true, + msg: "" }; } }; diff --git a/plugins/slick.autotooltips.js b/plugins/slick.autotooltips.js index 4d2baea..a9cea49 100644 --- a/plugins/slick.autotooltips.js +++ b/plugins/slick.autotooltips.js @@ -1,8 +1,8 @@ (function ($) { // register namespace $.extend(true, window, { - "Slick":{ - "AutoTooltips":AutoTooltips + "Slick": { + "AutoTooltips": AutoTooltips } }); @@ -11,7 +11,7 @@ var _grid; var _self = this; var _defaults = { - maxToolTipLength:null + maxToolTipLength: null }; function init(grid) { @@ -41,8 +41,8 @@ } $.extend(this, { - "init":init, - "destroy":destroy + "init": init, + "destroy": destroy }); } })(jQuery);
\ No newline at end of file diff --git a/plugins/slick.cellcopymanager.js b/plugins/slick.cellcopymanager.js index 1d9c613..c74018d 100644 --- a/plugins/slick.cellcopymanager.js +++ b/plugins/slick.cellcopymanager.js @@ -1,8 +1,8 @@ (function ($) { // register namespace $.extend(true, window, { - "Slick":{ - "CellCopyManager":CellCopyManager + "Slick": { + "CellCopyManager": CellCopyManager } }); @@ -28,7 +28,7 @@ if (_copiedRanges) { e.preventDefault(); clearCopySelection(); - _self.onCopyCancelled.notify({ranges:_copiedRanges}); + _self.onCopyCancelled.notify({ranges: _copiedRanges}); _copiedRanges = null; } } @@ -39,7 +39,7 @@ e.preventDefault(); _copiedRanges = ranges; markCopySelection(ranges); - _self.onCopyCells.notify({ranges:ranges}); + _self.onCopyCells.notify({ranges: ranges}); } } @@ -48,7 +48,7 @@ e.preventDefault(); clearCopySelection(); ranges = _grid.getSelectionModel().getSelectedRanges(); - _self.onPasteCells.notify({from:_copiedRanges, to:ranges}); + _self.onPasteCells.notify({from: _copiedRanges, to: ranges}); _copiedRanges = null; } } @@ -74,13 +74,13 @@ } $.extend(this, { - "init":init, - "destroy":destroy, - "clearCopySelection":clearCopySelection, + "init": init, + "destroy": destroy, + "clearCopySelection": clearCopySelection, - "onCopyCells":new Slick.Event(), - "onCopyCancelled":new Slick.Event(), - "onPasteCells":new Slick.Event() + "onCopyCells": new Slick.Event(), + "onCopyCancelled": new Slick.Event(), + "onPasteCells": new Slick.Event() }); } })(jQuery);
\ No newline at end of file diff --git a/plugins/slick.cellrangedecorator.js b/plugins/slick.cellrangedecorator.js index 342f705..a511a59 100644 --- a/plugins/slick.cellrangedecorator.js +++ b/plugins/slick.cellrangedecorator.js @@ -1,8 +1,8 @@ (function ($) { // register namespace $.extend(true, window, { - "Slick":{ - "CellRangeDecorator":CellRangeDecorator + "Slick": { + "CellRangeDecorator": CellRangeDecorator } }); @@ -20,9 +20,9 @@ function CellRangeDecorator(grid, options) { var _elem; var _defaults = { - selectionCss:{ - "zIndex":"9999", - "border":"2px dashed red" + selectionCss: { + "zIndex": "9999", + "border": "2px dashed red" } }; @@ -31,7 +31,7 @@ function show(range) { if (!_elem) { - _elem = $("<div></div>", {css:options.selectionCss}) + _elem = $("<div></div>", {css: options.selectionCss}) .css("position", "absolute") .appendTo(grid.getCanvasNode()); } @@ -40,10 +40,10 @@ var to = grid.getCellNodeBox(range.toRow, range.toCell); _elem.css({ - top:from.top - 1, - left:from.left - 1, - height:to.bottom - from.top - 2, - width:to.right - from.left - 2 + top: from.top - 1, + left: from.left - 1, + height: to.bottom - from.top - 2, + width: to.right - from.left - 2 }); return _elem; @@ -57,8 +57,8 @@ } $.extend(this, { - "show":show, - "hide":hide + "show": show, + "hide": hide }); } })(jQuery);
\ No newline at end of file diff --git a/plugins/slick.cellrangeselector.js b/plugins/slick.cellrangeselector.js index 118239e..c2dee9a 100644 --- a/plugins/slick.cellrangeselector.js +++ b/plugins/slick.cellrangeselector.js @@ -1,8 +1,8 @@ (function ($) { // register namespace $.extend(true, window, { - "Slick":{ - "CellRangeSelector":CellRangeSelector + "Slick": { + "CellRangeSelector": CellRangeSelector } }); @@ -14,8 +14,8 @@ var _decorator; var _self = this; var _defaults = { - selectionCss:{ - "border":"2px dashed blue" + selectionCss: { + "border": "2px dashed blue" } }; @@ -59,7 +59,7 @@ dd.startX - $(_canvas).offset().left, dd.startY - $(_canvas).offset().top); - dd.range = {start:start, end:{}}; + dd.range = {start: start, end: {}}; return _decorator.show(new Slick.Range(start.row, start.cell)); } @@ -92,7 +92,7 @@ _decorator.hide(); _self.onCellRangeSelected.notify({ - range:new Slick.Range( + range: new Slick.Range( dd.range.start.row, dd.range.start.cell, dd.range.end.row, @@ -102,11 +102,11 @@ } $.extend(this, { - "init":init, - "destroy":destroy, + "init": init, + "destroy": destroy, - "onBeforeCellRangeSelected":new Slick.Event(), - "onCellRangeSelected":new Slick.Event() + "onBeforeCellRangeSelected": new Slick.Event(), + "onCellRangeSelected": new Slick.Event() }); } })(jQuery);
\ No newline at end of file diff --git a/plugins/slick.cellselectionmodel.js b/plugins/slick.cellselectionmodel.js index c517117..fa91d3c 100644 --- a/plugins/slick.cellselectionmodel.js +++ b/plugins/slick.cellselectionmodel.js @@ -1,8 +1,8 @@ (function ($) { // register namespace $.extend(true, window, { - "Slick":{ - "CellSelectionModel":CellSelectionModel + "Slick": { + "CellSelectionModel": CellSelectionModel } }); @@ -13,13 +13,13 @@ var _ranges = []; var _self = this; var _selector = new Slick.CellRangeSelector({ - "selectionCss":{ - "border":"2px solid black" + "selectionCss": { + "border": "2px solid black" } }); var _options; var _defaults = { - selectActiveCell:true + selectActiveCell: true }; @@ -80,13 +80,13 @@ } $.extend(this, { - "getSelectedRanges":getSelectedRanges, - "setSelectedRanges":setSelectedRanges, + "getSelectedRanges": getSelectedRanges, + "setSelectedRanges": setSelectedRanges, - "init":init, - "destroy":destroy, + "init": init, + "destroy": destroy, - "onSelectedRangesChanged":new Slick.Event() + "onSelectedRangesChanged": new Slick.Event() }); } })(jQuery);
\ No newline at end of file diff --git a/plugins/slick.checkboxselectcolumn.js b/plugins/slick.checkboxselectcolumn.js index c7078b9..2af38bf 100644 --- a/plugins/slick.checkboxselectcolumn.js +++ b/plugins/slick.checkboxselectcolumn.js @@ -1,8 +1,8 @@ (function ($) { // register namespace $.extend(true, window, { - "Slick":{ - "CheckboxSelectColumn":CheckboxSelectColumn + "Slick": { + "CheckboxSelectColumn": CheckboxSelectColumn } }); @@ -12,10 +12,10 @@ var _self = this; var _selectedRowsLookup = {}; var _defaults = { - columnId:"_checkbox_selector", - cssClass:null, - toolTip:"Select/Deselect All", - width:30 + columnId: "_checkbox_selector", + cssClass: null, + toolTip: "Select/Deselect All", + width: 30 }; var _options = $.extend(true, {}, _defaults, options); @@ -104,15 +104,15 @@ function getColumnDefinition() { return { - id:_options.columnId, - name:"<input type='checkbox'>", - toolTip:_options.toolTip, - field:"sel", - width:_options.width, - resizable:false, - sortable:false, - cssClass:_options.cssClass, - formatter:checkboxSelectionFormatter + id: _options.columnId, + name: "<input type='checkbox'>", + toolTip: _options.toolTip, + field: "sel", + width: _options.width, + resizable: false, + sortable: false, + cssClass: _options.cssClass, + formatter: checkboxSelectionFormatter }; } @@ -126,10 +126,10 @@ } $.extend(this, { - "init":init, - "destroy":destroy, + "init": init, + "destroy": destroy, - "getColumnDefinition":getColumnDefinition + "getColumnDefinition": getColumnDefinition }); } })(jQuery);
\ No newline at end of file diff --git a/plugins/slick.rowmovemanager.js b/plugins/slick.rowmovemanager.js index 3b26c47..9a16ec0 100644 --- a/plugins/slick.rowmovemanager.js +++ b/plugins/slick.rowmovemanager.js @@ -1,8 +1,8 @@ (function ($) { // register namespace $.extend(true, window, { - "Slick":{ - "RowMoveManager":RowMoveManager + "Slick": { + "RowMoveManager": RowMoveManager } }); @@ -85,8 +85,8 @@ var insertBefore = Math.max(0, Math.min(Math.round(top / _grid.getOptions().rowHeight), _grid.getDataLength())); if (insertBefore !== dd.insertBefore) { var eventData = { - "rows":dd.selectedRows, - "insertBefore":insertBefore + "rows": dd.selectedRows, + "insertBefore": insertBefore }; if (_self.onBeforeMoveRows.notify(eventData) === false) { @@ -113,8 +113,8 @@ if (dd.canMove) { var eventData = { - "rows":dd.selectedRows, - "insertBefore":dd.insertBefore + "rows": dd.selectedRows, + "insertBefore": dd.insertBefore }; // TODO: _grid.remapCellCssClasses ? _self.onMoveRows.notify(eventData); @@ -122,11 +122,11 @@ } $.extend(this, { - "onBeforeMoveRows":new Slick.Event(), - "onMoveRows":new Slick.Event(), + "onBeforeMoveRows": new Slick.Event(), + "onMoveRows": new Slick.Event(), - "init":init, - "destroy":destroy + "init": init, + "destroy": destroy }); } })(jQuery);
\ No newline at end of file diff --git a/plugins/slick.rowselectionmodel.js b/plugins/slick.rowselectionmodel.js index e675c83..fbf8468 100644 --- a/plugins/slick.rowselectionmodel.js +++ b/plugins/slick.rowselectionmodel.js @@ -1,8 +1,8 @@ (function ($) { // register namespace $.extend(true, window, { - "Slick":{ - "RowSelectionModel":RowSelectionModel + "Slick": { + "RowSelectionModel": RowSelectionModel } }); @@ -14,7 +14,7 @@ var _inHandler; var _options; var _defaults = { - selectActiveRow:true + selectActiveRow: true }; function init(grid) { @@ -172,16 +172,16 @@ } $.extend(this, { - "getSelectedRows":getSelectedRows, - "setSelectedRows":setSelectedRows, + "getSelectedRows": getSelectedRows, + "setSelectedRows": setSelectedRows, - "getSelectedRanges":getSelectedRanges, - "setSelectedRanges":setSelectedRanges, + "getSelectedRanges": getSelectedRanges, + "setSelectedRanges": setSelectedRanges, - "init":init, - "destroy":destroy, + "init": init, + "destroy": destroy, - "onSelectedRangesChanged":new Slick.Event() + "onSelectedRangesChanged": new Slick.Event() }); } })(jQuery);
\ No newline at end of file diff --git a/slick.core.js b/slick.core.js index b84079a..efb6a97 100644 --- a/slick.core.js +++ b/slick.core.js @@ -7,15 +7,15 @@ (function ($) { // register namespace $.extend(true, window, { - "Slick":{ - "Event":Event, - "EventData":EventData, - "EventHandler":EventHandler, - "Range":Range, - "NonDataRow":NonDataItem, - "Group":Group, - "GroupTotals":GroupTotals, - "EditorLock":EditorLock, + "Slick": { + "Event": Event, + "EventData": EventData, + "EventHandler": EventHandler, + "Range": Range, + "NonDataRow": NonDataItem, + "Group": Group, + "GroupTotals": GroupTotals, + "EditorLock": EditorLock, /*** * A global singleton editor lock. @@ -23,7 +23,7 @@ * @static * @constructor */ - "GlobalEditorLock":new EditorLock() + "GlobalEditorLock": new EditorLock() } }); @@ -135,8 +135,8 @@ this.subscribe = function (event, handler) { handlers.push({ - event:event, - handler:handler + event: event, + handler: handler }); event.subscribe(handler); }; diff --git a/slick.dataview.js b/slick.dataview.js index 790ec94..18c7db2 100644 --- a/slick.dataview.js +++ b/slick.dataview.js @@ -1,12 +1,12 @@ (function ($) { $.extend(true, window, { - Slick:{ - Data:{ - DataView:DataView, - Aggregators:{ - Avg:AvgAggregator, - Min:MinAggregator, - Max:MaxAggregator + Slick: { + Data: { + DataView: DataView, + Aggregators: { + Avg: AvgAggregator, + Min: MinAggregator, + Max: MaxAggregator } } } @@ -23,7 +23,7 @@ var self = this; var defaults = { - groupItemMetadataProvider:null + groupItemMetadataProvider: null }; @@ -139,7 +139,7 @@ } function getPagingInfo() { - return {pageSize:pagesize, pageNum:pagenum, totalRows:totalRows}; + return {pageSize: pagesize, pageNum: pagenum, totalRows: totalRows}; } function sort(comparer, ascending) { @@ -189,8 +189,7 @@ function reSort() { if (sortComparer) { sort(sortComparer, sortAsc); - } - else if (fastSortField) { + } else if (fastSortField) { fastSort(fastSortField, sortAsc); } } @@ -418,8 +417,8 @@ var fnRegex = /^function[^(]*\(([^)]*)\)\s*{([\s\S]*)}$/; var matches = fn.toString().match(fnRegex); return { - params:matches[1].split(","), - body:matches[2] + params: matches[1].split(","), + body: matches[2] }; } @@ -531,7 +530,7 @@ paged = filteredItems; } - return {totalRows:filteredItems.length, rows:paged}; + return {totalRows: filteredItems.length, rows: paged}; } function getRowDiffs(rows, newRows) { @@ -551,8 +550,7 @@ for (var i = from, rl = rows.length; i < to; i++) { if (i >= rl) { diff[diff.length] = i; - } - else { + } else { item = newRows[i]; r = rows[i]; @@ -561,9 +559,9 @@ item.__updated || item.__group && !item.equals(r)) || (aggregators && eitherIsNonData && - // no good way to compare totals since they are arbitrary DTOs - // deep object comparison is pretty expensive - // always considering them 'dirty' seems easier for the time being + // no good way to compare totals since they are arbitrary DTOs + // deep object comparison is pretty expensive + // always considering them 'dirty' seems easier for the time being (item.__groupTotals || r.__groupTotals)) || item[idProperty] != r[idProperty] || (updated && updated[item[idProperty]]) @@ -632,52 +630,52 @@ onPagingInfoChanged.notify(getPagingInfo(), null, self); } if (countBefore != rows.length) { - onRowCountChanged.notify({previous:countBefore, current:rows.length}, null, self); + onRowCountChanged.notify({previous: countBefore, current: rows.length}, null, self); } if (diff.length > 0) { - onRowsChanged.notify({rows:diff}, null, self); + onRowsChanged.notify({rows: diff}, null, self); } } return { // methods - "beginUpdate":beginUpdate, - "endUpdate":endUpdate, - "setPagingOptions":setPagingOptions, - "getPagingInfo":getPagingInfo, - "getItems":getItems, - "setItems":setItems, - "setFilter":setFilter, - "sort":sort, - "fastSort":fastSort, - "reSort":reSort, - "groupBy":groupBy, - "setAggregators":setAggregators, - "collapseGroup":collapseGroup, - "expandGroup":expandGroup, - "getGroups":getGroups, - "getIdxById":getIdxById, - "getRowById":getRowById, - "getItemById":getItemById, - "getItemByIdx":getItemByIdx, - "setRefreshHints":setRefreshHints, - "setFilterArgs":setFilterArgs, - "refresh":refresh, - "updateItem":updateItem, - "insertItem":insertItem, - "addItem":addItem, - "deleteItem":deleteItem, + "beginUpdate": beginUpdate, + "endUpdate": endUpdate, + "setPagingOptions": setPagingOptions, + "getPagingInfo": getPagingInfo, + "getItems": getItems, + "setItems": setItems, + "setFilter": setFilter, + "sort": sort, + "fastSort": fastSort, + "reSort": reSort, + "groupBy": groupBy, + "setAggregators": setAggregators, + "collapseGroup": collapseGroup, + "expandGroup": expandGroup, + "getGroups": getGroups, + "getIdxById": getIdxById, + "getRowById": getRowById, + "getItemById": getItemById, + "getItemByIdx": getItemByIdx, + "setRefreshHints": setRefreshHints, + "setFilterArgs": setFilterArgs, + "refresh": refresh, + "updateItem": updateItem, + "insertItem": insertItem, + "addItem": addItem, + "deleteItem": deleteItem, // data provider methods - "getLength":getLength, - "getItem":getItem, - "getItemMetadata":getItemMetadata, + "getLength": getLength, + "getItem": getItem, + "getItemMetadata": getItemMetadata, // events - "onRowCountChanged":onRowCountChanged, - "onRowsChanged":onRowsChanged, - "onPagingInfoChanged":onPagingInfoChanged + "onRowCountChanged": onRowCountChanged, + "onRowsChanged": onRowsChanged, + "onPagingInfoChanged": onPagingInfoChanged }; } diff --git a/slick.editors.js b/slick.editors.js index 3101da7..bcb9bdc 100644 --- a/slick.editors.js +++ b/slick.editors.js @@ -1,11 +1,11 @@ /* THESE FORMATTERS & EDITORS ARE JUST SAMPLES! */ (function ($) { var SlickEditor = { - SelectorCellFormatter:function (row, cell, value, columnDef, dataContext) { + SelectorCellFormatter: function (row, cell, value, columnDef, dataContext) { return (!dataContext ? "" : row); }, - PercentCompleteCellFormatter:function (row, cell, value, columnDef, dataContext) { + PercentCompleteCellFormatter: function (row, cell, value, columnDef, dataContext) { if (value == null || value === "") { return "-"; } else if (value < 50) { @@ -15,7 +15,7 @@ } }, - GraphicalPercentCompleteCellFormatter:function (row, cell, value, columnDef, dataContext) { + GraphicalPercentCompleteCellFormatter: function (row, cell, value, columnDef, dataContext) { if (value == null || value === "") { return ""; } @@ -33,21 +33,21 @@ return "<span class='percent-complete-bar' style='background:" + color + ";width:" + value + "%'></span>"; }, - YesNoCellFormatter:function (row, cell, value, columnDef, dataContext) { + YesNoCellFormatter: function (row, cell, value, columnDef, dataContext) { return value ? "Yes" : "No"; }, - BoolCellFormatter:function (row, cell, value, columnDef, dataContext) { + BoolCellFormatter: function (row, cell, value, columnDef, dataContext) { return value ? "<img src='../images/tick.png'>" : ""; }, - TaskNameFormatter:function (row, cell, value, columnDef, dataContext) { + TaskNameFormatter: function (row, cell, value, columnDef, dataContext) { // todo: html encode var spacer = "<span style='display:inline-block;height:1px;width:" + (2 + 15 * dataContext["indent"]) + "px'></span>"; return spacer + " <img src='../images/expand.gif'> " + value; }, - ResourcesFormatter:function (row, cell, value, columnDef, dataContext) { + ResourcesFormatter: function (row, cell, value, columnDef, dataContext) { var resources = dataContext["resources"]; if (!resources || resources.length == 0) { @@ -62,12 +62,12 @@ } }, - StarFormatter:function (row, cell, value, columnDef, dataContext) { + StarFormatter: function (row, cell, value, columnDef, dataContext) { return (value) ? "<img src='../images/bullet_star.png' align='absmiddle'>" : ""; }, - TextCellEditor:function (args) { + TextCellEditor: function (args) { var $input; var defaultValue; var scope = this; @@ -128,15 +128,15 @@ } return { - valid:true, - msg:null + valid: true, + msg: null }; }; this.init(); }, - IntegerCellEditor:function (args) { + IntegerCellEditor: function (args) { var $input; var defaultValue; var scope = this; @@ -184,21 +184,21 @@ this.validate = function () { if (isNaN($input.val())) { return { - valid:false, - msg:"Please enter a valid integer" + valid: false, + msg: "Please enter a valid integer" }; } return { - valid:true, - msg:null + valid: true, + msg: null }; }; this.init(); }, - DateCellEditor:function (args) { + DateCellEditor: function (args) { var $input; var defaultValue; var scope = this; @@ -209,13 +209,13 @@ $input.appendTo(args.container); $input.focus().select(); $input.datepicker({ - showOn:"button", - buttonImageOnly:true, - buttonImage:"../images/calendar.gif", - beforeShow:function () { + showOn: "button", + buttonImageOnly: true, + buttonImage: "../images/calendar.gif", + beforeShow: function () { calendarOpen = true }, - onClose:function () { + onClose: function () { calendarOpen = false } }); @@ -275,15 +275,15 @@ this.validate = function () { return { - valid:true, - msg:null + valid: true, + msg: null }; }; this.init(); }, - YesNoSelectCellEditor:function (args) { + YesNoSelectCellEditor: function (args) { var $select; var defaultValue; var scope = this; @@ -321,15 +321,15 @@ this.validate = function () { return { - valid:true, - msg:null + valid: true, + msg: null }; }; this.init(); }, - YesNoCheckboxCellEditor:function (args) { + YesNoCheckboxCellEditor: function (args) { var $select; var defaultValue; var scope = this; @@ -371,15 +371,15 @@ this.validate = function () { return { - valid:true, - msg:null + valid: true, + msg: null }; }; this.init(); }, - PercentCompleteCellEditor:function (args) { + PercentCompleteCellEditor: function (args) { var $input, $picker; var defaultValue; var scope = this; @@ -397,10 +397,10 @@ $input.focus().select(); $picker.find(".editor-percentcomplete-slider").slider({ - orientation:"vertical", - range:"min", - value:defaultValue, - slide:function (event, ui) { + orientation: "vertical", + range: "min", + value: defaultValue, + slide: function (event, ui) { $input.val(ui.value) } }); @@ -440,21 +440,21 @@ this.validate = function () { if (isNaN(parseInt($input.val(), 10))) { return { - valid:false, - msg:"Please enter a valid positive number" + valid: false, + msg: "Please enter a valid positive number" }; } return { - valid:true, - msg:null + valid: true, + msg: null }; }; this.init(); }, - StarCellEditor:function (args) { + StarCellEditor: function (args) { var $input; var defaultValue; var scope = this; @@ -510,8 +510,8 @@ this.validate = function () { return { - valid:true, - msg:null + valid: true, + msg: null }; }; @@ -523,7 +523,7 @@ * The UI is added onto document BODY and .position(), .show() and .hide() are implemented. * KeyDown events are also handled to provide handling for Tab, Shift-Tab, Esc and Ctrl-Enter. */ - LongTextCellEditor:function (args) { + LongTextCellEditor: function (args) { var $input, $wrapper; var defaultValue; var scope = this; @@ -613,8 +613,8 @@ this.validate = function () { return { - valid:true, - msg:null + valid: true, + msg: null }; }; diff --git a/slick.grid.js b/slick.grid.js index 408c068..9681330 100644 --- a/slick.grid.js +++ b/slick.grid.js @@ -31,8 +31,8 @@ if (typeof Slick === "undefined") { (function ($) { // Slick.Grid $.extend(true, window, { - Slick:{ - Grid:SlickGrid + Slick: { + Grid: SlickGrid } }); @@ -55,42 +55,42 @@ if (typeof Slick === "undefined") { function SlickGrid(container, data, columns, options) { // settings var defaults = { - headerHeight:25, - rowHeight:25, - defaultColumnWidth:80, - enableAddRow:false, - leaveSpaceForNewRows:false, - editable:false, - autoEdit:true, - enableCellNavigation:true, - enableColumnReorder:true, - asyncEditorLoading:false, - asyncEditorLoadDelay:100, - forceFitColumns:false, - enableAsyncPostRender:false, - asyncPostRenderDelay:60, - autoHeight:false, - editorLock:Slick.GlobalEditorLock, - showHeaderRow:false, - headerRowHeight:25, - showTopPanel:false, - topPanelHeight:25, - formatterFactory:null, - editorFactory:null, - cellFlashingCssClass:"flashing", - selectedCellCssClass:"selected", - multiSelect:true, - enableTextSelectionOnCells:false, - dataItemColumnValueExtractor:null + headerHeight: 25, + rowHeight: 25, + defaultColumnWidth: 80, + enableAddRow: false, + leaveSpaceForNewRows: false, + editable: false, + autoEdit: true, + enableCellNavigation: true, + enableColumnReorder: true, + asyncEditorLoading: false, + asyncEditorLoadDelay: 100, + forceFitColumns: false, + enableAsyncPostRender: false, + asyncPostRenderDelay: 60, + autoHeight: false, + editorLock: Slick.GlobalEditorLock, + showHeaderRow: false, + headerRowHeight: 25, + showTopPanel: false, + topPanelHeight: 25, + formatterFactory: null, + editorFactory: null, + cellFlashingCssClass: "flashing", + selectedCellCssClass: "selected", + multiSelect: true, + enableTextSelectionOnCells: false, + dataItemColumnValueExtractor: null }; var columnDefaults = { - name:"", - resizable:true, - sortable:false, - minWidth:30, - rerenderOnResize:false, - headerCssClass:null + name: "", + resizable: true, + sortable: false, + minWidth: 30, + rerenderOnResize: false, + headerCssClass: null }; // scroller @@ -183,8 +183,8 @@ if (typeof Slick === "undefined") { } editController = { - "commitCurrentEdit":commitCurrentEdit, - "cancelCurrentEdit":cancelCurrentEdit + "commitCurrentEdit": commitCurrentEdit, + "cancelCurrentEdit": cancelCurrentEdit }; $container @@ -311,8 +311,8 @@ if (typeof Slick === "undefined") { function measureScrollbar() { var $c = $("<div style='position:absolute; top:-10000px; left:-10000px; width:100px; height:100px; overflow:scroll;'></div>").appendTo("body"); var dim = { - width:$c.width() - $c[0].clientWidth, - height:$c.height() - $c[0].clientHeight + width: $c.width() - $c[0].clientWidth, + height: $c.height() - $c[0].clientHeight }; $c.remove(); return dim; @@ -475,27 +475,27 @@ if (typeof Slick === "undefined") { } setSortColumn(sortColumnId, sortAsc); - trigger(self.onSort, {sortCol:column, sortAsc:sortAsc}, e); + trigger(self.onSort, {sortCol: column, sortAsc: sortAsc}, e); } }); } function setupColumnReorder() { $headers.sortable({ - containment:"parent", - axis:"x", - cursor:"default", - tolerance:"intersection", - helper:"clone", - placeholder:"slick-sortable-placeholder ui-state-default slick-header-column", - forcePlaceholderSize:true, - start:function (e, ui) { + containment: "parent", + axis: "x", + cursor: "default", + tolerance: "intersection", + helper: "clone", + placeholder: "slick-sortable-placeholder ui-state-default slick-header-column", + forcePlaceholderSize: true, + start: function (e, ui) { $(ui.helper).addClass("slick-header-column-active"); }, - beforeStop:function (e, ui) { + beforeStop: function (e, ui) { $(ui.helper).removeClass("slick-header-column-active"); }, - stop:function (e) { + stop: function (e) { if (!getEditorLock().commitCurrentEdit()) { $(this).sortable("cancel"); return; @@ -952,7 +952,7 @@ if (typeof Slick === "undefined") { setCellCssStyles(options.selectedCellCssClass, hash); - trigger(self.onSelectedRowsChanged, {rows:getSelectedRows()}, e); + trigger(self.onSelectedRowsChanged, {rows: getSelectedRows()}, e); } function getColumns() { @@ -1335,8 +1335,8 @@ if (typeof Slick === "undefined") { } return { - top:Math.floor((viewportTop + offset) / options.rowHeight), - bottom:Math.ceil((viewportTop + offset + viewportH) / options.rowHeight) + top: Math.floor((viewportTop + offset) / options.rowHeight), + bottom: Math.ceil((viewportTop + offset + viewportH) / options.rowHeight) }; } @@ -1480,7 +1480,7 @@ if (typeof Slick === "undefined") { trigger(self.onViewportChanged, {}); } - trigger(self.onScroll, {scrollLeft:scrollLeft, scrollTop:scrollTop}); + trigger(self.onScroll, {scrollLeft: scrollLeft, scrollTop: scrollTop}); } function asyncPostProcessRows() { @@ -1679,7 +1679,7 @@ if (typeof Slick === "undefined") { return; } - trigger(self.onClick, {row:cell.row, cell:cell.cell}, e); + trigger(self.onClick, {row: cell.row, cell: cell.cell}, e); if (e.isImmediatePropagationStopped()) { return; } @@ -1712,7 +1712,7 @@ if (typeof Slick === "undefined") { return; } - trigger(self.onDblClick, {row:cell.row, cell:cell.cell}, e); + trigger(self.onDblClick, {row: cell.row, cell: cell.cell}, e); if (e.isImmediatePropagationStopped()) { return; } @@ -1725,13 +1725,13 @@ if (typeof Slick === "undefined") { function handleHeaderContextMenu(e) { var $header = $(e.target).closest(".slick-header-column", ".slick-header-columns"); var column = $header && columns[self.getColumnIndex($header.data("fieldId"))]; - trigger(self.onHeaderContextMenu, {column:column}, e); + trigger(self.onHeaderContextMenu, {column: column}, e); } function handleHeaderClick(e) { var $header = $(e.target).closest(".slick-header-column", ".slick-header-columns"); var column = $header && columns[self.getColumnIndex($header.data("fieldId"))]; - trigger(self.onHeaderClick, {column:column}, e); + trigger(self.onHeaderClick, {column: column}, e); } function handleMouseEnter(e) { @@ -1760,7 +1760,7 @@ if (typeof Slick === "undefined") { cell = 0; } - return {row:row, cell:cell - 1}; + return {row: row, cell: cell - 1}; } function getCellFromNode(node) { @@ -1779,8 +1779,8 @@ if (typeof Slick === "undefined") { } return { - row:$cell.parent().attr("row") | 0, - cell:getCellFromNode($cell[0]) + row: $cell.parent().attr("row") | 0, + cell: getCellFromNode($cell[0]) }; } @@ -1798,10 +1798,10 @@ if (typeof Slick === "undefined") { var x2 = x1 + columns[cell].width; return { - top:y1, - left:x1, - bottom:y2, - right:x2 + top: y1, + left: x1, + bottom: y2, + right: x2 }; } @@ -1909,7 +1909,7 @@ if (typeof Slick === "undefined") { if (!currentEditor) { return; } - trigger(self.onBeforeCellEditorDestroy, {editor:currentEditor}); + trigger(self.onBeforeCellEditorDestroy, {editor: currentEditor}); currentEditor.destroy(); currentEditor = null; @@ -1951,7 +1951,7 @@ if (typeof Slick === "undefined") { var columnDef = columns[activeCell]; var item = getDataItem(activeRow); - if (trigger(self.onBeforeEditCell, {row:activeRow, cell:activeCell, item:item, column:columnDef}) === false) { + if (trigger(self.onBeforeEditCell, {row: activeRow, cell: activeCell, item: item, column: columnDef}) === false) { setFocus(); return; } @@ -1965,14 +1965,14 @@ if (typeof Slick === "undefined") { } currentEditor = new (editor || getEditor(activeRow, activeCell))({ - grid:self, - gridPosition:absBox($container[0]), - position:absBox(activeCellNode), - container:activeCellNode, - column:columnDef, - item:item || {}, - commitChanges:commitEditAndSetFocus, - cancelChanges:cancelEditAndSetFocus + grid: self, + gridPosition: absBox($container[0]), + position: absBox(activeCellNode), + container: activeCellNode, + column: columnDef, + item: item || {}, + commitChanges: commitEditAndSetFocus, + cancelChanges: cancelEditAndSetFocus }); if (item) { @@ -2005,13 +2005,13 @@ if (typeof Slick === "undefined") { function absBox(elem) { var box = { - top:elem.offsetTop, - left:elem.offsetLeft, - bottom:0, - right:0, - width:$(elem).outerWidth(), - height:$(elem).outerHeight(), - visible:true}; + top: elem.offsetTop, + left: elem.offsetLeft, + bottom: 0, + right: 0, + width: $(elem).outerWidth(), + height: $(elem).outerHeight(), + visible: true}; box.bottom = box.top + box.height; box.right = box.left + box.width; @@ -2081,7 +2081,7 @@ if (typeof Slick === "undefined") { if (!activeCellNode) { return null; } else { - return {row:activeRow, cell:activeCell}; + return {row: activeRow, cell: activeCell}; } } @@ -2154,9 +2154,9 @@ if (typeof Slick === "undefined") { if (cell < columns.length) { return { - "row":row, - "cell":cell, - "posX":cell + "row": row, + "cell": cell, + "posX": cell }; } return null; @@ -2173,9 +2173,9 @@ if (typeof Slick === "undefined") { } var prev = { - "row":row, - "cell":firstFocusableCell, - "posX":firstFocusableCell + "row": row, + "cell": firstFocusableCell, + "posX": firstFocusableCell }; var pos; while (true) { @@ -2205,9 +2205,9 @@ if (typeof Slick === "undefined") { if (canCellBeActive(row, prevCell)) { return { - "row":row, - "cell":prevCell, - "posX":posX + "row": row, + "cell": prevCell, + "posX": posX }; } } @@ -2228,9 +2228,9 @@ if (typeof Slick === "undefined") { if (canCellBeActive(row, prevCell)) { return { - "row":row, - "cell":prevCell, - "posX":posX + "row": row, + "cell": prevCell, + "posX": posX }; } } @@ -2247,9 +2247,9 @@ if (typeof Slick === "undefined") { firstFocusableCell = findFirstFocusableCell(row); if (firstFocusableCell !== null) { return { - "row":row, - "cell":firstFocusableCell, - "posX":firstFocusableCell + "row": row, + "cell": firstFocusableCell, + "posX": firstFocusableCell }; } } @@ -2272,9 +2272,9 @@ if (typeof Slick === "undefined") { lastSelectableCell = findLastFocusableCell(row); if (lastSelectableCell !== null) { pos = { - "row":row, - "cell":lastSelectableCell, - "posX":lastSelectableCell + "row": row, + "cell": lastSelectableCell, + "posX": lastSelectableCell }; } } @@ -2314,12 +2314,12 @@ if (typeof Slick === "undefined") { } var stepFunctions = { - "up":gotoUp, - "down":gotoDown, - "left":gotoLeft, - "right":gotoRight, - "prev":gotoPrev, - "next":gotoNext + "up": gotoUp, + "down": gotoDown, + "left": gotoLeft, + "right": gotoRight, + "prev": gotoPrev, + "next": gotoNext }; var stepFn = stepFunctions[dir]; var pos = stepFn(activeRow, activeCell, activePosX); @@ -2448,16 +2448,16 @@ if (typeof Slick === "undefined") { if (validationResults.valid) { if (activeRow < getDataLength()) { var editCommand = { - row:activeRow, - cell:activeCell, - editor:currentEditor, - serializedValue:currentEditor.serializeValue(), - prevSerializedValue:serializedEditorValue, - execute:function () { + row: activeRow, + cell: activeCell, + editor: currentEditor, + serializedValue: currentEditor.serializeValue(), + prevSerializedValue: serializedEditorValue, + execute: function () { this.editor.applyValue(item, this.serializedValue); updateRow(this.row); }, - undo:function () { + undo: function () { this.editor.applyValue(item, this.prevSerializedValue); updateRow(this.row); } @@ -2472,15 +2472,15 @@ if (typeof Slick === "undefined") { } trigger(self.onCellChange, { - row:activeRow, - cell:activeCell, - item:item + row: activeRow, + cell: activeCell, + item: item }); } else { var newItem = {}; currentEditor.applyValue(newItem, currentEditor.serializeValue()); makeActiveCellNormal(); - trigger(self.onAddNewRow, {item:newItem, column:column}); + trigger(self.onAddNewRow, {item: newItem, column: column}); } // check whether the lock has been re-acquired by event handlers @@ -2488,15 +2488,15 @@ if (typeof Slick === "undefined") { } else { // TODO: remove and put in onValidationError handlers in examples $(activeCellNode).addClass("invalid"); - $(activeCellNode).stop(true, true).effect("highlight", {color:"red"}, 300); + $(activeCellNode).stop(true, true).effect("highlight", {color: "red"}, 300); trigger(self.onValidationError, { - editor:currentEditor, - cellNode:activeCellNode, - validationResults:validationResults, - row:activeRow, - cell:activeCell, - column:column + editor: currentEditor, + cellNode: activeCellNode, + validationResults: validationResults, + row: activeRow, + cell: activeCell, + column: column }); currentEditor.focus(); @@ -2566,108 +2566,108 @@ if (typeof Slick === "undefined") { // Public API $.extend(this, { - "slickGridVersion":"2.0a1", + "slickGridVersion": "2.0a1", // Events - "onScroll":new Slick.Event(), - "onSort":new Slick.Event(), - "onHeaderContextMenu":new Slick.Event(), - "onHeaderClick":new Slick.Event(), - "onMouseEnter":new Slick.Event(), - "onMouseLeave":new Slick.Event(), - "onClick":new Slick.Event(), - "onDblClick":new Slick.Event(), - "onContextMenu":new Slick.Event(), - "onKeyDown":new Slick.Event(), - "onAddNewRow":new Slick.Event(), - "onValidationError":new Slick.Event(), - "onViewportChanged":new Slick.Event(), - "onColumnsReordered":new Slick.Event(), - "onColumnsResized":new Slick.Event(), - "onCellChange":new Slick.Event(), - "onBeforeEditCell":new Slick.Event(), - "onBeforeCellEditorDestroy":new Slick.Event(), - "onBeforeDestroy":new Slick.Event(), - "onActiveCellChanged":new Slick.Event(), - "onActiveCellPositionChanged":new Slick.Event(), - "onDragInit":new Slick.Event(), - "onDragStart":new Slick.Event(), - "onDrag":new Slick.Event(), - "onDragEnd":new Slick.Event(), - "onSelectedRowsChanged":new Slick.Event(), + "onScroll": new Slick.Event(), + "onSort": new Slick.Event(), + "onHeaderContextMenu": new Slick.Event(), + "onHeaderClick": new Slick.Event(), + "onMouseEnter": new Slick.Event(), + "onMouseLeave": new Slick.Event(), + "onClick": new Slick.Event(), + "onDblClick": new Slick.Event(), + "onContextMenu": new Slick.Event(), + "onKeyDown": new Slick.Event(), + "onAddNewRow": new Slick.Event(), + "onValidationError": new Slick.Event(), + "onViewportChanged": new Slick.Event(), + "onColumnsReordered": new Slick.Event(), + "onColumnsResized": new Slick.Event(), + "onCellChange": new Slick.Event(), + "onBeforeEditCell": new Slick.Event(), + "onBeforeCellEditorDestroy": new Slick.Event(), + "onBeforeDestroy": new Slick.Event(), + "onActiveCellChanged": new Slick.Event(), + "onActiveCellPositionChanged": new Slick.Event(), + "onDragInit": new Slick.Event(), + "onDragStart": new Slick.Event(), + "onDrag": new Slick.Event(), + "onDragEnd": new Slick.Event(), + "onSelectedRowsChanged": new Slick.Event(), // Methods - "registerPlugin":registerPlugin, - "unregisterPlugin":unregisterPlugin, - "getColumns":getColumns, - "setColumns":setColumns, - "getColumnIndex":getColumnIndex, - "updateColumnHeader":updateColumnHeader, - "setSortColumn":setSortColumn, - "autosizeColumns":autosizeColumns, - "getOptions":getOptions, - "setOptions":setOptions, - "getData":getData, - "getDataLength":getDataLength, - "getDataItem":getDataItem, - "setData":setData, - "getSelectionModel":getSelectionModel, - "setSelectionModel":setSelectionModel, - "getSelectedRows":getSelectedRows, - "setSelectedRows":setSelectedRows, - - "render":render, - "invalidate":invalidate, - "invalidateRow":invalidateRow, - "invalidateRows":invalidateRows, - "invalidateAllRows":invalidateAllRows, - "updateCell":updateCell, - "updateRow":updateRow, - "getViewport":getVisibleRange, - "getRenderedRange":getRenderedRange, - "resizeCanvas":resizeCanvas, - "updateRowCount":updateRowCount, - "scrollRowIntoView":scrollRowIntoView, - "getCanvasNode":getCanvasNode, - - "getCellFromPoint":getCellFromPoint, - "getCellFromEvent":getCellFromEvent, - "getActiveCell":getActiveCell, - "setActiveCell":setActiveCell, - "getActiveCellNode":getActiveCellNode, - "getActiveCellPosition":getActiveCellPosition, - "resetActiveCell":resetActiveCell, - "editActiveCell":makeActiveCellEditable, - "getCellEditor":getCellEditor, - "getCellNode":getCellNode, - "getCellNodeBox":getCellNodeBox, - "canCellBeSelected":canCellBeSelected, - "canCellBeActive":canCellBeActive, - "navigatePrev":navigatePrev, - "navigateNext":navigateNext, - "navigateUp":navigateUp, - "navigateDown":navigateDown, - "navigateLeft":navigateLeft, - "navigateRight":navigateRight, - "gotoCell":gotoCell, - "getTopPanel":getTopPanel, - "showTopPanel":showTopPanel, - "hideTopPanel":hideTopPanel, - "showHeaderRowColumns":showHeaderRowColumns, - "hideHeaderRowColumns":hideHeaderRowColumns, - "getHeaderRow":getHeaderRow, - "getHeaderRowColumn":getHeaderRowColumn, - "getGridPosition":getGridPosition, - "flashCell":flashCell, - "addCellCssStyles":addCellCssStyles, - "setCellCssStyles":setCellCssStyles, - "removeCellCssStyles":removeCellCssStyles, - - "destroy":destroy, + "registerPlugin": registerPlugin, + "unregisterPlugin": unregisterPlugin, + "getColumns": getColumns, + "setColumns": setColumns, + "getColumnIndex": getColumnIndex, + "updateColumnHeader": updateColumnHeader, + "setSortColumn": setSortColumn, + "autosizeColumns": autosizeColumns, + "getOptions": getOptions, + "setOptions": setOptions, + "getData": getData, + "getDataLength": getDataLength, + "getDataItem": getDataItem, + "setData": setData, + "getSelectionModel": getSelectionModel, + "setSelectionModel": setSelectionModel, + "getSelectedRows": getSelectedRows, + "setSelectedRows": setSelectedRows, + + "render": render, + "invalidate": invalidate, + "invalidateRow": invalidateRow, + "invalidateRows": invalidateRows, + "invalidateAllRows": invalidateAllRows, + "updateCell": updateCell, + "updateRow": updateRow, + "getViewport": getVisibleRange, + "getRenderedRange": getRenderedRange, + "resizeCanvas": resizeCanvas, + "updateRowCount": updateRowCount, + "scrollRowIntoView": scrollRowIntoView, + "getCanvasNode": getCanvasNode, + + "getCellFromPoint": getCellFromPoint, + "getCellFromEvent": getCellFromEvent, + "getActiveCell": getActiveCell, + "setActiveCell": setActiveCell, + "getActiveCellNode": getActiveCellNode, + "getActiveCellPosition": getActiveCellPosition, + "resetActiveCell": resetActiveCell, + "editActiveCell": makeActiveCellEditable, + "getCellEditor": getCellEditor, + "getCellNode": getCellNode, + "getCellNodeBox": getCellNodeBox, + "canCellBeSelected": canCellBeSelected, + "canCellBeActive": canCellBeActive, + "navigatePrev": navigatePrev, + "navigateNext": navigateNext, + "navigateUp": navigateUp, + "navigateDown": navigateDown, + "navigateLeft": navigateLeft, + "navigateRight": navigateRight, + "gotoCell": gotoCell, + "getTopPanel": getTopPanel, + "showTopPanel": showTopPanel, + "hideTopPanel": hideTopPanel, + "showHeaderRowColumns": showHeaderRowColumns, + "hideHeaderRowColumns": hideHeaderRowColumns, + "getHeaderRow": getHeaderRow, + "getHeaderRowColumn": getHeaderRowColumn, + "getGridPosition": getGridPosition, + "flashCell": flashCell, + "addCellCssStyles": addCellCssStyles, + "setCellCssStyles": setCellCssStyles, + "removeCellCssStyles": removeCellCssStyles, + + "destroy": destroy, // IEditor implementation - "getEditorLock":getEditorLock, - "getEditController":getEditController + "getEditorLock": getEditorLock, + "getEditController": getEditController }); init(); diff --git a/slick.groupitemmetadataprovider.js b/slick.groupitemmetadataprovider.js index 2ad0137..6986098 100644 --- a/slick.groupitemmetadataprovider.js +++ b/slick.groupitemmetadataprovider.js @@ -1,8 +1,8 @@ (function ($) { $.extend(true, window, { - Slick:{ - Data:{ - GroupItemMetadataProvider:GroupItemMetadataProvider + Slick: { + Data: { + GroupItemMetadataProvider: GroupItemMetadataProvider } } }); @@ -25,14 +25,14 @@ function GroupItemMetadataProvider(options) { var _grid; var _defaults = { - groupCssClass:"slick-group", - totalsCssClass:"slick-group-totals", - groupFocusable:true, - totalsFocusable:false, - toggleCssClass:"slick-group-toggle", - toggleExpandedCssClass:"expanded", - toggleCollapsedCssClass:"collapsed", - enableExpandCollapse:true + groupCssClass: "slick-group", + totalsCssClass: "slick-group-totals", + groupFocusable: true, + totalsFocusable: false, + toggleCssClass: "slick-group-toggle", + toggleExpandedCssClass: "expanded", + toggleCollapsedCssClass: "collapsed", + enableExpandCollapse: true }; options = $.extend(true, {}, _defaults, options); @@ -105,14 +105,14 @@ function getGroupRowMetadata(item) { return { - selectable:false, - focusable:options.groupFocusable, - cssClasses:options.groupCssClass, - columns:{ - 0:{ - colspan:"*", - formatter:defaultGroupCellFormatter, - editor:null + selectable: false, + focusable: options.groupFocusable, + cssClasses: options.groupCssClass, + columns: { + 0: { + colspan: "*", + formatter: defaultGroupCellFormatter, + editor: null } } }; @@ -120,20 +120,20 @@ function getTotalsRowMetadata(item) { return { - selectable:false, - focusable:options.totalsFocusable, - cssClasses:options.totalsCssClass, - formatter:defaultTotalsCellFormatter, - editor:null + selectable: false, + focusable: options.totalsFocusable, + cssClasses: options.totalsCssClass, + formatter: defaultTotalsCellFormatter, + editor: null }; } return { - "init":init, - "destroy":destroy, - "getGroupRowMetadata":getGroupRowMetadata, - "getTotalsRowMetadata":getTotalsRowMetadata + "init": init, + "destroy": destroy, + "getGroupRowMetadata": getGroupRowMetadata, + "getTotalsRowMetadata": getTotalsRowMetadata }; } })(jQuery);
\ No newline at end of file diff --git a/slick.remotemodel.js b/slick.remotemodel.js index aba7688..e485706 100644 --- a/slick.remotemodel.js +++ b/slick.remotemodel.js @@ -7,7 +7,7 @@ function RemoteModel() { // private var PAGESIZE = 50; - var data = {length:0}; + var data = {length: 0}; var searchstr = "apple"; var sortcol = null; var sortdir = 1; @@ -83,14 +83,14 @@ for (var i = fromPage; i <= toPage; i++) data[i * PAGESIZE] = null; // null indicates a 'requested but not available yet' - onDataLoading.notify({from:from, to:to}); + onDataLoading.notify({from: from, to: to}); req = $.jsonp({ - url:url, - callbackParameter:"callback", - cache:true, // Digg doesn't accept the autogenerated cachebuster param - success:onSuccess, - error:function () { + url: url, + callbackParameter: "callback", + cache: true, // Digg doesn't accept the autogenerated cachebuster param + success: onSuccess, + error: function () { onError(fromPage, toPage) } }); @@ -115,7 +115,7 @@ req = null; - onDataLoaded.notify({from:from, to:to}); + onDataLoaded.notify({from: from, to: to}); } @@ -143,22 +143,22 @@ return { // properties - "data":data, + "data": data, // methods - "clear":clear, - "isDataLoaded":isDataLoaded, - "ensureData":ensureData, - "reloadData":reloadData, - "setSort":setSort, - "setSearch":setSearch, + "clear": clear, + "isDataLoaded": isDataLoaded, + "ensureData": ensureData, + "reloadData": reloadData, + "setSort": setSort, + "setSearch": setSearch, // events - "onDataLoading":onDataLoading, - "onDataLoaded":onDataLoaded + "onDataLoading": onDataLoading, + "onDataLoaded": onDataLoaded }; } // Slick.Data.RemoteModel - $.extend(true, window, { Slick:{ Data:{ RemoteModel:RemoteModel }}}); + $.extend(true, window, { Slick: { Data: { RemoteModel: RemoteModel }}}); })(jQuery);
\ No newline at end of file |