Skip to content
Browse files

Reformatted code.

  • Loading branch information...
1 parent 6634f16 commit 061ac59fb6a4c09a49d5abe1fa86c26f9d13bf66 @mleibman committed with Michael Leibman Jan 17, 2012
Showing with 9,284 additions and 9,090 deletions.
  1. +16 −16 controls/slick.columnpicker.css
  2. +105 −104 controls/slick.columnpicker.js
  3. +28 −35 controls/slick.pager.css
  4. +132 −129 controls/slick.pager.js
  5. +53 −57 examples/example-checkbox-row-select.html
  6. +77 −77 examples/example-colspan.html
  7. +230 −227 examples/example-composite-editor-item-details.html
  8. +63 −63 examples/example-custom-column-value-extractor.html
  9. +355 −344 examples/example-grouping.html
  10. +134 −135 examples/example-header-row.html
  11. +149 −148 examples/example-optimizing-dataview.html
  12. +165 −165 examples/example-spreadsheet.html
  13. +56 −57 examples/example1-simple.html
  14. +131 −123 examples/example10-async-post-render.html
  15. +75 −56 examples/example11-autoheight.html
  16. +105 −78 examples/example12-fillbrowser.html
  17. +112 −85 examples/example13-getItem-sorting.html
  18. +153 −146 examples/example14-highlighting.html
  19. +67 −73 examples/example2-formatters.html
  20. +90 −95 examples/example3-editing.html
  21. +141 −140 examples/example3a-compound-editors.html
  22. +107 −106 examples/example3b-editing-with-undo.html
  23. +378 −367 examples/example4-model.html
  24. +272 −259 examples/example5-collapsing.html
  25. +147 −149 examples/example6-ajax-loading.html
  26. +9 −8 examples/example7-events.html
  27. +173 −171 examples/example8-alternative-display.html
  28. +310 −301 examples/example9-row-reordering.html
  29. +122 −131 examples/examples.css
  30. +36 −37 examples/slick-default-theme.css
  31. +201 −203 examples/slick.compositeeditor.js
  32. +40 −41 plugins/slick.autotooltips.js
  33. +72 −72 plugins/slick.cellcopymanager.js
  34. +54 −55 plugins/slick.cellrangedecorator.js
  35. +98 −98 plugins/slick.cellrangeselector.js
  36. +77 −77 plugins/slick.cellselectionmodel.js
  37. +115 −116 plugins/slick.checkboxselectcolumn.js
  38. +113 −114 plugins/slick.rowmovemanager.js
  39. +160 −159 plugins/slick.rowselectionmodel.js
  40. +378 −378 slick.core.js
  41. +687 −662 slick.dataview.js
  42. +619 −609 slick.editors.js
  43. +81 −82 slick.grid.css
  44. +2,334 −2,280 slick.grid.js
  45. +122 −123 slick.groupitemmetadataprovider.js
  46. +142 −139 slick.remotemodel.js
View
32 controls/slick.columnpicker.css
@@ -1,30 +1,30 @@
.slick-columnpicker {
- border: 1px solid #718BB7;
- background: #f0f0f0;
- padding: 6px;
- -moz-box-shadow: 2px 2px 2px silver;
- -webkit-box-shadow: 2px 2px 2px silver;
- min-width: 100px;
- cursor: default;
+ border: 1px solid #718BB7;
+ background: #f0f0f0;
+ padding: 6px;
+ -moz-box-shadow: 2px 2px 2px silver;
+ -webkit-box-shadow: 2px 2px 2px silver;
+ min-width: 100px;
+ cursor: default;
}
.slick-columnpicker li {
- list-style: none;
- margin: 0;
- padding: 0;
- background: none;
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ background: none;
}
.slick-columnpicker input {
- margin: 4px;
+ margin: 4px;
}
.slick-columnpicker li a {
- display: block;
- padding: 4px;
- font-weight: bold;
+ display: block;
+ padding: 4px;
+ font-weight: bold;
}
.slick-columnpicker li a:hover {
- background: white;
+ background: white;
}
View
209 controls/slick.columnpicker.js
@@ -1,105 +1,106 @@
-(function($) {
- function SlickColumnPicker(columns,grid,options)
- {
- var $menu;
-
- var defaults = {
- fadeSpeed: 250
- };
-
- function init() {
- grid.onHeaderContextMenu.subscribe(handleHeaderContextMenu);
- options = $.extend({}, defaults, options);
-
- $menu = $("<span class='slick-columnpicker' style='display:none;position:absolute;z-index:20;' />").appendTo(document.body);
-
- $menu.bind("mouseleave", function(e) { $(this).fadeOut(options.fadeSpeed) });
- $menu.bind("click", updateColumn);
-
- }
-
- function handleHeaderContextMenu(e, args)
- {
- e.preventDefault();
- $menu.empty();
-
- var $li, $input;
- for (var i=0; i<columns.length; i++) {
- $li = $("<li />").appendTo($menu);
-
- $input = $("<input type='checkbox' />")
- .attr("id", "columnpicker_" + i)
- .data("id", columns[i].id)
- .appendTo($li);
-
- if (grid.getColumnIndex(columns[i].id) != null)
- $input.attr("checked","checked");
-
- $("<label for='columnpicker_" + i + "' />")
- .text(columns[i].name)
- .appendTo($li);
- }
-
- $("<hr/>").appendTo($menu);
- $li = $("<li />").appendTo($menu);
- $input = $("<input type='checkbox' id='autoresize' />").appendTo($li);
- $("<label for='autoresize'>Force Fit Columns</label>").appendTo($li);
- if (grid.getOptions().forceFitColumns)
- $input.attr("checked", "checked");
-
- $li = $("<li />").appendTo($menu);
- $input = $("<input type='checkbox' id='syncresize' />").appendTo($li);
- $("<label for='syncresize'>Synchronous Resizing</label>").appendTo($li);
- if (grid.getOptions().syncColumnCellResize)
- $input.attr("checked", "checked");
-
- $menu
- .css("top", e.pageY - 10)
- .css("left", e.pageX - 10)
- .fadeIn(options.fadeSpeed);
- }
-
- function updateColumn(e)
- {
- if (e.target.id == 'autoresize') {
- if (e.target.checked) {
- grid.setOptions({forceFitColumns: true});
- grid.autosizeColumns();
- } else {
- grid.setOptions({forceFitColumns: false});
- }
- return;
- }
-
- if (e.target.id == 'syncresize') {
- if (e.target.checked) {
- grid.setOptions({syncColumnCellResize: true});
- } else {
- grid.setOptions({syncColumnCellResize: false});
- }
- return;
- }
-
- if ($(e.target).is(":checkbox")) {
- if ($menu.find(":checkbox:checked").length == 0) {
- $(e.target).attr("checked","checked");
- return;
- }
-
- var visibleColumns = [];
- $menu.find(":checkbox[id^=columnpicker]").each(function(i,e) {
- if ($(this).is(":checked")) {
- visibleColumns.push(columns[i]);
- }
- });
- grid.setColumns(visibleColumns);
- }
- }
-
-
- init();
- }
-
- // Slick.Controls.ColumnPicker
- $.extend(true, window, { Slick: { Controls: { ColumnPicker: SlickColumnPicker }}});
+(function ($) {
+ function SlickColumnPicker(columns, grid, options) {
+ var $menu;
+
+ var defaults = {
+ fadeSpeed:250
+ };
+
+ function init() {
+ grid.onHeaderContextMenu.subscribe(handleHeaderContextMenu);
+ options = $.extend({}, defaults, options);
+
+ $menu = $("<span class='slick-columnpicker' style='display:none;position:absolute;z-index:20;' />").appendTo(document.body);
+
+ $menu.bind("mouseleave", function (e) {
+ $(this).fadeOut(options.fadeSpeed)
+ });
+ $menu.bind("click", updateColumn);
+
+ }
+
+ function handleHeaderContextMenu(e, args) {
+ e.preventDefault();
+ $menu.empty();
+
+ var $li, $input;
+ for (var i = 0; i < columns.length; i++) {
+ $li = $("<li />").appendTo($menu);
+
+ $input = $("<input type='checkbox' />")
+ .attr("id", "columnpicker_" + i)
+ .data("id", columns[i].id)
+ .appendTo($li);
+
+ if (grid.getColumnIndex(columns[i].id) != null) {
+ $input.attr("checked", "checked");
+ }
+
+ $("<label for='columnpicker_" + i + "' />")
+ .text(columns[i].name)
+ .appendTo($li);
+ }
+
+ $("<hr/>").appendTo($menu);
+ $li = $("<li />").appendTo($menu);
+ $input = $("<input type='checkbox' id='autoresize' />").appendTo($li);
+ $("<label for='autoresize'>Force Fit Columns</label>").appendTo($li);
+ if (grid.getOptions().forceFitColumns) {
+ $input.attr("checked", "checked");
+ }
+
+ $li = $("<li />").appendTo($menu);
+ $input = $("<input type='checkbox' id='syncresize' />").appendTo($li);
+ $("<label for='syncresize'>Synchronous Resizing</label>").appendTo($li);
+ if (grid.getOptions().syncColumnCellResize) {
+ $input.attr("checked", "checked");
+ }
+
+ $menu
+ .css("top", e.pageY - 10)
+ .css("left", e.pageX - 10)
+ .fadeIn(options.fadeSpeed);
+ }
+
+ function updateColumn(e) {
+ if (e.target.id == 'autoresize') {
+ if (e.target.checked) {
+ grid.setOptions({forceFitColumns:true});
+ grid.autosizeColumns();
+ } else {
+ grid.setOptions({forceFitColumns:false});
+ }
+ return;
+ }
+
+ if (e.target.id == 'syncresize') {
+ if (e.target.checked) {
+ grid.setOptions({syncColumnCellResize:true});
+ } else {
+ grid.setOptions({syncColumnCellResize:false});
+ }
+ return;
+ }
+
+ if ($(e.target).is(":checkbox")) {
+ if ($menu.find(":checkbox:checked").length == 0) {
+ $(e.target).attr("checked", "checked");
+ return;
+ }
+
+ var visibleColumns = [];
+ $menu.find(":checkbox[id^=columnpicker]").each(function (i, e) {
+ if ($(this).is(":checked")) {
+ visibleColumns.push(columns[i]);
+ }
+ });
+ grid.setColumns(visibleColumns);
+ }
+ }
+
+ init();
+ }
+
+ // Slick.Controls.ColumnPicker
+ $.extend(true, window, { Slick:{ Controls:{ ColumnPicker:SlickColumnPicker }}});
})(jQuery);
View
63 controls/slick.pager.css
@@ -1,48 +1,41 @@
-.slick-pager
-{
- width: 100%;
- height: 26px;
- border: 1px solid gray;
- border-top: 0;
- background: url('../images/header-columns-bg.gif') repeat-x center bottom;
- vertical-align: middle;
+.slick-pager {
+ width: 100%;
+ height: 26px;
+ border: 1px solid gray;
+ border-top: 0;
+ background: url('../images/header-columns-bg.gif') repeat-x center bottom;
+ vertical-align: middle;
}
-.slick-pager .slick-pager-status
-{
- display: inline-block;
- padding: 6px;
+.slick-pager .slick-pager-status {
+ display: inline-block;
+ padding: 6px;
}
-.slick-pager .ui-icon-container
-{
- display: inline-block;
- margin: 2px;
- border-color: gray;
+.slick-pager .ui-icon-container {
+ display: inline-block;
+ margin: 2px;
+ border-color: gray;
}
-.slick-pager .slick-pager-nav
-{
- display: inline-block;
- float: left;
- padding: 2px;
+.slick-pager .slick-pager-nav {
+ display: inline-block;
+ float: left;
+ padding: 2px;
}
-.slick-pager .slick-pager-settings
-{
- display: block;
- float: right;
- padding: 2px;
+.slick-pager .slick-pager-settings {
+ display: block;
+ float: right;
+ padding: 2px;
}
-.slick-pager .slick-pager-settings *
-{
- vertical-align: middle;
+.slick-pager .slick-pager-settings * {
+ vertical-align: middle;
}
-.slick-pager .slick-pager-settings a
-{
- padding: 2px;
- text-decoration: underline;
- cursor: pointer;
+.slick-pager .slick-pager-settings a {
+ padding: 2px;
+ text-decoration: underline;
+ cursor: pointer;
}
View
261 controls/slick.pager.js
@@ -1,148 +1,151 @@
-(function($) {
- function SlickGridPager(dataView, grid, $container)
- {
- var $status;
-
- function init()
- {
- dataView.onPagingInfoChanged.subscribe(function(e,pagingInfo) {
- updatePager(pagingInfo);
- });
-
- constructPagerUI();
- updatePager(dataView.getPagingInfo());
- }
+(function ($) {
+ function SlickGridPager(dataView, grid, $container) {
+ var $status;
- function getNavState()
- {
- var cannotLeaveEditMode = !Slick.GlobalEditorLock.commitCurrentEdit();
- var pagingInfo = dataView.getPagingInfo();
- var lastPage = Math.floor(pagingInfo.totalRows/pagingInfo.pageSize);
-
- return {
- canGotoFirst: !cannotLeaveEditMode && pagingInfo.pageSize != 0 && pagingInfo.pageNum > 0,
- canGotoLast: !cannotLeaveEditMode && pagingInfo.pageSize != 0 && pagingInfo.pageNum != lastPage,
- canGotoPrev: !cannotLeaveEditMode && pagingInfo.pageSize != 0 && pagingInfo.pageNum > 0,
- canGotoNext: !cannotLeaveEditMode && pagingInfo.pageSize != 0 && pagingInfo.pageNum < lastPage,
- pagingInfo: pagingInfo,
- lastPage: lastPage
- }
- }
+ function init() {
+ dataView.onPagingInfoChanged.subscribe(function (e, pagingInfo) {
+ updatePager(pagingInfo);
+ });
- function setPageSize(n)
- {
- dataView.setRefreshHints({
- isFilterUnchanged: true
- });
- dataView.setPagingOptions({pageSize:n});
- }
+ constructPagerUI();
+ updatePager(dataView.getPagingInfo());
+ }
- function gotoFirst()
- {
- if (getNavState().canGotoFirst)
- dataView.setPagingOptions({pageNum: 0});
- }
+ function getNavState() {
+ var cannotLeaveEditMode = !Slick.GlobalEditorLock.commitCurrentEdit();
+ var pagingInfo = dataView.getPagingInfo();
+ var lastPage = Math.floor(pagingInfo.totalRows / pagingInfo.pageSize);
+
+ return {
+ canGotoFirst:!cannotLeaveEditMode && pagingInfo.pageSize != 0 && pagingInfo.pageNum > 0,
+ canGotoLast:!cannotLeaveEditMode && pagingInfo.pageSize != 0 && pagingInfo.pageNum != lastPage,
+ canGotoPrev:!cannotLeaveEditMode && pagingInfo.pageSize != 0 && pagingInfo.pageNum > 0,
+ canGotoNext:!cannotLeaveEditMode && pagingInfo.pageSize != 0 && pagingInfo.pageNum < lastPage,
+ pagingInfo:pagingInfo,
+ lastPage:lastPage
+ }
+ }
- function gotoLast()
- {
- var state = getNavState();
- if (state.canGotoLast)
- dataView.setPagingOptions({pageNum: state.lastPage});
- }
+ function setPageSize(n) {
+ dataView.setRefreshHints({
+ isFilterUnchanged:true
+ });
+ dataView.setPagingOptions({pageSize:n});
+ }
- function gotoPrev()
- {
- var state = getNavState();
- if (state.canGotoPrev)
- dataView.setPagingOptions({pageNum: state.pagingInfo.pageNum-1});
- }
+ function gotoFirst() {
+ if (getNavState().canGotoFirst) {
+ dataView.setPagingOptions({pageNum:0});
+ }
+ }
- function gotoNext()
- {
- var state = getNavState();
- if (state.canGotoNext)
- dataView.setPagingOptions({pageNum: state.pagingInfo.pageNum+1});
- }
+ function gotoLast() {
+ var state = getNavState();
+ if (state.canGotoLast) {
+ dataView.setPagingOptions({pageNum:state.lastPage});
+ }
+ }
+
+ function gotoPrev() {
+ var state = getNavState();
+ if (state.canGotoPrev) {
+ dataView.setPagingOptions({pageNum:state.pagingInfo.pageNum - 1});
+ }
+ }
+
+ function gotoNext() {
+ var state = getNavState();
+ if (state.canGotoNext) {
+ dataView.setPagingOptions({pageNum:state.pagingInfo.pageNum + 1});
+ }
+ }
- function constructPagerUI()
- {
- $container.empty();
-
- var $nav = $("<span class='slick-pager-nav' />").appendTo($container);
- var $settings = $("<span class='slick-pager-settings' />").appendTo($container);
- $status = $("<span class='slick-pager-status' />").appendTo($container);
-
- $settings
- .append("<span class='slick-pager-settings-expanded' style='display:none'>Show: <a data=0>All</a><a data='-1'>Auto</a><a data=25>25</a><a data=50>50</a><a data=100>100</a></span>");
-
- $settings.find("a[data]").click(function(e) {
- var pagesize = $(e.target).attr("data");
- if (pagesize != undefined)
- {
- if (pagesize == -1)
- {
- var vp = grid.getViewport();
- setPageSize(vp.bottom-vp.top);
- }
- else
- setPageSize(parseInt(pagesize));
- }
- });
-
- var icon_prefix = "<span class='ui-state-default ui-corner-all ui-icon-container'><span class='ui-icon ";
- var icon_suffix = "' /></span>";
-
- $(icon_prefix + "ui-icon-lightbulb" + icon_suffix)
- .click(function() { $(".slick-pager-settings-expanded").toggle() })
- .appendTo($settings);
-
- $(icon_prefix + "ui-icon-seek-first" + icon_suffix)
- .click(gotoFirst)
- .appendTo($nav);
-
- $(icon_prefix + "ui-icon-seek-prev" + icon_suffix)
- .click(gotoPrev)
- .appendTo($nav);
-
- $(icon_prefix + "ui-icon-seek-next" + icon_suffix)
- .click(gotoNext)
- .appendTo($nav);
-
- $(icon_prefix + "ui-icon-seek-end" + icon_suffix)
- .click(gotoLast)
- .appendTo($nav);
-
- $container.find(".ui-icon-container")
- .hover(function() {
- $(this).toggleClass("ui-state-hover");
- });
-
- $container.children().wrapAll("<div class='slick-pager' />");
+ function constructPagerUI() {
+ $container.empty();
+
+ var $nav = $("<span class='slick-pager-nav' />").appendTo($container);
+ var $settings = $("<span class='slick-pager-settings' />").appendTo($container);
+ $status = $("<span class='slick-pager-status' />").appendTo($container);
+
+ $settings
+ .append("<span class='slick-pager-settings-expanded' style='display:none'>Show: <a data=0>All</a><a data='-1'>Auto</a><a data=25>25</a><a data=50>50</a><a data=100>100</a></span>");
+
+ $settings.find("a[data]").click(function (e) {
+ var pagesize = $(e.target).attr("data");
+ if (pagesize != undefined) {
+ if (pagesize == -1) {
+ var vp = grid.getViewport();
+ setPageSize(vp.bottom - vp.top);
+ }
+ else {
+ setPageSize(parseInt(pagesize));
+ }
}
+ });
+ var icon_prefix = "<span class='ui-state-default ui-corner-all ui-icon-container'><span class='ui-icon ";
+ var icon_suffix = "' /></span>";
- function updatePager(pagingInfo)
- {
- var state = getNavState();
+ $(icon_prefix + "ui-icon-lightbulb" + icon_suffix)
+ .click(function () {
+ $(".slick-pager-settings-expanded").toggle()
+ })
+ .appendTo($settings);
- $container.find(".slick-pager-nav span").removeClass("ui-state-disabled");
- if (!state.canGotoFirst) $container.find(".ui-icon-seek-first").addClass("ui-state-disabled");
- if (!state.canGotoLast) $container.find(".ui-icon-seek-end").addClass("ui-state-disabled");
- if (!state.canGotoNext) $container.find(".ui-icon-seek-next").addClass("ui-state-disabled");
- if (!state.canGotoPrev) $container.find(".ui-icon-seek-prev").addClass("ui-state-disabled");
+ $(icon_prefix + "ui-icon-seek-first" + icon_suffix)
+ .click(gotoFirst)
+ .appendTo($nav);
+ $(icon_prefix + "ui-icon-seek-prev" + icon_suffix)
+ .click(gotoPrev)
+ .appendTo($nav);
- if (pagingInfo.pageSize == 0)
- $status.text("Showing all " + pagingInfo.totalRows + " rows");
- else
- $status.text("Showing page " + (pagingInfo.pageNum+1) + " of " + (Math.floor(pagingInfo.totalRows/pagingInfo.pageSize)+1));
- }
+ $(icon_prefix + "ui-icon-seek-next" + icon_suffix)
+ .click(gotoNext)
+ .appendTo($nav);
+ $(icon_prefix + "ui-icon-seek-end" + icon_suffix)
+ .click(gotoLast)
+ .appendTo($nav);
+ $container.find(".ui-icon-container")
+ .hover(function () {
+ $(this).toggleClass("ui-state-hover");
+ });
- init();
+ $container.children().wrapAll("<div class='slick-pager' />");
}
- // Slick.Controls.Pager
- $.extend(true, window, { Slick: { Controls: { Pager: SlickGridPager }}});
+
+ function updatePager(pagingInfo) {
+ var state = getNavState();
+
+ $container.find(".slick-pager-nav span").removeClass("ui-state-disabled");
+ if (!state.canGotoFirst) {
+ $container.find(".ui-icon-seek-first").addClass("ui-state-disabled");
+ }
+ if (!state.canGotoLast) {
+ $container.find(".ui-icon-seek-end").addClass("ui-state-disabled");
+ }
+ if (!state.canGotoNext) {
+ $container.find(".ui-icon-seek-next").addClass("ui-state-disabled");
+ }
+ if (!state.canGotoPrev) {
+ $container.find(".ui-icon-seek-prev").addClass("ui-state-disabled");
+ }
+
+
+ if (pagingInfo.pageSize == 0) {
+ $status.text("Showing all " + pagingInfo.totalRows + " rows");
+ }
+ else {
+ $status.text("Showing page " + (pagingInfo.pageNum + 1) + " of " + (Math.floor(pagingInfo.totalRows / pagingInfo.pageSize) + 1));
+ }
+ }
+
+ init();
+ }
+
+ // Slick.Controls.Pager
+ $.extend(true, window, { Slick:{ Controls:{ Pager:SlickGridPager }}});
})(jQuery);
View
110 examples/example-checkbox-row-select.html
@@ -1,31 +1,31 @@
<!DOCTYPE HTML>
<html>
<head>
- <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
- <link rel="stylesheet" href="../slick.grid.css" type="text/css" media="screen" charset="utf-8" />
- <link rel="stylesheet" href="../css/smoothness/jquery-ui-1.8.16.custom.css" type="text/css" media="screen" charset="utf-8" />
- <link rel="stylesheet" href="examples.css" type="text/css" media="screen" charset="utf-8" />
- <style>
- .slick-cell-checkboxsel {
- background: #f0f0f0;
- border-right-color: silver;
- border-right-style: solid;
- }
- </style>
+ <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
+ <link rel="stylesheet" href="../slick.grid.css" type="text/css" />
+ <link rel="stylesheet" href="../css/smoothness/jquery-ui-1.8.16.custom.css" type="text/css" />
+ <link rel="stylesheet" href="examples.css" type="text/css" />
+ <style>
+ .slick-cell-checkboxsel {
+ background: #f0f0f0;
+ border-right-color: silver;
+ border-right-style: solid;
+ }
+ </style>
</head>
<body>
- <div style="position:relative">
- <div style="width:600px;">
- <div id="myGrid" style="width:100%;height:500px;"></div>
- </div>
+<div style="position:relative">
+ <div style="width:600px;">
+ <div id="myGrid" style="width:100%;height:500px;"></div>
+ </div>
- <div class="options-panel">
- <h2>Demonstrates:</h2>
- <ul>
- <li>Checkbox row select column</li>
- </ul>
- </div>
- </div>
+ <div class="options-panel">
+ <h2>Demonstrates:</h2>
+ <ul>
+ <li>Checkbox row select column</li>
+ </ul>
+ </div>
+</div>
<script src="../lib/firebugx.js"></script>
@@ -45,46 +45,42 @@
<script src="../slick.grid.js"></script>
<script>
- var grid;
- var data = [];
- var options = {
- editable: true,
- enableCellNavigation: true,
- asyncEditorLoading: false,
- autoEdit: false
- };
- var columns = [];
+ var grid;
+ var data = [];
+ var options = {
+ editable:true,
+ enableCellNavigation:true,
+ asyncEditorLoading:false,
+ autoEdit:false
+ };
+ var columns = [];
+ $(function () {
+ for (var i = 0; i < 100; i++) {
+ var d = (data[i] = {});
+ d[0] = "Row " + i;
+ }
- $(function()
- {
- for (var i=0; i<100; i++) {
- var d = (data[i] = {});
- d[0] = "Row " + i;
- }
+ var checkboxSelector = new Slick.CheckboxSelectColumn({
+ cssClass:"slick-cell-checkboxsel"
+ });
- var checkboxSelector = new Slick.CheckboxSelectColumn({
- cssClass: "slick-cell-checkboxsel"
- });
+ columns.push(checkboxSelector.getColumnDefinition());
- columns.push(checkboxSelector.getColumnDefinition());
+ for (var i = 0; i < 5; i++) {
+ columns.push({
+ id:i,
+ name:String.fromCharCode("A".charCodeAt(0) + i),
+ field:i,
+ width:100,
+ editor:TextCellEditor
+ });
+ }
- for (var i = 0; i < 5; i++) {
- columns.push({
- id: i,
- name: String.fromCharCode("A".charCodeAt(0) + i),
- field: i,
- width: 100,
- editor: TextCellEditor
- });
- }
-
-
- grid = new Slick.Grid("#myGrid", data, columns, options);
- grid.setSelectionModel(new Slick.RowSelectionModel({selectActiveRow:false}));
- grid.registerPlugin(checkboxSelector);
-
- })
+ grid = new Slick.Grid("#myGrid", data, columns, options);
+ grid.setSelectionModel(new Slick.RowSelectionModel({selectActiveRow:false}));
+ grid.registerPlugin(checkboxSelector);
+ })
</script>
</body>
</html>
View
154 examples/example-colspan.html
@@ -1,89 +1,89 @@
<!DOCTYPE HTML>
<html>
- <head>
- <link rel="stylesheet" href="../slick.grid.css" type="text/css" media="screen" charset="utf-8" />
- <link rel="stylesheet" href="../css/smoothness/jquery-ui-1.8.16.custom.css" type="text/css" media="screen" charset="utf-8" />
- <link rel="stylesheet" href="examples.css" type="text/css" media="screen" charset="utf-8" />
- </head>
- <body>
- <table width="100%">
- <tr>
- <td valign="top" width="50%">
- <div id="myGrid" style="width:600px;height:500px;"></div>
- </td>
- <td valign="top">
- <h2>Demonstrates:</h2>
- <ul>
- <li>column span</li>
- </ul>
- </td>
- </tr>
- </table>
+<head>
+ <link rel="stylesheet" href="../slick.grid.css" type="text/css" />
+ <link rel="stylesheet" href="../css/smoothness/jquery-ui-1.8.16.custom.css" type="text/css" />
+ <link rel="stylesheet" href="examples.css" type="text/css" />
+</head>
+<body>
+<table width="100%">
+ <tr>
+ <td valign="top" width="50%">
+ <div id="myGrid" style="width:600px;height:500px;"></div>
+ </td>
+ <td valign="top">
+ <h2>Demonstrates:</h2>
+ <ul>
+ <li>column span</li>
+ </ul>
+ </td>
+ </tr>
+</table>
- <script src="../lib/jquery-1.7.min.js"></script>
- <script src="../lib/jquery.event.drag-2.0.min.js"></script>
+<script src="../lib/jquery-1.7.min.js"></script>
+<script src="../lib/jquery.event.drag-2.0.min.js"></script>
- <script src="../slick.core.js"></script>
- <script src="../plugins/slick.cellrangedecorator.js"></script>
- <script src="../plugins/slick.cellrangeselector.js"></script>
- <script src="../plugins/slick.cellselectionmodel.js"></script>
- <script src="../slick.grid.js"></script>
+<script src="../slick.core.js"></script>
+<script src="../plugins/slick.cellrangedecorator.js"></script>
+<script src="../plugins/slick.cellrangeselector.js"></script>
+<script src="../plugins/slick.cellselectionmodel.js"></script>
+<script src="../slick.grid.js"></script>
- <script>
- var grid;
+<script>
+ var grid;
- var columns = [
- {id:"title", name:"Title", field:"title"},
- {id:"duration", name:"Duration", field:"duration"},
- {id:"%", name:"% Complete", field:"percentComplete", selectable:false},
- {id:"start", name:"Start", field:"start"},
- {id:"finish", name:"Finish", field:"finish"},
- {id:"effort-driven", name:"Effort Driven", field:"effortDriven"}
- ];
+ var columns = [
+ {id:"title", name:"Title", field:"title"},
+ {id:"duration", name:"Duration", field:"duration"},
+ {id:"%", name:"% Complete", field:"percentComplete", selectable:false},
+ {id:"start", name:"Start", field:"start"},
+ {id:"finish", name:"Finish", field:"finish"},
+ {id:"effort-driven", name:"Effort Driven", field:"effortDriven"}
+ ];
- var options = {
- enableCellNavigation: true,
- enableColumnReorder: false
- };
+ var options = {
+ enableCellNavigation:true,
+ enableColumnReorder:false
+ };
- $(function() {
- var data = [];
- for (var i = 0; i < 10; i++) {
- data[i] = {
- title: "Task " + i,
- duration: "5 days",
- percentComplete: Math.round(Math.random() * 100),
- start: "01/01/2009",
- finish: "01/05/2009",
- effortDriven: (i % 5 == 0)
- };
- }
+ $(function () {
+ var data = [];
+ for (var i = 0; i < 10; i++) {
+ data[i] = {
+ title:"Task " + i,
+ duration:"5 days",
+ percentComplete:Math.round(Math.random() * 100),
+ start:"01/01/2009",
+ finish:"01/05/2009",
+ effortDriven:(i % 5 == 0)
+ };
+ }
- data.getItemMetadata = function (row) {
- if (row % 2 === 1) {
- return {
- "columns": {
- "duration": {
- "colspan": 3
- }
- }
- };
- }
- else {
- return {
- "columns": {
- 0: {
- "colspan": "*"
- }
- }
- };
- }
- };
+ data.getItemMetadata = function (row) {
+ if (row % 2 === 1) {
+ return {
+ "columns":{
+ "duration":{
+ "colspan":3
+ }
+ }
+ };
+ }
+ else {
+ return {
+ "columns":{
+ 0:{
+ "colspan":"*"
+ }
+ }
+ };
+ }
+ };
- grid = new Slick.Grid("#myGrid", data, columns, options);
+ grid = new Slick.Grid("#myGrid", data, columns, options);
- grid.setSelectionModel(new Slick.CellSelectionModel());
- })
- </script>
- </body>
+ grid.setSelectionModel(new Slick.CellSelectionModel());
+ })
+</script>
+</body>
</html>
View
457 examples/example-composite-editor-item-details.html
@@ -1,233 +1,236 @@
<!DOCTYPE HTML>
<html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
- <title>SlickGrid example: CompositeEditor</title>
- <link rel="stylesheet" href="../slick.grid.css" type="text/css" media="screen" charset="utf-8" />
- <link rel="stylesheet" href="../css/smoothness/jquery-ui-1.8.16.custom.css" type="text/css" media="screen" charset="utf-8" />
- <link rel="stylesheet" href="examples.css" type="text/css" media="screen" charset="utf-8" />
- <style>
- .cell-title {
- font-weight: bold;
- }
-
- .cell-effort-driven {
- text-align: center;
- }
-
- .item-details-form {
- z-index: 10000;
- display:inline-block;
- border:1px solid black;
- margin:8px;
- padding:10px;
- background: #efefef;
- -moz-box-shadow: 0px 0px 15px black;
- -webkit-box-shadow: 0px 0px 15px black;
- box-shadow: 0px 0px 15px black;
-
- position:absolute;
- top: 10px;
- left: 150px;
- }
-
- .item-details-form-buttons {
- float: right;
- }
-
- .item-details-row {
-
- }
-
- .item-details-label {
- margin-left:10px;
- margin-top:20px;
- display:block;
- font-weight:bold;
- }
-
- .item-details-editor-container {
- width:200px;
- height:20px;
- border:1px solid silver;
- background:white;
- display:block;
- margin:10px;
- margin-top:4px;
- padding:0;
- padding-left:4px;
- padding-right:4px;
- }
- </style>
- </head>
- <body>
- <div style="position:relative">
- <div style="width:600px;">
- <div id="myGrid" style="width:100%;height:500px;"></div>
- </div>
-
- <div class="options-panel">
- <h2>Demonstrates:</h2>
- <ul>
- <li>using a CompositeEditor to implement detached item edit form</li>
- </ul>
-
- <h2>Options:</h2>
- <button onclick="openDetails()">Open Item Edit for active row</button>
- </div>
- </div>
-
- <script id="itemDetailsTemplate" type="text/x-jquery-tmpl">
- <div class='item-details-form'>
- {{each columns}}
- <div class='item-details-label'>
- ${name}
- </div>
- <div class='item-details-editor-container' data-editorid='${id}'></div>
- {{/each}}
-
- <hr/>
- <div class='item-details-form-buttons'>
- <button data-action='save'>Save</button>
- <button data-action='cancel'>Cancel</button>
- </div>
- </div>
- </script>
-
-
-
- <script src="../lib/firebugx.js"></script>
-
- <script src="../lib/jquery-1.7.min.js"></script>
- <script src="../lib/jquery-ui-1.8.16.custom.min.js"></script>
- <script src="../lib/jquery.event.drag-2.0.min.js"></script>
- <script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
-
- <script src="../slick.core.js"></script>
- <script src="../plugins/slick.cellrangeselector.js"></script>
- <script src="../plugins/slick.cellselectionmodel.js"></script>
- <script src="../slick.editors.js"></script>
- <script src="../slick.grid.js"></script>
- <script src="slick.compositeeditor.js"></script>
-
- <script>
- function requiredFieldValidator(value) {
- if (value == null || value == undefined || !value.length)
- return {valid:false, msg:"This is a required field"};
- else
- return {valid:true, msg:null};
- }
-
- var grid;
- var data = [];
- var columns = [
- {id:"title", name:"Title", field:"title", width:120, cssClass:"cell-title", editor:TextCellEditor, validator:requiredFieldValidator},
- {id:"desc", name:"Description", field:"description", width:100, editor:TextCellEditor},
- {id:"duration", name:"Duration", field:"duration", editor:TextCellEditor},
- {id:"%", name:"% Complete", field:"percentComplete", width:80, resizable:false, formatter:GraphicalPercentCompleteCellFormatter, editor:PercentCompleteCellEditor},
- {id:"start", name:"Start", field:"start", minWidth:60, editor:DateCellEditor},
- {id:"finish", name:"Finish", field:"finish", minWidth:60, editor:DateCellEditor},
- {id:"effort-driven", name:"Effort Driven", width:80, minWidth:20, maxWidth:80, cssClass:"cell-effort-driven", field:"effortDriven", formatter:BoolCellFormatter, editor:YesNoCheckboxCellEditor}
- ];
- var options = {
- editable: true,
- enableAddRow: true,
- enableCellNavigation: true,
- asyncEditorLoading: false,
- autoEdit: false
- };
-
-
-
- function openDetails() {
- if (grid.getEditorLock().isActive() && !grid.getEditorLock().commitCurrentEdit()) {
- return;
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
+ <title>SlickGrid example: CompositeEditor</title>
+ <link rel="stylesheet" href="../slick.grid.css" type="text/css" />
+ <link rel="stylesheet" href="../css/smoothness/jquery-ui-1.8.16.custom.css" type="text/css" />
+ <link rel="stylesheet" href="examples.css" type="text/css" />
+ <style>
+ .cell-title {
+ font-weight: bold;
+ }
+
+ .cell-effort-driven {
+ text-align: center;
+ }
+
+ .item-details-form {
+ z-index: 10000;
+ display: inline-block;
+ border: 1px solid black;
+ margin: 8px;
+ padding: 10px;
+ background: #efefef;
+ -moz-box-shadow: 0px 0px 15px black;
+ -webkit-box-shadow: 0px 0px 15px black;
+ box-shadow: 0px 0px 15px black;
+
+ position: absolute;
+ top: 10px;
+ left: 150px;
+ }
+
+ .item-details-form-buttons {
+ float: right;
+ }
+
+ .item-details-row {
+
+ }
+
+ .item-details-label {
+ margin-left: 10px;
+ margin-top: 20px;
+ display: block;
+ font-weight: bold;
+ }
+
+ .item-details-editor-container {
+ width: 200px;
+ height: 20px;
+ border: 1px solid silver;
+ background: white;
+ display: block;
+ margin: 10px;
+ margin-top: 4px;
+ padding: 0;
+ padding-left: 4px;
+ padding-right: 4px;
+ }
+ </style>
+</head>
+<body>
+<div style="position:relative">
+ <div style="width:600px;">
+ <div id="myGrid" style="width:100%;height:500px;"></div>
+ </div>
+
+ <div class="options-panel">
+ <h2>Demonstrates:</h2>
+ <ul>
+ <li>using a CompositeEditor to implement detached item edit form</li>
+ </ul>
+
+ <h2>Options:</h2>
+ <button onclick="openDetails()">Open Item Edit for active row</button>
+ </div>
+</div>
+
+<script id="itemDetailsTemplate" type="text/x-jquery-tmpl">
+ <div class='item-details-form'>
+ {{each columns}}
+ <div class='item-details-label'>
+ ${name}
+ </div>
+ <div class='item-details-editor-container' data-editorid='${id}'></div>
+ {{/each}}
+
+ <hr/>
+ <div class='item-details-form-buttons'>
+ <button data-action='save'>Save</button>
+ <button data-action='cancel'>Cancel</button>
+ </div>
+ </div>
+</script>
+
+
+<script src="../lib/firebugx.js"></script>
+
+<script src="../lib/jquery-1.7.min.js"></script>
+<script src="../lib/jquery-ui-1.8.16.custom.min.js"></script>
+<script src="../lib/jquery.event.drag-2.0.min.js"></script>
+<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
+
+<script src="../slick.core.js"></script>
+<script src="../plugins/slick.cellrangeselector.js"></script>
+<script src="../plugins/slick.cellselectionmodel.js"></script>
+<script src="../slick.editors.js"></script>
+<script src="../slick.grid.js"></script>
+<script src="slick.compositeeditor.js"></script>
+
+<script>
+ function requiredFieldValidator(value) {
+ if (value == null || value == undefined || !value.length) {
+ return {valid:false, msg:"This is a required field"};
+ }
+ else {
+ return {valid:true, msg:null};
+ }
+ }
+
+ var grid;
+ var data = [];
+ var columns = [
+ {id:"title", name:"Title", field:"title", width:120, cssClass:"cell-title", editor:TextCellEditor, validator:requiredFieldValidator},
+ {id:"desc", name:"Description", field:"description", width:100, editor:TextCellEditor},
+ {id:"duration", name:"Duration", field:"duration", editor:TextCellEditor},
+ {id:"%", name:"% Complete", field:"percentComplete", width:80, resizable:false, formatter:GraphicalPercentCompleteCellFormatter, editor:PercentCompleteCellEditor},
+ {id:"start", name:"Start", field:"start", minWidth:60, editor:DateCellEditor},
+ {id:"finish", name:"Finish", field:"finish", minWidth:60, editor:DateCellEditor},
+ {id:"effort-driven", name:"Effort Driven", width:80, minWidth:20, maxWidth:80, cssClass:"cell-effort-driven", field:"effortDriven", formatter:BoolCellFormatter, editor:YesNoCheckboxCellEditor}
+ ];
+ var options = {
+ editable:true,
+ enableAddRow:true,
+ enableCellNavigation:true,
+ asyncEditorLoading:false,
+ autoEdit:false
+ };
+
+
+ function openDetails() {
+ if (grid.getEditorLock().isActive() && !grid.getEditorLock().commitCurrentEdit()) {
+ return;
+ }
+
+ var $modal = $("<div class='item-details-form'></div>");
+
+ $modal = $("#itemDetailsTemplate")
+ .tmpl({
+ context:grid.getDataItem(grid.getActiveCell().row),
+ columns:columns
+ })
+ .appendTo("body");
+
+ $modal.keydown(function (e) {
+ if (e.which == $.ui.keyCode.ENTER) {
+ grid.getEditController().commitCurrentEdit();
+ e.stopPropagation();
+ e.preventDefault();
+ }
+ else if (e.which == $.ui.keyCode.ESCAPE) {
+ grid.getEditController().cancelCurrentEdit();
+ e.stopPropagation();
+ e.preventDefault();
+ }
+ });
+
+ $modal.find("[data-action=save]").click(function () {
+ grid.getEditController().commitCurrentEdit();
+ });
+
+ $modal.find("[data-action=cancel]").click(function () {
+ grid.getEditController().cancelCurrentEdit();
+ });
+
+
+ var containers = $.map(columns, function (c) {
+ return $modal.find("[data-editorid=" + c.id + "]");
+ });
+
+ var compositeEditor = new Slick.CompositeEditor(
+ columns,
+ containers,
+ {
+ destroy:function () {
+ $modal.remove();
+ }
}
-
- var $modal = $("<div class='item-details-form'></div>");
-
- $modal = $("#itemDetailsTemplate")
- .tmpl({
- context: grid.getDataItem(grid.getActiveCell().row),
- columns: columns
- })
- .appendTo("body");
-
- $modal.keydown(function(e) {
- if (e.which == $.ui.keyCode.ENTER) {
- grid.getEditController().commitCurrentEdit();
- e.stopPropagation();
- e.preventDefault();
- }
- else if (e.which == $.ui.keyCode.ESCAPE) {
- grid.getEditController().cancelCurrentEdit();
- e.stopPropagation();
- e.preventDefault();
- }
- });
-
- $modal.find("[data-action=save]").click(function() {
- grid.getEditController().commitCurrentEdit();
- });
-
- $modal.find("[data-action=cancel]").click(function() {
- grid.getEditController().cancelCurrentEdit();
- });
-
-
- var containers = $.map(columns, function(c) { return $modal.find("[data-editorid=" + c.id + "]"); });
-
- var compositeEditor = new Slick.CompositeEditor(
- columns,
- containers,
- {
- destroy: function () { $modal.remove(); }
- }
- );
-
- grid.editActiveCell(compositeEditor);
+ );
+
+ grid.editActiveCell(compositeEditor);
+ }
+
+ $(function () {
+ for (var i = 0; i < 500; i++) {
+ var d = (data[i] = {});
+
+ d["title"] = "Task " + i;
+ d["description"] = "This is a sample task description.\n It can be multiline";
+ d["duration"] = "5 days";
+ d["percentComplete"] = Math.round(Math.random() * 100);
+ d["start"] = "01/01/2009";
+ d["finish"] = "01/05/2009";
+ d["effortDriven"] = (i % 5 == 0);
+ }
+
+ grid = new Slick.Grid("#myGrid", data, columns, options);
+
+ grid.onAddNewRow.subscribe(function (e, args) {
+ var item = args.item;
+ var column = args.column;
+ grid.invalidateRow(data.length);
+ data.push(item);
+ grid.updateRowCount();
+ grid.render();
+ });
+
+
+ grid.onValidationError.subscribe(function (e, args) {
+ // handle validation errors originating from the CompositeEditor
+ if (args.editor && (args.editor instanceof Slick.CompositeEditor)) {
+ var err;
+ var idx = args.validationResults.errors.length;
+ while (idx--) {
+ err = args.validationResults.errors[idx];
+ $(err.container).stop(true, true).effect("highlight", {color:"red"});
}
+ }
+ });
- $(function()
- {
- for (var i=0; i<500; i++) {
- var d = (data[i] = {});
-
- d["title"] = "Task " + i;
- d["description"] = "This is a sample task description.\n It can be multiline";
- d["duration"] = "5 days";
- d["percentComplete"] = Math.round(Math.random() * 100);
- d["start"] = "01/01/2009";
- d["finish"] = "01/05/2009";
- d["effortDriven"] = (i % 5 == 0);
- }
-
- grid = new Slick.Grid("#myGrid", data, columns, options);
-
- grid.onAddNewRow.subscribe(function(e, args) {
- var item = args.item;
- var column = args.column;
- grid.invalidateRow(data.length);
- data.push(item);
- grid.updateRowCount();
- grid.render();
- });
-
-
- grid.onValidationError.subscribe(function(e, args) {
- // handle validation errors originating from the CompositeEditor
- if (args.editor && (args.editor instanceof Slick.CompositeEditor)) {
- var err;
- var idx = args.validationResults.errors.length;
- while (idx--) {
- err = args.validationResults.errors[idx];
- $(err.container).stop(true,true).effect("highlight", {color:"red"});
- }
- }
- });
-
- grid.setActiveCell(0, 0);
- })
- </script>
- </body>
+ grid.setActiveCell(0, 0);
+ })
+</script>
+</body>
</html>
View
126 examples/example-custom-column-value-extractor.html
@@ -1,76 +1,76 @@
<!DOCTYPE HTML>
<html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
- <title>SlickGrid example: Custom column value extractor</title>
- <link rel="stylesheet" href="../slick.grid.css" type="text/css" media="screen" charset="utf-8" />
- <link rel="stylesheet" href="../css/smoothness/jquery-ui-1.8.16.custom.css" type="text/css" media="screen" charset="utf-8" />
- <link rel="stylesheet" href="examples.css" type="text/css" media="screen" charset="utf-8" />
- </head>
- <body>
- <table width="100%">
- <tr>
- <td valign="top" width="50%">
- <div id="myGrid" style="width:600px;height:500px;"></div>
- </td>
- <td valign="top">
- <h2>Demonstrates:</h2>
- <ul>
- <li>using <u>dataItemColumnValueExtractor</u> option to specify a custom column value extractor</li>
- </ul>
- </td>
- </tr>
- </table>
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
+ <title>SlickGrid example: Custom column value extractor</title>
+ <link rel="stylesheet" href="../slick.grid.css" type="text/css" />
+ <link rel="stylesheet" href="../css/smoothness/jquery-ui-1.8.16.custom.css" type="text/css" />
+ <link rel="stylesheet" href="examples.css" type="text/css" />
+</head>
+<body>
+<table width="100%">
+ <tr>
+ <td valign="top" width="50%">
+ <div id="myGrid" style="width:600px;height:500px;"></div>
+ </td>
+ <td valign="top">
+ <h2>Demonstrates:</h2>
+ <ul>
+ <li>using <u>dataItemColumnValueExtractor</u> option to specify a custom column value extractor</li>
+ </ul>
+ </td>
+ </tr>
+</table>
- <script src="../lib/jquery-1.7.min.js"></script>
- <script src="../lib/jquery.event.drag-2.0.min.js"></script>
+<script src="../lib/jquery-1.7.min.js"></script>
+<script src="../lib/jquery.event.drag-2.0.min.js"></script>
- <script src="../slick.core.js"></script>
- <script src="../slick.grid.js"></script>
+<script src="../slick.core.js"></script>
+<script src="../slick.grid.js"></script>
- <script>
+<script>
- var grid;
+ var grid;
- var columns = [
- {id:"title", name:"Name", field:"name"},
- {id:"field1", name:"Field1", field:"values", fieldIdx: 0},
- {id:"field2", name:"Field2", field:"values", fieldIdx: 1},
- {id:"field3", name:"Field3", field:"values", fieldIdx: 2}
- ];
+ var columns = [
+ {id:"title", name:"Name", field:"name"},
+ {id:"field1", name:"Field1", field:"values", fieldIdx:0},
+ {id:"field2", name:"Field2", field:"values", fieldIdx:1},
+ {id:"field3", name:"Field3", field:"values", fieldIdx:2}
+ ];
- var options = {
- enableCellNavigation: true,
- enableColumnReorder: false,
- dataItemColumnValueExtractor: getItemColumnValue
- };
+ var options = {
+ enableCellNavigation:true,
+ enableColumnReorder:false,
+ dataItemColumnValueExtractor:getItemColumnValue
+ };
- // Get the item column value using a custom 'fieldIdx' column param
- function getItemColumnValue(item, column) {
- var values = item[column.field];
- if (column.fieldIdx !== undefined) {
- return values && values[column.fieldIdx];
- } else {
- return values;
- }
- }
+ // Get the item column value using a custom 'fieldIdx' column param
+ function getItemColumnValue(item, column) {
+ var values = item[column.field];
+ if (column.fieldIdx !== undefined) {
+ return values && values[column.fieldIdx];
+ } else {
+ return values;
+ }
+ }
- $(function() {
- var data = [];
- for (var i = 0; i < 500; i++) {
- data[i] = {
- name: "Item " + i,
- values: [
- Math.round(Math.random() * 100),
- Math.round(Math.random() * 100),
- Math.round(Math.random() * 100)
- ]
- };
- }
+ $(function () {
+ var data = [];
+ for (var i = 0; i < 500; i++) {
+ data[i] = {
+ name:"Item " + i,
+ values:[
+ Math.round(Math.random() * 100),
+ Math.round(Math.random() * 100),
+ Math.round(Math.random() * 100)
+ ]
+ };
+ }
- grid = new Slick.Grid("#myGrid", data, columns, options);
- })
+ grid = new Slick.Grid("#myGrid", data, columns, options);
+ })
- </script>
- </body>
+</script>
+</body>
</html>
View
699 examples/example-grouping.html
@@ -1,350 +1,361 @@
<!DOCTYPE HTML>
<html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
- <title>SlickGrid example: Grouping</title>
- <link rel="stylesheet" href="../slick.grid.css" type="text/css" media="screen" charset="utf-8" />
- <link rel="stylesheet" href="../controls/slick.pager.css" type="text/css" media="screen" charset="utf-8" />
- <link rel="stylesheet" href="../css/smoothness/jquery-ui-1.8.16.custom.css" type="text/css" media="screen" charset="utf-8" />
- <link rel="stylesheet" href="examples.css" type="text/css" media="screen" charset="utf-8" />
- <link rel="stylesheet" href="../controls/slick.columnpicker.css" type="text/css" media="screen" charset="utf-8" />
- <style>
- .cell-title {
- font-weight: bold;
- }
-
- .cell-effort-driven {
- text-align: center;
- }
- </style>
- </head>
- <body>
- <div style="position:relative">
- <div style="width:600px;">
- <div class="grid-header" style="width:100%">
- <label>SlickGrid</label>
- </div>
- <div id="myGrid" style="width:100%;height:500px;"></div>
- <div id="pager" style="width:100%;height:20px;"></div>
- </div>
-
- <div class="options-panel">
- <b>Options:</b>
- <hr/>
- <div style="padding:6px;">
- <label style="width:200px;float:left">Show tasks with % at least: </label>
- <div style="padding:2px;">
- <div style="width:100px;display:inline-block;" id="pcSlider"></div>
- </div>
- <br/>
- <label style="width:200px;float:left">And title including:</label>
- <input type=text id="txtSearch" style="width:100px;">
- <br/><br/>
- <hr/>
- <button onclick="clearGrouping()">Clear grouping</button><br/>
- <button onclick="groupByDuration()">Group by duration & sort groups by value</button><br/>
- <button onclick="groupByDurationOrderByCount()">Group by duration & sort groups by count</button><br/>
- <button onclick="groupByDurationOrderByCountGroupCollapsed()">Group by duration & sort groups by count, group collapsed</button><br/>
- <br/>
- <button onclick="collapseAllGroups()">Collapse all groups</button><br/>
- <button onclick="expandAllGroups()">Expand all groups</button><br/>
- </div>
- <hr/>
- <h2>Demonstrates:</h2>
- <ul>
- <li>
- Fully dynamic and interactive grouping with filtering and aggregates over <b>50'000</b> items<br>
- Personally, this is just the coolest slickest thing I've ever seen done with DHTML grids!
- </li>
- </ul>
- </div>
- </div>
-
-
- <script src="../lib/firebugx.js"></script>
-
- <script src="../lib/jquery-1.7.min.js"></script>
- <script src="../lib/jquery-ui-1.8.16.custom.min.js"></script>
- <script src="../lib/jquery.event.drag-2.0.min.js"></script>
-
- <script src="../slick.core.js"></script>
- <script src="../slick.editors.js"></script>
- <script src="../plugins/slick.cellrangedecorator.js"></script>
- <script src="../plugins/slick.cellrangeselector.js"></script>
- <script src="../plugins/slick.cellselectionmodel.js"></script>
- <script src="../slick.grid.js"></script>
- <script src="../slick.groupitemmetadataprovider.js"></script>
- <script src="../slick.dataview.js"></script>
- <script src="../controls/slick.pager.js"></script>
- <script src="../controls/slick.columnpicker.js"></script>
-
- <script>
- var dataView;
- var grid;
- var data = [];
-
- var columns = [
- {id:"sel", name:"#", field:"num", cssClass:"cell-selection", width:40, resizable:false, selectable:false, focusable:false },
- {id:"title", name:"Title", field:"title", width:120, minWidth:120, cssClass:"cell-title", sortable:true, editor:TextCellEditor},
- {id:"duration", name:"Duration", field:"duration", sortable:true},
- {id:"%", name:"% Complete", field:"percentComplete", width:80, formatter:GraphicalPercentCompleteCellFormatter, sortable:true, groupTotalsFormatter:avgTotalsFormatter},
- {id:"start", name:"Start", field:"start", minWidth:60, sortable:true},
- {id:"finish", name:"Finish", field:"finish", minWidth:60, sortable:true},
- {id:"effort-driven", name:"Effort Driven", width:80, minWidth:20, maxWidth:80, cssClass:"cell-effort-driven", field:"effortDriven", formatter:BoolCellFormatter, sortable:true}
- ];
-
- var options = {
- enableCellNavigation: true,
- editable: true
- };
-
- var sortcol = "title";
- var sortdir = 1;
- var percentCompleteThreshold = 0;
- var prevPercentCompleteThreshold = 0;
- var searchString = "";
-
- function avgTotalsFormatter(totals, columnDef) {
- return "avg: " + Math.round(totals.avg[columnDef.field]) + "%";
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
+ <title>SlickGrid example: Grouping</title>
+ <link rel="stylesheet" href="../slick.grid.css" type="text/css" />
+ <link rel="stylesheet" href="../controls/slick.pager.css" type="text/css" />
+ <link rel="stylesheet" href="../css/smoothness/jquery-ui-1.8.16.custom.css" type="text/css" />
+ <link rel="stylesheet" href="examples.css" type="text/css" />
+ <link rel="stylesheet" href="../controls/slick.columnpicker.css" type="text/css" />
+ <style>
+ .cell-title {
+ font-weight: bold;
+ }
+
+ .cell-effort-driven {
+ text-align: center;
+ }
+ </style>
+</head>
+<body>
+<div style="position:relative">
+ <div style="width:600px;">
+ <div class="grid-header" style="width:100%">
+ <label>SlickGrid</label>
+ </div>
+ <div id="myGrid" style="width:100%;height:500px;"></div>
+ <div id="pager" style="width:100%;height:20px;"></div>
+ </div>
+
+ <div class="options-panel">
+ <b>Options:</b>
+ <hr/>
+ <div style="padding:6px;">
+ <label style="width:200px;float:left">Show tasks with % at least: </label>
+
+ <div style="padding:2px;">
+ <div style="width:100px;display:inline-block;" id="pcSlider"></div>
+ </div>
+ <br/>
+ <label style="width:200px;float:left">And title including:</label>
+ <input type=text id="txtSearch" style="width:100px;">
+ <br/><br/>
+ <hr/>
+ <button onclick="clearGrouping()">Clear grouping</button>
+ <br/>
+ <button onclick="groupByDuration()">Group by duration & sort groups by value</button>
+ <br/>
+ <button onclick="groupByDurationOrderByCount()">Group by duration & sort groups by count</button>
+ <br/>
+ <button onclick="groupByDurationOrderByCountGroupCollapsed()">Group by duration & sort groups by count, group
+ collapsed
+ </button>
+ <br/>
+ <br/>
+ <button onclick="collapseAllGroups()">Collapse all groups</button>
+ <br/>
+ <button onclick="expandAllGroups()">Expand all groups</button>
+ <br/>
+ </div>
+ <hr/>
+ <h2>Demonstrates:</h2>
+ <ul>
+ <li>
+ Fully dynamic and interactive grouping with filtering and aggregates over <b>50'000</b> items<br>
+ Personally, this is just the coolest slickest thing I've ever seen done with DHTML grids!
+ </li>
+ </ul>
+ </div>
+</div>
+
+
+<script src="../lib/firebugx.js"></script>
+
+<script src="../lib/jquery-1.7.min.js"></script>
+<script src="../lib/jquery-ui-1.8.16.custom.min.js"></script>
+<script src="../lib/jquery.event.drag-2.0.min.js"></script>
+
+<script src="../slick.core.js"></script>
+<script src="../slick.editors.js"></script>
+<script src="../plugins/slick.cellrangedecorator.js"></script>
+<script src="../plugins/slick.cellrangeselector.js"></script>
+<script src="../plugins/slick.cellselectionmodel.js"></script>
+<script src="../slick.grid.js"></script>
+<script src="../slick.groupitemmetadataprovider.js"></script>
+<script src="../slick.dataview.js"></script>
+<script src="../controls/slick.pager.js"></script>
+<script src="../controls/slick.columnpicker.js"></script>
+
+<script>
+var dataView;
+var grid;
+var data = [];
+
+var columns = [
+ {id:"sel", name:"#", field:"num", cssClass:"cell-selection", width:40, resizable:false, selectable:false, focusable:false },
+ {id:"title", name:"Title", field:"title", width:120, minWidth:120, cssClass:"cell-title", sortable:true, editor:TextCellEditor},
+ {id:"duration", name:"Duration", field:"duration", sortable:true},
+ {id:"%", name:"% Complete", field:"percentComplete", width:80, formatter:GraphicalPercentCompleteCellFormatter, sortable:true, groupTotalsFormatter:avgTotalsFormatter},
+ {id:"start", name:"Start", field:"start", minWidth:60, sortable:true},
+ {id:"finish", name:"Finish", field:"finish", minWidth:60, sortable:true},
+ {id:"effort-driven", name:"Effort Driven", width:80, minWidth:20, maxWidth:80, cssClass:"cell-effort-driven", field:"effortDriven", formatter:BoolCellFormatter, sortable:true}
+];
+
+var options = {
+ enableCellNavigation:true,
+ editable:true
+};
+
+var sortcol = "title";
+var sortdir = 1;
+var percentCompleteThreshold = 0;
+var prevPercentCompleteThreshold = 0;
+var searchString = "";
+
+function avgTotalsFormatter(totals, columnDef) {
+ return "avg: " + Math.round(totals.avg[columnDef.field]) + "%";
+}
+
+function myFilter(item, args) {
+ return item["percentComplete"] >= args.percentComplete &&
+ (args.searchString == "" ||
+ item["title"].indexOf(args.searchString) == -1);
+}
+
+function percentCompleteSort(a, b) {
+ return a["percentComplete"] - b["percentComplete"];
+}
+
+function comparer(a, b) {
+ var x = a[sortcol], y = b[sortcol];
+ return (x == y ? 0 : (x > y ? 1 : -1));
+}
+
+function collapseAllGroups() {
+ dataView.beginUpdate();
+ for (var i = 0; i < dataView.getGroups().length; i++) {
+ dataView.collapseGroup(dataView.getGroups()[i].value);
+ }
+ dataView.endUpdate();
+}
+
+function expandAllGroups() {
+ dataView.beginUpdate();
+ for (var i = 0; i < dataView.getGroups().length; i++) {
+ dataView.expandGroup(dataView.getGroups()[i].value);
+ }
+ dataView.endUpdate();
+}
+
+function clearGrouping() {
+ dataView.groupBy(null);
+}
+
+function groupByDuration() {
+ dataView.groupBy(
+ "duration",
+ function (g) {
+ return "Duration: " + g.value + " <span style='color:green'>(" + g.count + " items)</span>";
+ },
+ function (a, b) {
+ return a.value - b.value;
+ }
+ );
+ dataView.setAggregators([
+ new Slick.Data.Aggregators.Avg("percentComplete")
+ ], false);
+}
+
+function groupByDurationOrderByCount() {
+ dataView.groupBy(
+ "duration",
+ function (g) {
+ return "Duration: " + g.value + " <span style='color:green'>(" + g.count + " items)</span>";
+ },
+ function (a, b) {
+ return a.count - b.count;
+ }
+ );
+ dataView.setAggregators([
+ new Slick.Data.Aggregators.Avg("percentComplete")
+ ], false);
+}
+
+function groupByDurationOrderByCountGroupCollapsed() {
+ dataView.groupBy(
+ "duration",
+ function (g) {
+ return "Duration: " + g.value + " <span style='color:green'>(" + g.count + " items)</span>";
+ },
+ function (a, b) {
+ return a.count - b.count;
+ }
+ );
+ dataView.setAggregators([
+ new Slick.Data.Aggregators.Avg("percentComplete")
+ ], true);
+}
+
+$(".grid-header .ui-icon")
+ .addClass("ui-state-default ui-corner-all")
+ .mouseover(function (e) {
+ $(e.target).addClass("ui-state-hover")
+ })
+ .mouseout(function (e) {
+ $(e.target).removeClass("ui-state-hover")
+ });
+
+$(function () {
+ // prepare the data
+ for (var i = 0; i < 50000; i++) {
+ var d = (data[i] = {});
+
+ d["id"] = "id_" + i;
+ d["num"] = i;
+ d["title"] = "Task " + i;
+ d["duration"] = Math.round(Math.random() * 14);
+ d["percentComplete"] = Math.round(Math.random() * 100);
+ d["start"] = "01/01/2009";
+ d["finish"] = "01/05/2009";
+ d["effortDriven"] = (i % 5 == 0);
+ }
+
+ var groupItemMetadataProvider = new Slick.Data.GroupItemMetadataProvider();
+ dataView = new Slick.Data.DataView({
+ groupItemMetadataProvider:groupItemMetadataProvider
+ });
+ grid = new Slick.Grid("#myGrid", dataView, columns, options);
+
+ // register the group item metadata provider to add expand/collapse group handlers
+ grid.registerPlugin(groupItemMetadataProvider);
+ grid.setSelectionModel(new Slick.CellSelectionModel());
+
+ var pager = new Slick.Controls.Pager(dataView, grid, $("#pager"));
+ var columnpicker = new Slick.Controls.ColumnPicker(columns, grid, options);
+
+
+ grid.onSort.subscribe(function (e, args) {
+ sortdir = args.sortAsc ? 1 : -1;
+ sortcol = args.sortCol.field;
+
+ if ($.browser.msie && $.browser.version <= 8) {
+ // using temporary Object.prototype.toString override
+ // more limited and does lexicographic sort only by default, but can be much faster
+
+ var percentCompleteValueFn = function () {
+ var val = this["percentComplete"];
+ if (val < 10) {
+ return "00" + val;
}
-
- function myFilter(item, args) {
- return item["percentComplete"] >= args.percentComplete &&
- (args.searchString == "" ||
- item["title"].indexOf(args.searchString) == -1);
- }
-
- function percentCompleteSort(a,b) {
- return a["percentComplete"] - b["percentComplete"];
- }
-
- function comparer(a,b) {
- var x = a[sortcol], y = b[sortcol];
- return (x == y ? 0 : (x > y ? 1 : -1));
- }
-
- function collapseAllGroups() {
- dataView.beginUpdate();
- for (var i = 0; i < dataView.getGroups().length; i++) {
- dataView.collapseGroup(dataView.getGroups()[i].value);
- }
- dataView.endUpdate();
+ else if (val < 100) {
+ return "0" + val;
}
-
- function expandAllGroups() {
- dataView.beginUpdate();
- for (var i = 0; i < dataView.getGroups().length; i++) {
- dataView.expandGroup(dataView.getGroups()[i].value);
- }
- dataView.endUpdate();
+ else {
+ return val;
}
-
- function clearGrouping() {
- dataView.groupBy(null);
- }
-
- function groupByDuration() {
- dataView.groupBy(
- "duration",
- function (g) {
- return "Duration: " + g.value + " <span style='color:green'>(" + g.count + " items)</span>";
- },
- function (a, b) {
- return a.value - b.value;
- }
- );
- dataView.setAggregators([
- new Slick.Data.Aggregators.Avg("percentComplete")
- ], false);
- }
-
- function groupByDurationOrderByCount() {
- dataView.groupBy(
- "duration",
- function (g) {
- return "Duration: " + g.value + " <span style='color:green'>(" + g.count + " items)</span>";
- },
- function (a, b) {
- return a.count - b.count;
- }
- );
- dataView.setAggregators([
- new Slick.Data.Aggregators.Avg("percentComplete")
- ], false);
- }
-
- function groupByDurationOrderByCountGroupCollapsed() {
- dataView.groupBy(
- "duration",
- function (g) {
- return "Duration: " + g.value + " <span style='color:green'>(" + g.count + " items)</span>";
- },
- function (a, b) {
- return a.count - b.count;
- }
- );
- dataView.setAggregators([
- new Slick.Data.Aggregators.Avg("percentComplete")
- ], true);
- }
-
- $(".grid-header .ui-icon")
- .addClass("ui-state-default ui-corner-all")
- .mouseover(function(e) {
- $(e.target).addClass("ui-state-hover")
- })
- .mouseout(function(e) {
- $(e.target).removeClass("ui-state-hover")
- });
-
- $(function()
- {
- // prepare the data
- for (var i=0; i<50000; i++) {
- var d = (data[i] = {});
-
- d["id"] = "id_" + i;
- d["num"] = i;
- d["title"] = "Task " + i;
- d["duration"] = Math.round(Math.random() * 14);
- d["percentComplete"] = Math.round(Math.random() * 100);
- d["start"] = "01/01/2009";
- d["finish"] = "01/05/2009";
- d["effortDriven"] = (i % 5 == 0);
- }
-
- var groupItemMetadataProvider = new Slick.Data.GroupItemMetadataProvider();
- dataView = new Slick.Data.DataView({
- groupItemMetadataProvider: groupItemMetadataProvider
- });
- grid = new Slick.Grid("#myGrid", dataView, columns, options);
-
- // register the group item metadata provider to add expand/collapse group handlers
- grid.registerPlugin(groupItemMetadataProvider);
- grid.setSelectionModel(new Slick.CellSelectionModel());
-
- var pager = new Slick.Controls.Pager(dataView, grid, $("#pager"));
- var columnpicker = new Slick.Controls.ColumnPicker(columns, grid, options);
-
-
- grid.onSort.subscribe(function(e, args) {
- sortdir = args.sortAsc ? 1 : -1;
- sortcol = args.sortCol.field;
-
- if ($.browser.msie && $.browser.version <= 8) {
- // using temporary Object.prototype.toString override
- // more limited and does lexicographic sort only by default, but can be much faster
-
- var percentCompleteValueFn = function() {
- var val = this["percentComplete"];
- if (val < 10)
- return "00" + val;
- else if (val < 100)
- return "0" + val;
- else
- return val;
- };
-
- // use numeric sort of % and lexicographic for everything else
- dataView.fastSort((sortcol=="percentComplete