Skip to content
This repository
Browse code

Reformatted code.

  • Loading branch information...
commit 061ac59fb6a4c09a49d5abe1fa86c26f9d13bf66 1 parent 6634f16
Michael Leibman authored Michael Leibman committed

Showing 46 changed files with 9,284 additions and 9,090 deletions. Show diff stats Hide diff stats

  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
32 controls/slick.columnpicker.css
... ... @@ -1,30 +1,30 @@
1 1 .slick-columnpicker {
2   - border: 1px solid #718BB7;
3   - background: #f0f0f0;
4   - padding: 6px;
5   - -moz-box-shadow: 2px 2px 2px silver;
6   - -webkit-box-shadow: 2px 2px 2px silver;
7   - min-width: 100px;
8   - cursor: default;
  2 + border: 1px solid #718BB7;
  3 + background: #f0f0f0;
  4 + padding: 6px;
  5 + -moz-box-shadow: 2px 2px 2px silver;
  6 + -webkit-box-shadow: 2px 2px 2px silver;
  7 + min-width: 100px;
  8 + cursor: default;
9 9 }
10 10
11 11 .slick-columnpicker li {
12   - list-style: none;
13   - margin: 0;
14   - padding: 0;
15   - background: none;
  12 + list-style: none;
  13 + margin: 0;
  14 + padding: 0;
  15 + background: none;
16 16 }
17 17
18 18 .slick-columnpicker input {
19   - margin: 4px;
  19 + margin: 4px;
20 20 }
21 21
22 22 .slick-columnpicker li a {
23   - display: block;
24   - padding: 4px;
25   - font-weight: bold;
  23 + display: block;
  24 + padding: 4px;
  25 + font-weight: bold;
26 26 }
27 27
28 28 .slick-columnpicker li a:hover {
29   - background: white;
  29 + background: white;
30 30 }
209 controls/slick.columnpicker.js
... ... @@ -1,105 +1,106 @@
1   -(function($) {
2   - function SlickColumnPicker(columns,grid,options)
3   - {
4   - var $menu;
5   -
6   - var defaults = {
7   - fadeSpeed: 250
8   - };
9   -
10   - function init() {
11   - grid.onHeaderContextMenu.subscribe(handleHeaderContextMenu);
12   - options = $.extend({}, defaults, options);
13   -
14   - $menu = $("<span class='slick-columnpicker' style='display:none;position:absolute;z-index:20;' />").appendTo(document.body);
15   -
16   - $menu.bind("mouseleave", function(e) { $(this).fadeOut(options.fadeSpeed) });
17   - $menu.bind("click", updateColumn);
18   -
19   - }
20   -
21   - function handleHeaderContextMenu(e, args)
22   - {
23   - e.preventDefault();
24   - $menu.empty();
25   -
26   - var $li, $input;
27   - for (var i=0; i<columns.length; i++) {
28   - $li = $("<li />").appendTo($menu);
29   -
30   - $input = $("<input type='checkbox' />")
31   - .attr("id", "columnpicker_" + i)
32   - .data("id", columns[i].id)
33   - .appendTo($li);
34   -
35   - if (grid.getColumnIndex(columns[i].id) != null)
36   - $input.attr("checked","checked");
37   -
38   - $("<label for='columnpicker_" + i + "' />")
39   - .text(columns[i].name)
40   - .appendTo($li);
41   - }
42   -
43   - $("<hr/>").appendTo($menu);
44   - $li = $("<li />").appendTo($menu);
45   - $input = $("<input type='checkbox' id='autoresize' />").appendTo($li);
46   - $("<label for='autoresize'>Force Fit Columns</label>").appendTo($li);
47   - if (grid.getOptions().forceFitColumns)
48   - $input.attr("checked", "checked");
49   -
50   - $li = $("<li />").appendTo($menu);
51   - $input = $("<input type='checkbox' id='syncresize' />").appendTo($li);
52   - $("<label for='syncresize'>Synchronous Resizing</label>").appendTo($li);
53   - if (grid.getOptions().syncColumnCellResize)
54   - $input.attr("checked", "checked");
55   -
56   - $menu
57   - .css("top", e.pageY - 10)
58   - .css("left", e.pageX - 10)
59   - .fadeIn(options.fadeSpeed);
60   - }
61   -
62   - function updateColumn(e)
63   - {
64   - if (e.target.id == 'autoresize') {
65   - if (e.target.checked) {
66   - grid.setOptions({forceFitColumns: true});
67   - grid.autosizeColumns();
68   - } else {
69   - grid.setOptions({forceFitColumns: false});
70   - }
71   - return;
72   - }
73   -
74   - if (e.target.id == 'syncresize') {
75   - if (e.target.checked) {
76   - grid.setOptions({syncColumnCellResize: true});
77   - } else {
78   - grid.setOptions({syncColumnCellResize: false});
79   - }
80   - return;
81   - }
82   -
83   - if ($(e.target).is(":checkbox")) {
84   - if ($menu.find(":checkbox:checked").length == 0) {
85   - $(e.target).attr("checked","checked");
86   - return;
87   - }
88   -
89   - var visibleColumns = [];
90   - $menu.find(":checkbox[id^=columnpicker]").each(function(i,e) {
91   - if ($(this).is(":checked")) {
92   - visibleColumns.push(columns[i]);
93   - }
94   - });
95   - grid.setColumns(visibleColumns);
96   - }
97   - }
98   -
99   -
100   - init();
101   - }
102   -
103   - // Slick.Controls.ColumnPicker
104   - $.extend(true, window, { Slick: { Controls: { ColumnPicker: SlickColumnPicker }}});
  1 +(function ($) {
  2 + function SlickColumnPicker(columns, grid, options) {
  3 + var $menu;
  4 +
  5 + var defaults = {
  6 + fadeSpeed:250
  7 + };
  8 +
  9 + function init() {
  10 + grid.onHeaderContextMenu.subscribe(handleHeaderContextMenu);
  11 + options = $.extend({}, defaults, options);
  12 +
  13 + $menu = $("<span class='slick-columnpicker' style='display:none;position:absolute;z-index:20;' />").appendTo(document.body);
  14 +
  15 + $menu.bind("mouseleave", function (e) {
  16 + $(this).fadeOut(options.fadeSpeed)
  17 + });
  18 + $menu.bind("click", updateColumn);
  19 +
  20 + }
  21 +
  22 + function handleHeaderContextMenu(e, args) {
  23 + e.preventDefault();
  24 + $menu.empty();
  25 +
  26 + var $li, $input;
  27 + for (var i = 0; i < columns.length; i++) {
  28 + $li = $("<li />").appendTo($menu);
  29 +
  30 + $input = $("<input type='checkbox' />")
  31 + .attr("id", "columnpicker_" + i)
  32 + .data("id", columns[i].id)
  33 + .appendTo($li);
  34 +
  35 + if (grid.getColumnIndex(columns[i].id) != null) {
  36 + $input.attr("checked", "checked");
  37 + }
  38 +
  39 + $("<label for='columnpicker_" + i + "' />")
  40 + .text(columns[i].name)
  41 + .appendTo($li);
  42 + }
  43 +
  44 + $("<hr/>").appendTo($menu);
  45 + $li = $("<li />").appendTo($menu);
  46 + $input = $("<input type='checkbox' id='autoresize' />").appendTo($li);
  47 + $("<label for='autoresize'>Force Fit Columns</label>").appendTo($li);
  48 + if (grid.getOptions().forceFitColumns) {
  49 + $input.attr("checked", "checked");
  50 + }
  51 +
  52 + $li = $("<li />").appendTo($menu);
  53 + $input = $("<input type='checkbox' id='syncresize' />").appendTo($li);
  54 + $("<label for='syncresize'>Synchronous Resizing</label>").appendTo($li);
  55 + if (grid.getOptions().syncColumnCellResize) {
  56 + $input.attr("checked", "checked");
  57 + }
  58 +
  59 + $menu
  60 + .css("top", e.pageY - 10)
  61 + .css("left", e.pageX - 10)
  62 + .fadeIn(options.fadeSpeed);
  63 + }
  64 +
  65 + function updateColumn(e) {
  66 + if (e.target.id == 'autoresize') {
  67 + if (e.target.checked) {
  68 + grid.setOptions({forceFitColumns:true});
  69 + grid.autosizeColumns();
  70 + } else {
  71 + grid.setOptions({forceFitColumns:false});
  72 + }
  73 + return;
  74 + }
  75 +
  76 + if (e.target.id == 'syncresize') {
  77 + if (e.target.checked) {
  78 + grid.setOptions({syncColumnCellResize:true});
  79 + } else {
  80 + grid.setOptions({syncColumnCellResize:false});
  81 + }
  82 + return;
  83 + }
  84 +
  85 + if ($(e.target).is(":checkbox")) {
  86 + if ($menu.find(":checkbox:checked").length == 0) {
  87 + $(e.target).attr("checked", "checked");
  88 + return;
  89 + }
  90 +
  91 + var visibleColumns = [];
  92 + $menu.find(":checkbox[id^=columnpicker]").each(function (i, e) {
  93 + if ($(this).is(":checked")) {
  94 + visibleColumns.push(columns[i]);
  95 + }
  96 + });
  97 + grid.setColumns(visibleColumns);
  98 + }
  99 + }
  100 +
  101 + init();
  102 + }
  103 +
  104 + // Slick.Controls.ColumnPicker
  105 + $.extend(true, window, { Slick:{ Controls:{ ColumnPicker:SlickColumnPicker }}});
105 106 })(jQuery);
63 controls/slick.pager.css
... ... @@ -1,48 +1,41 @@
1   -.slick-pager
2   -{
3   - width: 100%;
4   - height: 26px;
5   - border: 1px solid gray;
6   - border-top: 0;
7   - background: url('../images/header-columns-bg.gif') repeat-x center bottom;
8   - vertical-align: middle;
  1 +.slick-pager {
  2 + width: 100%;
  3 + height: 26px;
  4 + border: 1px solid gray;
  5 + border-top: 0;
  6 + background: url('../images/header-columns-bg.gif') repeat-x center bottom;
  7 + vertical-align: middle;
9 8 }
10 9
11   -.slick-pager .slick-pager-status
12   -{
13   - display: inline-block;
14   - padding: 6px;
  10 +.slick-pager .slick-pager-status {
  11 + display: inline-block;
  12 + padding: 6px;
15 13 }
16 14
17   -.slick-pager .ui-icon-container
18   -{
19   - display: inline-block;
20   - margin: 2px;
21   - border-color: gray;
  15 +.slick-pager .ui-icon-container {
  16 + display: inline-block;
  17 + margin: 2px;
  18 + border-color: gray;
22 19 }
23 20
24   -.slick-pager .slick-pager-nav
25   -{
26   - display: inline-block;
27   - float: left;
28   - padding: 2px;
  21 +.slick-pager .slick-pager-nav {
  22 + display: inline-block;
  23 + float: left;
  24 + padding: 2px;
29 25 }
30 26
31   -.slick-pager .slick-pager-settings
32   -{
33   - display: block;
34   - float: right;
35   - padding: 2px;
  27 +.slick-pager .slick-pager-settings {
  28 + display: block;
  29 + float: right;
  30 + padding: 2px;
36 31 }
37 32
38   -.slick-pager .slick-pager-settings *
39   -{
40   - vertical-align: middle;
  33 +.slick-pager .slick-pager-settings * {
  34 + vertical-align: middle;
41 35 }
42 36
43   -.slick-pager .slick-pager-settings a
44   -{
45   - padding: 2px;
46   - text-decoration: underline;
47   - cursor: pointer;
  37 +.slick-pager .slick-pager-settings a {
  38 + padding: 2px;
  39 + text-decoration: underline;
  40 + cursor: pointer;
48 41 }
261 controls/slick.pager.js
... ... @@ -1,148 +1,151 @@
1   -(function($) {
2   - function SlickGridPager(dataView, grid, $container)
3   - {
4   - var $status;
5   -
6   - function init()
7   - {
8   - dataView.onPagingInfoChanged.subscribe(function(e,pagingInfo) {
9   - updatePager(pagingInfo);
10   - });
11   -
12   - constructPagerUI();
13   - updatePager(dataView.getPagingInfo());
14   - }
  1 +(function ($) {
  2 + function SlickGridPager(dataView, grid, $container) {
  3 + var $status;
15 4
16   - function getNavState()
17   - {
18   - var cannotLeaveEditMode = !Slick.GlobalEditorLock.commitCurrentEdit();
19   - var pagingInfo = dataView.getPagingInfo();
20   - var lastPage = Math.floor(pagingInfo.totalRows/pagingInfo.pageSize);
21   -
22   - return {
23   - canGotoFirst: !cannotLeaveEditMode && pagingInfo.pageSize != 0 && pagingInfo.pageNum > 0,
24   - canGotoLast: !cannotLeaveEditMode && pagingInfo.pageSize != 0 && pagingInfo.pageNum != lastPage,
25   - canGotoPrev: !cannotLeaveEditMode && pagingInfo.pageSize != 0 && pagingInfo.pageNum > 0,
26   - canGotoNext: !cannotLeaveEditMode && pagingInfo.pageSize != 0 && pagingInfo.pageNum < lastPage,
27   - pagingInfo: pagingInfo,
28   - lastPage: lastPage
29   - }
30   - }
  5 + function init() {
  6 + dataView.onPagingInfoChanged.subscribe(function (e, pagingInfo) {
  7 + updatePager(pagingInfo);
  8 + });
31 9
32   - function setPageSize(n)
33   - {
34   - dataView.setRefreshHints({
35   - isFilterUnchanged: true
36   - });
37   - dataView.setPagingOptions({pageSize:n});
38   - }
  10 + constructPagerUI();
  11 + updatePager(dataView.getPagingInfo());
  12 + }
39 13
40   - function gotoFirst()
41   - {
42   - if (getNavState().canGotoFirst)
43   - dataView.setPagingOptions({pageNum: 0});
44   - }
  14 + function getNavState() {
  15 + var cannotLeaveEditMode = !Slick.GlobalEditorLock.commitCurrentEdit();
  16 + var pagingInfo = dataView.getPagingInfo();
  17 + var lastPage = Math.floor(pagingInfo.totalRows / pagingInfo.pageSize);
  18 +
  19 + return {
  20 + canGotoFirst:!cannotLeaveEditMode && pagingInfo.pageSize != 0 && pagingInfo.pageNum > 0,
  21 + canGotoLast:!cannotLeaveEditMode && pagingInfo.pageSize != 0 && pagingInfo.pageNum != lastPage,
  22 + canGotoPrev:!cannotLeaveEditMode && pagingInfo.pageSize != 0 && pagingInfo.pageNum > 0,
  23 + canGotoNext:!cannotLeaveEditMode && pagingInfo.pageSize != 0 && pagingInfo.pageNum < lastPage,
  24 + pagingInfo:pagingInfo,
  25 + lastPage:lastPage
  26 + }
  27 + }
45 28
46   - function gotoLast()
47   - {
48   - var state = getNavState();
49   - if (state.canGotoLast)
50   - dataView.setPagingOptions({pageNum: state.lastPage});
51   - }
  29 + function setPageSize(n) {
  30 + dataView.setRefreshHints({
  31 + isFilterUnchanged:true
  32 + });
  33 + dataView.setPagingOptions({pageSize:n});
  34 + }
52 35
53   - function gotoPrev()
54   - {
55   - var state = getNavState();
56   - if (state.canGotoPrev)
57   - dataView.setPagingOptions({pageNum: state.pagingInfo.pageNum-1});
58   - }
  36 + function gotoFirst() {
  37 + if (getNavState().canGotoFirst) {
  38 + dataView.setPagingOptions({pageNum:0});
  39 + }
  40 + }
59 41
60   - function gotoNext()
61   - {
62   - var state = getNavState();
63   - if (state.canGotoNext)
64   - dataView.setPagingOptions({pageNum: state.pagingInfo.pageNum+1});
65   - }
  42 + function gotoLast() {
  43 + var state = getNavState();
  44 + if (state.canGotoLast) {
  45 + dataView.setPagingOptions({pageNum:state.lastPage});
  46 + }
  47 + }
  48 +
  49 + function gotoPrev() {
  50 + var state = getNavState();
  51 + if (state.canGotoPrev) {
  52 + dataView.setPagingOptions({pageNum:state.pagingInfo.pageNum - 1});
  53 + }
  54 + }
  55 +
  56 + function gotoNext() {
  57 + var state = getNavState();
  58 + if (state.canGotoNext) {
  59 + dataView.setPagingOptions({pageNum:state.pagingInfo.pageNum + 1});
  60 + }
  61 + }
66 62
67   - function constructPagerUI()
68   - {
69   - $container.empty();
70   -
71   - var $nav = $("<span class='slick-pager-nav' />").appendTo($container);
72   - var $settings = $("<span class='slick-pager-settings' />").appendTo($container);
73   - $status = $("<span class='slick-pager-status' />").appendTo($container);
74   -
75   - $settings
76   - .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>");
77   -
78   - $settings.find("a[data]").click(function(e) {
79   - var pagesize = $(e.target).attr("data");
80   - if (pagesize != undefined)
81   - {
82   - if (pagesize == -1)
83   - {
84   - var vp = grid.getViewport();
85   - setPageSize(vp.bottom-vp.top);
86   - }
87   - else
88   - setPageSize(parseInt(pagesize));
89   - }
90   - });
91   -
92   - var icon_prefix = "<span class='ui-state-default ui-corner-all ui-icon-container'><span class='ui-icon ";
93   - var icon_suffix = "' /></span>";
94   -
95   - $(icon_prefix + "ui-icon-lightbulb" + icon_suffix)
96   - .click(function() { $(".slick-pager-settings-expanded").toggle() })
97   - .appendTo($settings);
98   -
99   - $(icon_prefix + "ui-icon-seek-first" + icon_suffix)
100   - .click(gotoFirst)
101   - .appendTo($nav);
102   -
103   - $(icon_prefix + "ui-icon-seek-prev" + icon_suffix)
104   - .click(gotoPrev)
105   - .appendTo($nav);
106   -
107   - $(icon_prefix + "ui-icon-seek-next" + icon_suffix)
108   - .click(gotoNext)
109   - .appendTo($nav);
110   -
111   - $(icon_prefix + "ui-icon-seek-end" + icon_suffix)
112   - .click(gotoLast)
113   - .appendTo($nav);
114   -
115   - $container.find(".ui-icon-container")
116   - .hover(function() {
117   - $(this).toggleClass("ui-state-hover");
118   - });
119   -
120   - $container.children().wrapAll("<div class='slick-pager' />");
  63 + function constructPagerUI() {
  64 + $container.empty();
  65 +
  66 + var $nav = $("<span class='slick-pager-nav' />").appendTo($container);
  67 + var $settings = $("<span class='slick-pager-settings' />").appendTo($container);
  68 + $status = $("<span class='slick-pager-status' />").appendTo($container);
  69 +
  70 + $settings
  71 + .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>");
  72 +
  73 + $settings.find("a[data]").click(function (e) {
  74 + var pagesize = $(e.target).attr("data");
  75 + if (pagesize != undefined) {
  76 + if (pagesize == -1) {
  77 + var vp = grid.getViewport();
  78 + setPageSize(vp.bottom - vp.top);
  79 + }
  80 + else {
  81 + setPageSize(parseInt(pagesize));
  82 + }
121 83 }
  84 + });
122 85
  86 + var icon_prefix = "<span class='ui-state-default ui-corner-all ui-icon-container'><span class='ui-icon ";
  87 + var icon_suffix = "' /></span>";
123 88
124   - function updatePager(pagingInfo)
125   - {
126   - var state = getNavState();
  89 + $(icon_prefix + "ui-icon-lightbulb" + icon_suffix)
  90 + .click(function () {
  91 + $(".slick-pager-settings-expanded").toggle()
  92 + })
  93 + .appendTo($settings);
127 94
128   - $container.find(".slick-pager-nav span").removeClass("ui-state-disabled");
129   - if (!state.canGotoFirst) $container.find(".ui-icon-seek-first").addClass("ui-state-disabled");
130   - if (!state.canGotoLast) $container.find(".ui-icon-seek-end").addClass("ui-state-disabled");
131   - if (!state.canGotoNext) $container.find(".ui-icon-seek-next").addClass("ui-state-disabled");
132   - if (!state.canGotoPrev) $container.find(".ui-icon-seek-prev").addClass("ui-state-disabled");
  95 + $(icon_prefix + "ui-icon-seek-first" + icon_suffix)
  96 + .click(gotoFirst)
  97 + .appendTo($nav);
133 98
  99 + $(icon_prefix + "ui-icon-seek-prev" + icon_suffix)
  100 + .click(gotoPrev)
  101 + .appendTo($nav);
134 102
135   - if (pagingInfo.pageSize == 0)
136   - $status.text("Showing all " + pagingInfo.totalRows + " rows");
137   - else
138   - $status.text("Showing page " + (pagingInfo.pageNum+1) + " of " + (Math.floor(pagingInfo.totalRows/pagingInfo.pageSize)+1));
139   - }
  103 + $(icon_prefix + "ui-icon-seek-next" + icon_suffix)
  104 + .click(gotoNext)
  105 + .appendTo($nav);
140 106
  107 + $(icon_prefix + "ui-icon-seek-end" + icon_suffix)
  108 + .click(gotoLast)
  109 + .appendTo($nav);
141 110
  111 + $container.find(".ui-icon-container")
  112 + .hover(function () {
  113 + $(this).toggleClass("ui-state-hover");
  114 + });
142 115
143   - init();
  116 + $container.children().wrapAll("<div class='slick-pager' />");
144 117 }
145 118
146   - // Slick.Controls.Pager
147   - $.extend(true, window, { Slick: { Controls: { Pager: SlickGridPager }}});
  119 +
  120 + function updatePager(pagingInfo) {
  121 + var state = getNavState();
  122 +
  123 + $container.find(".slick-pager-nav span").removeClass("ui-state-disabled");
  124 + if (!state.canGotoFirst) {
  125 + $container.find(".ui-icon-seek-first").addClass("ui-state-disabled");
  126 + }
  127 + if (!state.canGotoLast) {
  128 + $container.find(".ui-icon-seek-end").addClass("ui-state-disabled");
  129 + }
  130 + if (!state.canGotoNext) {
  131 + $container.find(".ui-icon-seek-next").addClass("ui-state-disabled");
  132 + }
  133 + if (!state.canGotoPrev) {
  134 + $container.find(".ui-icon-seek-prev").addClass("ui-state-disabled");
  135 + }
  136 +
  137 +
  138 + if (pagingInfo.pageSize == 0) {
  139 + $status.text("Showing all " + pagingInfo.totalRows + " rows");
  140 + }
  141 + else {
  142 + $status.text("Showing page " + (pagingInfo.pageNum + 1) + " of " + (Math.floor(pagingInfo.totalRows / pagingInfo.pageSize) + 1));
  143 + }
  144 + }
  145 +
  146 + init();
  147 + }
  148 +
  149 + // Slick.Controls.Pager
  150 + $.extend(true, window, { Slick:{ Controls:{ Pager:SlickGridPager }}});
148 151 })(jQuery);
110 examples/example-checkbox-row-select.html
... ... @@ -1,31 +1,31 @@
1 1 <!DOCTYPE HTML>
2 2 <html>
3 3 <head>
4   - <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
5   - <link rel="stylesheet" href="../slick.grid.css" type="text/css" media="screen" charset="utf-8" />
6   - <link rel="stylesheet" href="../css/smoothness/jquery-ui-1.8.16.custom.css" type="text/css" media="screen" charset="utf-8" />
7   - <link rel="stylesheet" href="examples.css" type="text/css" media="screen" charset="utf-8" />
8   - <style>
9   - .slick-cell-checkboxsel {
10   - background: #f0f0f0;
11   - border-right-color: silver;
12   - border-right-style: solid;
13   - }
14   - </style>
  4 + <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  5 + <link rel="stylesheet" href="../slick.grid.css" type="text/css" />
  6 + <link rel="stylesheet" href="../css/smoothness/jquery-ui-1.8.16.custom.css" type="text/css" />
  7 + <link rel="stylesheet" href="examples.css" type="text/css" />
  8 + <style>
  9 + .slick-cell-checkboxsel {
  10 + background: #f0f0f0;
  11 + border-right-color: silver;
  12 + border-right-style: solid;
  13 + }
  14 + </style>
15 15 </head>
16 16 <body>
17   - <div style="position:relative">
18   - <div style="width:600px;">
19   - <div id="myGrid" style="width:100%;height:500px;"></div>
20   - </div>
  17 +<div style="position:relative">
  18 + <div style="width:600px;">
  19 + <div id="myGrid" style="width:100%;height:500px;"></div>
  20 + </div>
21 21
22   - <div class="options-panel">
23   - <h2>Demonstrates:</h2>
24   - <ul>
25   - <li>Checkbox row select column</li>
26   - </ul>
27   - </div>
28   - </div>
  22 + <div class="options-panel">
  23 + <h2>Demonstrates:</h2>
  24 + <ul>
  25 + <li>Checkbox row select column</li>
  26 + </ul>
  27 + </div>
  28 +</div>
29 29
30 30 <script src="../lib/firebugx.js"></script>
31 31
@@ -45,46 +45,42 @@
45 45 <script src="../slick.grid.js"></script>
46 46
47 47 <script>
48   - var grid;
49   - var data = [];
50   - var options = {
51   - editable: true,
52   - enableCellNavigation: true,
53   - asyncEditorLoading: false,
54   - autoEdit: false
55   - };
56   - var columns = [];
  48 + var grid;
  49 + var data = [];
  50 + var options = {
  51 + editable:true,
  52 + enableCellNavigation:true,
  53 + asyncEditorLoading:false,
  54 + autoEdit:false
  55 + };
  56 + var columns = [];
57 57
  58 + $(function () {
  59 + for (var i = 0; i < 100; i++) {
  60 + var d = (data[i] = {});
  61 + d[0] = "Row " + i;
  62 + }
58 63
59   - $(function()
60   - {
61   - for (var i=0; i<100; i++) {
62   - var d = (data[i] = {});
63   - d[0] = "Row " + i;
64   - }
  64 + var checkboxSelector = new Slick.CheckboxSelectColumn({
  65 + cssClass:"slick-cell-checkboxsel"
  66 + });
65 67
66   - var checkboxSelector = new Slick.CheckboxSelectColumn({
67   - cssClass: "slick-cell-checkboxsel"
68   - });
  68 + columns.push(checkboxSelector.getColumnDefinition());
69 69
70   - columns.push(checkboxSelector.getColumnDefinition());
  70 + for (var i = 0; i < 5; i++) {
  71 + columns.push({
  72 + id:i,
  73 + name:String.fromCharCode("A".charCodeAt(0) + i),
  74 + field:i,
  75 + width:100,
  76 + editor:TextCellEditor
  77 + });
  78 + }
71 79
72   - for (var i = 0; i < 5; i++) {
73   - columns.push({
74   - id: i,
75   - name: String.fromCharCode("A".charCodeAt(0) + i),
76   - field: i,
77   - width: 100,
78   - editor: TextCellEditor
79   - });
80   - }
81   -
82   -
83   - grid = new Slick.Grid("#myGrid", data, columns, options);
84   - grid.setSelectionModel(new Slick.RowSelectionModel({selectActiveRow:false}));
85   - grid.registerPlugin(checkboxSelector);
86   -
87   - })
  80 + grid = new Slick.Grid("#myGrid", data, columns, options);
  81 + grid.setSelectionModel(new Slick.RowSelectionModel({selectActiveRow:false}));
  82 + grid.registerPlugin(checkboxSelector);
  83 + })
88 84 </script>
89 85 </body>
90 86 </html>
154 examples/example-colspan.html
... ... @@ -1,89 +1,89 @@
1 1 <!DOCTYPE HTML>
2 2 <html>
3   - <head>
4   - <link rel="stylesheet" href="../slick.grid.css" type="text/css" media="screen" charset="utf-8" />
5   - <link rel="stylesheet" href="../css/smoothness/jquery-ui-1.8.16.custom.css" type="text/css" media="screen" charset="utf-8" />
6   - <link rel="stylesheet" href="examples.css" type="text/css" media="screen" charset="utf-8" />
7   - </head>
8   - <body>
9   - <table width="100%">
10   - <tr>
11   - <td valign="top" width="50%">
12   - <div id="myGrid" style="width:600px;height:500px;"></div>
13   - </td>
14   - <td valign="top">
15   - <h2>Demonstrates:</h2>
16   - <ul>
17   - <li>column span</li>
18   - </ul>
19   - </td>
20   - </tr>
21   - </table>
  3 +<head>
  4 + <link rel="stylesheet" href="../slick.grid.css" type="text/css" />
  5 + <link rel="stylesheet" href="../css/smoothness/jquery-ui-1.8.16.custom.css" type="text/css" />
  6 + <link rel="stylesheet" href="examples.css" type="text/css" />
  7 +</head>
  8 +<body>
  9 +<table width="100%">
  10 + <tr>
  11 + <td valign="top" width="50%">
  12 + <div id="myGrid" style="width:600px;height:500px;"></div>
  13 + </td>
  14 + <td valign="top">
  15 + <h2>Demonstrates:</h2>
  16 + <ul>
  17 + <li>column span</li>
  18 + </ul>
  19 + </td>
  20 + </tr>
  21 +</table>
22 22
23   - <script src="../lib/jquery-1.7.min.js"></script>
24   - <script src="../lib/jquery.event.drag-2.0.min.js"></script>
  23 +<script src="../lib/jquery-1.7.min.js"></script>
  24 +<script src="../lib/jquery.event.drag-2.0.min.js"></script>
25 25
26   - <script src="../slick.core.js"></script>
27   - <script src="../plugins/slick.cellrangedecorator.js"></script>
28   - <script src="../plugins/slick.cellrangeselector.js"></script>
29   - <script src="../plugins/slick.cellselectionmodel.js"></script>
30   - <script src="../slick.grid.js"></script>
  26 +<script src="../slick.core.js"></script>
  27 +<script src="../plugins/slick.cellrangedecorator.js"></script>
  28 +<script src="../plugins/slick.cellrangeselector.js"></script>
  29 +<script src="../plugins/slick.cellselectionmodel.js"></script>
  30 +<script src="../slick.grid.js"></script>
31 31
32   - <script>
33   - var grid;
  32 +<script>
  33 + var grid;
34 34
35   - var columns = [
36   - {id:"title", name:"Title", field:"title"},
37   - {id:"duration", name:"Duration", field:"duration"},
38   - {id:"%", name:"% Complete", field:"percentComplete", selectable:false},
39   - {id:"start", name:"Start", field:"start"},
40   - {id:"finish", name:"Finish", field:"finish"},
41   - {id:"effort-driven", name:"Effort Driven", field:"effortDriven"}
42   - ];
  35 + var columns = [
  36 + {id:"title", name:"Title", field:"title"},
  37 + {id:"duration", name:"Duration", field:"duration"},
  38 + {id:"%", name:"% Complete", field:"percentComplete", selectable:false},
  39 + {id:"start", name:"Start", field:"start"},
  40 + {id:"finish", name:"Finish", field:"finish"},
  41 + {id:"effort-driven", name:"Effort Driven", field:"effortDriven"}
  42 + ];
43 43
44   - var options = {
45   - enableCellNavigation: true,
46   - enableColumnReorder: false
47   - };
  44 + var options = {
  45 + enableCellNavigation:true,
  46 + enableColumnReorder:false
  47 + };
48 48
49   - $(function() {
50   - var data = [];
51   - for (var i = 0; i < 10; i++) {
52   - data[i] = {
53   - title: "Task " + i,
54   - duration: "5 days",
55   - percentComplete: Math.round(Math.random() * 100),
56   - start: "01/01/2009",
57   - finish: "01/05/2009",
58   - effortDriven: (i % 5 == 0)
59   - };
60   - }
  49 + $(function () {
  50 + var data = [];
  51 + for (var i = 0; i < 10; i++) {
  52 + data[i] = {
  53 + title:"Task " + i,
  54 + duration:"5 days",
  55 + percentComplete:Math.round(Math.random() * 100),
  56 + start:"01/01/2009",
  57 + finish:"01/05/2009",
  58 + effortDriven:(i % 5 == 0)
  59 + };
  60 + }
61 61
62   - data.getItemMetadata = function (row) {
63   - if (row % 2 === 1) {
64   - return {
65   - "columns": {
66   - "duration": {
67   - "colspan": 3
68   - }
69   - }
70   - };
71   - }
72   - else {
73   - return {
74   - "columns": {
75   - 0: {
76   - "colspan": "*"
77   - }
78   - }
79   - };
80   - }
81   - };
  62 + data.getItemMetadata = function (row) {
  63 + if (row % 2 === 1) {
  64 + return {
  65 + "columns":{
  66 + "duration":{
  67 + "colspan":3
  68 + }
  69 + }
  70 + };
  71 + }
  72 + else {
  73 + return {
  74 + "columns":{
  75 + 0:{
  76 + "colspan":"*"
  77 + }
  78 + }
  79 + };
  80 + }
  81 + };
82 82
83   - grid = new Slick.Grid("#myGrid", data, columns, options);
  83 + grid = new Slick.Grid("#myGrid", data, columns, options);
84 84
85   - grid.setSelectionModel(new Slick.CellSelectionModel());
86   - })
87   - </script>
88   - </body>
  85 + grid.setSelectionModel(new Slick.CellSelectionModel());
  86 + })
  87 +</script>
  88 +</body>
89 89 </html>
457 examples/example-composite-editor-item-details.html
... ... @@ -1,233 +1,236 @@
1 1 <!DOCTYPE HTML>
2 2 <html>
3   - <head>
4   - <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
5   - <title>SlickGrid example: CompositeEditor</title>
6   - <link rel="stylesheet" href="../slick.grid.css" type="text/css" media="screen" charset="utf-8" />
7   - <link rel="stylesheet" href="../css/smoothness/jquery-ui-1.8.16.custom.css" type="text/css" media="screen" charset="utf-8" />
8   - <link rel="stylesheet" href="examples.css" type="text/css" media="screen" charset="utf-8" />
9   - <style>
10   - .cell-title {
11   - font-weight: bold;
12   - }
13   -
14   - .cell-effort-driven {
15   - text-align: center;
16   - }
17   -
18   - .item-details-form {
19   - z-index: 10000;
20   - display:inline-block;
21   - border:1px solid black;
22   - margin:8px;
23   - padding:10px;
24   - background: #efefef;
25   - -moz-box-shadow: 0px 0px 15px black;
26   - -webkit-box-shadow: 0px 0px 15px black;
27   - box-shadow: 0px 0px 15px black;
28   -
29   - position:absolute;
30   - top: 10px;
31   - left: 150px;
32   - }
33   -
34   - .item-details-form-buttons {
35   - float: right;
36   - }
37   -
38   - .item-details-row {
39   -
40   - }
41   -
42   - .item-details-label {
43   - margin-left:10px;
44   - margin-top:20px;
45   - display:block;
46   - font-weight:bold;
47   - }
48   -
49   - .item-details-editor-container {
50   - width:200px;
51   - height:20px;
52   - border:1px solid silver;
53   - background:white;
54   - display:block;
55   - margin:10px;
56   - margin-top:4px;
57   - padding:0;
58   - padding-left:4px;
59   - padding-right:4px;
60   - }
61   - </style>
62   - </head>
63   - <body>
64   - <div style="position:relative">
65   - <div style="width:600px;">
66   - <div id="myGrid" style="width:100%;height:500px;"></div>
67   - </div>
68   -
69   - <div class="options-panel">
70   - <h2>Demonstrates:</h2>
71   - <ul>
72   - <li>using a CompositeEditor to implement detached item edit form</li>
73   - </ul>
74   -
75   - <h2>Options:</h2>
76   - <button onclick="openDetails()">Open Item Edit for active row</button>
77   - </div>
78   - </div>
79   -
80   - <script id="itemDetailsTemplate" type="text/x-jquery-tmpl">
81   - <div class='item-details-form'>
82   - {{each columns}}
83   - <div class='item-details-label'>
84   - ${name}
85   - </div>
86   - <div class='item-details-editor-container' data-editorid='${id}'></div>
87   - {{/each}}
88   -
89   - <hr/>
90   - <div class='item-details-form-buttons'>
91   - <button data-action='save'>Save</button>
92   - <button data-action='cancel'>Cancel</button>
93   - </div>
94   - </div>
95   - </script>
96   -
97   -
98   -
99   - <script src="../lib/firebugx.js"></script>
100   -
101   - <script src="../lib/jquery-1.7.min.js"></script>
102   - <script src="../lib/jquery-ui-1.8.16.custom.min.js"></script>
103   - <script src="../lib/jquery.event.drag-2.0.min.js"></script>
104   - <script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
105   -
106   - <script src="../slick.core.js"></script>
107   - <script src="../plugins/slick.cellrangeselector.js"></script>
108   - <script src="../plugins/slick.cellselectionmodel.js"></script>
109   - <script src="../slick.editors.js"></script>
110   - <script src="../slick.grid.js"></script>
111   - <script src="slick.compositeeditor.js"></script>
112   -
113   - <script>
114   - function requiredFieldValidator(value) {
115   - if (value == null || value == undefined || !value.length)
116   - return {valid:false, msg:"This is a required field"};
117   - else
118   - return {valid:true, msg:null};
119   - }
120   -
121   - var grid;
122   - var data = [];
123   - var columns = [
124   - {id:"title", name:"Title", field:"title", width:120, cssClass:"cell-title", editor:TextCellEditor, validator:requiredFieldValidator},
125   - {id:"desc", name:"Description", field:"description", width:100, editor:TextCellEditor},
126   - {id:"duration", name:"Duration", field:"duration", editor:TextCellEditor},
127   - {id:"%", name:"% Complete", field:"percentComplete", width:80, resizable:false, formatter:GraphicalPercentCompleteCellFormatter, editor:PercentCompleteCellEditor},
128   - {id:"start", name:"Start", field:"start", minWidth:60, editor:DateCellEditor},
129   - {id:"finish", name:"Finish", field:"finish", minWidth:60, editor:DateCellEditor},
130   - {id:"effort-driven", name:"Effort Driven", width:80, minWidth:20, maxWidth:80, cssClass:"cell-effort-driven", field:"effortDriven", formatter:BoolCellFormatter, editor:YesNoCheckboxCellEditor}
131   - ];
132   - var options = {
133   - editable: true,
134   - enableAddRow: true,
135   - enableCellNavigation: true,
136   - asyncEditorLoading: false,
137   - autoEdit: false
138   - };
139   -
140   -
141   -
142   - function openDetails() {
143   - if (grid.getEditorLock().isActive() && !grid.getEditorLock().commitCurrentEdit()) {
144   - return;
  3 +<head>
  4 + <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  5 + <title>SlickGrid example: CompositeEditor</title>
  6 + <link rel="stylesheet" href="../slick.grid.css" type="text/css" />
  7 + <link rel="stylesheet" href="../css/smoothness/jquery-ui-1.8.16.custom.css" type="text/css" />
  8 + <link rel="stylesheet" href="examples.css" type="text/css" />
  9 + <style>
  10 + .cell-title {
  11 + font-weight: bold;
  12 + }
  13 +
  14 + .cell-effort-driven {
  15 + text-align: center;
  16 + }
  17 +
  18 + .item-details-form {
  19 + z-index: 10000;
  20 + display: inline-block;
  21 + border: 1px solid black;
  22 + margin: 8px;
  23 + padding: 10px;
  24 + background: #efefef;
  25 + -moz-box-shadow: 0px 0px 15px black;
  26 + -webkit-box-shadow: 0px 0px 15px black;
  27 + box-shadow: 0px 0px 15px black;
  28 +
  29 + position: absolute;
  30 + top: 10px;
  31 + left: 150px;
  32 + }
  33 +
  34 + .item-details-form-buttons {
  35 + float: right;
  36 + }
  37 +
  38 + .item-details-row {
  39 +
  40 + }
  41 +
  42 + .item-details-label {
  43 + margin-left: 10px;
  44 + margin-top: 20px;
  45 + display: block;
  46 + font-weight: bold;
  47 + }
  48 +
  49 + .item-details-editor-container {
  50 + width: 200px;
  51 + height: 20px;
  52 + border: 1px solid silver;
  53 + background: white;
  54 + display: block;
  55 + margin: 10px;
  56 + margin-top: 4px;
  57 + padding: 0;
  58 + padding-left: 4px;
  59 + padding-right: 4px;
  60 + }
  61 + </style>
  62 +</head>
  63 +<body>
  64 +<div style="position:relative">
  65 + <div style="width:600px;">
  66 + <div id="myGrid" style="width:100%;height:500px;"></div>
  67 + </div>
  68 +
  69 + <div class="options-panel">
  70 + <h2>Demonstrates:</h2>