accidental commit

SlickGrid/.gitignore

-.gitk*
-.idea/*
-.DS_Store

SlickGrid/MIT-LICENSE.txt

-Copyright (c) 2010 Michael Leibman, http://github.com/mleibman/slickgrid
-
-Permission is hereby granted, free of charge, to any person obtaining
-a copy of this software and associated documentation files (the
-"Software"), to deal in the Software without restriction, including
-without limitation the rights to use, copy, modify, merge, publish,
-distribute, sublicense, and/or sell copies of the Software, and to
-permit persons to whom the Software is furnished to do so, subject to
-the following conditions:
-
-The above copyright notice and this permission notice shall be
-included in all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
-EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
-MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
-NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
-LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
-OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
-WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
\ No newline at end of file

SlickGrid/README.md

-## This is the 6pac slickgrid repo
-
-I am maintaining this branch as a separate 'alternative master'. Check [my wiki](https://github.com/6pac/SlickGrid/wiki) for details.
-
-Once we take on SlickGrid we all add [my patch for my specific app requirement]. This 'application noise' makes it much harder to share updates to SlickGrid with other users, who may want some of the changes, but find others irrelevant.  
-
-This repo is deliberately **non-customised**. We have *only* kept jQuery up to date, made bug fixes where necessary and added small features carefully considered to enhance the overall usefulness of the grid.  
-Example pages showcase any new features.
-
-The following, in short, are the changes made since forking from the main MLeibman branch, a significant number in response to issues or pull requests.
-
-**Maintenance:**
-
-* update to jquery-1.11.2 and jquery-ui-1.11.3, with minor patches to accommodate the change
-* Fix bug in dataview causing model benchmark test to throw an error
-* Remove redundant slick pager code
-* Fix unnecessary horizontal scroll for autosized columns when viewport has fractional pixel width
-* Make default group comparer function more robust
-* fix grouping bug (issue #841 & #896 mleibman#898)
-* update DataView compiled-expression regex to deal with some forms of minification
-* Fix Issue #963 ajax example not working
-* additional version of ajax loading page, using Yahoo news and YQL as a source. the format of the grid rows is more in keeping with the newsfeed style of the original
-* Fix tooltip error with draggable columns 
-* Prevent useless onSelectedRangesChanged events in selectionmodels' setSelectedRanges
-* Fix jQueryUI css interfering with SlickGrid css issues
-* Fix column resizing issues with Bootstrap 3/box-sizing:border-box
-* Patch absBox for null element bug (MLeibman #1066)
-* fix bugs identified by JsHint
-* remove deprecated jquery .browser property
-* fix error in autotooltips test
-* add internal keycode enums
-* fix bug in compound editor example 'isValueChanged' method
-
-**New features:**
-
-* Add css manipulation so that grid initialises successfully if the parent element is hidden
-* Add jQueryUI accordion and Bootstrap 3 examples
-* Add multi grid on page example (example-multi-grid-basic)
-* Add async post render async cleanup
-* Allow custom editors to suppress automatic cell clear on edit
-* Add Floating Point editor
-* Add grid as member of args parameter for all events, and to column formatter. Add dataView as member of args parameter for all dataView events
-* add custom validator option to integer, float and date editors
-* Add example of dynamic tab and grid creation for basic grid 
-* Add example of dynamic tab and grid creation for grid with all the features of example-4-model
-
-# Original mleibman README follows:
-
-
-
-
-
-Find documentation and examples in [the wiki](https://github.com/mleibman/SlickGrid/wiki).
-
-# Welcome to SlickGrid
-
-## SlickGrid is an advanced JavaScript grid/spreadsheet component
-
-Some highlights:
-
-* Adaptive virtual scrolling (handle hundreds of thousands of rows with extreme responsiveness)
-* Extremely fast rendering speed
-* Supports jQuery UI Themes
-* Background post-rendering for richer cells
-* Configurable & customizable
-* Full keyboard navigation
-* Column resize/reorder/show/hide
-* Column autosizing & force-fit
-* Pluggable cell formatters & editors
-* Support for editing and creating new rows.
-* Grouping, filtering, custom aggregators, and more!
-* Advanced detached & multi-field editors with undo/redo support.
-* “GlobalEditorLock” to manage concurrent edits in cases where multiple Views on a page can edit the same data.
-* Support for [millions of rows](http://stackoverflow.com/a/2569488/1269037)

SlickGrid/controls/slick.columnpicker.css

-.slick-columnpicker {
-  border: 1px solid #718BB7;
-  background: #f0f0f0;
-  padding: 6px;
-  -moz-box-shadow: 2px 2px 2px silver;
-  -webkit-box-shadow: 2px 2px 2px silver;
-  box-shadow: 2px 2px 2px silver;
-  min-width: 100px;
-  cursor: default;
-}
-
-.slick-columnpicker li {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  background: none;
-}
-
-.slick-columnpicker input {
-  margin: 4px;
-}
-
-.slick-columnpicker li a {
-  display: block;
-  padding: 4px;
-  font-weight: bold;
-}
-
-.slick-columnpicker li a:hover {
-  background: white;
-}

SlickGrid/controls/slick.columnpicker.js

-(function ($) {
-  function SlickColumnPicker(columns, grid, options) {
-    var $menu;
-    var columnCheckboxes;
-
-    var defaults = {
-      fadeSpeed:250
-    };
-
-    function init() {
-      grid.onHeaderContextMenu.subscribe(handleHeaderContextMenu);
-      grid.onColumnsReordered.subscribe(updateColumnOrder);
-      options = $.extend({}, defaults, options);
-
-      $menu = $("<span class='slick-columnpicker' style='display:none;position:absolute;z-index:20;' />").appendTo(document.body);
-
-      $menu.bind("mouseleave", function (e) {
-        $(this).fadeOut(options.fadeSpeed)
-      });
-      $menu.bind("click", updateColumn);
-
-    }
-
-    function destroy() {
-      grid.onHeaderContextMenu.unsubscribe(handleHeaderContextMenu);
-      grid.onColumnsReordered.unsubscribe(updateColumnOrder);
-      $menu.remove();
-    }
-
-    function handleHeaderContextMenu(e, args) {
-      e.preventDefault();
-      $menu.empty();
-      updateColumnOrder();
-      columnCheckboxes = [];
-
-      var $li, $input;
-      for (var i = 0; i < columns.length; i++) {
-        $li = $("<li />").appendTo($menu);
-        $input = $("<input type='checkbox' />").data("column-id", columns[i].id);
-        columnCheckboxes.push($input);
-
-        if (grid.getColumnIndex(columns[i].id) != null) {
-          $input.attr("checked", "checked");
-        }
-
-        $("<label />")
-            .text(columns[i].name)
-            .prepend($input)
-            .appendTo($li);
-      }
-
-      $("<hr/>").appendTo($menu);
-      $li = $("<li />").appendTo($menu);
-      $input = $("<input type='checkbox' />").data("option", "autoresize");
-      $("<label />")
-          .text("Force fit columns")
-          .prepend($input)
-          .appendTo($li);
-      if (grid.getOptions().forceFitColumns) {
-        $input.attr("checked", "checked");
-      }
-
-      $li = $("<li />").appendTo($menu);
-      $input = $("<input type='checkbox' />").data("option", "syncresize");
-      $("<label />")
-          .text("Synchronous resize")
-          .prepend($input)
-          .appendTo($li);
-      if (grid.getOptions().syncColumnCellResize) {
-        $input.attr("checked", "checked");
-      }
-
-      $menu
-          .css("top", e.pageY - 10)
-          .css("left", e.pageX - 10)
-          .fadeIn(options.fadeSpeed);
-    }
-
-    function updateColumnOrder() {
-      // Because columns can be reordered, we have to update the `columns`
-      // to reflect the new order, however we can't just take `grid.getColumns()`,
-      // as it does not include columns currently hidden by the picker.
-      // We create a new `columns` structure by leaving currently-hidden
-      // columns in their original ordinal position and interleaving the results
-      // of the current column sort.
-      var current = grid.getColumns().slice(0);
-      var ordered = new Array(columns.length);
-      for (var i = 0; i < ordered.length; i++) {
-        if ( grid.getColumnIndex(columns[i].id) === undefined ) {
-          // If the column doesn't return a value from getColumnIndex,
-          // it is hidden. Leave it in this position.
-          ordered[i] = columns[i];
-        } else {
-          // Otherwise, grab the next visible column.
-          ordered[i] = current.shift();
-        }
-      }
-      columns = ordered;
-    }
-
-    function updateColumn(e) {
-      if ($(e.target).data("option") == "autoresize") {
-        if (e.target.checked) {
-          grid.setOptions({forceFitColumns:true});
-          grid.autosizeColumns();
-        } else {
-          grid.setOptions({forceFitColumns:false});
-        }
-        return;
-      }
-
-      if ($(e.target).data("option") == "syncresize") {
-        if (e.target.checked) {
-          grid.setOptions({syncColumnCellResize:true});
-        } else {
-          grid.setOptions({syncColumnCellResize:false});
-        }
-        return;
-      }
-
-      if ($(e.target).is(":checkbox")) {
-        var visibleColumns = [];
-        $.each(columnCheckboxes, function (i, e) {
-          if ($(this).is(":checked")) {
-            visibleColumns.push(columns[i]);
-          }
-        });
-
-        if (!visibleColumns.length) {
-          $(e.target).attr("checked", "checked");
-          return;
-        }
-
-        grid.setColumns(visibleColumns);
-      }
-    }
-
-    function getAllColumns() {
-      return columns;
-    }
-
-    init();
-
-    return {
-      "getAllColumns": getAllColumns,
-      "destroy": destroy
-    };
-  }
-
-  // Slick.Controls.ColumnPicker
-  $.extend(true, window, { Slick:{ Controls:{ ColumnPicker:SlickColumnPicker }}});
-})(jQuery);

SlickGrid/controls/slick.pager.css

-.slick-pager {
-  width: 100%;
-  height: 26px;
-  border: 1px solid gray;
-  border-top: 0;
-  background: url('../images/header-columns-bg.gif') repeat-x center bottom;
-  vertical-align: middle;
-}
-
-.slick-pager .slick-pager-status {
-  display: inline-block;
-  padding: 6px;
-}
-
-.slick-pager .ui-icon-container {
-  display: inline-block;
-  margin: 2px;
-  border-color: gray;
-}
-
-.slick-pager .slick-pager-nav {
-  display: inline-block;
-  float: left;
-  padding: 2px;
-}
-
-.slick-pager .slick-pager-settings {
-  display: block;
-  float: right;
-  padding: 2px;
-}
-
-.slick-pager .slick-pager-settings * {
-  vertical-align: middle;
-}
-
-.slick-pager .slick-pager-settings a {
-  padding: 2px;
-  text-decoration: underline;
-  cursor: pointer;
-}

SlickGrid/controls/slick.pager.js

-(function ($) {
-  function SlickGridPager(dataView, grid, $container) {
-    var $status;
-
-    function init() {
-      dataView.onPagingInfoChanged.subscribe(function (e, pagingInfo) {
-        updatePager(pagingInfo);
-      });
-
-      constructPagerUI();
-      updatePager(dataView.getPagingInfo());
-    }
-
-    function getNavState() {
-      var cannotLeaveEditMode = !Slick.GlobalEditorLock.commitCurrentEdit();
-      var pagingInfo = dataView.getPagingInfo();
-      var lastPage = pagingInfo.totalPages - 1;
-
-      return {
-        canGotoFirst: !cannotLeaveEditMode && pagingInfo.pageSize != 0 && pagingInfo.pageNum > 0,
-        canGotoLast: !cannotLeaveEditMode && pagingInfo.pageSize != 0 && pagingInfo.pageNum != lastPage,
-        canGotoPrev: !cannotLeaveEditMode && pagingInfo.pageSize != 0 && pagingInfo.pageNum > 0,
-        canGotoNext: !cannotLeaveEditMode && pagingInfo.pageSize != 0 && pagingInfo.pageNum < lastPage,
-        pagingInfo: pagingInfo
-      }
-    }
-
-    function setPageSize(n) {
-      dataView.setRefreshHints({
-        isFilterUnchanged: true
-      });
-      dataView.setPagingOptions({pageSize: n});
-    }
-
-    function gotoFirst() {
-      if (getNavState().canGotoFirst) {
-        dataView.setPagingOptions({pageNum: 0});
-      }
-    }
-
-    function gotoLast() {
-      var state = getNavState();
-      if (state.canGotoLast) {
-        dataView.setPagingOptions({pageNum: state.pagingInfo.totalPages - 1});
-      }
-    }
-
-    function gotoPrev() {
-      var state = getNavState();
-      if (state.canGotoPrev) {
-        dataView.setPagingOptions({pageNum: state.pagingInfo.pageNum - 1});
-      }
-    }
-
-    function gotoNext() {
-      var state = getNavState();
-      if (state.canGotoNext) {
-        dataView.setPagingOptions({pageNum: state.pagingInfo.pageNum + 1});
-      }
-    }
-
-    function constructPagerUI() {
-      $container.empty();
-
-      var $nav = $("<span class='slick-pager-nav' />").appendTo($container);
-      var $settings = $("<span class='slick-pager-settings' />").appendTo($container);
-      $status = $("<span class='slick-pager-status' />").appendTo($container);
-
-      $settings
-          .append("<span class='slick-pager-settings-expanded' style='display:none'>Show: <a data=0>All</a><a data='-1'>Auto</a><a data=25>25</a><a data=50>50</a><a data=100>100</a></span>");
-
-      $settings.find("a[data]").click(function (e) {
-        var pagesize = $(e.target).attr("data");
-        if (pagesize != undefined) {
-          if (pagesize == -1) {
-            var vp = grid.getViewport();
-            setPageSize(vp.bottom - vp.top);
-          } else {
-            setPageSize(parseInt(pagesize));
-          }
-        }
-      });
-
-      var icon_prefix = "<span class='ui-state-default ui-corner-all ui-icon-container'><span class='ui-icon ";
-      var icon_suffix = "' /></span>";
-
-      $(icon_prefix + "ui-icon-lightbulb" + icon_suffix)
-          .click(function () {
-            $(".slick-pager-settings-expanded").toggle()
-          })
-          .appendTo($settings);
-
-      $(icon_prefix + "ui-icon-seek-first" + icon_suffix)
-          .click(gotoFirst)
-          .appendTo($nav);
-
-      $(icon_prefix + "ui-icon-seek-prev" + icon_suffix)
-          .click(gotoPrev)
-          .appendTo($nav);
-
-      $(icon_prefix + "ui-icon-seek-next" + icon_suffix)
-          .click(gotoNext)
-          .appendTo($nav);
-
-      $(icon_prefix + "ui-icon-seek-end" + icon_suffix)
-          .click(gotoLast)
-          .appendTo($nav);
-
-      $container.find(".ui-icon-container")
-          .hover(function () {
-            $(this).toggleClass("ui-state-hover");
-          });
-
-      $container.children().wrapAll("<div class='slick-pager' />");
-    }
-
-
-    function updatePager(pagingInfo) {
-      var state = getNavState();
-
-      $container.find(".slick-pager-nav span").removeClass("ui-state-disabled");
-      if (!state.canGotoFirst) {
-        $container.find(".ui-icon-seek-first").addClass("ui-state-disabled");
-      }
-      if (!state.canGotoLast) {
-        $container.find(".ui-icon-seek-end").addClass("ui-state-disabled");
-      }
-      if (!state.canGotoNext) {
-        $container.find(".ui-icon-seek-next").addClass("ui-state-disabled");
-      }
-      if (!state.canGotoPrev) {
-        $container.find(".ui-icon-seek-prev").addClass("ui-state-disabled");
-      }
-
-      if (pagingInfo.pageSize == 0) {
-        $status.text("Showing all " + pagingInfo.totalRows + " rows");
-      } else {
-        $status.text("Showing page " + (pagingInfo.pageNum + 1) + " of " + pagingInfo.totalPages);
-      }
-    }
-
-    init();
-  }
-
-  // Slick.Controls.Pager
-  $.extend(true, window, { Slick:{ Controls:{ Pager:SlickGridPager }}});
-})(jQuery);

SlickGrid/examples/example-autotooltips.html

-<!DOCTYPE HTML>
-<html>
-<head>
-  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
-  <title>SlickGrid plugin example: AutoTooltips</title>
-  <link rel="stylesheet" href="../slick.grid.css" type="text/css"/>
-  <link rel="stylesheet" href="../css/smoothness/jquery-ui-1.11.3.custom.css" type="text/css"/>
-  <link rel="stylesheet" href="examples.css" type="text/css"/>
-</head>
-<body>
-<table width="100%">
-  <tr>
-    <td valign="top" width="50%">
-      <div id="myGrid" style="width:600px;height:300px;"></div>
-    </td>
-    <td valign="top">
-      <h2>Demonstrates:</h2>
-      <ul>
-        <li>AutoTooltips plugin</li>
-      </ul>
-      <h2>Instructions:</h2>
-      <p>Resize the columns until see ellipsis in column or header.  Hover over cell to see tooltip.</p>
-      <h2>Usage:</h2>
-      <pre style="background-color: white; font-size: 110%; border-radius: 5px; padding: 20px; ">plugin = new Slick.AutoTooltips(pluginOptions);
-grid.registerPlugin(plugin);
-grid.render();</pre>
-
-        <h2>View Source:</h2>
-        <ul>
-            <li><A href="https://github.com/6pac/SlickGrid/blob/master/examples/example-autotooltips.html" target="_sourcewindow"> View the source for this example on Github</a></li>
-        </ul>
-    </td>
-  </tr>
-</table>
-
-<script src="../lib/jquery-1.11.2.min.js"></script>
-<script src="../lib/jquery.event.drag-2.2.js"></script>
-<script src="../lib/jquery-ui-1.11.3.min.js"></script>
-
-<script src="../slick.core.js"></script>
-<script src="../slick.grid.js"></script>
-<script src="../plugins/slick.autotooltips.js"></script>
-
-<script>
-  var grid;
-  var columns = [
-    {id: "title", name: "Title", field: "title"},
-    {id: "duration", name: "Duration", field: "duration"},
-    {id: "%", name: "% Complete", field: "percentComplete"},
-    {id: "start", name: "Start", field: "start"},
-    {id: "finish", name: "Finish", field: "finish"},
-    {id: "effort-driven", name: "Effort Driven", field: "effortDriven"}
-  ];
-
-  var options = {
-    enableCellNavigation: true,
-    enableColumnReorder: true
-  };
-
-  $(function () {
-    var data = [];
-    for (var i = 0; i < 500; i++) {
-      data[i] = {
-        title: "Task " + i,
-        duration: "5 days",
-        percentComplete: Math.round(Math.random() * 100),
-        start: "01/01/2009",
-        finish: "01/05/2009",
-        effortDriven: (i % 5 == 0)
-      };
-    }
-
-    grid = new Slick.Grid("#myGrid", data, columns, options);
-    grid.registerPlugin( new Slick.AutoTooltips({ enableForHeaderCells: true }) );
-    grid.render();
-  })
-</script>
-</body>
-</html>
\ No newline at end of file

SlickGrid/examples/example-bootstrap-3-header.html

-<!DOCTYPE HTML>
-<html>
-<head>
-  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
-  <title>SlickGrid example: Basic Grid with Bootstrap 3 css</title>
-  <link rel="stylesheet" href="../css/bootstrap.css" type="text/css"/>
-  <link rel="stylesheet" href="../slick.grid.css" type="text/css"/>
-  <link rel="stylesheet" href="../css/smoothness/jquery-ui-1.11.3.custom.css" type="text/css"/>
-  <link rel="stylesheet" href="examples.css" type="text/css"/>
-  <style>
-  #myGrid01, #myGrid02 {
-	background: white;
-	outline: 0;
-	border: 1px solid gray;
-  }
-  </style>
-</head>
-<body>
-<table width="100%">
-  <tr>
-    <td valign="top" width="50%">
-      <div id="myGrid01" style="width:600px;height:300px;"></div>
-	</td>
-    <td valign="top">
-      <h2>Demonstrates:</h2>
-      <ul>
-        <li>Slickgrid with Bootstrap 3 css (bootstrap.css). This imposes 'box-sizing: border-box;' on all elements in the page.</li>
-      </ul>
-        <h2>View Source:</h2>
-        <ul>
-            <li><A href="https://github.com/6pac/SlickGrid/blob/master/examples/example1-simple.html" target="_sourcewindow"> View the source for this example on Github</a></li>
-        </ul>
-    </td>
-  </tr>
-</table>
-
-<script src="../lib/jquery-1.11.2.min.js"></script>
-<script src="../lib/jquery-ui-1.11.3.min.js"></script>
-<script src="../lib/jquery.event.drag-2.2.js"></script>
-
-<script src="../slick.core.js"></script>
-<script src="../slick.grid.js"></script>
-
-<script>
-  var grid;
-  var columns = [
-    {id: "title", name: "Title", field: "title"},
-    {id: "duration", name: "Duration", field: "duration"},
-    {id: "%", name: "% Complete", field: "percentComplete"},
-    {id: "start", name: "Start", field: "start"},
-    {id: "finish", name: "Finish", field: "finish"},
-    {id: "effort-driven", name: "Effort Driven", field: "effortDriven"}
-  ];
-
-  var options = {
-    enableCellNavigation: true,
-    enableColumnReorder: true
-  };
-
-  function CreateData() {
-    var data = [];
-    for (var i = 0; i < 500; i++) {
-      data[i] = {
-        title: "Task " + i,
-        duration: "5 days",
-        percentComplete: Math.round(Math.random() * 100),
-        start: "01/01/2009",
-        finish: "01/05/2009",
-        effortDriven: (i % 5 == 0)
-      };
-    }
-	return data;
-  }
-  
-  $(function () {
-    var data01 = CreateData();
-    grid = new Slick.Grid("#myGrid01", data01, columns, options);
-  })
-</script>
-</body>
-</html>

SlickGrid/examples/example-checkbox-row-select.html

-<!DOCTYPE HTML>
-<html>
-<head>
-  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
-  <link rel="stylesheet" href="../slick.grid.css" type="text/css"/>
-  <link rel="stylesheet" href="../css/smoothness/jquery-ui-1.11.3.custom.css" type="text/css"/>
-  <link rel="stylesheet" href="examples.css" type="text/css"/>
-  <link rel="stylesheet" href="../controls/slick.columnpicker.css" type="text/css"/>
-  <style>
-    .slick-cell-checkboxsel {
-      background: #f0f0f0;
-      border-right-color: silver;
-      border-right-style: solid;
-    }
-  </style>
-</head>
-<body>
-<div style="position:relative">
-  <div style="width:600px;">
-    <div id="myGrid" style="width:100%;height:500px;"></div>
-  </div>
-
-  <div class="options-panel">
-    <h2>Demonstrates:</h2>
-    <ul>
-      <li>Checkbox row select column</li>
-    </ul>
-      <h2>View Source:</h2>
-      <ul>
-          <li><A href="https://github.com/6pac/SlickGrid/blob/master/examples/example-checkbox-row-select.html" target="_sourcewindow"> View the source for this example on Github</a></li>
-      </ul>
-
-  </div>
-</div>
-
-<script src="../lib/firebugx.js"></script>
-
-<script src="../lib/jquery-1.11.2.min.js"></script>
-<script src="../lib/jquery-ui-1.11.3.min.js"></script>
-<script src="../lib/jquery.event.drag-2.2.js"></script>
-
-<script src="../slick.core.js"></script>
-<script src="../plugins/slick.checkboxselectcolumn.js"></script>
-<script src="../plugins/slick.autotooltips.js"></script>
-<script src="../plugins/slick.cellrangedecorator.js"></script>
-<script src="../plugins/slick.cellrangeselector.js"></script>
-<script src="../plugins/slick.cellcopymanager.js"></script>
-<script src="../plugins/slick.cellselectionmodel.js"></script>
-<script src="../plugins/slick.rowselectionmodel.js"></script>
-<script src="../controls/slick.columnpicker.js"></script>
-<script src="../slick.formatters.js"></script>
-<script src="../slick.editors.js"></script>
-<script src="../slick.grid.js"></script>
-
-<script>
-  var grid;
-  var data = [];
-  var options = {
-    editable: true,
-    enableCellNavigation: true,
-    asyncEditorLoading: false,
-    autoEdit: false
-  };
-  var columns = [];
-
-  $(function () {
-    for (var i = 0; i < 100; i++) {
-      var d = (data[i] = {});
-      d[0] = "Row " + i;
-    }
-
-    var checkboxSelector = new Slick.CheckboxSelectColumn({
-      cssClass: "slick-cell-checkboxsel"
-    });
-
-    columns.push(checkboxSelector.getColumnDefinition());
-
-    for (var i = 0; i < 5; i++) {
-      columns.push({
-        id: i,
-        name: String.fromCharCode("A".charCodeAt(0) + i),
-        field: i,
-        width: 100,
-        editor: Slick.Editors.Text
-      });
-    }
-
-    grid = new Slick.Grid("#myGrid", data, columns, options);
-    grid.setSelectionModel(new Slick.RowSelectionModel({selectActiveRow: false}));
-    grid.registerPlugin(checkboxSelector);
-
-    var columnpicker = new Slick.Controls.ColumnPicker(columns, grid, options);
-  })
-</script>
-</body>
-</html>

SlickGrid/examples/example-colspan.html

-<!DOCTYPE HTML>
-<html>
-<head>
-  <link rel="stylesheet" href="../slick.grid.css" type="text/css"/>
-  <link rel="stylesheet" href="../css/smoothness/jquery-ui-1.11.3.custom.css" type="text/css"/>
-  <link rel="stylesheet" href="examples.css" type="text/css"/>
-</head>
-<body>
-<table width="100%">
-  <tr>
-    <td valign="top" width="50%">
-      <div id="myGrid" style="width:600px;height:500px;"></div>
-    </td>
-    <td valign="top">
-      <h2>Demonstrates:</h2>
-      <ul>
-        <li>column span</li>
-      </ul>
-        <h2>View Source:</h2>
-        <ul>
-            <li><A href="https://github.com/6pac/SlickGrid/blob/master/examples/example-colspan.html" target="_sourcewindow"> View the source for this example on Github</a></li>
-        </ul>
-    </td>
-  </tr>
-</table>
-
-<script src="../lib/jquery-1.11.2.min.js"></script>
-<script src="../lib/jquery.event.drag-2.2.js"></script>
-
-<script src="../slick.core.js"></script>
-<script src="../plugins/slick.cellrangedecorator.js"></script>
-<script src="../plugins/slick.cellrangeselector.js"></script>
-<script src="../plugins/slick.cellselectionmodel.js"></script>
-<script src="../slick.grid.js"></script>
-
-<script>
-  var grid;
-  var columns = [
-    {id: "title", name: "Title", field: "title"},
-    {id: "duration", name: "Duration", field: "duration"},
-    {id: "%", name: "% Complete", field: "percentComplete", selectable: false},
-    {id: "start", name: "Start", field: "start"},
-    {id: "finish", name: "Finish", field: "finish"},
-    {id: "effort-driven", name: "Effort Driven", field: "effortDriven"}
-  ];
-
-  var options = {
-    enableCellNavigation: true,
-    enableColumnReorder: false
-  };
-
-  $(function () {
-    var data = [];
-    for (var i = 0; i < 500; i++) {
-      data[i] = {
-        title: "Task " + i,
-        duration: "5 days",
-        percentComplete: Math.round(Math.random() * 100),
-        start: "01/01/2009",
-        finish: "01/05/2009",
-        effortDriven: (i % 5 == 0)
-      };
-    }
-
-    data.getItemMetadata = function (row) {
-      if (row % 2 === 1) {
-        return {
-          "columns": {
-            "duration": {
-              "colspan": 3
-            }
-          }
-        };
-      } else {
-        return {
-          "columns": {
-            0: {
-              "colspan": "*"
-            }
-          }
-        };
-      }
-    };
-
-    grid = new Slick.Grid("#myGrid", data, columns, options);
-
-    grid.setSelectionModel(new Slick.CellSelectionModel());
-  })
-</script>
-</body>
-</html>

SlickGrid/examples/example-composite-editor-item-details.html

-<!DOCTYPE HTML>
-<html>
-<head>
-  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
-  <title>SlickGrid example: CompositeEditor</title>
-  <link rel="stylesheet" href="../slick.grid.css" type="text/css"/>
-  <link rel="stylesheet" href="../css/smoothness/jquery-ui-1.11.3.custom.css" type="text/css"/>
-  <link rel="stylesheet" href="examples.css" type="text/css"/>
-  <style>
-    .cell-title {
-      font-weight: bold;
-    }
-
-    .cell-effort-driven {
-      text-align: center;
-    }
-
-    .item-details-form {
-      z-index: 10000;
-      display: inline-block;
-      border: 1px solid black;
-      margin: 8px;
-      padding: 10px;
-      background: #efefef;
-      -moz-box-shadow: 0px 0px 15px black;
-      -webkit-box-shadow: 0px 0px 15px black;
-      box-shadow: 0px 0px 15px black;
-
-      position: absolute;
-      top: 10px;
-      left: 150px;
-    }
-
-    .item-details-form-buttons {
-      float: right;
-    }
-
-    .item-details-label {
-      margin-left: 10px;
-      margin-top: 20px;
-      display: block;
-      font-weight: bold;
-    }
-
-    .item-details-editor-container {
-      width: 200px;
-      height: 20px;
-      border: 1px solid silver;
-      background: white;
-      display: block;
-      margin: 10px;
-      margin-top: 4px;
-      padding: 0;
-      padding-left: 4px;
-      padding-right: 4px;
-    }
-  </style>
-</head>
-<body>
-<div style="position:relative">
-  <div style="width:600px;">
-    <div id="myGrid" style="width:100%;height:500px;"></div>
-  </div>
-
-  <div class="options-panel">
-    <h2>Demonstrates:</h2>
-    <ul>
-      <li>using a CompositeEditor to implement detached item edit form</li>
-    </ul>
-
-    <h2>Options:</h2>
-    <button onclick="openDetails()">Open Item Edit for active row</button>
-
-      <h2>View Source:</h2>
-      <ul>
-          <li><A href="https://github.com/6pac/SlickGrid/blob/master/examples/example-composite-editor-item-details.html" target="_sourcewindow"> View the source for this example on Github</a></li>
-      </ul>
-  </div>
-</div>
-
-<script id="itemDetailsTemplate" type="text/x-jquery-tmpl">
-  <div class='item-details-form'>
-    {{each columns}}
-    <div class='item-details-label'>
-      ${name}
-    </div>
-    <div class='item-details-editor-container' data-editorid='${id}'></div>
-    {{/each}}
-
-    <hr/>
-    <div class='item-details-form-buttons'>
-      <button data-action='save'>Save</button>
-      <button data-action='cancel'>Cancel</button>
-    </div>
-  </div>
-</script>
-
-
-<script src="../lib/firebugx.js"></script>
-
-<script src="../lib/jquery-1.11.2.min.js"></script>
-<script src="../lib/jquery-ui-1.11.3.min.js"></script>
-<script src="../lib/jquery.event.drag-2.2.js"></script>
-<script src="../lib/jquery.tmpl.min.js"></script>
-
-<script src="../slick.core.js"></script>
-<script src="../plugins/slick.cellrangeselector.js"></script>
-<script src="../plugins/slick.cellselectionmodel.js"></script>
-<script src="../slick.formatters.js"></script>
-<script src="../slick.editors.js"></script>
-<script src="../slick.grid.js"></script>
-<script src="slick.compositeeditor.js"></script>
-
-<script>
-  function requiredFieldValidator(value) {
-    if (value == null || value == undefined || !value.length) {
-      return {valid: false, msg: "This is a required field"};
-    } else {
-      return {valid: true, msg: null};
-    }
-  }
-
-  var grid;
-  var data = [];
-  var columns = [
-    {id: "title", name: "Title", field: "title", width: 120, cssClass: "cell-title", editor: Slick.Editors.Text, validator: requiredFieldValidator},
-    {id: "desc", name: "Description", field: "description", width: 100, editor: Slick.Editors.Text},
-    {id: "duration", name: "Duration", field: "duration", editor: Slick.Editors.Text},
-    {id: "percent", name: "% Complete", field: "percentComplete", width: 80, resizable: false, formatter: Slick.Formatters.PercentCompleteBar, editor: Slick.Editors.PercentComplete},
-    {id: "start", name: "Start", field: "start", minWidth: 60, editor: Slick.Editors.Date},
-    {id: "finish", name: "Finish", field: "finish", minWidth: 60, editor: Slick.Editors.Date},
-    {id: "effort-driven", name: "Effort Driven", width: 80, minWidth: 20, maxWidth: 80, cssClass: "cell-effort-driven", field: "effortDriven", formatter: Slick.Formatters.Checkmark, editor: Slick.Editors.Checkbox}
-  ];
-  var options = {
-    editable: true,
-    enableAddRow: true,
-    enableCellNavigation: true,
-    asyncEditorLoading: false,
-    autoEdit: false
-  };
-
-
-  function openDetails() {
-    if (grid.getEditorLock().isActive() && !grid.getEditorLock().commitCurrentEdit()) {
-      return;
-    }
-
-    var $modal = $("<div class='item-details-form'></div>");
-
-    $modal = $("#itemDetailsTemplate")
-        .tmpl({
-          context: grid.getDataItem(grid.getActiveCell().row),
-          columns: columns
-        })
-        .appendTo("body");
-
-    $modal.keydown(function (e) {
-      if (e.which == $.ui.keyCode.ENTER) {
-        grid.getEditController().commitCurrentEdit();
-        e.stopPropagation();
-        e.preventDefault();
-      } else if (e.which == $.ui.keyCode.ESCAPE) {
-        grid.getEditController().cancelCurrentEdit();
-        e.stopPropagation();
-        e.preventDefault();
-      }
-    });
-
-    $modal.find("[data-action=save]").click(function () {
-      grid.getEditController().commitCurrentEdit();
-    });
-
-    $modal.find("[data-action=cancel]").click(function () {
-      grid.getEditController().cancelCurrentEdit();
-    });
-
-
-    var containers = $.map(columns, function (c) {
-      return $modal.find("[data-editorid=" + c.id + "]");
-    });
-
-    var compositeEditor = new Slick.CompositeEditor(
-        columns,
-        containers,
-        {
-          destroy: function () {
-            $modal.remove();
-          }
-        }
-    );
-
-    grid.editActiveCell(compositeEditor);
-  }
-
-  $(function () {
-    for (var i = 0; i < 500; i++) {
-      var d = (data[i] = {});
-
-      d["title"] = "Task " + i;
-      d["description"] = "This is a sample task description.\n  It can be multiline";
-      d["duration"] = "5 days";
-      d["percentComplete"] = Math.round(Math.random() * 100);
-      d["start"] = "01/01/2009";
-      d["finish"] = "01/05/2009";
-      d["effortDriven"] = (i % 5 == 0);
-    }
-
-    grid = new Slick.Grid("#myGrid", data, columns, options);
-
-    grid.onAddNewRow.subscribe(function (e, args) {
-      var item = args.item;
-      var column = args.column;
-      grid.invalidateRow(data.length);
-      data.push(item);
-      grid.updateRowCount();
-      grid.render();
-    });
-
-
-    grid.onValidationError.subscribe(function (e, args) {
-      // handle validation errors originating from the CompositeEditor
-      if (args.editor && (args.editor instanceof Slick.CompositeEditor)) {
-        var err;
-        var idx = args.validationResults.errors.length;
-        while (idx--) {
-          err = args.validationResults.errors[idx];
-          $(err.container).stop(true, true).effect("highlight", {color: "red"});
-        }
-      }
-    });
-
-    grid.setActiveCell(0, 0);
-  })
-</script>
-</body>
-</html>

SlickGrid/examples/example-custom-column-value-extractor.html

-<!DOCTYPE HTML>
-<html>
-<head>
-  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
-  <title>SlickGrid example: Custom column value extractor</title>
-  <link rel="stylesheet" href="../slick.grid.css" type="text/css"/>
-  <link rel="stylesheet" href="../css/smoothness/jquery-ui-1.11.3.custom.css" type="text/css"/>
-  <link rel="stylesheet" href="examples.css" type="text/css"/>
-</head>
-<body>
-<table width="100%">
-  <tr>
-    <td valign="top" width="50%">
-      <div id="myGrid" style="width:600px;height:500px;"></div>
-    </td>
-    <td valign="top">
-      <h2>Demonstrates:</h2>
-      <ul>
-        <li>using <u>dataItemColumnValueExtractor</u> option to specify a custom column value extractor</li>
-      </ul>
-        <h2>View Source:</h2>
-        <ul>
-            <li><A href="https://github.com/6pac/SlickGrid/blob/master/examples/example-custom-column-value-extractor.html" target="_sourcewindow"> View the source for this example on Github</a></li>
-        </ul>
-    </td>
-  </tr>
-</table>
-
-<script src="../lib/jquery-1.11.2.min.js"></script>
-<script src="../lib/jquery.event.drag-2.2.js"></script>
-
-<script src="../slick.core.js"></script>
-<script src="../slick.grid.js"></script>
-
-<script>
-  var grid;
-  var columns = [
-    {id: "title", name: "Name", field: "name"},
-    {id: "field1", name: "Field1", field: "values", fieldIdx: 0},
-    {id: "field2", name: "Field2", field: "values", fieldIdx: 1},
-    {id: "field3", name: "Field3", field: "values", fieldIdx: 2}
-  ];
-
-  var options = {
-    enableCellNavigation: true,
-    enableColumnReorder: false,
-    dataItemColumnValueExtractor: getItemColumnValue
-  };
-
-  // Get the item column value using a custom 'fieldIdx' column param
-  function getItemColumnValue(item, column) {
-    var values = item[column.field];
-    if (column.fieldIdx !== undefined) {
-      return values && values[column.fieldIdx];
-    } else {
-      return values;
-    }
-  }
-
-  $(function () {
-    var data = [];
-    for (var i = 0; i < 500; i++) {
-      data[i] = {
-        name: "Item " + i,
-        values: [
-          Math.round(Math.random() * 100),
-          Math.round(Math.random() * 100),
-          Math.round(Math.random() * 100)
-        ]
-      };
-    }
-
-    grid = new Slick.Grid("#myGrid", data, columns, options);
-  })
-</script>
-</body>
-</html>

SlickGrid/examples/example-dynamic-with-jquery-tabs.html

-<!DOCTYPE HTML>
-<html>
-<head>
-  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
-  <title>SlickGrid example: jQuery tabs with a dynamic grid in each pane</title>
-  <link rel="stylesheet" href="../slick.grid.css" type="text/css"/>
-  <link rel="stylesheet" href="../css/smoothness/jquery-ui-1.11.3.custom.css" type="text/css"/>
-  <link rel="stylesheet" href="examples.css" type="text/css"/>
-  <style>
-  .my-grid {
-	background: white;
-	outline: 0;
-	border: 1px solid gray;
-  }
-  </style>
-</head>
-<body>
-<table width="100%">
-  <tr>
-    <td valign="top" width="50%">
-		<button id='add-tab'>Add tab</button>
-		<div id="tabs">
-		  <ul>
-			<li><a href="#tabs-1">Grid 1</a></li>
-		  </ul>
-		  <div id="tabs-1">
-			<strong><i>This tab is the original</i></strong>
-			<div id="myGrid1" style="width:600px;height:300px;" class="my-grid"></div>
-		  </div>
-		</div>
-	</td>
-    <td valign="top">
-      <h2>Demonstrates:</h2>
-      <ul>
-        <li>jQuery tabs containing a grid in each pane</li>
-      </ul>
-        <h2>View Source:</h2>
-        <ul>
-            <li><A href="https://github.com/6pac/SlickGrid/blob/master/examples/example1-simple.html" target="_sourcewindow"> View the source for this example on Github</a></li>
-        </ul>
-    </td>
-  </tr>
-</table>
-
-<script src="../lib/jquery-1.11.2.min.js"></script>
-<script src="../lib/jquery-ui-1.11.3.min.js"></script>
-<script src="../lib/jquery.event.drag-2.2.js"></script>
-
-<script src="../slick.core.js"></script>
-<script src="../slick.grid.js"></script>
-
-<script>
-  var gridArray;
-  
-  function CreateColumns() {
-	  var columns = [
-		{id: "title", name: "Title", field: "title"},
-		{id: "duration", name: "Duration", field: "duration"},
-		{id: "%", name: "% Complete", field: "percentComplete"},
-		{id: "start", name: "Start", field: "start"},
-		{id: "finish", name: "Finish", field: "finish"},
-		{id: "effort-driven", name: "Effort Driven", field: "effortDriven"},
-		{id: "title", name: "Title", field: "title"},
-		{id: "duration", name: "Duration", field: "duration"},
-		{id: "%", name: "% Complete", field: "percentComplete"},
-		{id: "start", name: "Start", field: "start"},
-		{id: "finish", name: "Finish", field: "finish"},
-		{id: "effort-driven", name: "Effort Driven", field: "effortDriven"}
-	  ];
-	return columns;
-  }
-
- function CreateOptions() {
-	var options = {
-	  enableCellNavigation: true,
-	  enableColumnReorder: false
-	};
-	return options;
-  }
-
-  function CreateData() {
-    var data = [];
-    for (var i = 0; i < 500; i++) {
-      data[i] = {
-        title: "Task " + i,
-        duration: "5 days",
-        percentComplete: Math.round(Math.random() * 100),
-        start: "01/01/2009",
-        finish: "01/05/2009",
-        effortDriven: (i % 5 == 0)
-      };
-    }
-	return data;
-  }
-  
-  function CreateGrid(elementId) {
-    if (!gridArray) { gridArray = []; }
-	
-	var data = CreateData();
-    var grid = new Slick.Grid("#" + elementId, data, CreateColumns(), CreateOptions());
-	
-	gridArray[length] = grid;
-  }
-  
-  $(function () {
-	// take care of jqueryui tabs and adding tab
-    $( "div#tabs" ).tabs();	
- 
-    $("button#add-tab").click(function() {
-        var num_tabs = $("div#tabs ul li").length + 1;
-
-        $("div#tabs ul").append(
-            "<li><a href='#tab" + num_tabs + "'>Grid " + num_tabs + "</a></li>"
-        );
-		$("div#tabs").append(
-            "<div id='tab" + num_tabs + "'>"
-				+ '<div id="myGrid' + num_tabs + '" style="width:600px;height:300px;" class="my-grid"></div>'
-			+ "</div>"
-        );
-		CreateGrid("myGrid" + num_tabs);
-        $("div#tabs").tabs("refresh");
-    });
-
-	CreateGrid("myGrid1");
-  })
-</script>
-</body>
-</html>

SlickGrid/examples/example-explicit-initialization.html

-<!DOCTYPE HTML>
-<html>
-<head>
-  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
-  <title>SlickGrid example: Explicit grid initialization</title>
-  <link rel="stylesheet" href="../slick.grid.css" type="text/css"/>
-  <link rel="stylesheet" href="../css/smoothness/jquery-ui-1.11.3.custom.css" type="text/css"/>
-  <link rel="stylesheet" href="examples.css" type="text/css"/>
-</head>
-<body>
-<table width="100%" cellpadding="20">
-  <tr>
-    <td valign="top" width="50%" id="myTable">
-    </td>
-    <td valign="top">
-      <h2>Demonstrates:</h2>
-      <p>
-          The container which the grid is being created in needs to be in the DOM and participate in layout
-          (can be 'visibility:hidden' but not 'display:none') in order for SlickGrid to be able to make certain
-          measurements and initialize event listeners.  Normally, this is done when a SlickGrid instance is 
-          being created.  Optionally, you can defer the initialization until the above condition is met and call
-          the <b>grid.init()</b> method explicitly.  To use explicit initialization, set the <b>explicitInitialization</b>
-          option to true.
-          <br/><br/>
-          This example demonstrates creating a SlickGrid inside a detached element and calling <b>init()</b> explicitly
-          when the element is added to the DOM.
-      </p>
-        <h2>View Source:</h2>
-        <ul>
-            <li><A href="https://github.com/6pac/SlickGrid/blob/master/examples/example-explicit-initialization.html" target="_sourcewindow"> View the source for this example on Github</a></li>
-        </ul>
-    </td>
-  </tr>
-</table>
-
-<script src="../lib/jquery-1.11.2.min.js"></script>
-<script src="../lib/jquery.event.drag-2.2.js"></script>
-
-<script src="../slick.core.js"></script>
-<script src="../slick.grid.js"></script>
-
-<script>
-  var grid;
-  var columns = [
-    {id: "title", name: "Title", field: "title"},
-    {id: "duration", name: "Duration", field: "duration"},
-    {id: "%", name: "% Complete", field: "percentComplete"},
-    {id: "start", name: "Start", field: "start"},
-    {id: "finish", name: "Finish", field: "finish"},
-    {id: "effort-driven", name: "Effort Driven", field: "effortDriven"}
-  ];
-
-  var options = {
-    enableCellNavigation: true,
-    enableColumnReorder: false,
-    explicitInitialization: true
-  };
-
-  $(function () {
-    var data = [];
-    for (var i = 0; i < 500; i++) {
-      data[i] = {
-        title: "Task " + i,
-        duration: "5 days",
-        percentComplete: Math.round(Math.random() * 100),
-        start: "01/01/2009",
-        finish: "01/05/2009",
-        effortDriven: (i % 5 == 0)
-      };
-    }
-
-    // create a detached container element
-    var myGrid = $("<div id='myGrid' style='width:600px;height:500px;'></div>");
-    grid = new Slick.Grid(myGrid, data, columns, options);
-
-
-    // ... later on, append the container to the DOM and initialize SlickGrid
-    myGrid.appendTo($("#myTable"));
-    grid.init();
-  })
-</script>
-</body>
-</html>

SlickGrid/examples/example-header-row.html

-<!DOCTYPE HTML>
-<html>
-<head>
-  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
-  <link rel="stylesheet" href="../css/smoothness/jquery-ui-1.11.3.custom.css" type="text/css"/>
-  <link rel="stylesheet" href="../slick.grid.css" type="text/css"/>
-  <link rel="stylesheet" href="examples.css" type="text/css"/>
-  <style>
-    .slick-headerrow-column {
-      background: #87ceeb;
-      text-overflow: clip;
-      -moz-box-sizing: border-box;
-      box-sizing: border-box;
-    }
-
-    .slick-headerrow-column input {
-      margin: 0;
-      padding: 0;
-      width: 100%;
-      height: 100%;
-      -moz-box-sizing: border-box;
-      box-sizing: border-box;
-    }
-  </style>
-</head>
-<body>
-<div style="position:relative">
-  <div style="width:600px;">
-    <div id="myGrid" style="width:100%;height:500px;"></div>
-  </div>
-
-  <div class="options-panel">
-    <h2>Demonstrates:</h2>
-    <ul>
-      <li>Using a fixed header row to implement column-level filters</li>
-      <li>Type numbers in textboxes to filter grid data</li>
-    </ul>
-      <h2>View Source:</h2>
-      <ul>
-          <li><A href="https://github.com/6pac/SlickGrid/blob/master/examples/example-header-row.html" target="_sourcewindow"> View the source for this example on Github</a></li>
-      </ul>
-  </div>
-</div>
-
-<script src="../lib/firebugx.js"></script>
-
-<script src="../lib/jquery-1.11.2.min.js"></script>
-<script src="../lib/jquery-ui-1.11.3.min.js"></script>
-<script src="../lib/jquery.event.drag-2.2.js"></script>
-
-<script src="../slick.core.js"></script>
-<script src="../slick.dataview.js"></script>
-<script src="../slick.grid.js"></script>
-
-<script>
-  var dataView;
-  var grid;
-  var data = [];
-  var options = {
-    enableCellNavigation: true,
-    showHeaderRow: true,
-    headerRowHeight: 30,
-    explicitInitialization: true
-  };
-  var columns = [];
-  var columnFilters = {};
-
-  for (var i = 0; i < 10; i++) {
-    columns.push({
-      id: i,
-      name: String.fromCharCode("A".charCodeAt(0) + i),
-      field: i,
-      width: 60
-    });
-  }
-
-
-  function filter(item) {
-    for (var columnId in columnFilters) {
-      if (columnId !== undefined && columnFilters[columnId] !== "") {
-        var c = grid.getColumns()[grid.getColumnIndex(columnId)];
-        if (item[c.field] != columnFilters[columnId]) {
-          return false;
-        }
-      }
-    }
-    return true;
-  }
-
-  $(function () {
-    for (var i = 0; i < 100; i++) {
-      var d = (data[i] = {});
-      d["id"] = i;
-      for (var j = 0; j < columns.length; j++) {
-        d[j] = Math.round(Math.random() * 10);
-      }
-    }
-
-    dataView = new Slick.Data.DataView();
-    grid = new Slick.Grid("#myGrid", dataView, columns, options);
-
-
-    dataView.onRowCountChanged.subscribe(function (e, args) {
-      grid.updateRowCount();
-      grid.render();
-    });
-
-    dataView.onRowsChanged.subscribe(function (e, args) {
-      grid.invalidateRows(args.rows);
-      grid.render();
-    });
-
-
-    $(grid.getHeaderRow()).delegate(":input", "change keyup", function (e) {
-      var columnId = $(this).data("columnId");
-      if (columnId != null) {
-        columnFilters[columnId] = $.trim($(this).val());
-        dataView.refresh();
-      }
-    });
-
-    grid.onHeaderRowCellRendered.subscribe(function(e, args) {
-        $(args.node).empty();
-        $("<input type='text'>")
-           .data("columnId", args.column.id)
-           .val(columnFilters[args.column.id])
-           .appendTo(args.node);
-    });
-
-    grid.init();
-
-    dataView.beginUpdate();
-    dataView.setItems(data);
-    dataView.setFilter(filter);
-    dataView.endUpdate();
-  })
-</script>
-</body>
-</html>

SlickGrid/examples/example-jquery-accordion.html

-<!DOCTYPE HTML>
-<html>
-<head>
-  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
-  <title>SlickGrid example: jQuery Accordion with a grid in each pane</title>
-  <link rel="stylesheet" href="../slick.grid.css" type="text/css"/>
-  <link rel="stylesheet" href="../css/smoothness/jquery-ui-1.11.3.custom.css" type="text/css"/>
-  <link rel="stylesheet" href="examples.css" type="text/css"/>
-  <style>
-  #myGrid01, #myGrid02 {
-	background: white;
-	outline: 0;
-	border: 1px solid gray;
-  }
-  </style>
-</head>
-<body>
-<table width="100%">
-  <tr>
-    <td valign="top" width="50%">
-		<div id="accordion">
-		  <h3 id="acc_sect1"><a href="#">Section 1</a></h3>
-		  <div>
-			<div id="myGrid01" style="width:600px;height:300px;"></div>
-		  </div>
-		  <h3 id="acc_sect2"><a href="#">Section 2</a></h3>
-		  <div>
-			<div id="myGrid02" style="width:600px;height:300px;"></div>
-		  </div>
-		</div>
-	</td>
-    <td valign="top">
-      <h2>Demonstrates:</h2>
-      <ul>
-        <li>jQuery Accordion containing a grid in each pane</li>
-      </ul>
-        <h2>View Source:</h2>
-        <ul>
-            <li><A href="https://github.com/6pac/SlickGrid/blob/master/examples/example1-simple.html" target="_sourcewindow"> View the source for this example on Github</a></li>
-        </ul>
-    </td>
-  </tr>
-</table>
-
-<script src="../lib/jquery-1.11.2.min.js"></script>
-<script src="../lib/jquery-ui-1.11.3.min.js"></script>
-<script src="../lib/jquery.event.drag-2.2.js"></script>
-
-<script src="../slick.core.js"></script>
-<script src="../slick.grid.js"></script>
-
-<script>
-  var grid01, grid02;
-  var columns = [
-    {id: "title", name: "Title", field: "title"},
-    {id: "duration", name: "Duration", field: "duration"},
-    {id: "%", name: "% Complete", field: "percentComplete"},
-    {id: "start", name: "Start", field: "start"},
-    {id: "finish", name: "Finish", field: "finish"},
-    {id: "effort-driven", name: "Effort Driven", field: "effortDriven"},
-    {id: "title", name: "Title", field: "title"},
-    {id: "duration", name: "Duration", field: "duration"},
-    {id: "%", name: "% Complete", field: "percentComplete"},
-    {id: "start", name: "Start", field: "start"},
-    {id: "finish", name: "Finish", field: "finish"},
-    {id: "effort-driven", name: "Effort Driven", field: "effortDriven"}
-  ];
-
-  var options = {
-    enableCellNavigation: true,
-    enableColumnReorder: false
-  };
-
-  function CreateData() {
-    var data = [];
-    for (var i = 0; i < 500; i++) {
-      data[i] = {
-        title: "Task " + i,
-        duration: "5 days",
-        percentComplete: Math.round(Math.random() * 100),
-        start: "01/01/2009",
-        finish: "01/05/2009",
-        effortDriven: (i % 5 == 0)
-      };
-    }
-	return data;
-  }
-  
-  $(function () {
-    $( "#accordion" ).accordion(
-	// Workaround for IE 7-9 issue where div is blank after switching panels - need to destroy and recreate grid
-	//{
-	//	activate: function( event, ui ) {
-	//		var accHeaderId = '';
-	//		if (ui.newHeader && ui.newHeader.length>0) { accHeaderId = ui.newHeader[0].id; }
-	//		if (accHeaderId == 'acc_sect1') {
-	//			grid01.destroy();
-	//			grid01 = new Slick.Grid("#myGrid01", data01, columns, options);
-	//		}
-	//	}
-	//}
-	);	
-
-    var data01 = CreateData();
-    grid01 = new Slick.Grid("#myGrid01", data01, columns, options);
-
-    var data02 = CreateData();
-	// clone the columns and options so one grid doesn't affect the other
-	grid02 = new Slick.Grid("#myGrid02", data02, columns.slice(0), jQuery.extend({}, options));
-  })
-</script>
-</body>
-</html>

SlickGrid/examples/example-multi-column-sort.html

-<!DOCTYPE HTML>
-<html>
-<head>
-  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
-  <title>SlickGrid example: Multi Column Sort</title>
-  <link rel="stylesheet" href="../slick.grid.css" type="text/css"/>
-  <link rel="stylesheet" href="../css/smoothness/jquery-ui-1.11.3.custom.css" type="text/css"/>
-  <link rel="stylesheet" href="examples.css" type="text/css"/>
-</head>
-<body>
-<table width="100%">
-  <tr>
-    <td valign="top" width="50%">
-      <div id="myGrid" style="width:600px;height:500px;"></div>
-    </td>
-    <td valign="top">
-      <h2>Demonstrates:</h2>
-      <ul>
-        <li>basic grid with multi-column sort option</li>
-      </ul>
-        <h2>View Source:</h2>
-        <ul>
-            <li><A href="https://github.com/6pac/SlickGrid/blob/master/examples/example-multi-column-sort.html" target="_sourcewindow"> View the source for this example on Github</a></li>
-        </ul>
-    </td>
-  </tr>
-</table>
-
-<script src="../lib/jquery-1.11.2.min.js"></script>
-<script src="../lib/jquery.event.drag-2.2.js"></script>
-
-<script src="../slick.core.js"></script>
-<script src="../slick.grid.js"></script>
-
-<script>
-  var grid;
-  var columns = [
-    { id: "title", name: "Title", field: "title", sortable: true },
-    { id: "duration", name: "Duration", field: "duration", sortable: true, formatter: dayFormatter },
-    { id: "%", name: "% Complete", field: "percentComplete", sortable: true },
-    { id: "start", name: "Start", field: "start", formatter: dateFormatter, sortable: true },
-    { id: "finish", name: "Finish", field: "finish", formatter: dateFormatter, sortable: true },
-    { id: "effort-driven", name: "Effort Driven", field: "effortDriven", sortable: true }
-  ];
-
-  function dayFormatter(row, cell, value, columnDef, dataContext) {
-      return value + ' days';
-  }
-
-  function dateFormatter(row, cell, value, columnDef, dataContext) {
-      return value.getMonth() + '/' + value.getDate() + '/' + value.getFullYear();
-  }
-
-  var options = {
-    enableCellNavigation: true,
-    enableColumnReorder: false,
-    multiColumnSort: true
-  };
-
-  $(function () {
-    var MS_PER_DAY = 24 * 60 * 60 * 1000;
-    var data = [];
-    for (var i = 0; i < 500; i++) {
-      var startDate = new Date(new Date("1/1/1980").getTime() + Math.round(Math.random() * 365 * 25) * MS_PER_DAY);
-      var endDate = new Date(startDate.getTime() + Math.round(Math.random() * 365) * MS_PER_DAY);
-      data[i] = {
-        title: "Task " + i,
-        duration: Math.round(Math.random() * 30) + 2,
-        percentComplete: Math.round(Math.random() * 100),
-        start: startDate,
-        finish: endDate,
-        effortDriven: (i % 5 == 0)
-      };
-    }
-
-    grid = new Slick.Grid("#myGrid", data, columns, options);
-
-    grid.onSort.subscribe(function (e, args) {
-      var cols = args.sortCols;
-
-      data.sort(function (dataRow1, dataRow2) {
-        for (var i = 0, l = cols.length; i < l; i++) {
-          var field = cols[i].sortCol.field;
-          var sign = cols[i].sortAsc ? 1 : -1;
-          var value1 = dataRow1[field], value2 = dataRow2[field];
-          var result = (value1 == value2 ? 0 : (value1 > value2 ? 1 : -1)) * sign;
-          if (result != 0) {
-            return result;
-          }
-        }
-        return 0;
-      });
-      grid.invalidate();
-      grid.render();
-    });
-  })
-</script>
-</body>
-</html>

SlickGrid/examples/example-multi-grid-basic.html

-<!DOCTYPE HTML>
-<html>
-<head>
-  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
-  <title>SlickGrid example: Two Basic grids on page</title>
-  <link rel="stylesheet" href="../slick.grid.css" type="text/css"/>
-  <link rel="stylesheet" href="../css/smoothness/jquery-ui-1.11.3.custom.css" type="text/css"/>
-  <link rel="stylesheet" href="examples.css" type="text/css"/>
-  <style>
-  #myGrid01, #myGrid02 {
-	background: white;
-	outline: 0;
-	border: 1px solid gray;
-  }
-  </style>
-</head>
-<body>
-<table width="100%">
-  <tr>
-    <td valign="top" width="50%">
-      <div id="myGrid01" style="width:600px;height:300px;"></div>
-	  <br/>
-      <div id="myGrid02" style="width:600px;height:300px;"></div>
-	  </td>
-    <td valign="top">
-      <h2>Demonstrates:</h2>
-      <ul>
-        <li>two basic grids with minimal configuration</li>
-      </ul>
-        <h2>View Source:</h2>
-        <ul>
-            <li><A href="https://github.com/6pac/SlickGrid/blob/master/examples/example1-simple.html" target="_sourcewindow"> View the source for this example on Github</a></li>
-        </ul>
-    </td>
-  </tr>
-</table>
-
-<script src="../lib/jquery-1.11.2.min.js"></script>
-<script src="../lib/jquery.event.drag-2.2.js"></script>
-
-<script src="../slick.core.js"></script>
-<script src="../slick.grid.js"></script>
-
-<script>
-  var grid01, grid02;
-  var columns = [
-    {id: "title", name: "Title", field: "title"},
-    {id: "duration", name: "Duration", field: "duration"},
-    {id: "%", name: "% Complete", field: "percentComplete"},
-    {id: "start", name: "Start", field: "start"},
-    {id: "finish", name: "Finish", field: "finish"},
-    {id: "effort-driven", name: "Effort Driven", field: "effortDriven"}
-  ];
-
-  var options = {
-    enableCellNavigation: true,
-    enableColumnReorder: false
-  };
-
-  function CreateData() {
-    var data = [];
-    for (var i = 0; i < 500; i++) {
-      data[i] = {
-        title: "Task " + i,
-        duration: "5 days",
-        percentComplete: Math.round(Math.random() * 100),
-        start: "01/01/2009",
-        finish: "01/05/2009",
-        effortDriven: (i % 5 == 0)
-      };
-    }
-	return data;
-  }
-  
-  $(function () {
-    var data01 = CreateData();
-    grid01 = new Slick.Grid("#myGrid01", data01, columns, options);
-
-    var data02 = CreateData();
-    grid02 = new Slick.Grid("#myGrid02", data02, columns.slice(0), jQuery.extend({}, options));
-  })
-</script>
-</body>
-</html>

SlickGrid/examples/example-optimizing-dataview.html

-<!DOCTYPE HTML>
-<html>
-<head>
-  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
-  <title>SlickGrid example: Optimizing DataView</title>
-  <link rel="stylesheet" href="../slick.grid.css" type="text/css"/>
-  <link rel="stylesheet" href="../css/smoothness/jquery-ui-1.11.3.custom.css" type="text/css"/>
-  <link rel="stylesheet" href="../controls/slick.pager.css" type="text/css"/>
-  <link rel="stylesheet" href="examples.css" type="text/css"/>
-  <style>
-    .cell-title {
-      font-weight: bold;
-    }
-
-    .cell-effort-driven {
-      text-align: center;
-    }
-
-    .cell-selection {
-      border-right-color: silver;
-      border-right-style: solid;
-      background: #f5f5f5;
-      color: gray;
-      text-align: right;
-      font-size: 10px;
-    }
-  </style>
-</head>
-<body>
-<div style="position:relative">
-  <div style="width:600px;">
-    <div class="grid-header" style="width:100%">
-      <label>SlickGrid</label>
-    </div>
-    <div id="myGrid" style="width:100%;height:500px;"></div>
-    <div id="pager" style="width:100%;height:20px;"></div>
-  </div>
-
-  <div class="options-panel">
-    <b>Search:</b>
-    <hr/>
-    <div style="padding:6px;">
-      <label style="width:200px;float:left">Show tasks with % at least: </label>
-
-      <div style="padding:2px;">
-        <div style="width:100px;display:inline-block;" id="pcSlider"></div>
-      </div>
-    </div>
-    <br/>
-
-    <p>
-      This page demonstrates various techniques for optimizing DataView performance
-      for large client-side datasets. This page displays an interactive grid with
-      500'000 rows with real-time filtering.<br/>
-      This is achieved by:
-    <ul>
-      <li>Inlining filter function to cut down on the cost of function calls.</li>
-      <li>Providing hints to indicate whether a filtering operation will result in
-        narrowing or expanding scope or whether the scope is unchanged.
-      </li>
-      <li>Providing a range of rows for which onRowsChanged even should be fired.</li>
-    </ul>
-    </p>
-      <h2>View Source:</h2>
-      <ul>
-          <li><A href="https://github.com/6pac/SlickGrid/blob/master/examples/example-optimizing-dataview.html" target="_sourcewindow"> View the source for this example on Github</a></li>
-      </ul>
-  </div>
-</div>
-
-
-<script src="../lib/jquery-1.11.2.min.js"></script>
-<script src="../lib/jquery-ui-1.11.3.min.js"></script>
-<script src="../lib/jquery.event.drag-2.2.js"></script>
-
-<script src="../slick.core.js"></script>
-<script src="../slick.formatters.js"></script>
-<script src="../slick.grid.js"></script>
-<script src="../slick.dataview.js"></script>
-<script src="../controls/slick.pager.js"></script>
-
-<script>
-  var dataView;
-  var grid;
-  var data = [];
-  var columns = [
-    {id: "sel", name: "#", field: "num", behavior: "select", cssClass: "cell-selection", width: 40, resizable: false, selectable: false },
-    {id: "title", name: "Title", field: "title", width: 120, minWidth: 120, cssClass: "cell-title"},
-    {id: "duration", name: "Duration", field: "duration"},
-    {id: "%", name: "% Complete", field: "percentComplete", width: 80, resizable: false, formatter: Slick.Formatters.PercentCompleteBar},
-    {id: "start", name: "Start", field: "start", minWidth: 60},
-    {id: "finish", name: "Finish", field: "finish", minWidth: 60},
-    {id: "effort-driven", name: "Effort Driven", width: 80, minWidth: 20, maxWidth: 80, cssClass: "cell-effort-driven", field: "effortDriven", formatter: Slick.Formatters.Checkmark}
-  ];
-
-  var options = {
-    editable: false,
-    enableAddRow: false,
-    enableCellNavigation: true
-  };
-
-  var percentCompleteThreshold = 0;
-  var prevPercentCompleteThreshold = 0;
-  var h_runfilters = null;
-
-  function myFilter(item, args) {
-    return item["percentComplete"] >= args;
-  }
-
-  function DataItem(i) {
-    this.num = i;
-    this.id = "id_" + i;
-    this.percentComplete = Math.round(Math.random() * 100);
-    this.effortDriven = (i % 5 == 0);
-    this.start = "01/01/2009";
-    this.finish = "01/05/2009";
-    this.title = "Task " + i;
-    this.duration = "5 days";
-  }
-
-
-  $(function () {
-    // prepare the data
-    for (var i = 0; i < 500000; i++) {
-      data[i] = new DataItem(i);
-    }
-
-    dataView = new Slick.Data.DataView({ inlineFilters: true });
-    grid = new Slick.Grid("#myGrid", dataView, columns, options);
-    var pager = new Slick.Controls.Pager(dataView, grid, $("#pager"));
-
-    // wire up model events to drive the grid
-    dataView.onRowCountChanged.subscribe(function (e, args) {
-      grid.updateRowCount();
-      grid.render();
-    });
-
-    dataView.onRowsChanged.subscribe(function (e, args) {
-      grid.invalidateRows(args.rows);
-      grid.render();
-    });
-
-
-    // wire up the slider to apply the filter to the model
-    $("#pcSlider").slider({
-      "range": "min",
-      "slide": function (event, ui) {
-        if (percentCompleteThreshold != ui.value) {
-          window.clearTimeout(h_runfilters);
-          h_runfilters = window.setTimeout(filterAndUpdate, 10);
-          percentCompleteThreshold = ui.value;
-        }
-      }
-    });
-
-    function filterAndUpdate() {
-      var isNarrowing = percentCompleteThreshold > prevPercentCompleteThreshold;
-      var isExpanding = percentCompleteThreshold < prevPercentCompleteThreshold;
-      var renderedRange = grid.getRenderedRange();
-
-      dataView.setFilterArgs(percentCompleteThreshold);
-      dataView.setRefreshHints({
-        ignoreDiffsBefore: renderedRange.top,
-        ignoreDiffsAfter: renderedRange.bottom + 1,
-        isFilterNarrowing: isNarrowing,
-        isFilterExpanding: isExpanding
-      });
-      dataView.refresh();
-
-      prevPercentCompleteThreshold = percentCompleteThreshold;
-    }
-
-    // initialize the model after all the events have been hooked up
-    dataView.beginUpdate();
-    dataView.setItems(data);
-    dataView.setFilter(myFilter);
-    dataView.setFilterArgs(0);
-    dataView.endUpdate();
-  })
-</script>
-</body>
-</html>

SlickGrid/examples/example-plugin-headerbuttons.html

-<!DOCTYPE HTML>
-<html>
-<head>
-  <link rel="stylesheet" href="../css/smoothness/jquery-ui-1.11.3.custom.css" type="text/css"/>
-  <link rel="stylesheet" href="../slick.grid.css" type="text/css"/>
-  <link rel="stylesheet" href="examples.css" type="text/css"/>
-  <link rel="stylesheet" href="../plugins/slick.headerbuttons.css" type="text/css"/>
-  <style>
-    .icon-highlight-off,
-    .icon-highlight-on {
-      background-image: url(../images/bullet_blue.png);
-    }
-
-    .icon-highlight-off {
-      opacity: 0.2;
-    }
-
-    .negative-highlight {
-      background: red;
-    }
-  </style>
-</head>
-<body>
-<div style="position:relative">
-  <div style="width:600px;">
-    <div id="myGrid" style="width:100%;height:500px;"></div>
-  </div>
-
-  <div class="options-panel">
-    <p>
-      This example demonstrates using the <b>Slick.Plugins.HeaderButtons</b> plugin to easily add buttons to column
-      headers.  These buttons can be specified directly in the column definition, and are very easy to configure and use.
-    </p>
-      <h2>View Source:</h2>
-      <ul>
-          <li><A href="https://github.com/6pac/SlickGrid/blob/master/examples/example-plugin-headerbuttons.html" target="_sourcewindow"> View the source for this example on Github</a></li>
-      </ul>
-  </div>
-</div>
-
-<script src="../lib/firebugx.js"></script>
-
-<script src="../lib/jquery-1.11.2.min.js"></script>
-<script src="../lib/jquery-ui-1.11.3.min.js"></script>
-<script src="../lib/jquery.event.drag-2.2.js"></script>
-
-<script src="../slick.core.js"></script>
-<script src="../slick.grid.js"></script>
-<script src="../plugins/slick.headerbuttons.js"></script>
-
-<script>
-  var grid;
-  var data = [];
-  var options = {
-    enableCellNavigation: true
-  };
-  var columns = [];
-  var columnsWithHighlightingById = {};
-
-
-  // Set up some test columns.
-  for (var i = 0; i < 10; i++) {
-    columns.push({
-      id: i,
-      name: String.fromCharCode("A".charCodeAt(0) + i),
-      field: i,
-      width: 90,
-      sortable: true,
-      formatter: highlightingFormatter,
-      header: {
-        buttons: [
-          {
-            cssClass: "icon-highlight-off",
-            command: "toggle-highlight",
-            tooltip: "Highlight negative numbers."
-          }
-        ]
-      }
-    });
-  }
-
-  // Set multiple buttons on the first column to demonstrate overflow.
-  columns[0].name = "Resize me!";
-  columns[0].header = {
-    buttons: [
-      {
-        image: "../images/tag_red.png"
-      },
-      {
-        image: "../images/comment_yellow.gif"
-      },
-      {
-        image: "../images/info.gif"
-      },
-      {
-        image: "../images/help.png"
-      }
-    ]
-  };
-
-  // Set a button on the second column to demonstrate hover.
-  columns[1].name = "Hover me!";
-  columns[1].header = {
-    buttons: [
-      {
-        image: "../images/help.png",
-        showOnHover: true,
-        tooltip: "This button only appears on hover.",
-        handler: function(e) {
-          alert('Help');
-        }
-      }
-    ]
-  };
-
-
-
-  // Set up some test data.
-  for (var i = 0; i < 100; i++) {
-    var d = (data[i] = {});
-    d["id"] = i;
-    for (var j = 0; j < columns.length; j++) {
-      d[j] = Math.round(Math.random() * 10) - 5;
-    }
-  }
-
-
-  function highlightingFormatter(row, cell, value, columnDef, dataContext) {
-    if (columnsWithHighlightingById[columnDef.id] && value < 0) {
-      return "<div style='color:red; font-weight:bold;'>" + value + "</div>";
-    } else {
-      return value;
-    }
-  }
-
-
-
-  $(function () {
-    grid = new Slick.Grid("#myGrid", data, columns, options);
-
-    var headerButtonsPlugin = new Slick.Plugins.HeaderButtons();
-
-    headerButtonsPlugin.onCommand.subscribe(function(e, args) {
-      var column = args.column;
-      var button = args.button;
-      var command = args.command;
-
-      if (command == "toggle-highlight") {
-        if (button.cssClass == "icon-highlight-on") {
-          delete columnsWithHighlightingById[column.id];
-          button.cssClass = "icon-highlight-off";
-          button.tooltip = "Highlight negative numbers."
-        } else {
-          columnsWithHighlightingById[column.id] = true;
-          button.cssClass = "icon-highlight-on";
-          button.tooltip = "Remove highlight."
-        }
-
-        grid.invalidate();
-      }
-    });
-
-    grid.registerPlugin(headerButtonsPlugin);
-  });
-</script>
-</body>
-</html>

SlickGrid/examples/example-plugin-headermenu.html

-<!DOCTYPE HTML>
-<html>
-<head>
-  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
-  <link rel="stylesheet" href="../slick.grid.css" type="text/css"/>
-  <link rel="stylesheet" href="../css/smoothness/jquery-ui-1.11.3.custom.css" type="text/css"/>
-  <link rel="stylesheet" href="../plugins/slick.headermenu.css" type="text/css"/>
-  <link rel="stylesheet" href="examples.css" type="text/css"/>
-  <style>
-    /**
-     * Style the drop-down menu here since the plugin stylesheet mostly contains structural CSS.
-     */
-
-    .slick-header-menu {
-      border: 1px solid #718BB7;
-      background: #f0f0f0;
-      padding: 2px;
-      -moz-box-shadow: 2px 2px 2px silver;
-      -webkit-box-shadow: 2px 2px 2px silver;
-      min-width: 100px;
-      z-index: 20;
-    }
-
-
-    .slick-header-menuitem {
-      padding: 2px 4px;
-      border: 1px solid transparent;
-      border-radius: 3px;
-    }
-
-    .slick-header-menuitem:hover {
-      border-color: silver;
-      background: white;
-    }
-
-    .slick-header-menuitem-disabled {
-      border-color: transparent !important;
-      background: inherit !important;
-    }
-
-    .icon-help {
-      background-image: url(../images/help.png);
-    }
-  </style>
-</head>
-<body>
-<div style="position:relative">
-  <div style="width:600px;">
-    <div id="myGrid" style="width:100%;height:500px;"></div>
-  </div>
-
-  <div class="options-panel">
-    <p>
-      This example demonstrates using the <b>Slick.Plugins.HeaderMenu</b> plugin to add drop-down menus to column
-      headers.  (Hover over the headers.)
-    </p>
-      <h2>View Source:</h2>
-      <ul>
-          <li><A href="https://github.com/6pac/SlickGrid/blob/master/examples/example-plugin-headermenu.html" target="_sourcewindow"> View the source for this example on Github</a></li>
-      </ul>
-  </div>
-</div>
-
-<script src="../lib/jquery-1.11.2.min.js"></script>
-<script src="../lib/jquery.event.drag-2.2.js"></script>
-
-<script src="../slick.core.js"></script>
-<script src="../slick.grid.js"></script>
-<script src="../plugins/slick.headermenu.js"></script>
-
-<script>
-  var grid;
-  var columns = [
-    {id: "title", name: "Title", field: "title"},
-    {id: "duration", name: "Duration", field: "duration"},
-    {id: "%", name: "% Complete", field: "percentComplete"},
-    {id: "start", name: "Start", field: "start"},
-    {id: "finish", name: "Finish", field: "finish"},
-    {id: "effort-driven", name: "Effort Driven", field: "effortDriven"}
-  ];
-
-  for (var i = 0; i < columns.length; i++) {
-    columns[i].header = {
-      menu: {
-        items: [
-          {
-            iconImage: "../images/sort-asc.gif",
-            title: "Sort Ascending",
-            command: "sort-asc"
-          },
-          {
-            iconImage: "../images/sort-desc.gif",
-            title: "Sort Descending",
-            command: "sort-desc"
-          },
-          {
-            title: "Hide Column",
-            command: "hide",
-            disabled: true,
-            tooltip: "Can't hide this column"
-          },
-          {
-            iconCssClass: "icon-help",
-            title: "Help",
-            command: "help"
-          }
-        ]
-      }
-    };
-  }
-
-
-  var options = {
-    enableColumnReorder: false
-  };
-
-  $(function () {
-    var data = [];
-    for (var i = 0; i < 500; i++) {
-      data[i] = {
-        title: "Task " + i,
-        duration: "5 days",
-        percentComplete: Math.round(Math.random() * 100),
-        start: "01/01/2009",
-        finish: "01/05/2009",
-        effortDriven: (i % 5 == 0)
-      };
-    }
-
-    grid = new Slick.Grid("#myGrid", data, columns, options);
-
-    var headerMenuPlugin = new Slick.Plugins.HeaderMenu({});
-
-    headerMenuPlugin.onBeforeMenuShow.subscribe(function(e, args) {
-      var menu = args.menu;
-
-      // We can add or modify the menu here, or cancel it by returning false.
-      var i = menu.items.length;
-      menu.items.push({
-        title: "Menu item " + i,
-        command: "item" + i
-      });
-    });
-
-    headerMenuPlugin.onCommand.subscribe(function(e, args) {
-      alert("Command: " + args.command);
-    });
-
-    grid.registerPlugin(headerMenuPlugin);
-
-  })
-</script>
-</body>
-</html>

SlickGrid/examples/example-spreadsheet.html

-<!DOCTYPE HTML>
-<html>
-<head>
-  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
-  <title>SlickGrid example 3: Editing</title>
-  <link rel="stylesheet" href="../slick.grid.css" type="text/css"/>
-  <link rel="stylesheet" href="../css/smoothness/jquery-ui-1.11.3.custom.css" type="text/css"/>
-  <link rel="stylesheet" href="examples.css" type="text/css"/>
-  <style>
-    .slick-cell.copied {
-      background: blue;
-      background: rgba(0, 0, 255, 0.2);
-      -webkit-transition: 0.5s background;
-    }
-  </style>
-</head>
-<body>
-<div style="position:relative">
-  <div style="width:600px;">
-    <div id="myGrid" style="width:100%;height:500px;"></div>
-  </div>
-
-  <div class="options-panel">
-    <h2>Demonstrates:</h2>
-    <ul>
-      <li>Virtual scrolling on both rows and columns.</li>
-      <li>Select a range of cells with a mouse</li>
-      <li>Use Ctrl-C and Ctrl-V keyboard shortcuts to cut and paste cells</li>
-      <li>Use Esc to cancel a copy and paste operation</li>
-      <li>Edit the cell and select a cell range to paste the range</li>
-    </ul>
-      <h2>View Source:</h2>
-      <ul>
-          <li><A href="https://github.com/6pac/SlickGrid/blob/master/examples/example-spreadsheet.html" target="_sourcewindow"> View the source for this example on Github</a></li>
-      </ul>
-  </div>
-</div>
-
-<script src="../lib/firebugx.js"></script>
-
-<script src="../lib/jquery-1.11.2.min.js"></script>
-<script src="../lib/jquery-ui-1.11.3.min.js"></script>
-<script src="../lib/jquery.event.drag-2.2.js"></script>
-
-<script src="../slick.core.js"></script>
-<script src="../plugins/slick.autotooltips.js"></script>
-<script src="../plugins/slick.cellrangedecorator.js"></script>
-<script src="../plugins/slick.cellrangeselector.js"></script>
-<script src="../plugins/slick.cellcopymanager.js"></script>
-<script src="../plugins/slick.cellselectionmodel.js"></script>
-<script src="../slick.editors.js"></script>
-<script src="../slick.grid.js"></script>
-
-<script>
-  var grid;
-  var data = [];
-  var options = {
-    editable: true,
-    enableAddRow: true,
-    enableCellNavigation: true,
-    asyncEditorLoading: false,
-    autoEdit: false
-  };
-
-  var columns = [
-    {
-      id: "selector",
-      name: "",
-      field: "num",
-      width: 30
-    }
-  ];
-
-  for (var i = 0; i < 100; i++) {
-    columns.push({
-      id: i,
-      name: String.fromCharCode("A".charCodeAt(0) + (i / 26) | 0) +
-            String.fromCharCode("A".charCodeAt(0) + (i % 26)),
-      field: i,
-      width: 60,
-      editor: FormulaEditor
-    });
-  }
-
-  /***
-   * A proof-of-concept cell editor with Excel-like range selection and insertion.
-   */
-  function FormulaEditor(args) {
-    var _self = this;
-    var _editor = new Slick.Editors.Text(args);
-    var _selector;
-
-    $.extend(this, _editor);
-
-    function init() {
-      // register a plugin to select a range and append it to the textbox
-      // since events are fired in reverse order (most recently added are executed first),
-      // this will override other plugins like moverows or selection model and will
-      // not require the grid to not be in the edit mode
-      _selector = new Slick.CellRangeSelector();
-      _selector.onCellRangeSelected.subscribe(_self.handleCellRangeSelected);
-      args.grid.registerPlugin(_selector);
-    }
-
-    this.destroy = function () {
-      _selector.onCellRangeSelected.unsubscribe(_self.handleCellRangeSelected);
-      grid.unregisterPlugin(_selector);
-      _editor.destroy();
-    };
-
-    this.handleCellRangeSelected = function (e, args) {
-      _editor.setValue(
-          _editor.getValue() +
-              grid.getColumns()[args.range.fromCell].name +
-              args.range.fromRow +
-              ":" +
-              grid.getColumns()[args.range.toCell].name +
-              args.range.toRow
-      );
-    };
-
-
-    init();
-  }
-
-
-  $(function () {
-    for (var i = 0; i < 100; i++) {
-      var d = (data[i] = {});
-      d["num"] = i;
-    }
-
-    grid = new Slick.Grid("#myGrid", data, columns, options);
-
-    grid.setSelectionModel(new Slick.CellSelectionModel());
-    grid.registerPlugin(new Slick.AutoTooltips());
-
-    // set keyboard focus on the grid
-    grid.getCanvasNode().focus();
-
-    var copyManager = new Slick.CellCopyManager();
-    grid.registerPlugin(copyManager);
-
-    copyManager.onPasteCells.subscribe(function (e, args) {
-      if (args.from.length !== 1 || args.to.length !== 1) {
-        throw "This implementation only supports single range copy and paste operations";
-      }
-
-      var from = args.from[0];
-      var to = args.to[0];
-      var val;
-      for (var i = 0; i <= from.toRow - from.fromRow; i++) {
-        for (var j = 0; j <= from.toCell - from.fromCell; j++) {
-          if (i <= to.toRow - to.fromRow && j <= to.toCell - to.fromCell) {
-            val = data[from.fromRow + i][columns[from.fromCell + j].field];
-            data[to.fromRow + i][columns[to.fromCell + j].field] = val;
-            grid.invalidateRow(to.fromRow + i);
-          }
-        }
-      }
-      grid.render();
-    });
-
-    grid.onAddNewRow.subscribe(function (e, args) {
-      var item = args.item;
-      var column = args.column;
-      grid.invalidateRow(data.length);
-      data.push(item);
-      grid.updateRowCount();
-      grid.render();
-    });
-  })
-</script>
-</body>
-</html>

SlickGrid/examples/example-totals-via-data-provider.html

-<!DOCTYPE HTML>
-<html>
-<head>
-  <link rel="stylesheet" href="../css/smoothness/jquery-ui-1.11.3.custom.css" type="text/css"/>
-  <link rel="stylesheet" href="../slick.grid.css" type="text/css"/>
-  <link rel="stylesheet" href="examples.css" type="text/css"/>
-  <style>
-  .totals {
-    font-weight: bold;
-    color: gray;
-    font-style: italic;
-  }
-  </style>
-</head>
-<body>
-<div style="position:relative">
-  <div style="width:600px;">
-    <div id="myGrid" style="width:100%;height:500px;"></div>
-  </div>
-
-  <div class="options-panel">
-    <h2>Demonstrates:</h2>
-    <ul>
-      <li>Implementing a data provider to create a totals row at the end of the grid.</li>
-      <li>This is a simplification of what the DataView does. </li>
-    </ul>
-  </div>
-    <h2>View Source:</h2>
-    <ul>
-        <li><A href="https://github.com/6pac/SlickGrid/blob/master/examples/example-totals-via-data-provider.html" target="_sourcewindow"> View the source for this example on Github</a></li>
-    </ul>
-</div>
-
-<script src="../lib/firebugx.js"></script>
-
-<script src="../lib/jquery-1.11.2.min.js"></script>
-<script src="../lib/jquery-ui-1.11.3.min.js"></script>
-<script src="../lib/jquery.event.drag-2.2.js"></script>
-
-<script src="../slick.core.js"></script>
-<script src="../slick.editors.js"></script>
-<script src="../slick.grid.js"></script>
-
-<script>
-  var grid;
-  var data = [];
-  var options = {
-    enableCellNavigation: true,
-    headerRowHeight: 30,
-    editable: true
-  };
-
-  var columns = [];
-  for (var i = 0; i < 10; i++) {
-    columns.push({
-      id: i,
-      name: String.fromCharCode("A".charCodeAt(0) + i),
-      field: i,
-      width: 60,
-      editor: Slick.Editors.Integer
-    });
-  }
-
-
-
-  function TotalsDataProvider(data, columns) {
-    var totals = {};
-    var totalsMetadata = {
-      // Style the totals row differently.
-      cssClasses: "totals",
-      columns: {}
-    };
-
-    // Make the totals not editable.
-    for (var i = 0; i < columns.length; i++) {
-      totalsMetadata.columns[i] = { editor: null };
-    }
-
-
-    this.getLength = function() {
-      return data.length + 1;
-    };
-
-    this.getItem = function(index) {
-      return (index < data.length) ? data[index] : totals;
-    };
-
-    this.updateTotals = function() {
-      var columnIdx = columns.length;
-      while (columnIdx--) {
-        var columnId = columns[columnIdx].id;
-        var total = 0;
-        var i = data.length;
-        while (i--) {
-          total += (parseInt(data[i][columnId], 10) || 0);
-        }
-        totals[columnId] = "Sum:  " + total;
-      }
-    };
-
-    this.getItemMetadata = function(index) {
-      return (index != data.length) ? null : totalsMetadata;
-    };
-
-    this.updateTotals();
-  }
-
-
-
-  $(function () {
-    for (var i = 0; i < 10; i++) {
-      var d = (data[i] = {});
-      d["id"] = i;
-      for (var j = 0; j < columns.length; j++) {
-        d[j] = Math.round(Math.random() * 10);
-      }
-    }
-
-    var dataProvider = new TotalsDataProvider(data, columns);
-
-    grid = new Slick.Grid("#myGrid", dataProvider, columns, options);
-
-    grid.onCellChange.subscribe(function(e, args) {
-      // The data has changed - recalculate the totals.
-      dataProvider.updateTotals();
-
-      // Rerender the totals row (last row).
-      grid.invalidateRow(dataProvider.getLength() - 1);
-      grid.render();
-    });
-  })
-</script>
-</body>
-</html>

SlickGrid/examples/example1-simple.html

-<!DOCTYPE HTML>
-<html>
-<head>
-  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
-  <title>SlickGrid example 1: Basic grid</title>
-  <link rel="stylesheet" href="../slick.grid.css" type="text/css"/>
-  <link rel="stylesheet" href="../css/smoothness/jquery-ui-1.11.3.custom.css" type="text/css"/>
-  <link rel="stylesheet" href="examples.css" type="text/css"/>
-</head>
-<body>
-<table width="100%">
-  <tr>
-    <td valign="top" width="50%">
-      <div id="myGrid" style="width:600px;height:500px;"></div>
-    </td>
-    <td valign="top">
-      <h2>Demonstrates:</h2>
-      <ul>
-        <li>basic grid with minimal configuration</li>
-      </ul>
-        <h2>View Source:</h2>
-        <ul>
-            <li><A href="https://github.com/6pac/SlickGrid/blob/master/examples/example1-simple.html" target="_sourcewindow"> View the source for this example on Github</a></li>
-        </ul>
-    </td>
-  </tr>
-</table>
-
-<script src="../lib/jquery-1.11.2.min.js"></script>
-<script src="../lib/jquery.event.drag-2.2.js"></script>
-
-<script src="../slick.core.js"></script>
-<script src="../slick.grid.js"></script>
-
-<script>
-  var grid;
-  var columns = [
-    {id: "title", name: "Title", field: "title"},
-    {id: "duration", name: "Duration", field: "duration"},
-    {id: "%", name: "% Complete", field: "percentComplete"},
-    {id: "start", name: "Start", field: "start"},
-    {id: "finish", name: "Finish", field: "finish"},
-    {id: "effort-driven", name: "Effort Driven", field: "effortDriven"}
-  ];
-
-  var options = {
-    enableCellNavigation: true,
-    enableColumnReorder: false
-  };
-
-  $(function () {
-    var data = [];
-    for (var i = 0; i < 500; i++) {
-      data[i] = {
-        title: "Task " + i,
-        duration: "5 days",
-        percentComplete: Math.round(Math.random() * 100),
-        start: "01/01/2009",
-        finish: "01/05/2009",
-        effortDriven: (i % 5 == 0)
-      };
-    }
-
-    grid = new Slick.Grid("#myGrid", data, columns, options);
-  })
-</script>
-</body>
-</html>

SlickGrid/examples/example10-async-post-render.html

-<!DOCTYPE HTML>
-<html>
-<head>
-  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
-  <title>SlickGrid example 10: Async post render</title>
-  <link rel="stylesheet" href="../slick.grid.css" type="text/css"/>
-  <link rel="stylesheet" href="../css/smoothness/jquery-ui-1.11.3.custom.css" type="text/css"/>
-  <link rel="stylesheet" href="examples.css" type="text/css"/>
-  <style>
-    .cell-title {
-      font-weight: bold;
-    }
-
-    .cell-effort-driven {
-      text-align: center;
-    }
-
-    .description * {
-      font-size: 11pt;
-    }
-  </style>
-</head>
-<body>
-<div style="width:600px;float:left;">
-  <div class="grid-header" style="width:100%">
-    <label>Scores:</label>
-  </div>
-  <div id="myGrid" style="width:100%;height:500px;"></div>
-</div>
-
-<div style="margin-left:650px;margin-top:40px;" class="description">
-  <h2>Demonstrates:</h2>
-
-  <p>
-    With SlickGrid, you can still have rich, complex cells rendered against the actual DOM nodes while still preserving
-    the speed and responsiveness.
-    This is achieved through async background post-rendering.
-    SlickGrid exposes a <u>asyncPostRender</u> property on a column which you can use to set your own function that will
-    manipulate the cell DOM node directly.
-    The event is fired one by one for all visible rows in the viewport on a timer so it doesn't impact the UI
-    responsiveness.
-    You should still make sure that post-processing one row doesn't take too long though.
-    SlickGrid will figure out what and when needs to be updated for you.
-  </p>
-
-  <p>
-    The example below is a list of 500 rows with a title and 5 integer cells followed by graphical representation of
-    these integers.
-    The graph is drawn using a CANVAS element in the background.
-    The grid is editable, so you can edit the numbers and see the changes reflected (almost) immediately in the graph.
-    The graph cell behaves just like an ordinary cell and can be resized/reordered.
-    The graphs themselves are created using the excellent <a href="http://www.omnipotent.net/jquery.sparkline/"
-                                                             target="_blank">jQuery Sparklines</a> library.<br/><br/>
-nb: sparkline 2.x will <a href="https://github.com/mleibman/SlickGrid/issues/855">cause a memory leak</a> in the current architecture, so we use sparkline 1.x and jquery-migrate for now.
-  </p>
-    <h2>View Source:</h2>
-    <ul>
-        <li><A href="https://github.com/6pac/SlickGrid/blob/master/examples/example10-async-post-render.html" target="_sourcewindow"> View the source for this example on Github</a></li>
-    </ul>
-</div>
-
-<script src="../lib/firebugx.js"></script>
-
-<script src="../lib/jquery-1.11.2.min.js"></script>
-<script src="../lib/jquery-ui-1.11.3.min.js"></script>
-<script src="../lib/jquery-migrate-1.2.1.min.js"></script>
-<script src="../lib/jquery.event.drag-2.2.js"></script>
-<!-- nb: sparkline 2.x will cause a memory leak in the current architecture, so we use sparkline 1.x and jquery-migrate -->
-<script src="../lib/jquery.sparkline.min.js"></script>
-
-<script src="../slick.core.js"></script>
-<script src="../slick.editors.js"></script>
-<script src="../slick.grid.js"></script>
-
-<script>
-  function requiredFieldValidator(value) {
-    if (value == null || value == undefined || !value.length) {
-      return {valid: false, msg: "This is a required field"};
-    } else {
-      return {valid: true, msg: null};
-    }
-  }
-
-  function waitingFormatter(value) {
-    return "wait...";
-  }
-
-  function renderSparkline(cellNode, row, dataContext, colDef) {
-    var vals = [
-      dataContext["n1"],
-      dataContext["n2"],
-      dataContext["n3"],
-      dataContext["n4"],
-      dataContext["n5"]
-    ];
-
-    $(cellNode).empty().sparkline(vals, {width: "100%"});
-  }
-
-  var grid;
-  var data = [];
-  var columns = [
-    {id: "title", name: "Title", field: "title", sortable: false, width: 120, cssClass: "cell-title"},
-    {id: "n1", name: "1", field: "n1", sortable: false, editor: Slick.Editors.Integer, width: 40, validator: requiredFieldValidator},
-    {id: "n2", name: "2", field: "n2", sortable: false, editor: Slick.Editors.Integer, width: 40, validator: requiredFieldValidator},
-    {id: "n3", name: "3", field: "n3", sortable: false, editor: Slick.Editors.Integer, width: 40, validator: requiredFieldValidator},
-    {id: "n4", name: "4", field: "n4", sortable: false, editor: Slick.Editors.Integer, width: 40, validator: requiredFieldValidator},
-    {id: "n5", name: "5", field: "n5", sortable: false, editor: Slick.Editors.Integer, width: 40, validator: requiredFieldValidator},
-    {id: "chart", name: "Chart", sortable: false, width: 60, formatter: waitingFormatter, rerenderOnResize: true, asyncPostRender: renderSparkline}
-  ];
-
-  var options = {
-    editable: true,
-    enableAddRow: false,
-    enableCellNavigation: true,
-    asyncEditorLoading: false,
-    enableAsyncPostRender: true
-  };
-
-
-  $(function () {
-    for (var i = 0; i < 500; i++) {
-      var d = (data[i] = {});
-
-      d["title"] = "Record " + i;
-      d["n1"] = Math.round(Math.random() * 10);
-      d["n2"] = Math.round(Math.random() * 10);
-      d["n3"] = Math.round(Math.random() * 10);
-      d["n4"] = Math.round(Math.random() * 10);
-      d["n5"] = Math.round(Math.random() * 10);
-    }
-
-    grid = new Slick.Grid("#myGrid", data, columns, options);
-  })
-</script>
-</body>
-</html>

SlickGrid/examples/example11-autoheight.html

-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
-  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
-  <title>SlickGrid example 11: No vertical scrolling (autoHeight)</title>
-  <link rel="stylesheet" href="../slick.grid.css" type="text/css"/>
-  <link rel="stylesheet" href="examples.css" type="text/css"/>
-  <style>
-    html, body {
-      margin: 0;
-      padding: 0;
-      overflow: auto;
-    }
-
-    body {
-      font: 11px Helvetica, Arial, sans-serif;
-    }
-
-    #container {
-      margin: 10px;
-      border: solid 1px gray;
-      width: 480px;
-      background: white;
-    }
-
-    #description {
-      position: fixed;
-      top: 30px;
-      right: 30px;
-      width: 25em;
-    }
-  </style>
-</head>
-<body>
-<div id="container"></div>
-<div id="description">
-  <h2>Demonstrates:</h2>
-  <ul>
-    <li>autoHeight:true grid option</li>
-  </ul>
-    <h2>View Source:</h2>
-    <ul>
-        <li><A href="https://github.com/6pac/SlickGrid/blob/master/examples/example11-autoheight.html" target="_sourcewindow"> View the source for this example on Github</a></li>
-    </ul>
-</div>
-
-<script src="../lib/jquery-1.11.2.min.js"></script>
-<script src="../lib/jquery-ui-1.11.3.min.js"></script>
-<script src="../lib/jquery.event.drag-2.2.js"></script>
-
-<script src="../slick.core.js"></script>
-<script src="../slick.grid.js"></script>
-
-<script>
-  var grid,
-      data = [],
-      columns = [
-        { id: "title", name: "Title", field: "title" },
-        { id: "duration", name: "Duration", field: "duration" },
-        { id: "%", name: "% Complete", field: "percentComplete" },
-        { id: "start", name: "Start", field: "start" },
-        { id: "finish", name: "Finish", field: "finish" },
-        { id: "effort-driven", name: "Effort Driven", field: "effortDriven" }
-      ],
-      options = {
-        editable: false,
-        enableAddRow: false,
-        enableCellNavigation: false,
-        autoHeight: true
-      };
-
-  for (var i = 100; i-- > 0;) {
-    data[i] = {
-      title: "Task " + i,
-      duration: "5 days",
-      percentComplete: Math.round(Math.random() * 100),
-      start: "01/01/2009",
-      finish: "01/05/2009",
-      effortDriven: (i % 5 == 0)
-    };
-  }
-
-  grid = new Slick.Grid("#container", data, columns, options);
-</script>
-</body>
-</html>
\ No newline at end of file