├── .editorconfig ├── .gitignore ├── .travis.yml ├── MIT-LICENSE.txt ├── README.md ├── bower.json ├── controls ├── slick.columnpicker.css ├── slick.columnpicker.js ├── slick.pager.css └── slick.pager.js ├── css └── smoothness │ ├── images │ ├── ui-bg_flat_0_aaaaaa_40x100.png │ ├── ui-bg_flat_75_ffffff_40x100.png │ ├── ui-bg_glass_55_fbf9ee_1x400.png │ ├── ui-bg_glass_65_ffffff_1x400.png │ ├── ui-bg_glass_75_dadada_1x400.png │ ├── ui-bg_glass_75_e6e6e6_1x400.png │ ├── ui-bg_glass_95_fef1ec_1x400.png │ ├── ui-bg_highlight-soft_75_cccccc_1x100.png │ ├── ui-icons_222222_256x240.png │ ├── ui-icons_2e83ff_256x240.png │ ├── ui-icons_454545_256x240.png │ ├── ui-icons_888888_256x240.png │ └── ui-icons_cd0a0a_256x240.png │ └── jquery-ui-1.8.24.custom.css ├── examples ├── example-autotooltips.html ├── example-checkbox-row-select.html ├── example-colspan.html ├── example-composite-editor-item-details.html ├── example-custom-column-value-extractor.html ├── example-explicit-initialization.html ├── example-footer-row.html ├── example-frozen-columns-and-rows-spreadsheet.html ├── example-frozen-columns-and-rows.html ├── example-frozen-columns-autoheight.html ├── example-frozen-columns-tabs.html ├── example-frozen-columns.html ├── example-frozen-row-reordering.html ├── example-frozen-rows.html ├── example-group-header.html ├── example-grouping.html ├── example-header-row.html ├── example-multi-column-sort.html ├── example-optimizing-dataview.html ├── example-plugin-headerbuttons.html ├── example-plugin-headermenu.html ├── example-scroll-during-row-reorder.html ├── example-spreadsheet.html ├── example-totals-via-data-provider.html ├── example1-simple.html ├── example10-async-post-render.html ├── example11-autoheight.html ├── example12-fillbrowser.html ├── example13-getItem-sorting.html ├── example14-highlighting.html ├── example2-formatters.html ├── example3-editing.html ├── example3a-compound-editors.html ├── example3b-editing-with-undo.html ├── example4-model.html ├── example5-collapsing.html ├── example6-ajax-loading.html ├── example7-events.html ├── example8-alternative-display.html ├── example9-row-reordering.html ├── examples.css ├── index.html └── slick.compositeeditor.js ├── gulpfile.js ├── images ├── actions.gif ├── ajax-loader-small.gif ├── arrow_redo.png ├── arrow_right_peppermint.png ├── arrow_right_spearmint.png ├── arrow_undo.png ├── bullet_blue.png ├── bullet_star.png ├── bullet_toggle_minus.png ├── bullet_toggle_plus.png ├── calendar.gif ├── collapse.gif ├── comment_yellow.gif ├── down.gif ├── drag-handle.png ├── editor-helper-bg.gif ├── expand.gif ├── header-bg.gif ├── header-columns-bg.gif ├── header-columns-over-bg.gif ├── help.png ├── info.gif ├── listview.gif ├── pencil.gif ├── row-over-bg.gif ├── sort-asc.gif ├── sort-asc.png ├── sort-desc.gif ├── sort-desc.png ├── stripes.png ├── tag_red.png ├── tick.png ├── user_identity.gif └── user_identity_plus.gif ├── lib ├── firebugx.js ├── handlebars-v2.0.0.js ├── jquery-1.7.min.js ├── jquery-ui-1.8.24.custom.min.js ├── jquery.event.drag-2.2.js ├── jquery.event.drop-2.2.js ├── jquery.jsonp-2.4.min.js ├── jquery.mousewheel.js ├── jquery.simulate.js ├── jquery.sparkline.min.js ├── qunit.css └── qunit.js ├── package.json ├── plugins ├── slick.autotooltips.js ├── slick.cellcopymanager.js ├── slick.cellrangedecorator.js ├── slick.cellrangeselector.js ├── slick.cellselectionmodel.js ├── slick.checkboxselectcolumn.js ├── slick.headerbuttons.css ├── slick.headerbuttons.js ├── slick.headermenu.css ├── slick.headermenu.js ├── slick.rowmovemanager.js └── slick.rowselectionmodel.js ├── slick-default-theme.css ├── slick.core.js ├── slick.dataview.js ├── slick.editors.js ├── slick.formatters.js ├── slick.grid.css ├── slick.grid.js ├── slick.groupitemmetadataprovider.js ├── slick.remotemodel.js └── tests ├── dataview ├── dataview.js └── index.html ├── grid ├── grid.js └── index.html ├── index.html ├── init benchmark.html ├── model benchmarks.html ├── plugins ├── autotooltips.html └── autotooltips.js ├── scrolling benchmark raf.html └── scrolling benchmarks.html /.editorconfig: -------------------------------------------------------------------------------- 1 | # This file is for unifying the coding style for different editors and IDEs 2 | # editorconfig.org 3 | 4 | root = true 5 | 6 | [*] 7 | end_of_line = lf 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | 12 | # Tabs in JS unless otherwise specified 13 | [**.js] 14 | indent_style = space 15 | indent_size = 2 16 | 17 | [*.md] 18 | trim_trailing_whitespace = false -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .gitk* 2 | .idea/* 3 | *.orig 4 | .project 5 | .DS_Store 6 | .settings/ 7 | .idea 8 | node_modules -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - "0.10" 4 | branches: 5 | only: 6 | - master -------------------------------------------------------------------------------- /MIT-LICENSE.txt: -------------------------------------------------------------------------------- 1 | Copyright (c) 2010 Michael Leibman, http://github.com/mleibman/slickgrid 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining 4 | a copy of this software and associated documentation files (the 5 | "Software"), to deal in the Software without restriction, including 6 | without limitation the rights to use, copy, modify, merge, publish, 7 | distribute, sublicense, and/or sell copies of the Software, and to 8 | permit persons to whom the Software is furnished to do so, subject to 9 | the following conditions: 10 | 11 | The above copyright notice and this permission notice shall be 12 | included in all copies or substantial portions of the Software. 13 | 14 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 15 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 16 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 17 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE 18 | LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION 19 | OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION 20 | WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # [X-SlickGrid](https://ddomingues.github.io/X-SlickGrid) [![Code Climate](https://codeclimate.com/github/ddomingues/X-SlickGrid.png)](https://codeclimate.com/github/ddomingues/X-SlickGrid) 2 | 3 | X-SlickGrid is a extension of the great [SlickGrid](https://github.com/mleibman/SlickGrid) 4 | 5 | [Live Demos](https://ddomingues.github.io/X-SlickGrid/liveDemo/examples/index.html) 6 | 7 | ## Some highlights: 8 | >* Adaptive virtual scrolling (handle hundreds of thousands of rows with extreme responsiveness) 9 | * Extremely fast rendering speed 10 | * Supports jQuery UI Themes 11 | * Background post-rendering for richer cells 12 | * Configurable & customizable 13 | * Full keyboard navigation 14 | * Column resize/reorder/show/hide 15 | * Column autosizing & force-fit 16 | * Pluggable cell formatters & editors 17 | * Support for editing and creating new rows. 18 | * Grouping, filtering, custom aggregators, and more! 19 | * Advanced detached & multi-field editors with undo/redo support. 20 | * “GlobalEditorLock” to manage concurrent edits in cases where multiple Views on a page can edit the same data. 21 | * Support for [millions of rows](http://stackoverflow.com/a/2569488/1269037) 22 | 23 | ## Additional Features 24 | 25 | >* Footer Row 26 | * Tree Columns 27 | * Column Picker with functionalities 28 | * Group 29 | * Show/Hide 30 | * Totalize 31 | * Frozen Columns and Rows. 32 | * Frozen Rows (top & bottom) 33 | * Frozen Columns (left only, right coming soon) 34 | * Horizontal scrolling of frozen viewport with mousewheel 35 | * Scroll viewport during row drag 36 | * Scroll viewport during column drag 37 | 38 | ## Want to contribute? \o/\o/ 39 | 40 | >1. Fork it! 41 | 2. Create your feature branch: `git checkout -b my-new-feature` 42 | 3. Commit your changes: `git commit -m 'Add some feature'` 43 | 4. Push to the branch: `git push origin my-new-feature` 44 | 5. Submit a pull request 45 | 46 | ## Credits 47 | 48 | >* [Michael Leibman](https://github.com/mleibman) by [SlickGrid](https://github.com/mleibman/SlickGrid) 49 | * [Justin Lynch](https://github.com/jlynch7) by [Frozen Columns and Rows](https://github.com/JLynch7/SlickGrid/tree/2.0-frozenRowsAndColumns) 50 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "X-SlickGrid", 3 | "main": ["slick.core.js", "slick.grid.js", "slick.grid.css"], 4 | "keywords": ["SlickGrid", "grid", "frozen", "fix", "columns", "spreadsheet", "nested"], 5 | "ignore": [ 6 | ".jshintrc", 7 | "**/*.txt", 8 | "*.json", 9 | "*.markdown", 10 | "*.txt", 11 | ".*", 12 | "!LICENSE.txt", 13 | "Gruntfile.js", 14 | "examples", 15 | "tests", 16 | "lib" 17 | ], 18 | "dependencies": { 19 | "jquery": "~1.8.3", 20 | "jquery-ui": "~1.8.23", 21 | "jquery.event": "threedubmedia/jquery.threedubmedia#2.2", 22 | "jquery-mousewheel": "jquery/jquery-mousewheel#3.0.6", 23 | "jquery-simulate": "1.0.0", 24 | "jquery.sparkline": "gwatts/jquery.sparkline#2.x.x", 25 | "jquery-jsonp": "jaubourg/jquery-jsonp#2.4.0", 26 | "handlebars": "~2.0.0", 27 | "qunit": "~1.0.0" 28 | }, 29 | "devDependencies": { 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /controls/slick.columnpicker.css: -------------------------------------------------------------------------------- 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 | box-shadow: 2px 2px 2px silver; 8 | min-width: 100px; 9 | cursor: default; 10 | } 11 | 12 | .slick-columnpicker .tree ul { 13 | margin: 0; 14 | padding: 0; 15 | float: none; 16 | display: block; 17 | clear: left; 18 | } 19 | 20 | .slick-columnpicker .tree label { 21 | margin: 0; 22 | } 23 | 24 | .slick-columnpicker .tree ul ul { 25 | margin-left: 10px; 26 | } 27 | 28 | .slick-columnpicker .tree ul li { 29 | list-style: none; 30 | background: none; 31 | white-space: nowrap; 32 | height: auto; 33 | line-height: 9px; 34 | padding-right: 10px; 35 | padding-top: 2px; 36 | vertical-align: middle; 37 | } 38 | 39 | .slick-columnpicker .tree ul li i { 40 | margin-left: 5px; 41 | margin-right: 5px; 42 | } 43 | 44 | .slick-columnpicker .tree ul li > i { 45 | margin-right: 3px; 46 | } 47 | 48 | .slick-columnpicker .tree { 49 | border-bottom: 1px solid silver; 50 | margin-bottom: 3px; 51 | padding-bottom: 5px; 52 | } 53 | 54 | .slick-columnpicker p { 55 | height: 5px; 56 | } 57 | -------------------------------------------------------------------------------- /controls/slick.pager.css: -------------------------------------------------------------------------------- 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; 8 | } 9 | 10 | .slick-pager .slick-pager-status { 11 | display: inline-block; 12 | padding: 6px; 13 | } 14 | 15 | .slick-pager .ui-icon-container { 16 | display: inline-block; 17 | margin: 2px; 18 | border-color: gray; 19 | } 20 | 21 | .slick-pager .slick-pager-nav { 22 | display: inline-block; 23 | float: left; 24 | padding: 2px; 25 | } 26 | 27 | .slick-pager .slick-pager-settings { 28 | display: block; 29 | float: right; 30 | padding: 2px; 31 | } 32 | 33 | .slick-pager .slick-pager-settings * { 34 | vertical-align: middle; 35 | } 36 | 37 | .slick-pager .slick-pager-settings a { 38 | padding: 2px; 39 | text-decoration: underline; 40 | cursor: pointer; 41 | } 42 | -------------------------------------------------------------------------------- /controls/slick.pager.js: -------------------------------------------------------------------------------- 1 | (function (factory) { 2 | if (typeof define === 'function' && define.amd) { 3 | define(['jquery'], factory); 4 | } else if (typeof exports === 'object') { 5 | module.exports = factory(require('jquery')); 6 | } else { 7 | factory(jQuery); 8 | } 9 | }(function ($) { 10 | function SlickGridPager(dataView, grid, $container) { 11 | var $status; 12 | 13 | function init() { 14 | dataView.onPagingInfoChanged.subscribe(function (e, pagingInfo) { 15 | updatePager(pagingInfo); 16 | }); 17 | 18 | constructPagerUI(); 19 | updatePager(dataView.getPagingInfo()); 20 | } 21 | 22 | function getNavState() { 23 | var cannotLeaveEditMode = !Slick.GlobalEditorLock.commitCurrentEdit(); 24 | var pagingInfo = dataView.getPagingInfo(); 25 | var lastPage = pagingInfo.totalPages - 1; 26 | 27 | return { 28 | canGotoFirst: !cannotLeaveEditMode && pagingInfo.pageSize != 0 && pagingInfo.pageNum > 0, 29 | canGotoLast: !cannotLeaveEditMode && pagingInfo.pageSize != 0 && pagingInfo.pageNum != lastPage, 30 | canGotoPrev: !cannotLeaveEditMode && pagingInfo.pageSize != 0 && pagingInfo.pageNum > 0, 31 | canGotoNext: !cannotLeaveEditMode && pagingInfo.pageSize != 0 && pagingInfo.pageNum < lastPage, 32 | pagingInfo: pagingInfo 33 | } 34 | } 35 | 36 | function setPageSize(n) { 37 | dataView.setRefreshHints({ 38 | isFilterUnchanged: true 39 | }); 40 | dataView.setPagingOptions({pageSize: n}); 41 | } 42 | 43 | function gotoFirst() { 44 | if (getNavState().canGotoFirst) { 45 | dataView.setPagingOptions({pageNum: 0}); 46 | } 47 | } 48 | 49 | function gotoLast() { 50 | var state = getNavState(); 51 | if (state.canGotoLast) { 52 | dataView.setPagingOptions({pageNum: state.pagingInfo.totalPages - 1}); 53 | } 54 | } 55 | 56 | function gotoPrev() { 57 | var state = getNavState(); 58 | if (state.canGotoPrev) { 59 | dataView.setPagingOptions({pageNum: state.pagingInfo.pageNum - 1}); 60 | } 61 | } 62 | 63 | function gotoNext() { 64 | var state = getNavState(); 65 | if (state.canGotoNext) { 66 | dataView.setPagingOptions({pageNum: state.pagingInfo.pageNum + 1}); 67 | } 68 | } 69 | 70 | function constructPagerUI() { 71 | $container.empty(); 72 | 73 | var $nav = $("").appendTo($container); 74 | var $settings = $("").appendTo($container); 75 | $status = $("").appendTo($container); 76 | 77 | $settings 78 | .append(""); 79 | 80 | $settings.find("a[data]").click(function (e) { 81 | var pagesize = $(e.target).attr("data"); 82 | if (pagesize != undefined) { 83 | if (pagesize == -1) { 84 | var vp = grid.getViewport(); 85 | setPageSize(vp.bottom - vp.top); 86 | } else { 87 | setPageSize(parseInt(pagesize)); 88 | } 89 | } 90 | }); 91 | 92 | var icon_prefix = ""; 94 | 95 | $(icon_prefix + "ui-icon-lightbulb" + icon_suffix) 96 | .click(function () { 97 | $(".slick-pager-settings-expanded").toggle() 98 | }) 99 | .appendTo($settings); 100 | 101 | $(icon_prefix + "ui-icon-seek-first" + icon_suffix) 102 | .click(gotoFirst) 103 | .appendTo($nav); 104 | 105 | $(icon_prefix + "ui-icon-seek-prev" + icon_suffix) 106 | .click(gotoPrev) 107 | .appendTo($nav); 108 | 109 | $(icon_prefix + "ui-icon-seek-next" + icon_suffix) 110 | .click(gotoNext) 111 | .appendTo($nav); 112 | 113 | $(icon_prefix + "ui-icon-seek-end" + icon_suffix) 114 | .click(gotoLast) 115 | .appendTo($nav); 116 | 117 | $container.find(".ui-icon-container") 118 | .hover(function () { 119 | $(this).toggleClass("ui-state-hover"); 120 | }); 121 | 122 | $container.children().wrapAll("
"); 123 | } 124 | 125 | 126 | function updatePager(pagingInfo) { 127 | var state = getNavState(); 128 | 129 | $container.find(".slick-pager-nav span").removeClass("ui-state-disabled"); 130 | if (!state.canGotoFirst) { 131 | $container.find(".ui-icon-seek-first").addClass("ui-state-disabled"); 132 | } 133 | if (!state.canGotoLast) { 134 | $container.find(".ui-icon-seek-end").addClass("ui-state-disabled"); 135 | } 136 | if (!state.canGotoNext) { 137 | $container.find(".ui-icon-seek-next").addClass("ui-state-disabled"); 138 | } 139 | if (!state.canGotoPrev) { 140 | $container.find(".ui-icon-seek-prev").addClass("ui-state-disabled"); 141 | } 142 | 143 | if (pagingInfo.pageSize == 0) { 144 | var totalRowsCount = dataView.getItems().length; 145 | var visibleRowsCount = pagingInfo.totalRows; 146 | if (visibleRowsCount < totalRowsCount) { 147 | $status.text("Showing " + visibleRowsCount + " of " + totalRowsCount + " rows"); 148 | } else { 149 | $status.text("Showing all " + totalRowsCount + " rows"); 150 | } 151 | $status.text("Showing all " + pagingInfo.totalRows + " rows"); 152 | } else { 153 | $status.text("Showing page " + (pagingInfo.pageNum + 1) + " of " + pagingInfo.totalPages); 154 | } 155 | } 156 | 157 | init(); 158 | } 159 | 160 | // Slick.Controls.Pager 161 | $.extend(true, window, { Slick: { Controls: { Pager: SlickGridPager }}}); 162 | })); 163 | -------------------------------------------------------------------------------- /css/smoothness/images/ui-bg_flat_0_aaaaaa_40x100.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ddomingues/X-SlickGrid/d4d80978d31a5a4200221960e30b903cdbde7add/css/smoothness/images/ui-bg_flat_0_aaaaaa_40x100.png -------------------------------------------------------------------------------- /css/smoothness/images/ui-bg_flat_75_ffffff_40x100.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ddomingues/X-SlickGrid/d4d80978d31a5a4200221960e30b903cdbde7add/css/smoothness/images/ui-bg_flat_75_ffffff_40x100.png -------------------------------------------------------------------------------- /css/smoothness/images/ui-bg_glass_55_fbf9ee_1x400.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ddomingues/X-SlickGrid/d4d80978d31a5a4200221960e30b903cdbde7add/css/smoothness/images/ui-bg_glass_55_fbf9ee_1x400.png -------------------------------------------------------------------------------- /css/smoothness/images/ui-bg_glass_65_ffffff_1x400.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ddomingues/X-SlickGrid/d4d80978d31a5a4200221960e30b903cdbde7add/css/smoothness/images/ui-bg_glass_65_ffffff_1x400.png -------------------------------------------------------------------------------- /css/smoothness/images/ui-bg_glass_75_dadada_1x400.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ddomingues/X-SlickGrid/d4d80978d31a5a4200221960e30b903cdbde7add/css/smoothness/images/ui-bg_glass_75_dadada_1x400.png -------------------------------------------------------------------------------- /css/smoothness/images/ui-bg_glass_75_e6e6e6_1x400.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ddomingues/X-SlickGrid/d4d80978d31a5a4200221960e30b903cdbde7add/css/smoothness/images/ui-bg_glass_75_e6e6e6_1x400.png -------------------------------------------------------------------------------- /css/smoothness/images/ui-bg_glass_95_fef1ec_1x400.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ddomingues/X-SlickGrid/d4d80978d31a5a4200221960e30b903cdbde7add/css/smoothness/images/ui-bg_glass_95_fef1ec_1x400.png -------------------------------------------------------------------------------- /css/smoothness/images/ui-bg_highlight-soft_75_cccccc_1x100.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ddomingues/X-SlickGrid/d4d80978d31a5a4200221960e30b903cdbde7add/css/smoothness/images/ui-bg_highlight-soft_75_cccccc_1x100.png -------------------------------------------------------------------------------- /css/smoothness/images/ui-icons_222222_256x240.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ddomingues/X-SlickGrid/d4d80978d31a5a4200221960e30b903cdbde7add/css/smoothness/images/ui-icons_222222_256x240.png -------------------------------------------------------------------------------- /css/smoothness/images/ui-icons_2e83ff_256x240.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ddomingues/X-SlickGrid/d4d80978d31a5a4200221960e30b903cdbde7add/css/smoothness/images/ui-icons_2e83ff_256x240.png -------------------------------------------------------------------------------- /css/smoothness/images/ui-icons_454545_256x240.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ddomingues/X-SlickGrid/d4d80978d31a5a4200221960e30b903cdbde7add/css/smoothness/images/ui-icons_454545_256x240.png -------------------------------------------------------------------------------- /css/smoothness/images/ui-icons_888888_256x240.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ddomingues/X-SlickGrid/d4d80978d31a5a4200221960e30b903cdbde7add/css/smoothness/images/ui-icons_888888_256x240.png -------------------------------------------------------------------------------- /css/smoothness/images/ui-icons_cd0a0a_256x240.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ddomingues/X-SlickGrid/d4d80978d31a5a4200221960e30b903cdbde7add/css/smoothness/images/ui-icons_cd0a0a_256x240.png -------------------------------------------------------------------------------- /examples/example-autotooltips.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | SlickGrid plugin example: AutoTooltips 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 16 | 36 | 37 |
14 |
15 | 		17 |

Demonstrates:

18 |
    19 |
  • AutoTooltips plugin
    • 20 |
21 |

Instructions:

22 | 23 |

Resize the columns until see ellipsis in column or header. Hover over cell to see tooltip.

24 | 25 |

Usage:

26 | 
plugin = new Slick.AutoTooltips(pluginOptions);
27 | grid.registerPlugin(plugin);
28 | grid.render();
29 | 30 |

View Source:

31 | 35 |
38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 81 | 82 | 83 | -------------------------------------------------------------------------------- /examples/example-checkbox-row-select.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 16 | 17 | 18 |
19 |
20 |
21 |
22 | 23 |
24 |

Demonstrates:

25 |
    26 |
  • Checkbox row select column
    • 27 |
28 |

View Source:

29 | 33 | 34 |
35 |
36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 96 | 97 | 98 | -------------------------------------------------------------------------------- /examples/example-colspan.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 14 | 25 | 26 |
12 |
13 | 		15 |

Demonstrates:

16 |
    17 |
  • column span
    • 18 |
19 |

View Source:

20 | 24 |
27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 91 | 92 | 93 | -------------------------------------------------------------------------------- /examples/example-custom-column-value-extractor.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | SlickGrid example: Custom column value extractor 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 16 | 28 | 29 |
14 |
15 | 		17 |

Demonstrates:

18 |
    19 |
  • using dataItemColumnValueExtractor option to specify a custom column value extractor
    • 20 |
21 |

View Source:

22 | 27 |
30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 78 | 79 | 80 | -------------------------------------------------------------------------------- /examples/example-explicit-initialization.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | SlickGrid example: Explicit grid initialization 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 15 | 36 | 37 |
14 | 16 |

Demonstrates:

17 | 18 |

19 | The container which the grid is being created in needs to be in the DOM and participate in layout 20 | (can be 'visibility:hidden' but not 'display:none') in order for SlickGrid to be able to make certain 21 | measurements and initialize event listeners. Normally, this is done when a SlickGrid instance is 22 | being created. Optionally, you can defer the initialization until the above condition is met and call 23 | the grid.init() method explicitly. To use explicit initialization, set the explicitInitialization 24 | option to true. 25 |

26 | This example demonstrates creating a SlickGrid inside a detached element and calling init() explicitly 27 | when the element is added to the DOM. 28 |

29 | 30 |

View Source:

31 | 35 |
38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 85 | 86 | 87 | -------------------------------------------------------------------------------- /examples/example-footer-row.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 22 | 23 | 24 |
25 |
26 |
27 |
28 | 29 |
30 |

Demonstrates:

31 |
    32 |
  • Using a fixed footer row to implement summary column-level
    • 33 |
34 |

View Source:

35 | 39 |
40 |
41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 114 | 115 | 116 | -------------------------------------------------------------------------------- /examples/example-frozen-columns-autoheight.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | SlickGrid example 11: No vertical scrolling (autoHeight) 7 | 8 | 9 | 34 | 35 | 36 |
37 |
38 |

Demonstrates:

39 |
    40 |
  • autoHeight:true grid option
    • 41 |
42 |
43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 83 | 84 | 85 | -------------------------------------------------------------------------------- /examples/example-header-row.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 25 | 26 | 27 |
28 |
29 |
30 |
31 | 32 |
33 |

Demonstrates:

34 |
    35 |
  • Using a fixed header row to implement column-level filters
    • 36 |
  • Type numbers in textboxes to filter grid data
    • 37 |
38 |

View Source:

39 | 43 |
44 |
45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 136 | 137 | 138 | -------------------------------------------------------------------------------- /examples/example-multi-column-sort.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | SlickGrid example: Multi Column Sort 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 16 | 27 | 28 |
14 |
15 | 		17 |

Demonstrates:

18 |
    19 |
  • basic grid with multi-column sort option
    • 20 |
21 |

View Source:

22 | 26 |
29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 99 | 100 | 101 | -------------------------------------------------------------------------------- /examples/example-plugin-headerbuttons.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 22 | 23 | 24 |
25 |
26 |
27 |
28 | 29 |
30 |

31 | This example demonstrates using the Slick.Plugins.HeaderButtons plugin to easily add buttons to column 32 | headers. These buttons can be specified directly in the column definition, and are very easy to configure and use. 33 |

34 | 35 |

View Source:

36 | 40 |
41 |
42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 166 | 167 | 168 | -------------------------------------------------------------------------------- /examples/example-plugin-headermenu.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 44 | 45 | 46 |
47 |
48 |
49 |
50 | 51 |
52 |

53 | This example demonstrates using the Slick.Plugins.HeaderMenu plugin to add drop-down menus to column 54 | headers. (Hover over the headers.) 55 |

56 | 57 |

View Source:

58 | 62 |
63 |
64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 154 | 155 | 156 | -------------------------------------------------------------------------------- /examples/example-totals-via-data-provider.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 14 | 15 | 16 |
17 |
18 |
19 |
20 | 21 |
22 |

Demonstrates:

23 |
    24 |
  • Implementing a data provider to create a totals row at the end of the grid.
    • 25 |
  • This is a simplification of what the DataView does.
    • 26 |
27 |
28 |

View Source:

29 | 33 |
34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 132 | 133 | 134 | -------------------------------------------------------------------------------- /examples/example1-simple.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | SlickGrid example 1: Basic grid 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 16 | 27 | 28 |
14 |
15 | 		17 |

Demonstrates:

18 |
    19 |
  • basic grid with minimal configuration
    • 20 |
21 |

View Source:

22 | 26 |
29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 68 | 69 | 70 | -------------------------------------------------------------------------------- /examples/example10-async-post-render.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | SlickGrid example 10: Async post render 6 | 7 | 8 | 9 | 22 | 23 | 24 |
25 |
26 | 27 |
28 |
29 |
30 | 31 |
32 |

Demonstrates:

33 | 34 |

35 | With SlickGrid, you can still have rich, complex cells rendered against the actual DOM nodes while still preserving 36 | the speed and responsiveness. 37 | This is achieved through async background post-rendering. 38 | SlickGrid exposes a asyncPostRender property on a column which you can use to set your own function that will 39 | manipulate the cell DOM node directly. 40 | The event is fired one by one for all visible rows in the viewport on a timer so it doesn't impact the UI 41 | responsiveness. 42 | You should still make sure that post-processing one row doesn't take too long though. 43 | SlickGrid will figure out what and when needs to be updated for you. 44 |

45 | 46 |

47 | The example below is a list of 500 rows with a title and 5 integer cells followed by graphical representation of 48 | these integers. 49 | The graph is drawn using a CANVAS element in the background. 50 | The grid is editable, so you can edit the numbers and see the changes reflected (almost) immediately in the graph. 51 | The graph cell behaves just like an ordinary cell and can be resized/reordered. 52 | The graphs themselves are created using the excellent jQuery Sparklines library. 54 |

55 | 56 |

View Source:

57 | 61 |
62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 135 | 136 | 137 | -------------------------------------------------------------------------------- /examples/example11-autoheight.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | SlickGrid example 11: No vertical scrolling (autoHeight) 7 | 8 | 9 | 34 | 35 | 36 |
37 |
38 |

Demonstrates:

39 |
    40 |
  • autoHeight:true grid option
    • 41 |
42 |

View Source:

43 | 47 |
48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 87 | 88 | 89 | -------------------------------------------------------------------------------- /examples/example12-fillbrowser.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | SlickGrid example 12: Fill browser 7 | 8 | 9 | 43 | 44 | 45 |
46 |
47 |

Demonstrates:

48 |
    49 |
  • Grid filling browser window completely (using absolute positioning)
    • 50 |
  • Grid resizing when browser window changes size
    • 51 |
  • Overall performance of the grid when displaying large tabular data (17 columns x 10,000 rows)
    • 52 |
53 |

View Source:

54 | 58 |
59 | 60 | 61 | 62 | 63 | 64 | 65 | 120 | 121 | 122 | -------------------------------------------------------------------------------- /examples/example13-getItem-sorting.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | SlickGrid example 13: Indexed Sorting using Functional Data Provider 7 | 8 | 9 | 43 | 44 | 45 |
46 |
47 |

Demonstrates:

48 |
    49 |
  • Sorting grid items by an index
    • 50 |
  • Using the getItem method to provide data
    • 51 |
52 |

View Source:

53 | 57 |
58 | 59 | 60 | 61 | 62 | 63 | 64 | 125 | 126 | 127 | -------------------------------------------------------------------------------- /examples/example14-highlighting.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | SlickGrid example 14: Highlighting and Flashing cells 6 | 7 | 8 | 9 | 29 | 30 | 31 |
32 |
33 |
34 |
35 | 36 |
37 |

About

38 | This example simulates a real-time display of CPU utilization in a web farm. 39 | Data is updated in real-time, and cells with changed data are highlighted. 40 | You can also click "Find current server" to scroll the row displaying data for the current 41 | server into view and flash it. 42 |

Demonstrates

43 |
    44 |
  • setHighlightedCells()
    • 45 |
  • flashCell()
    • 46 |
47 |

Controls

48 | 49 | 50 |

View Source:

51 | 55 |
56 |
57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 157 | 158 | 159 | -------------------------------------------------------------------------------- /examples/example2-formatters.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | SlickGrid example 2: Formatters 6 | 7 | 8 | 9 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 28 | 40 | 41 |
26 |
27 | 		29 |

Demonstrates:

30 |
    31 |
  • width, minWidth, maxWidth, resizable, cssClass column attributes
    • 32 |
  • custom column formatters
    • 33 |
34 |

View Source:

35 | 39 |
42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 93 | 94 | 95 | -------------------------------------------------------------------------------- /examples/example3-editing.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | SlickGrid example 3: Editing 6 | 7 | 8 | 9 | 18 | 19 | 20 |
21 |
22 |
23 |
24 | 25 |
26 |

Demonstrates:

27 |
    28 |
  • adding basic keyboard navigation and editing
    • 29 |
  • custom editors and validators
    • 30 |
  • auto-edit settings
    • 31 |
32 | 33 |

Options:

34 | 35 |   36 | 37 |

View Source:

38 | 42 |
43 |
44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 113 | 114 | 115 | -------------------------------------------------------------------------------- /examples/example3a-compound-editors.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | SlickGrid example 3a: Advanced Editing 6 | 7 | 8 | 9 | 14 | 15 | 16 | 17 |
18 |
19 |
20 |
21 | 22 |
23 |

Demonstrates:

24 |
    25 |
  • compound cell editors driving multiple fields from one cell
    • 26 |
  • providing validation from the editor
    • 27 |
  • hooking into validation events
    • 28 |
29 |

View Source:

30 | 34 | 35 | 36 |
37 |
38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 149 | 150 | 151 | -------------------------------------------------------------------------------- /examples/example3b-editing-with-undo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | SlickGrid example 3: Editing 6 | 7 | 8 | 9 | 18 | 19 | 20 |
21 |
22 |
23 |
24 | 25 |
26 |

Demonstrates:

27 |
    28 |
  • Using "editCommandHandler" option to intercept edit commands and implement undo support
    • 29 |
30 | 31 |

Controls:

32 | 33 |

View Source:

34 | 38 |
39 |
40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 113 | 114 | 115 | -------------------------------------------------------------------------------- /examples/example6-ajax-loading.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | SlickGrid example 6: AJAX Load 6 | 7 | 8 | 9 | 36 | 37 | 38 |
39 |
40 | 41 | 42 | Search: 43 | 44 | 45 |
46 |
47 |
48 |
49 |
50 |

Demonstrates:

51 |
    52 |
  • loading data through AJAX
    • 53 |
  • custom row height
    • 54 |
55 | 56 |

WARNING:

57 |
    58 |
  • API access to Hackernews provided through ThriftDB has some latency when paging through results. Be patient. 59 |
    • 60 |
61 | 62 |

View Source:

63 | 67 |
68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 171 | 172 | 173 | -------------------------------------------------------------------------------- /examples/example7-events.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | SlickGrid example 7: Events 6 | 7 | 8 | 9 | 36 | 37 | 38 | 39 | 40 | 43 | 56 | 57 |
41 |
42 | 		44 |

Demonstrates:

45 |
    46 |
  • handling events from the grid:
    • 47 |
  • Right-click the row to open the context menu
    • 48 |
  • Click the priority cell to toggle values
    • 49 |
50 |

View Source:

51 | 55 |
58 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 141 | 142 | 143 | -------------------------------------------------------------------------------- /examples/example8-alternative-display.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | SlickGrid example 8: Alternative display 6 | 7 | 8 | 9 | 60 | 61 | 62 | 63 | 64 | 67 | 83 | 84 |
65 |
66 | 		68 |

Demonstrates:

69 | 70 |
    71 |
  • Template-based rendering using John Resig's micro-templates while still using 73 | SlickGrid's virtual rendering technology. 74 |
    • 75 |
76 |

View Source:

77 | 81 | 82 |
85 | 86 | 87 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 176 | 177 | 178 | -------------------------------------------------------------------------------- /examples/examples.css: -------------------------------------------------------------------------------- 1 | @import url('../slick-default-theme.css'); 2 | 3 | * { 4 | font-family: arial; 5 | font-size: 8pt; 6 | } 7 | 8 | body { 9 | background: beige; 10 | padding: 0; 11 | margin: 8px; 12 | } 13 | 14 | h2 { 15 | font-size: 10pt; 16 | border-bottom: 1px dotted gray; 17 | } 18 | 19 | ul { 20 | margin-left: 0; 21 | padding: 0; 22 | cursor: default; 23 | } 24 | 25 | li { 26 | background: url("../images/arrow_right_spearmint.png") no-repeat center left; 27 | padding: 0 0 0 14px; 28 | 29 | list-style: none; 30 | margin: 0; 31 | } 32 | 33 | #myGrid { 34 | background: white; 35 | outline: 0; 36 | border: 1px solid gray; 37 | } 38 | 39 | .grid-header { 40 | border: 1px solid gray; 41 | border-bottom: 0; 42 | border-top: 0; 43 | background: url('../images/header-bg.gif') repeat-x center top; 44 | color: black; 45 | height: 24px; 46 | line-height: 24px; 47 | } 48 | 49 | .grid-header label { 50 | display: inline-block; 51 | font-weight: bold; 52 | margin: auto auto auto 6px; 53 | } 54 | 55 | .grid-header .ui-icon { 56 | margin: 4px 4px auto 6px; 57 | background-color: transparent; 58 | border-color: transparent; 59 | } 60 | 61 | .grid-header .ui-icon.ui-state-hover { 62 | background-color: white; 63 | } 64 | 65 | .grid-header #txtSearch { 66 | margin: 0 4px 0 4px; 67 | padding: 2px 2px; 68 | border-radius: 2px; 69 | -moz-border-radius: 2px; 70 | -webkit-border-radius: 2px; 71 | border: 1px solid silver; 72 | } 73 | 74 | .options-panel { 75 | border-radius: 6px; 76 | -moz-border-radius: 6px; 77 | -webkit-border-radius: 6px; 78 | border: 1px solid silver; 79 | background: #f0f0f0; 80 | padding: 4px; 81 | margin-bottom: 20px; 82 | width: 400px; 83 | position: absolute; 84 | top: 0px; 85 | left: 650px; 86 | } 87 | 88 | /* Individual cell styles */ 89 | .slick-cell.task-name { 90 | font-weight: bold; 91 | text-align: right; 92 | } 93 | 94 | .slick-cell.task-percent { 95 | text-align: right; 96 | } 97 | 98 | .slick-cell.cell-move-handle { 99 | font-weight: bold; 100 | text-align: right; 101 | border-right: solid gray; 102 | 103 | background: #efefef; 104 | cursor: move; 105 | } 106 | 107 | .cell-move-handle:hover { 108 | background: #b6b9bd; 109 | } 110 | 111 | .slick-row.selected .cell-move-handle { 112 | background: #D5DC8D; 113 | } 114 | 115 | .slick-row .cell-actions { 116 | text-align: left; 117 | } 118 | 119 | .slick-row.complete { 120 | background-color: #DFD; 121 | color: #555; 122 | } 123 | 124 | .percent-complete-bar { 125 | display: inline-block; 126 | height: 6px; 127 | border-radius: 3px; 128 | -moz-border-radius: 3px; 129 | -webkit-border-radius: 3px; 130 | } 131 | 132 | /* Slick.Editors.Text, Slick.Editors.Date */ 133 | input.editor-text { 134 | width: 100%; 135 | height: 100%; 136 | border: 0; 137 | margin: 0; 138 | background: transparent; 139 | outline: 0; 140 | padding: 0; 141 | 142 | } 143 | 144 | .ui-datepicker-trigger { 145 | margin-top: 2px; 146 | padding: 0; 147 | vertical-align: top; 148 | } 149 | 150 | /* Slick.Editors.PercentComplete */ 151 | input.editor-percentcomplete { 152 | width: 100%; 153 | height: 100%; 154 | border: 0; 155 | margin: 0; 156 | background: transparent; 157 | outline: 0; 158 | padding: 0; 159 | 160 | float: left; 161 | } 162 | 163 | .editor-percentcomplete-picker { 164 | position: relative; 165 | display: inline-block; 166 | width: 16px; 167 | height: 100%; 168 | background: url("../images/pencil.gif") no-repeat center center; 169 | overflow: visible; 170 | z-index: 1000; 171 | float: right; 172 | } 173 | 174 | .editor-percentcomplete-helper { 175 | border: 0 solid gray; 176 | position: absolute; 177 | top: -2px; 178 | left: -9px; 179 | background: url("../images/editor-helper-bg.gif") no-repeat top left; 180 | padding-left: 9px; 181 | 182 | width: 120px; 183 | height: 140px; 184 | display: none; 185 | overflow: visible; 186 | } 187 | 188 | .editor-percentcomplete-wrapper { 189 | background: beige; 190 | padding: 20px 8px; 191 | 192 | width: 100%; 193 | height: 98px; 194 | border: 1px solid gray; 195 | border-left: 0; 196 | } 197 | 198 | .editor-percentcomplete-buttons { 199 | float: right; 200 | } 201 | 202 | .editor-percentcomplete-buttons button { 203 | width: 80px; 204 | } 205 | 206 | .editor-percentcomplete-slider { 207 | float: left; 208 | } 209 | 210 | .editor-percentcomplete-picker:hover .editor-percentcomplete-helper { 211 | display: block; 212 | } 213 | 214 | .editor-percentcomplete-helper:hover { 215 | display: block; 216 | } 217 | 218 | /* Slick.Editors.YesNoSelect */ 219 | select.editor-yesno { 220 | width: 100%; 221 | margin: 0; 222 | vertical-align: middle; 223 | } 224 | 225 | /* Slick.Editors.Checkbox */ 226 | input.editor-checkbox { 227 | margin: 0; 228 | height: 100%; 229 | padding: 0; 230 | border: 0; 231 | } 232 | -------------------------------------------------------------------------------- /examples/index.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | SlickGrid Examples 5 | 24 | 25 | 26 |

Examples

27 |
28 | 60 |
61 | 62 | 63 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'), 2 | qunit = require('node-qunit-phantomjs'); 3 | 4 | gulp.task('default', function() { 5 | qunit('./tests/plugins/autotooltips.html','./tests/grid/index.html','./tests/dataview/index.html'); 6 | }); -------------------------------------------------------------------------------- /images/actions.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ddomingues/X-SlickGrid/d4d80978d31a5a4200221960e30b903cdbde7add/images/actions.gif -------------------------------------------------------------------------------- /images/ajax-loader-small.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ddomingues/X-SlickGrid/d4d80978d31a5a4200221960e30b903cdbde7add/images/ajax-loader-small.gif -------------------------------------------------------------------------------- /images/arrow_redo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ddomingues/X-SlickGrid/d4d80978d31a5a4200221960e30b903cdbde7add/images/arrow_redo.png -------------------------------------------------------------------------------- /images/arrow_right_peppermint.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ddomingues/X-SlickGrid/d4d80978d31a5a4200221960e30b903cdbde7add/images/arrow_right_peppermint.png -------------------------------------------------------------------------------- /images/arrow_right_spearmint.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ddomingues/X-SlickGrid/d4d80978d31a5a4200221960e30b903cdbde7add/images/arrow_right_spearmint.png -------------------------------------------------------------------------------- /images/arrow_undo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ddomingues/X-SlickGrid/d4d80978d31a5a4200221960e30b903cdbde7add/images/arrow_undo.png -------------------------------------------------------------------------------- /images/bullet_blue.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ddomingues/X-SlickGrid/d4d80978d31a5a4200221960e30b903cdbde7add/images/bullet_blue.png -------------------------------------------------------------------------------- /images/bullet_star.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ddomingues/X-SlickGrid/d4d80978d31a5a4200221960e30b903cdbde7add/images/bullet_star.png -------------------------------------------------------------------------------- /images/bullet_toggle_minus.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ddomingues/X-SlickGrid/d4d80978d31a5a4200221960e30b903cdbde7add/images/bullet_toggle_minus.png -------------------------------------------------------------------------------- /images/bullet_toggle_plus.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ddomingues/X-SlickGrid/d4d80978d31a5a4200221960e30b903cdbde7add/images/bullet_toggle_plus.png -------------------------------------------------------------------------------- /images/calendar.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ddomingues/X-SlickGrid/d4d80978d31a5a4200221960e30b903cdbde7add/images/calendar.gif -------------------------------------------------------------------------------- /images/collapse.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ddomingues/X-SlickGrid/d4d80978d31a5a4200221960e30b903cdbde7add/images/collapse.gif -------------------------------------------------------------------------------- /images/comment_yellow.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ddomingues/X-SlickGrid/d4d80978d31a5a4200221960e30b903cdbde7add/images/comment_yellow.gif -------------------------------------------------------------------------------- /images/down.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ddomingues/X-SlickGrid/d4d80978d31a5a4200221960e30b903cdbde7add/images/down.gif -------------------------------------------------------------------------------- /images/drag-handle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ddomingues/X-SlickGrid/d4d80978d31a5a4200221960e30b903cdbde7add/images/drag-handle.png -------------------------------------------------------------------------------- /images/editor-helper-bg.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ddomingues/X-SlickGrid/d4d80978d31a5a4200221960e30b903cdbde7add/images/editor-helper-bg.gif -------------------------------------------------------------------------------- /images/expand.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ddomingues/X-SlickGrid/d4d80978d31a5a4200221960e30b903cdbde7add/images/expand.gif -------------------------------------------------------------------------------- /images/header-bg.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ddomingues/X-SlickGrid/d4d80978d31a5a4200221960e30b903cdbde7add/images/header-bg.gif -------------------------------------------------------------------------------- /images/header-columns-bg.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ddomingues/X-SlickGrid/d4d80978d31a5a4200221960e30b903cdbde7add/images/header-columns-bg.gif -------------------------------------------------------------------------------- /images/header-columns-over-bg.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ddomingues/X-SlickGrid/d4d80978d31a5a4200221960e30b903cdbde7add/images/header-columns-over-bg.gif -------------------------------------------------------------------------------- /images/help.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ddomingues/X-SlickGrid/d4d80978d31a5a4200221960e30b903cdbde7add/images/help.png -------------------------------------------------------------------------------- /images/info.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ddomingues/X-SlickGrid/d4d80978d31a5a4200221960e30b903cdbde7add/images/info.gif -------------------------------------------------------------------------------- /images/listview.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ddomingues/X-SlickGrid/d4d80978d31a5a4200221960e30b903cdbde7add/images/listview.gif -------------------------------------------------------------------------------- /images/pencil.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ddomingues/X-SlickGrid/d4d80978d31a5a4200221960e30b903cdbde7add/images/pencil.gif -------------------------------------------------------------------------------- /images/row-over-bg.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ddomingues/X-SlickGrid/d4d80978d31a5a4200221960e30b903cdbde7add/images/row-over-bg.gif -------------------------------------------------------------------------------- /images/sort-asc.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ddomingues/X-SlickGrid/d4d80978d31a5a4200221960e30b903cdbde7add/images/sort-asc.gif -------------------------------------------------------------------------------- /images/sort-asc.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ddomingues/X-SlickGrid/d4d80978d31a5a4200221960e30b903cdbde7add/images/sort-asc.png -------------------------------------------------------------------------------- /images/sort-desc.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ddomingues/X-SlickGrid/d4d80978d31a5a4200221960e30b903cdbde7add/images/sort-desc.gif -------------------------------------------------------------------------------- /images/sort-desc.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ddomingues/X-SlickGrid/d4d80978d31a5a4200221960e30b903cdbde7add/images/sort-desc.png -------------------------------------------------------------------------------- /images/stripes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ddomingues/X-SlickGrid/d4d80978d31a5a4200221960e30b903cdbde7add/images/stripes.png -------------------------------------------------------------------------------- /images/tag_red.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ddomingues/X-SlickGrid/d4d80978d31a5a4200221960e30b903cdbde7add/images/tag_red.png -------------------------------------------------------------------------------- /images/tick.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ddomingues/X-SlickGrid/d4d80978d31a5a4200221960e30b903cdbde7add/images/tick.png -------------------------------------------------------------------------------- /images/user_identity.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ddomingues/X-SlickGrid/d4d80978d31a5a4200221960e30b903cdbde7add/images/user_identity.gif -------------------------------------------------------------------------------- /images/user_identity_plus.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ddomingues/X-SlickGrid/d4d80978d31a5a4200221960e30b903cdbde7add/images/user_identity_plus.gif -------------------------------------------------------------------------------- /lib/firebugx.js: -------------------------------------------------------------------------------- 1 | if (typeof console === "undefined" || typeof console.log === "undefined") { 2 | var names = ["log", "debug", "info", "warn", "error", "assert", "dir", "dirxml", 3 | "group", "groupEnd", "time", "timeEnd", "count", "trace", "profile", "profileEnd"]; 4 | 5 | window.console = {}; 6 | for (var i = 0; i < names.length; ++i) { 7 | window.console[names[i]] = function () { 8 | } 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /lib/jquery.jsonp-2.4.min.js: -------------------------------------------------------------------------------- 1 | // jquery.jsonp 2.4.0 (c)2012 Julian Aubourg | MIT License 2 | // https://github.com/jaubourg/jquery-jsonp 3 | (function (e) { 4 | function t() { 5 | } 6 | 7 | function n(e) { 8 | C = [e] 9 | } 10 | 11 | function r(e, t, n) { 12 | return e && e.apply && e.apply(t.context || t, n) 13 | } 14 | 15 | function i(e) { 16 | return/\?/.test(e) ? "&" : "?" 17 | } 18 | 19 | function O(c) { 20 | function Y(e) { 21 | z++ || (W(), j && (T[I] = {s: [e]}), D && (e = D.apply(c, [e])), r(O, c, [e, b, c]), r(_, c, [c, b])) 22 | } 23 | 24 | function Z(e) { 25 | z++ || (W(), j && e != w && (T[I] = e), r(M, c, [c, e]), r(_, c, [c, e])) 26 | } 27 | 28 | c = e.extend({}, k, c); 29 | var O = c.success, M = c.error, _ = c.complete, D = c.dataFilter, P = c.callbackParameter, H = c.callback, B = c.cache, j = c.pageCache, F = c.charset, I = c.url, q = c.data, R = c.timeout, U, z = 0, W = t, X, V, J, K, Q, G; 30 | return S && S(function (e) { 31 | e.done(O).fail(M), O = e.resolve, M = e.reject 32 | }).promise(c), c.abort = function () { 33 | !(z++) && W() 34 | }, r(c.beforeSend, c, [c]) === !1 || z ? c : (I = I || u, q = q ? typeof q == "string" ? q : e.param(q, c.traditional) : u, I += q ? i(I) + q : u, P && (I += i(I) + encodeURIComponent(P) + "=?"), !B && !j && (I += i(I) + "_" + (new Date).getTime() + "="), I = I.replace(/=\?(&|$)/, "=" + H + "$1"), j && (U = T[I]) ? U.s ? Y(U.s[0]) : Z(U) : (E[H] = n, K = e(y)[0], K.id = l + N++, F && (K[o] = F), L && L.version() < 11.6 ? (Q = e(y)[0]).text = "document.getElementById('" + K.id + "')." + p + "()" : K[s] = s, A && (K.htmlFor = K.id, K.event = h), K[d] = K[p] = K[v] = function (e) { 35 | if (!K[m] || !/i/.test(K[m])) { 36 | try { 37 | K[h] && K[h]() 38 | } catch (t) { 39 | } 40 | e = C, C = 0, e ? Y(e[0]) : Z(a) 41 | } 42 | }, K.src = I, W = function (e) { 43 | G && clearTimeout(G), K[v] = K[d] = K[p] = null, x[g](K), Q && x[g](Q) 44 | }, x[f](K, J = x.firstChild), Q && x[f](Q, J), G = R > 0 && setTimeout(function () { 45 | Z(w) 46 | }, R)), c) 47 | } 48 | 49 | var s = "async", o = "charset", u = "", a = "error", f = "insertBefore", l = "_jqjsp", c = "on", h = c + "click", p = c + a, d = c + "load", v = c + "readystatechange", m = "readyState", g = "removeChild", y = " 17 | 18 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /tests/grid/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | SlickGrid - Grid tests 5 | 6 | 7 | 8 | 9 | 10 |

SlickGrid - Grid Test Suite

11 | 12 |

13 | 14 |
15 |

16 |
    17 | 18 |


    19 | 20 |
    21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /tests/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | SlickGrid tests 5 | 6 | 24 | 25 | 26 | 27 |

    SlickGrid tests

    28 | 29 |

    30 | 31 |

    Slick.Data

    32 | 35 | 36 |

    Slick

    37 | 40 | 41 |

    Plugins

    42 | 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /tests/init benchmark.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | SlickGrid Initialization Benchmark 6 | 7 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 |
    24 | 25 |
    26 | 27 | 61 | 62 | 63 | -------------------------------------------------------------------------------- /tests/model benchmarks.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | SlickGrid Model Benchmark 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 109 | 110 | 111 | -------------------------------------------------------------------------------- /tests/plugins/autotooltips.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | SlickGrid - AutoTooltips plugin tests 5 | 6 | 7 | 8 | 9 | 10 |

    SlickGrid - AutoTooltips Test Suite

    11 | 12 |

    13 | 14 |
    15 |

    16 |
      17 | 18 |


      19 | 20 |
      21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /tests/plugins/autotooltips.js: -------------------------------------------------------------------------------- 1 | (function ($) { 2 | 3 | var grid, // The SlickGrid instance 4 | cols = [ // The column definitions 5 | { name: "Short", field: "short", width: 100 }, 6 | { name: "Medium", field: "medium", width: 100 }, 7 | { name: "Long", field: "long", width: 100 }, 8 | { name: "Mixed", field: "mixed", width: 100 }, 9 | { name: "Long header creates tooltip", field: "header", width: 50 }, 10 | { name: "Long header with predefined tooltip", field: "tooltipHeader", width: 50, tooltip: "Already have a tooltip!" }, 11 | { name: "ToolTip With Context", field: "tooltipWithContext", width: 50, toolTip: "Row number: {{tooltipWithContext}}" }, 12 | 13 | ], 14 | data = [], // The grid data 15 | LONG_VALUE = "looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong", 16 | MEDIUM_VALUE = "mediummmmmmm" 17 | SHORT_VALUE = "short", 18 | TOOLTIP = "tooltip", 19 | TRUNCATED_VALUE = LONG_VALUE.substr(0, 17) + "...", 20 | $container = $("#container"); 21 | 22 | // Create data 23 | for (var i = 0; i < 10; i++) { 24 | data.push({ 25 | "id": "row" + i, 26 | "short": SHORT_VALUE, 27 | "medium": MEDIUM_VALUE, 28 | "long": LONG_VALUE, 29 | "mixed": ( i % 2 == 0 ? SHORT_VALUE : LONG_VALUE ), 30 | "header": i, 31 | "tooltipHeader": i, 32 | "tooltipWithContext": i 33 | }); 34 | } 35 | 36 | function setupGrid(pluginOptions) { 37 | $('
      ').appendTo($container); 38 | grid = new Slick.Grid("#grid", data, cols); 39 | grid.registerPlugin(new Slick.AutoTooltips(pluginOptions)); 40 | grid.render(); 41 | } 42 | 43 | function teardownGrid() { 44 | $container.empty(); 45 | } 46 | 47 | function getCell(columnIndex) { 48 | return $("#grid .slick-cell.l" + columnIndex).eq(0); 49 | } 50 | 51 | function getHeaderCell(columnIndex) { 52 | return $("#grid .slick-header-column").eq(columnIndex); 53 | } 54 | 55 | module("plugins - autotooltips - defaults", { 56 | setup: function () { 57 | setupGrid({}); 58 | }, 59 | teardown: teardownGrid 60 | }); 61 | 62 | test("title is empty when cell text has enough room", function () { 63 | var $cell = getCell(0); // Grab a cell 64 | $cell.trigger("mouseenter"); // Trigger hover on a cell in grid 65 | 66 | strictEqual($cell.attr("title"), "", "title is not present"); 67 | }); 68 | 69 | test("title is present when cell text is cut off", function () { 70 | var $cell = getCell(2); // Grab a cell 71 | $cell.trigger("mouseenter"); // Trigger hover on a cell in grid 72 | 73 | strictEqual($cell.attr("title"), LONG_VALUE, "title equals cell text"); 74 | }); 75 | 76 | module("plugins - autotooltips - tooltip with context", { 77 | setup: function () { 78 | setupGrid({useToolTipForCells: true}); 79 | }, 80 | teardown: teardownGrid 81 | }); 82 | 83 | test("title template renders using context of row", function () { 84 | var $cell = getCell(6); // Grab a cell 85 | $cell.trigger("mouseenter"); // Trigger hover on a cell in grid 86 | 87 | strictEqual($cell.attr("title"), "Row number: 0", "title contains the index of row"); 88 | }); 89 | 90 | module("plugins - autotooltips - header", { 91 | setup: function () { 92 | setupGrid({ enableForHeaderCells: true }); 93 | }, 94 | teardown: teardownGrid 95 | }); 96 | 97 | test("title is empty when header column has enough width", function () { 98 | var $headerCell = getHeaderCell(0); // Grab the requested header cell 99 | $headerCell.trigger("mouseenter"); // Trigger hover on a header cell 100 | 101 | strictEqual($headerCell.attr("title"), "", "title is not present"); 102 | }); 103 | 104 | test("title is present when header column is cut off", function () { 105 | var $headerCell = getHeaderCell(4); // Grab the requested header cell 106 | $headerCell.trigger("mouseenter"); // Trigger hover on a header cell 107 | 108 | strictEqual($headerCell.attr("title"), "Long header creates tooltip", "title equals column name"); 109 | }); 110 | 111 | test("title is not overridden when header column has pre-defined tooltip", function () { 112 | var $headerCell = getHeaderCell(5); // Grab the requested header cell 113 | $headerCell.trigger("mouseenter"); // Trigger hover on a header cell 114 | 115 | strictEqual($headerCell.attr("title"), "Long header with predefined tooltip", "title is not overridden"); 116 | }); 117 | 118 | // ******************************** // 119 | // Tests for maximum tooltip length // 120 | // ******************************** // 121 | 122 | module("plugins - autotooltips - max tooltip", { 123 | setup: function () { 124 | setupGrid({ maxToolTipLength: 20 }); 125 | }, 126 | teardown: teardownGrid 127 | }); 128 | 129 | test("title is empty when cell text has enough room", function () { 130 | var $cell = getCell(0); // Grab a cell 131 | $cell.trigger("mouseenter"); // Trigger hover on a cell in grid 132 | 133 | strictEqual($cell.attr("title"), "", "title is not present"); 134 | }); 135 | 136 | test("title is present and not truncated when cell text is cut off but not too long", function () { 137 | var $cell = getCell(1); // Grab a cell 138 | $cell.trigger("mouseenter"); // Trigger hover on a cell in grid 139 | 140 | strictEqual($cell.attr("title"), MEDIUM_VALUE, "title equals truncated text"); 141 | }); 142 | 143 | test("title is present and truncated when cell text is cut off and too long", function () { 144 | var $cell = getCell(2); // Grab a cell 145 | $cell.trigger("mouseenter"); // Trigger hover on a cell in grid 146 | 147 | strictEqual($cell.attr("title"), TRUNCATED_VALUE, "title equals truncated text"); 148 | }); 149 | 150 | })(jQuery); 151 | -------------------------------------------------------------------------------- /tests/scrolling benchmark raf.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | SlickGrid Scrolling Benchmark 6 | 7 | 9 | 10 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 |
      37 | 38 |
      39 | 40 | 155 | 156 | 157 | -------------------------------------------------------------------------------- /tests/scrolling benchmarks.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | SlickGrid Scrolling Benchmark 6 | 7 | 9 | 10 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 |
      37 | 38 |
      39 | 40 | 134 | 135 | 136 | --------------------------------------------------------------------------------