This is pretty much identical to how W3C and jQuery implement events.
+ * @class EventData
+ * @constructor
+ */
+function EventData() {
+ this.isPropagationStopped = false;
+ this.isImmediatePropagationStopped = false;
+}
+
+/**
+ * Stops event from propagating up the DOM tree.
+ * @method stopPropagation
+ */
+EventData.prototype.stopPropagation = function () {
+ this.isPropagationStopped = true;
+};
+
+/**
+ * Returns whether stopPropagation was called on EventData.prototype.event object.
+ * @method isPropagationStopped
+ * @return {Boolean}
+ */
+EventData.prototype.isPropagationStopped = function () {
+ return this.isPropagationStopped;
+};
+
+/**
+ * Prevents the rest of the handlers from being executed.
+ * @method stopImmediatePropagation
+ */
+EventData.prototype.stopImmediatePropagation = function () {
+ this.isImmediatePropagationStopped = true;
+};
+
+/**
+ * Returns whether stopImmediatePropagation was called on EventData.prototype.event object.\
+ * @method isImmediatePropagationStopped
+ * @return {Boolean}
+ */
+EventData.prototype.isImmediatePropagationStopped = function () {
+ return this.isImmediatePropagationStopped;
+};
+
+export default EventData;
+
diff --git a/src/js/event-handler.js b/src/js/event-handler.js
new file mode 100644
index 0000000..4fde69c
--- /dev/null
+++ b/src/js/event-handler.js
@@ -0,0 +1,41 @@
+/* eslint-disable */
+function EventHandler() {
+ this.handlers = [];
+}
+
+EventHandler.prototype.on = function (event, handler) {
+ this.handlers.push({
+ event: event,
+ handler: handler
+ });
+ event.subscribe(handler);
+
+ return this;
+};
+
+EventHandler.prototype.off = function (event, handler) {
+ var i = this.handlers.length;
+ while (i--) {
+ if (this.handlers[i].event === event &&
+ this.handlers[i].handler === handler) {
+ this.handlers.splice(i, 1);
+ event.off(handler);
+ return;
+ }
+ }
+
+ return this;
+};
+
+EventHandler.prototype.offAll = function () {
+ var i = this.handlers.length;
+ while (i--) {
+ this.handlers[i].event.off(this.handlers[i].handler);
+ }
+ this.handlers = [];
+
+ return this;
+};
+
+export default EventHandler;
+
diff --git a/src/js/grid.js b/src/js/grid.js
new file mode 100644
index 0000000..becbb5e
--- /dev/null
+++ b/src/js/grid.js
@@ -0,0 +1,48 @@
+/* global $ */
+import Emitter from './emitter';
+
+class Grid extends Emitter {
+ constructor(options) {
+ super();
+
+ this.el = options.el;
+ if (typeof this.el === 'undefined') {
+ throw new Error('Grid container must be valid dom element.');
+ }
+
+ this.columns = options.columns;
+ this.provider = options.dataProvider;
+
+ this.render();
+ }
+
+ render() {
+ const { el, columns, provider } = this;
+ const data = provider.getData();
+ const thead = $('").appendTo($container);
+ $viewport.css("overflow-y", options.autoHeight ? "hidden" : "auto");
+
+ $canvas = $("
").appendTo($viewport);
+
+ if (options.createFooterRow) {
+ $footerRowScroller = $("").appendTo($container);
+ $footerRow = $("
").appendTo($footerRowScroller);
+ $footerRowSpacer = $("
")
+ .css("width", getCanvasWidth() + scrollbarDimensions.width + "px")
+ .appendTo($footerRowScroller);
+
+ if (!options.showFooterRow) {
+ $footerRowScroller.hide();
+ }
+ }
+
+ $focusSink2 = $focusSink.clone().appendTo($container);
+
+ if (!options.explicitInitialization) {
+ finishInitialization();
+ }
+ }
+
+ function finishInitialization() {
+ if (!initialized) {
+ initialized = true;
+
+ viewportW = parseFloat($.css($container[0], "width", true));
+
+ // header columns and cells may have different padding/border skewing width calculations (box-sizing, hello?)
+ // calculate the diff so we can set consistent sizes
+ measureCellPaddingAndBorder();
+
+ // for usability reasons, all text selection in Grid is disabled
+ // with the exception of input and textarea elements (selection must
+ // be enabled there so that editors work as expected); note that
+ // selection in grid cells (grid body) is already unavailable in
+ // all browsers except IE
+ disableSelection($headers); // disable all text selection in header (including input and textarea)
+
+ if (!options.enableTextSelectionOnCells) {
+ // disable text selection in grid cells except in input and textarea elements
+ // (this is IE-specific, because selectstart event will only fire in IE)
+ $viewport.on("selectstart.ui", function (event) {
+ return $(event.target).is("input,textarea");
+ });
+ }
+
+ updateColumnCaches();
+ createColumnHeaders();
+ setupColumnSort();
+ createCssRules();
+ resizeCanvas();
+ bindAncestorScrollEvents();
+
+ $container
+ .on("resize.slickgrid", resizeCanvas);
+ $viewport
+ //.on("click", handleClick)
+ .on("scroll", handleScroll);
+ $headerScroller
+ .on("contextmenu", handleHeaderContextMenu)
+ .on("click", handleHeaderClick)
+ .on("mouseenter", ".slick-header-column", handleHeaderMouseEnter)
+ .on("mouseleave", ".slick-header-column", handleHeaderMouseLeave);
+ $headerRowScroller
+ .on("scroll", handleHeaderRowScroll);
+
+ if (options.createFooterRow) {
+ $footerRowScroller
+ .on("scroll", handleFooterRowScroll);
+ }
+
+ $focusSink.add($focusSink2)
+ .on("keydown", handleKeyDown);
+ $canvas
+ .on("keydown", handleKeyDown)
+ .on("click", handleClick)
+ .on("dblclick", handleDblClick)
+ .on("contextmenu", handleContextMenu)
+ .on("draginit", handleDragInit)
+ .on("dragstart", {distance: 3}, handleDragStart)
+ .on("drag", handleDrag)
+ .on("dragend", handleDragEnd)
+ .on("mouseenter", ".slick-cell", handleMouseEnter)
+ .on("mouseleave", ".slick-cell", handleMouseLeave);
+
+ // Work around http://crbug.com/312427.
+ if (navigator.userAgent.toLowerCase().match(/webkit/) &&
+ navigator.userAgent.toLowerCase().match(/macintosh/)) {
+ $canvas.on("mousewheel", handleMouseWheel);
+ }
+ restoreCssFromHiddenInit();
+ }
+ }
+
+ function cacheCssForHiddenInit() {
+ // handle display:none on container or container parents
+ $hiddenParents = $container.parents().addBack().not(':visible');
+ $hiddenParents.each(function() {
+ var old = {};
+ for ( var name in cssShow ) {
+ old[ name ] = this.style[ name ];
+ this.style[ name ] = cssShow[ name ];
+ }
+ oldProps.push(old);
+ });
+ }
+
+ function restoreCssFromHiddenInit() {
+ // finish handle display:none on container or container parents
+ // - put values back the way they were
+ $hiddenParents.each(function(i) {
+ var old = oldProps[i];
+ for ( var name in cssShow ) {
+ this.style[ name ] = old[ name ];
+ }
+ });
+ }
+
+ function registerPlugin(plugin) {
+ plugins.unshift(plugin);
+ plugin.init(self);
+ }
+
+ function unregisterPlugin(plugin) {
+ for (var i = plugins.length; i >= 0; i--) {
+ if (plugins[i] === plugin) {
+ if (plugins[i].destroy) {
+ plugins[i].destroy();
+ }
+ plugins.splice(i, 1);
+ break;
+ }
+ }
+ }
+
+ function setSelectionModel(model) {
+ if (selectionModel) {
+ selectionModel.onSelectedRangesChanged.unsubscribe(handleSelectedRangesChanged);
+ if (selectionModel.destroy) {
+ selectionModel.destroy();
+ }
+ }
+
+ selectionModel = model;
+ if (selectionModel) {
+ selectionModel.init(self);
+ selectionModel.onSelectedRangesChanged.subscribe(handleSelectedRangesChanged);
+ }
+ }
+
+ function getSelectionModel() {
+ return selectionModel;
+ }
+
+ function getCanvasNode() {
+ return $canvas[0];
+ }
+
+ function measureScrollbar() {
+ var $c = $("
").appendTo("body");
+ var dim = {
+ width: $c.width() - $c[0].clientWidth,
+ height: $c.height() - $c[0].clientHeight
+ };
+ $c.remove();
+ return dim;
+ }
+
+ function getHeadersWidth() {
+ var headersWidth = 0;
+ for (var i = 0, ii = columns.length; i < ii; i++) {
+ var width = columns[i].width;
+ headersWidth += width;
+ }
+ headersWidth += scrollbarDimensions.width;
+ return Math.max(headersWidth, viewportW) + 1000;
+ }
+
+ function getCanvasWidth() {
+ var availableWidth = viewportHasVScroll ? viewportW - scrollbarDimensions.width : viewportW;
+ var rowWidth = 0;
+ var i = columns.length;
+ while (i--) {
+ rowWidth += columns[i].width;
+ }
+ return options.fullWidthRows ? Math.max(rowWidth, availableWidth) : rowWidth;
+ }
+
+ function updateCanvasWidth(forceColumnWidthsUpdate) {
+ var oldCanvasWidth = canvasWidth;
+ canvasWidth = getCanvasWidth();
+
+ if (canvasWidth != oldCanvasWidth) {
+ $canvas.width(canvasWidth);
+ $headerRow.width(canvasWidth);
+ if (options.createFooterRow) { $footerRow.width(canvasWidth); }
+ $headers.width(getHeadersWidth());
+ viewportHasHScroll = (canvasWidth > viewportW - scrollbarDimensions.width);
+ }
+
+ var w=canvasWidth + (viewportHasVScroll ? scrollbarDimensions.width : 0);
+ $headerRowSpacer.width(w);
+ if (options.createFooterRow) { $footerRowSpacer.width(w); }
+ if (canvasWidth != oldCanvasWidth || forceColumnWidthsUpdate) { applyColumnWidths();
+ }
+ }
+
+ function disableSelection($target) {
+ if ($target && $target.jquery) {
+ $target
+ .attr("unselectable", "on")
+ .css("MozUserSelect", "none")
+ .on("selectstart.ui", function () {
+ return false;
+ }); // from jquery:ui.core.js 1.7.2
+ }
+ }
+
+ function getMaxSupportedCssHeight() {
+ var supportedHeight = 1000000;
+ // FF reports the height back but still renders blank after ~6M px
+ var testUpTo = navigator.userAgent.toLowerCase().match(/firefox/) ? 6000000 : 1000000000;
+ var div = $("
").appendTo(document.body);
+
+ while (true) {
+ var test = supportedHeight * 2;
+ div.css("height", test);
+ if (test > testUpTo || div.height() !== test) {
+ break;
+ } else {
+ supportedHeight = test;
+ }
+ }
+
+ div.remove();
+ return supportedHeight;
+ }
+
+ // TODO: this is static. need to handle page mutation.
+ function bindAncestorScrollEvents() {
+ var elem = $canvas[0];
+ while ((elem = elem.parentNode) != document.body && elem != null) {
+ // bind to scroll containers only
+ if (elem == $viewport[0] || elem.scrollWidth != elem.clientWidth || elem.scrollHeight != elem.clientHeight) {
+ var $elem = $(elem);
+ if (!$boundAncestors) {
+ $boundAncestors = $elem;
+ } else {
+ $boundAncestors = $boundAncestors.add($elem);
+ }
+ $elem.on("scroll." + uid, handleActiveCellPositionChange);
+ }
+ }
+ }
+
+ function unbindAncestorScrollEvents() {
+ if (!$boundAncestors) {
+ return;
+ }
+ $boundAncestors.off("scroll." + uid);
+ $boundAncestors = null;
+ }
+
+ function updateColumnHeader(columnId, title, toolTip) {
+ if (!initialized) { return; }
+ var idx = getColumnIndex(columnId);
+ if (idx == null) {
+ return;
+ }
+
+ var columnDef = columns[idx];
+ var $header = $headers.children().eq(idx);
+ if ($header) {
+ if (title !== undefined) {
+ columns[idx].name = title;
+ }
+ if (toolTip !== undefined) {
+ columns[idx].toolTip = toolTip;
+ }
+
+ trigger(self.onBeforeHeaderCellDestroy, {
+ "node": $header[0],
+ "column": columnDef,
+ "grid": self
+ });
+
+ $header
+ .attr("title", toolTip || "")
+ .children().eq(0).html(title);
+
+ trigger(self.onHeaderCellRendered, {
+ "node": $header[0],
+ "column": columnDef,
+ "grid": self
+ });
+ }
+ }
+
+ function getHeaderRow() {
+ return $headerRow[0];
+ }
+
+ function getFooterRow() {
+ return $footerRow[0];
+ }
+
+ function getHeaderRowColumn(columnId) {
+ var idx = getColumnIndex(columnId);
+ var $header = $headerRow.children().eq(idx);
+ return $header && $header[0];
+ }
+
+ function getFooterRowColumn(columnId) {
+ var idx = getColumnIndex(columnId);
+ var $footer = $footerRow.children().eq(idx);
+ return $footer && $footer[0];
+ }
+
+ function createColumnHeaders() {
+ function onMouseEnter() {
+ $(this).addClass("ui-state-hover");
+ }
+
+ function onMouseLeave() {
+ $(this).removeClass("ui-state-hover");
+ }
+
+ $headers.find(".slick-header-column")
+ .each(function() {
+ var columnDef = $(this).data("column");
+ if (columnDef) {
+ trigger(self.onBeforeHeaderCellDestroy, {
+ "node": this,
+ "column": columnDef,
+ "grid": self
+ });
+ }
+ });
+ $headers.empty();
+ $headers.width(getHeadersWidth());
+
+ $headerRow.find(".slick-headerrow-column")
+ .each(function() {
+ var columnDef = $(this).data("column");
+ if (columnDef) {
+ trigger(self.onBeforeHeaderRowCellDestroy, {
+ "node": this,
+ "column": columnDef,
+ "grid": self
+ });
+ }
+ });
+ $headerRow.empty();
+
+ if (options.createFooterRow) {
+ $footerRow.find(".slick-footerrow-column")
+ .each(function() {
+ var columnDef = $(this).data("column");
+ if (columnDef) {
+ trigger(self.onBeforeFooterRowCellDestroy, {
+ "node": this,
+ "column": columnDef
+ });
+ }
+ });
+ $footerRow.empty();
+ }
+
+ for (var i = 0; i < columns.length; i++) {
+ var m = columns[i];
+
+ var header = $("
")
+ .html("
" + m.name + "")
+ .width(m.width - headerColumnWidthDiff)
+ .attr("id", "" + uid + m.id)
+ .attr("title", m.toolTip || "")
+ .data("column", m)
+ .addClass(m.headerCssClass || "")
+ .appendTo($headers);
+
+ if (options.enableColumnReorder || m.sortable) {
+ header
+ .on('mouseenter', onMouseEnter)
+ .on('mouseleave', onMouseLeave);
+ }
+
+ if (m.sortable) {
+ header.addClass("slick-header-sortable");
+ header.append("
");
+ }
+
+ trigger(self.onHeaderCellRendered, {
+ "node": header[0],
+ "column": m,
+ "grid": self
+ });
+
+ if (options.showHeaderRow) {
+ var headerRowCell = $("
")
+ .data("column", m)
+ .appendTo($headerRow);
+
+ trigger(self.onHeaderRowCellRendered, {
+ "node": headerRowCell[0],
+ "column": m,
+ "grid": self
+ });
+ }
+ if (options.createFooterRow && options.showFooterRow) {
+ var footerRowCell = $("
")
+ .data("column", m)
+ .appendTo($footerRow);
+
+ trigger(self.onFooterRowCellRendered, {
+ "node": footerRowCell[0],
+ "column": m
+ });
+ }
+ }
+
+ setSortColumns(sortColumns);
+ setupColumnResize();
+ if (options.enableColumnReorder) {
+ setupColumnReorder();
+ }
+ }
+
+ function setupColumnSort() {
+ $headers.click(function (e) {
+ // temporary workaround for a bug in jQuery 1.7.1 (http://bugs.jquery.com/ticket/11328)
+ e.metaKey = e.metaKey || e.ctrlKey;
+
+ if ($(e.target).hasClass("slick-resizable-handle")) {
+ return;
+ }
+
+ var $col = $(e.target).closest(".slick-header-column");
+ if (!$col.length) {
+ return;
+ }
+
+ var column = $col.data("column");
+ if (column.sortable) {
+ if (!getEditorLock().commitCurrentEdit()) {
+ return;
+ }
+
+ var sortOpts = null;
+ var i = 0;
+ for (; i < sortColumns.length; i++) {
+ if (sortColumns[i].columnId == column.id) {
+ sortOpts = sortColumns[i];
+ sortOpts.sortAsc = !sortOpts.sortAsc;
+ break;
+ }
+ }
+
+ if (e.metaKey && options.multiColumnSort) {
+ if (sortOpts) {
+ sortColumns.splice(i, 1);
+ }
+ }
+ else {
+ if ((!e.shiftKey && !e.metaKey) || !options.multiColumnSort) {
+ sortColumns = [];
+ }
+
+ if (!sortOpts) {
+ sortOpts = { columnId: column.id, sortAsc: column.defaultSortAsc };
+ sortColumns.push(sortOpts);
+ } else if (sortColumns.length == 0) {
+ sortColumns.push(sortOpts);
+ }
+ }
+
+ setSortColumns(sortColumns);
+
+ if (!options.multiColumnSort) {
+ trigger(self.onSort, {
+ multiColumnSort: false,
+ sortCol: column,
+ sortAsc: sortOpts.sortAsc,
+ grid: self}, e);
+ } else {
+ trigger(self.onSort, {
+ multiColumnSort: true,
+ sortCols: $.map(sortColumns, function(col) {
+ return {sortCol: columns[getColumnIndex(col.columnId)], sortAsc: col.sortAsc };
+ }),
+ grid: self}, e);
+ }
+ }
+ });
+ }
+
+ function setupColumnReorder() {
+ $headers.filter(":ui-sortable").sortable("destroy");
+ $headers.sortable({
+ containment: "parent",
+ distance: 3,
+ axis: "x",
+ cursor: "default",
+ tolerance: "intersection",
+ helper: "clone",
+ placeholder: "slick-sortable-placeholder ui-state-default slick-header-column",
+ start: function (e, ui) {
+ ui.placeholder.width(ui.helper.outerWidth() - headerColumnWidthDiff);
+ $(ui.helper).addClass("slick-header-column-active");
+ },
+ beforeStop: function (e, ui) {
+ $(ui.helper).removeClass("slick-header-column-active");
+ },
+ stop: function (e) {
+ if (!getEditorLock().commitCurrentEdit()) {
+ $(this).sortable("cancel");
+ return;
+ }
+
+ var reorderedIds = $headers.sortable("toArray");
+ var reorderedColumns = [];
+ for (var i = 0; i < reorderedIds.length; i++) {
+ reorderedColumns.push(columns[getColumnIndex(reorderedIds[i].replace(uid, ""))]);
+ }
+ setColumns(reorderedColumns);
+
+ trigger(self.onColumnsReordered, {grid: self});
+ e.stopPropagation();
+ setupColumnResize();
+ }
+ });
+ }
+
+ function setupColumnResize() {
+ var $col, j, c, pageX, columnElements, minPageX, maxPageX, firstResizable, lastResizable;
+ columnElements = $headers.children();
+ columnElements.find(".slick-resizable-handle").remove();
+ columnElements.each(function (i, e) {
+ if (columns[i].resizable) {
+ if (firstResizable === undefined) {
+ firstResizable = i;
+ }
+ lastResizable = i;
+ }
+ });
+ if (firstResizable === undefined) {
+ return;
+ }
+ columnElements.each(function (i, e) {
+ if (i < firstResizable || (options.forceFitColumns && i >= lastResizable)) {
+ return;
+ }
+ $col = $(e);
+ $("
")
+ .appendTo(e)
+ .on("dragstart", function (e, dd) {
+ if (!getEditorLock().commitCurrentEdit()) {
+ return false;
+ }
+ pageX = e.pageX;
+ $(this).parent().addClass("slick-header-column-active");
+ var shrinkLeewayOnRight = null, stretchLeewayOnRight = null;
+ // lock each column's width option to current width
+ columnElements.each(function (i, e) {
+ columns[i].previousWidth = $(e).outerWidth();
+ });
+ if (options.forceFitColumns) {
+ shrinkLeewayOnRight = 0;
+ stretchLeewayOnRight = 0;
+ // colums on right affect maxPageX/minPageX
+ for (j = i + 1; j < columnElements.length; j++) {
+ c = columns[j];
+ if (c.resizable) {
+ if (stretchLeewayOnRight !== null) {
+ if (c.maxWidth) {
+ stretchLeewayOnRight += c.maxWidth - c.previousWidth;
+ } else {
+ stretchLeewayOnRight = null;
+ }
+ }
+ shrinkLeewayOnRight += c.previousWidth - Math.max(c.minWidth || 0, absoluteColumnMinWidth);
+ }
+ }
+ }
+ var shrinkLeewayOnLeft = 0, stretchLeewayOnLeft = 0;
+ for (j = 0; j <= i; j++) {
+ // columns on left only affect minPageX
+ c = columns[j];
+ if (c.resizable) {
+ if (stretchLeewayOnLeft !== null) {
+ if (c.maxWidth) {
+ stretchLeewayOnLeft += c.maxWidth - c.previousWidth;
+ } else {
+ stretchLeewayOnLeft = null;
+ }
+ }
+ shrinkLeewayOnLeft += c.previousWidth - Math.max(c.minWidth || 0, absoluteColumnMinWidth);
+ }
+ }
+ if (shrinkLeewayOnRight === null) {
+ shrinkLeewayOnRight = 100000;
+ }
+ if (shrinkLeewayOnLeft === null) {
+ shrinkLeewayOnLeft = 100000;
+ }
+ if (stretchLeewayOnRight === null) {
+ stretchLeewayOnRight = 100000;
+ }
+ if (stretchLeewayOnLeft === null) {
+ stretchLeewayOnLeft = 100000;
+ }
+ maxPageX = pageX + Math.min(shrinkLeewayOnRight, stretchLeewayOnLeft);
+ minPageX = pageX - Math.min(shrinkLeewayOnLeft, stretchLeewayOnRight);
+ })
+ .on("drag", function (e, dd) {
+ var actualMinWidth, d = Math.min(maxPageX, Math.max(minPageX, e.pageX)) - pageX, x;
+ if (d < 0) { // shrink column
+ x = d;
+ for (j = i; j >= 0; j--) {
+ c = columns[j];
+ if (c.resizable) {
+ actualMinWidth = Math.max(c.minWidth || 0, absoluteColumnMinWidth);
+ if (x && c.previousWidth + x < actualMinWidth) {
+ x += c.previousWidth - actualMinWidth;
+ c.width = actualMinWidth;
+ } else {
+ c.width = c.previousWidth + x;
+ x = 0;
+ }
+ }
+ }
+
+ if (options.forceFitColumns) {
+ x = -d;
+ for (j = i + 1; j < columnElements.length; j++) {
+ c = columns[j];
+ if (c.resizable) {
+ if (x && c.maxWidth && (c.maxWidth - c.previousWidth < x)) {
+ x -= c.maxWidth - c.previousWidth;
+ c.width = c.maxWidth;
+ } else {
+ c.width = c.previousWidth + x;
+ x = 0;
+ }
+ }
+ }
+ }
+ } else { // stretch column
+ x = d;
+ for (j = i; j >= 0; j--) {
+ c = columns[j];
+ if (c.resizable) {
+ if (x && c.maxWidth && (c.maxWidth - c.previousWidth < x)) {
+ x -= c.maxWidth - c.previousWidth;
+ c.width = c.maxWidth;
+ } else {
+ c.width = c.previousWidth + x;
+ x = 0;
+ }
+ }
+ }
+
+ if (options.forceFitColumns) {
+ x = -d;
+ for (j = i + 1; j < columnElements.length; j++) {
+ c = columns[j];
+ if (c.resizable) {
+ actualMinWidth = Math.max(c.minWidth || 0, absoluteColumnMinWidth);
+ if (x && c.previousWidth + x < actualMinWidth) {
+ x += c.previousWidth - actualMinWidth;
+ c.width = actualMinWidth;
+ } else {
+ c.width = c.previousWidth + x;
+ x = 0;
+ }
+ }
+ }
+ }
+ }
+ applyColumnHeaderWidths();
+ if (options.syncColumnCellResize) {
+ applyColumnWidths();
+ }
+ })
+ .on("dragend", function (e, dd) {
+ var newWidth;
+ $(this).parent().removeClass("slick-header-column-active");
+ for (j = 0; j < columnElements.length; j++) {
+ c = columns[j];
+ newWidth = $(columnElements[j]).outerWidth();
+
+ if (c.previousWidth !== newWidth && c.rerenderOnResize) {
+ invalidateAllRows();
+ }
+ }
+ updateCanvasWidth(true);
+ render();
+ trigger(self.onColumnsResized, {grid: self});
+ });
+ });
+ }
+
+ function getVBoxDelta($el) {
+ var p = ["borderTopWidth", "borderBottomWidth", "paddingTop", "paddingBottom"];
+ var delta = 0;
+ $.each(p, function (n, val) {
+ delta += parseFloat($el.css(val)) || 0;
+ });
+ return delta;
+ }
+
+ function measureCellPaddingAndBorder() {
+ var el;
+ var h = ["borderLeftWidth", "borderRightWidth", "paddingLeft", "paddingRight"];
+ var v = ["borderTopWidth", "borderBottomWidth", "paddingTop", "paddingBottom"];
+
+ // jquery prior to version 1.8 handles .width setter/getter as a direct css write/read
+ // jquery 1.8 changed .width to read the true inner element width if box-sizing is set to border-box, and introduced a setter for .outerWidth
+ // so for equivalent functionality, prior to 1.8 use .width, and after use .outerWidth
+ var verArray = $.fn.jquery.split('.');
+ jQueryNewWidthBehaviour = (verArray[0]==1 && verArray[1]>=8) || verArray[0] >=2;
+
+ el = $("
-
").appendTo($headers);
+ headerColumnWidthDiff = headerColumnHeightDiff = 0;
+ if (el.css("box-sizing") != "border-box" && el.css("-moz-box-sizing") != "border-box" && el.css("-webkit-box-sizing") != "border-box") {
+ $.each(h, function (n, val) {
+ headerColumnWidthDiff += parseFloat(el.css(val)) || 0;
+ });
+ $.each(v, function (n, val) {
+ headerColumnHeightDiff += parseFloat(el.css(val)) || 0;
+ });
+ }
+ el.remove();
+
+ var r = $("
").appendTo($canvas);
+ el = $("
-
").appendTo(r);
+ cellWidthDiff = cellHeightDiff = 0;
+ if (el.css("box-sizing") != "border-box" && el.css("-moz-box-sizing") != "border-box" && el.css("-webkit-box-sizing") != "border-box") {
+ $.each(h, function (n, val) {
+ cellWidthDiff += parseFloat(el.css(val)) || 0;
+ });
+ $.each(v, function (n, val) {
+ cellHeightDiff += parseFloat(el.css(val)) || 0;
+ });
+ }
+ r.remove();
+
+ absoluteColumnMinWidth = Math.max(headerColumnWidthDiff, cellWidthDiff);
+ }
+
+ function createCssRules() {
+ $style = $("").appendTo($("head"));
+ var rowHeight = (options.rowHeight - cellHeightDiff);
+ var rules = [
+ "." + uid + " .slick-header-column { left: 1000px; }",
+ "." + uid + " .slick-top-panel { height:" + options.topPanelHeight + "px; }",
+ "." + uid + " .slick-headerrow-columns { height:" + options.headerRowHeight + "px; }",
+ "." + uid + " .slick-footerrow-columns { height:" + options.footerRowHeight + "px; }",
+ "." + uid + " .slick-cell { height:" + rowHeight + "px; }",
+ "." + uid + " .slick-row { height:" + options.rowHeight + "px; }"
+ ];
+
+ for (var i = 0; i < columns.length; i++) {
+ rules.push("." + uid + " .l" + i + " { }");
+ rules.push("." + uid + " .r" + i + " { }");
+ }
+
+ if ($style[0].styleSheet) { // IE
+ $style[0].styleSheet.cssText = rules.join(" ");
+ } else {
+ $style[0].appendChild(document.createTextNode(rules.join(" ")));
+ }
+ }
+
+ function getColumnCssRules(idx) {
+ var i;
+ if (!stylesheet) {
+ var sheets = document.styleSheets;
+ for (i = 0; i < sheets.length; i++) {
+ if ((sheets[i].ownerNode || sheets[i].owningElement) == $style[0]) {
+ stylesheet = sheets[i];
+ break;
+ }
+ }
+
+ if (!stylesheet) {
+ throw new Error("Cannot find stylesheet.");
+ }
+
+ // find and cache column CSS rules
+ columnCssRulesL = [];
+ columnCssRulesR = [];
+ var cssRules = (stylesheet.cssRules || stylesheet.rules);
+ var matches, columnIdx;
+ for (i = 0; i < cssRules.length; i++) {
+ var selector = cssRules[i].selectorText;
+ if (matches = /\.l\d+/.exec(selector)) {
+ columnIdx = parseInt(matches[0].substr(2, matches[0].length - 2), 10);
+ columnCssRulesL[columnIdx] = cssRules[i];
+ } else if (matches = /\.r\d+/.exec(selector)) {
+ columnIdx = parseInt(matches[0].substr(2, matches[0].length - 2), 10);
+ columnCssRulesR[columnIdx] = cssRules[i];
+ }
+ }
+ }
+
+ return {
+ "left": columnCssRulesL[idx],
+ "right": columnCssRulesR[idx]
+ };
+ }
+
+ function removeCssRules() {
+ $style.remove();
+ stylesheet = null;
+ }
+
+ function destroy() {
+ getEditorLock().cancelCurrentEdit();
+
+ trigger(self.onBeforeDestroy, {grid: self});
+
+ var i = plugins.length;
+ while(i--) {
+ unregisterPlugin(plugins[i]);
+ }
+
+ if (options.enableColumnReorder) {
+ $headers.filter(":ui-sortable").sortable("destroy");
+ }
+
+ unbindAncestorScrollEvents();
+ $container.off(".slickgrid");
+ removeCssRules();
+
+ $canvas.off("draginit dragstart dragend drag");
+ $container.empty().removeClass(uid);
+ }
+
+
+ //////////////////////////////////////////////////////////////////////////////////////////////
+ // General
+
+ function trigger(evt, args, e) {
+ e = e || new Slick.EventData();
+ args = args || {};
+ args.grid = self;
+ return evt.notify(args, e, self);
+ }
+
+ function getEditorLock() {
+ return options.editorLock;
+ }
+
+ function getEditController() {
+ return editController;
+ }
+
+ function getColumnIndex(id) {
+ return columnsById[id];
+ }
+
+ function autosizeColumns() {
+ var i, c,
+ widths = [],
+ shrinkLeeway = 0,
+ total = 0,
+ prevTotal,
+ availWidth = viewportHasVScroll ? viewportW - scrollbarDimensions.width : viewportW;
+
+ for (i = 0; i < columns.length; i++) {
+ c = columns[i];
+ widths.push(c.width);
+ total += c.width;
+ if (c.resizable) {
+ shrinkLeeway += c.width - Math.max(c.minWidth, absoluteColumnMinWidth);
+ }
+ }
+
+ // shrink
+ prevTotal = total;
+ while (total > availWidth && shrinkLeeway) {
+ var shrinkProportion = (total - availWidth) / shrinkLeeway;
+ for (i = 0; i < columns.length && total > availWidth; i++) {
+ c = columns[i];
+ var width = widths[i];
+ if (!c.resizable || width <= c.minWidth || width <= absoluteColumnMinWidth) {
+ continue;
+ }
+ var absMinWidth = Math.max(c.minWidth, absoluteColumnMinWidth);
+ var shrinkSize = Math.floor(shrinkProportion * (width - absMinWidth)) || 1;
+ shrinkSize = Math.min(shrinkSize, width - absMinWidth);
+ total -= shrinkSize;
+ shrinkLeeway -= shrinkSize;
+ widths[i] -= shrinkSize;
+ }
+ if (prevTotal <= total) { // avoid infinite loop
+ break;
+ }
+ prevTotal = total;
+ }
+
+ // grow
+ prevTotal = total;
+ while (total < availWidth) {
+ var growProportion = availWidth / total;
+ for (i = 0; i < columns.length && total < availWidth; i++) {
+ c = columns[i];
+ var currentWidth = widths[i];
+ var growSize;
+
+ if (!c.resizable || c.maxWidth <= currentWidth) {
+ growSize = 0;
+ } else {
+ growSize = Math.min(Math.floor(growProportion * currentWidth) - currentWidth, (c.maxWidth - currentWidth) || 1000000) || 1;
+ }
+ total += growSize;
+ widths[i] += (total <= availWidth ? growSize : 0);
+ }
+ if (prevTotal >= total) { // avoid infinite loop
+ break;
+ }
+ prevTotal = total;
+ }
+
+ var reRender = false;
+ for (i = 0; i < columns.length; i++) {
+ if (columns[i].rerenderOnResize && columns[i].width != widths[i]) {
+ reRender = true;
+ }
+ columns[i].width = widths[i];
+ }
+
+ applyColumnHeaderWidths();
+ updateCanvasWidth(true);
+ if (reRender) {
+ invalidateAllRows();
+ render();
+ }
+ }
+
+ function applyColumnHeaderWidths() {
+ if (!initialized) { return; }
+ var h;
+ for (var i = 0, headers = $headers.children(), ii = headers.length; i < ii; i++) {
+ h = $(headers[i]);
+ if (jQueryNewWidthBehaviour) {
+ if (h.outerWidth() !== columns[i].width) {
+ h.outerWidth(columns[i].width);
+ }
+ } else {
+ if (h.width() !== columns[i].width - headerColumnWidthDiff) {
+ h.width(columns[i].width - headerColumnWidthDiff);
+ }
+ }
+ }
+
+ updateColumnCaches();
+ }
+
+ function applyColumnWidths() {
+ var x = 0, w, rule;
+ for (var i = 0; i < columns.length; i++) {
+ w = columns[i].width;
+
+ rule = getColumnCssRules(i);
+ rule.left.style.left = x + "px";
+ rule.right.style.right = (canvasWidth - x - w) + "px";
+
+ x += columns[i].width;
+ }
+ }
+
+ function setSortColumn(columnId, ascending) {
+ setSortColumns([{ columnId: columnId, sortAsc: ascending}]);
+ }
+
+ function setSortColumns(cols) {
+ sortColumns = cols;
+
+ var headerColumnEls = $headers.children();
+ headerColumnEls
+ .removeClass("slick-header-column-sorted")
+ .find(".slick-sort-indicator")
+ .removeClass("slick-sort-indicator-asc slick-sort-indicator-desc");
+
+ $.each(sortColumns, function(i, col) {
+ if (col.sortAsc == null) {
+ col.sortAsc = true;
+ }
+ var columnIndex = getColumnIndex(col.columnId);
+ if (columnIndex != null) {
+ headerColumnEls.eq(columnIndex)
+ .addClass("slick-header-column-sorted")
+ .find(".slick-sort-indicator")
+ .addClass(col.sortAsc ? "slick-sort-indicator-asc" : "slick-sort-indicator-desc");
+ }
+ });
+ }
+
+ function getSortColumns() {
+ return sortColumns;
+ }
+
+ function handleSelectedRangesChanged(e, ranges) {
+ selectedRows = [];
+ var hash = {};
+ for (var i = 0; i < ranges.length; i++) {
+ for (var j = ranges[i].fromRow; j <= ranges[i].toRow; j++) {
+ if (!hash[j]) { // prevent duplicates
+ selectedRows.push(j);
+ hash[j] = {};
+ }
+ for (var k = ranges[i].fromCell; k <= ranges[i].toCell; k++) {
+ if (canCellBeSelected(j, k)) {
+ hash[j][columns[k].id] = options.selectedCellCssClass;
+ }
+ }
+ }
+ }
+
+ setCellCssStyles(options.selectedCellCssClass, hash);
+
+ trigger(self.onSelectedRowsChanged, {rows: getSelectedRows(), grid: self}, e);
+ }
+
+ function getColumns() {
+ return columns;
+ }
+
+ function updateColumnCaches() {
+ // Pre-calculate cell boundaries.
+ columnPosLeft = [];
+ columnPosRight = [];
+ var x = 0;
+ for (var i = 0, ii = columns.length; i < ii; i++) {
+ columnPosLeft[i] = x;
+ columnPosRight[i] = x + columns[i].width;
+ x += columns[i].width;
+ }
+ }
+
+ function setColumns(columnDefinitions) {
+ columns = columnDefinitions;
+
+ columnsById = {};
+ for (var i = 0; i < columns.length; i++) {
+ var m = columns[i] = $.extend({}, columnDefaults, columns[i]);
+ columnsById[m.id] = i;
+ if (m.minWidth && m.width < m.minWidth) {
+ m.width = m.minWidth;
+ }
+ if (m.maxWidth && m.width > m.maxWidth) {
+ m.width = m.maxWidth;
+ }
+ }
+
+ updateColumnCaches();
+
+ if (initialized) {
+ invalidateAllRows();
+ createColumnHeaders();
+ removeCssRules();
+ createCssRules();
+ resizeCanvas();
+ applyColumnWidths();
+ handleScroll();
+ }
+ }
+
+ function getOptions() {
+ return options;
+ }
+
+ function setOptions(args, suppressRender) {
+ if (!getEditorLock().commitCurrentEdit()) {
+ return;
+ }
+
+ makeActiveCellNormal();
+
+ if (options.enableAddRow !== args.enableAddRow) {
+ invalidateRow(getDataLength());
+ }
+
+ options = $.extend(options, args);
+ validateAndEnforceOptions();
+
+ $viewport.css("overflow-y", options.autoHeight ? "hidden" : "auto");
+ if (!suppressRender) { render(); }
+ }
+
+ function validateAndEnforceOptions() {
+ if (options.autoHeight) {
+ options.leaveSpaceForNewRows = false;
+ }
+ }
+
+ function setData(newData, scrollToTop) {
+ data = newData;
+ invalidateAllRows();
+ updateRowCount();
+ if (scrollToTop) {
+ scrollTo(0);
+ }
+ }
+
+ function getData() {
+ return data;
+ }
+
+ function getDataLength() {
+ if (data.getLength) {
+ return data.getLength();
+ } else {
+ return data.length;
+ }
+ }
+
+ function getDataLengthIncludingAddNew() {
+ return getDataLength() + (!options.enableAddRow ? 0
+ : (!pagingActive || pagingIsLastPage ? 1 : 0)
+ );
+ }
+
+ function getDataItem(i) {
+ if (data.getItem) {
+ return data.getItem(i);
+ } else {
+ return data[i];
+ }
+ }
+
+ function getTopPanel() {
+ return $topPanel[0];
+ }
+
+ function setTopPanelVisibility(visible) {
+ if (options.showTopPanel != visible) {
+ options.showTopPanel = visible;
+ if (visible) {
+ $topPanelScroller.slideDown("fast", resizeCanvas);
+ } else {
+ $topPanelScroller.slideUp("fast", resizeCanvas);
+ }
+ }
+ }
+
+ function setHeaderRowVisibility(visible) {
+ if (options.showHeaderRow != visible) {
+ options.showHeaderRow = visible;
+ if (visible) {
+ $headerRowScroller.slideDown("fast", resizeCanvas);
+ } else {
+ $headerRowScroller.slideUp("fast", resizeCanvas);
+ }
+ }
+ }
+
+ function setFooterRowVisibility(visible) {
+ if (options.showFooterRow != visible) {
+ options.showFooterRow = visible;
+ if (visible) {
+ $footerRowScroller.slideDown("fast", resizeCanvas);
+ } else {
+ $footerRowScroller.slideUp("fast", resizeCanvas);
+ }
+ }
+ }
+
+ function getContainerNode() {
+ return $container.get(0);
+ }
+
+ //////////////////////////////////////////////////////////////////////////////////////////////
+ // Rendering / Scrolling
+
+ function getRowTop(row) {
+ return options.rowHeight * row - offset;
+ }
+
+ function getRowFromPosition(y) {
+ return Math.floor((y + offset) / options.rowHeight);
+ }
+
+ function scrollTo(y) {
+ y = Math.max(y, 0);
+ y = Math.min(y, th - viewportH + (viewportHasHScroll ? scrollbarDimensions.height : 0));
+
+ var oldOffset = offset;
+
+ page = Math.min(n - 1, Math.floor(y / ph));
+ offset = Math.round(page * cj);
+ var newScrollTop = y - offset;
+
+ if (offset != oldOffset) {
+ var range = getVisibleRange(newScrollTop);
+ cleanupRows(range);
+ updateRowPositions();
+ }
+
+ if (prevScrollTop != newScrollTop) {
+ vScrollDir = (prevScrollTop + oldOffset < newScrollTop + offset) ? 1 : -1;
+ $viewport[0].scrollTop = (lastRenderedScrollTop = scrollTop = prevScrollTop = newScrollTop);
+
+ trigger(self.onViewportChanged, {grid: self});
+ }
+ }
+
+ function defaultFormatter(row, cell, value, columnDef, dataContext) {
+ if (value == null) {
+ return "";
+ } else {
+ return (value + "").replace(/&/g,"&").replace(//g,">");
+ }
+ }
+
+ function getFormatter(row, column) {
+ var rowMetadata = data.getItemMetadata && data.getItemMetadata(row);
+
+ // look up by id, then index
+ var columnOverrides = rowMetadata &&
+ rowMetadata.columns &&
+ (rowMetadata.columns[column.id] || rowMetadata.columns[getColumnIndex(column.id)]);
+
+ return (columnOverrides && columnOverrides.formatter) ||
+ (rowMetadata && rowMetadata.formatter) ||
+ column.formatter ||
+ (options.formatterFactory && options.formatterFactory.getFormatter(column)) ||
+ options.defaultFormatter;
+ }
+
+ function getEditor(row, cell) {
+ var column = columns[cell];
+ var rowMetadata = data.getItemMetadata && data.getItemMetadata(row);
+ var columnMetadata = rowMetadata && rowMetadata.columns;
+
+ if (columnMetadata && columnMetadata[column.id] && columnMetadata[column.id].editor !== undefined) {
+ return columnMetadata[column.id].editor;
+ }
+ if (columnMetadata && columnMetadata[cell] && columnMetadata[cell].editor !== undefined) {
+ return columnMetadata[cell].editor;
+ }
+
+ return column.editor || (options.editorFactory && options.editorFactory.getEditor(column));
+ }
+
+ function getDataItemValueForColumn(item, columnDef) {
+ if (options.dataItemColumnValueExtractor) {
+ return options.dataItemColumnValueExtractor(item, columnDef);
+ }
+ return item[columnDef.field];
+ }
+
+ function appendRowHtml(stringArray, row, range, dataLength) {
+ var d = getDataItem(row);
+ var dataLoading = row < dataLength && !d;
+ var rowCss = "slick-row" +
+ (dataLoading ? " loading" : "") +
+ (row === activeRow ? " active" : "") +
+ (row % 2 == 1 ? " odd" : " even");
+
+ if (!d) {
+ rowCss += " " + options.addNewRowCssClass;
+ }
+
+ var metadata = data.getItemMetadata && data.getItemMetadata(row);
+
+ if (metadata && metadata.cssClasses) {
+ rowCss += " " + metadata.cssClasses;
+ }
+
+ stringArray.push("
");
+
+ var colspan, m;
+ for (var i = 0, ii = columns.length; i < ii; i++) {
+ m = columns[i];
+ colspan = 1;
+ if (metadata && metadata.columns) {
+ var columnData = metadata.columns[m.id] || metadata.columns[i];
+ colspan = (columnData && columnData.colspan) || 1;
+ if (colspan === "*") {
+ colspan = ii - i;
+ }
+ }
+
+ // Do not render cells outside of the viewport.
+ if (columnPosRight[Math.min(ii - 1, i + colspan - 1)] > range.leftPx) {
+ if (columnPosLeft[i] > range.rightPx) {
+ // All columns to the right are outside the range.
+ break;
+ }
+
+ appendCellHtml(stringArray, row, i, colspan, d);
+ }
+
+ if (colspan > 1) {
+ i += (colspan - 1);
+ }
+ }
+
+ stringArray.push("
");
+ }
+
+ function appendCellHtml(stringArray, row, cell, colspan, item) {
+ // stringArray: stringBuilder containing the HTML parts
+ // row, cell: row and column index
+ // colspan: HTML colspan
+ // item: grid data for row
+
+ var m = columns[cell];
+ var cellCss = "slick-cell l" + cell + " r" + Math.min(columns.length - 1, cell + colspan - 1) +
+ (m.cssClass ? " " + m.cssClass : "");
+ if (row === activeRow && cell === activeCell) {
+ cellCss += (" active");
+ }
+
+ // TODO: merge them together in the setter
+ for (var key in cellCssClasses) {
+ if (cellCssClasses[key][row] && cellCssClasses[key][row][m.id]) {
+ cellCss += (" " + cellCssClasses[key][row][m.id]);
+ }
+ }
+
+ stringArray.push("
");
+
+ // if there is a corresponding row (if not, this is the Add New row or this data hasn't been loaded yet)
+ if (item) {
+ var value = getDataItemValueForColumn(item, m);
+ stringArray.push(getFormatter(row, m)(row, cell, value, m, item));
+ }
+
+ stringArray.push("
");
+
+ rowsCache[row].cellRenderQueue.push(cell);
+ rowsCache[row].cellColSpans[cell] = colspan;
+ }
+
+
+ function cleanupRows(rangeToKeep) {
+ for (var i in rowsCache) {
+ if (((i = parseInt(i, 10)) !== activeRow) && (i < rangeToKeep.top || i > rangeToKeep.bottom)) {
+ removeRowFromCache(i);
+ }
+ }
+ if (options.enableAsyncPostRenderCleanup) { startPostProcessingCleanup(); }
+ }
+
+ function invalidate() {
+ updateRowCount();
+ invalidateAllRows();
+ render();
+ }
+
+ function invalidateAllRows() {
+ if (currentEditor) {
+ makeActiveCellNormal();
+ }
+ for (var row in rowsCache) {
+ removeRowFromCache(row);
+ }
+ if (options.enableAsyncPostRenderCleanup) { startPostProcessingCleanup(); }
+ }
+
+ function queuePostProcessedRowForCleanup(cacheEntry, postProcessedRow, rowIdx) {
+ postProcessgroupId++;
+
+ // store and detach node for later async cleanup
+ for (var columnIdx in postProcessedRow) {
+ if (postProcessedRow.hasOwnProperty(columnIdx)) {
+ postProcessedCleanupQueue.push({
+ actionType: 'C',
+ groupId: postProcessgroupId,
+ node: cacheEntry.cellNodesByColumnIdx[ columnIdx | 0],
+ columnIdx: columnIdx | 0,
+ rowIdx: rowIdx
+ });
+ }
+ }
+ postProcessedCleanupQueue.push({
+ actionType: 'R',
+ groupId: postProcessgroupId,
+ node: cacheEntry.rowNode
+ });
+ $(cacheEntry.rowNode).detach();
+ }
+
+ function queuePostProcessedCellForCleanup(cellnode, columnIdx, rowIdx) {
+ postProcessedCleanupQueue.push({
+ actionType: 'C',
+ groupId: postProcessgroupId,
+ node: cellnode,
+ columnIdx: columnIdx,
+ rowIdx: rowIdx
+ });
+ $(cellnode).detach();
+ }
+
+ function removeRowFromCache(row) {
+ var cacheEntry = rowsCache[row];
+ if (!cacheEntry) {
+ return;
+ }
+
+ if (rowNodeFromLastMouseWheelEvent === cacheEntry.rowNode) {
+ cacheEntry.rowNode.style.display = 'none';
+ zombieRowNodeFromLastMouseWheelEvent = rowNodeFromLastMouseWheelEvent;
+ zombieRowCacheFromLastMouseWheelEvent = cacheEntry;
+ zombieRowPostProcessedFromLastMouseWheelEvent = postProcessedRows[row];
+ // ignore post processing cleanup in this case - it will be dealt with later
+ } else {
+ if (options.enableAsyncPostRenderCleanup && postProcessedRows[row]) {
+ queuePostProcessedRowForCleanup(cacheEntry, postProcessedRows[row], row);
+ } else {
+ $canvas[0].removeChild(cacheEntry.rowNode);
+ }
+ }
+
+ delete rowsCache[row];
+ delete postProcessedRows[row];
+ renderedRows--;
+ counter_rows_removed++;
+ }
+
+ function invalidateRows(rows) {
+ var i, rl;
+ if (!rows || !rows.length) {
+ return;
+ }
+ vScrollDir = 0;
+ rl = rows.length;
+ for (i = 0; i < rl; i++) {
+ if (currentEditor && activeRow === rows[i]) {
+ makeActiveCellNormal();
+ }
+ if (rowsCache[rows[i]]) {
+ removeRowFromCache(rows[i]);
+ }
+ }
+ if (options.enableAsyncPostRenderCleanup) { startPostProcessingCleanup(); }
+
+ }
+
+ function invalidateRow(row) {
+ invalidateRows([row]);
+ }
+
+ function updateCell(row, cell) {
+ var cellNode = getCellNode(row, cell);
+ if (!cellNode) {
+ return;
+ }
+
+ var m = columns[cell], d = getDataItem(row);
+ if (currentEditor && activeRow === row && activeCell === cell) {
+ currentEditor.loadValue(d);
+ } else {
+ cellNode.innerHTML = d ? getFormatter(row, m)(row, cell, getDataItemValueForColumn(d, m), m, d) : "";
+ invalidatePostProcessingResults(row);
+ }
+ }
+
+ function updateRow(row) {
+ var cacheEntry = rowsCache[row];
+ if (!cacheEntry) {
+ return;
+ }
+
+ ensureCellNodesInRowsCache(row);
+
+ var d = getDataItem(row);
+
+ for (var columnIdx in cacheEntry.cellNodesByColumnIdx) {
+ if (!cacheEntry.cellNodesByColumnIdx.hasOwnProperty(columnIdx)) {
+ continue;
+ }
+
+ columnIdx = columnIdx | 0;
+ var m = columns[columnIdx],
+ node = cacheEntry.cellNodesByColumnIdx[columnIdx];
+
+ if (row === activeRow && columnIdx === activeCell && currentEditor) {
+ currentEditor.loadValue(d);
+ } else if (d) {
+ node.innerHTML = getFormatter(row, m)(row, columnIdx, getDataItemValueForColumn(d, m), m, d);
+ } else {
+ node.innerHTML = "";
+ }
+ }
+
+ invalidatePostProcessingResults(row);
+ }
+
+ function getViewportHeight() {
+ return parseFloat($.css($container[0], "height", true)) -
+ parseFloat($.css($container[0], "paddingTop", true)) -
+ parseFloat($.css($container[0], "paddingBottom", true)) -
+ parseFloat($.css($headerScroller[0], "height")) - getVBoxDelta($headerScroller) -
+ (options.showTopPanel ? options.topPanelHeight + getVBoxDelta($topPanelScroller) : 0) -
+ (options.showHeaderRow ? options.headerRowHeight + getVBoxDelta($headerRowScroller) : 0) -
+ (options.createFooterRow && options.showFooterRow ? options.footerRowHeight + getVBoxDelta($footerRowScroller) : 0);
+ }
+
+ function resizeCanvas() {
+ if (!initialized) { return; }
+ if (options.autoHeight) {
+ viewportH = options.rowHeight * getDataLengthIncludingAddNew();
+ } else {
+ viewportH = getViewportHeight();
+ }
+
+ numVisibleRows = Math.ceil(viewportH / options.rowHeight);
+ viewportW = parseFloat($.css($container[0], "width", true));
+ if (!options.autoHeight) {
+ $viewport.height(viewportH);
+ }
+
+ if (options.forceFitColumns) {
+ autosizeColumns();
+ }
+
+ updateRowCount();
+ handleScroll();
+ // Since the width has changed, force the render() to reevaluate virtually rendered cells.
+ lastRenderedScrollLeft = -1;
+ render();
+ }
+
+ function updatePagingStatusFromView( pagingInfo ) {
+ pagingActive = (pagingInfo.pageSize !== 0);
+ pagingIsLastPage = (pagingInfo.pageNum == pagingInfo.totalPages - 1);
+ }
+
+ function updateRowCount() {
+ if (!initialized) { return; }
+
+ var dataLength = getDataLength();
+ var dataLengthIncludingAddNew = getDataLengthIncludingAddNew();
+ var numberOfRows = dataLengthIncludingAddNew +
+ (options.leaveSpaceForNewRows ? numVisibleRows - 1 : 0);
+
+ var oldViewportHasVScroll = viewportHasVScroll;
+ // with autoHeight, we do not need to accommodate the vertical scroll bar
+ viewportHasVScroll = !options.autoHeight && (numberOfRows * options.rowHeight > viewportH);
+ viewportHasHScroll = (canvasWidth > viewportW - scrollbarDimensions.width);
+
+ makeActiveCellNormal();
+
+ // remove the rows that are now outside of the data range
+ // this helps avoid redundant calls to .removeRow() when the size of the data decreased by thousands of rows
+ var r1 = dataLength - 1;
+ for (var i in rowsCache) {
+ if (i > r1) {
+ removeRowFromCache(i);
+ }
+ }
+ if (options.enableAsyncPostRenderCleanup) { startPostProcessingCleanup(); }
+
+ if (activeCellNode && activeRow > r1) {
+ resetActiveCell();
+ }
+
+ var oldH = h;
+ th = Math.max(options.rowHeight * numberOfRows, viewportH - scrollbarDimensions.height);
+ if (th < maxSupportedCssHeight) {
+ // just one page
+ h = ph = th;
+ n = 1;
+ cj = 0;
+ } else {
+ // break into pages
+ h = maxSupportedCssHeight;
+ ph = h / 100;
+ n = Math.floor(th / ph);
+ cj = (th - h) / (n - 1);
+ }
+
+ if (h !== oldH) {
+ $canvas.css("height", h);
+ scrollTop = $viewport[0].scrollTop;
+ }
+
+ var oldScrollTopInRange = (scrollTop + offset <= th - viewportH);
+
+ if (th == 0 || scrollTop == 0) {
+ page = offset = 0;
+ } else if (oldScrollTopInRange) {
+ // maintain virtual position
+ scrollTo(scrollTop + offset);
+ } else {
+ // scroll to bottom
+ scrollTo(th - viewportH);
+ }
+
+ if (h != oldH && options.autoHeight) {
+ resizeCanvas();
+ }
+
+ if (options.forceFitColumns && oldViewportHasVScroll != viewportHasVScroll) {
+ autosizeColumns();
+ }
+ updateCanvasWidth(false);
+ }
+
+ function getVisibleRange(viewportTop, viewportLeft) {
+ if (viewportTop == null) {
+ viewportTop = scrollTop;
+ }
+ if (viewportLeft == null) {
+ viewportLeft = scrollLeft;
+ }
+
+ return {
+ top: getRowFromPosition(viewportTop),
+ bottom: getRowFromPosition(viewportTop + viewportH) + 1,
+ leftPx: viewportLeft,
+ rightPx: viewportLeft + viewportW
+ };
+ }
+
+ function getRenderedRange(viewportTop, viewportLeft) {
+ var range = getVisibleRange(viewportTop, viewportLeft);
+ var buffer = Math.round(viewportH / options.rowHeight);
+ var minBuffer = 3;
+
+ if (vScrollDir == -1) {
+ range.top -= buffer;
+ range.bottom += minBuffer;
+ } else if (vScrollDir == 1) {
+ range.top -= minBuffer;
+ range.bottom += buffer;
+ } else {
+ range.top -= minBuffer;
+ range.bottom += minBuffer;
+ }
+
+ range.top = Math.max(0, range.top);
+ range.bottom = Math.min(getDataLengthIncludingAddNew() - 1, range.bottom);
+
+ range.leftPx -= viewportW;
+ range.rightPx += viewportW;
+
+ range.leftPx = Math.max(0, range.leftPx);
+ range.rightPx = Math.min(canvasWidth, range.rightPx);
+
+ return range;
+ }
+
+ function ensureCellNodesInRowsCache(row) {
+ var cacheEntry = rowsCache[row];
+ if (cacheEntry) {
+ if (cacheEntry.cellRenderQueue.length) {
+ var lastChild = cacheEntry.rowNode.lastChild;
+ while (cacheEntry.cellRenderQueue.length) {
+ var columnIdx = cacheEntry.cellRenderQueue.pop();
+ cacheEntry.cellNodesByColumnIdx[columnIdx] = lastChild;
+ lastChild = lastChild.previousSibling;
+ }
+ }
+ }
+ }
+
+ function cleanUpCells(range, row) {
+ var totalCellsRemoved = 0;
+ var cacheEntry = rowsCache[row];
+
+ // Remove cells outside the range.
+ var cellsToRemove = [];
+ for (var i in cacheEntry.cellNodesByColumnIdx) {
+ // I really hate it when people mess with Array.prototype.
+ if (!cacheEntry.cellNodesByColumnIdx.hasOwnProperty(i)) {
+ continue;
+ }
+
+ // This is a string, so it needs to be cast back to a number.
+ i = i | 0;
+
+ var colspan = cacheEntry.cellColSpans[i];
+ if (columnPosLeft[i] > range.rightPx ||
+ columnPosRight[Math.min(columns.length - 1, i + colspan - 1)] < range.leftPx) {
+ if (!(row == activeRow && i == activeCell)) {
+ cellsToRemove.push(i);
+ }
+ }
+ }
+
+ var cellToRemove, node;
+ postProcessgroupId++;
+ while ((cellToRemove = cellsToRemove.pop()) != null) {
+ node = cacheEntry.cellNodesByColumnIdx[cellToRemove];
+ if (options.enableAsyncPostRenderCleanup && postProcessedRows[row] && postProcessedRows[row][cellToRemove]) {
+ queuePostProcessedCellForCleanup(node, cellToRemove, row);
+ } else {
+ cacheEntry.rowNode.removeChild(node);
+ }
+
+ delete cacheEntry.cellColSpans[cellToRemove];
+ delete cacheEntry.cellNodesByColumnIdx[cellToRemove];
+ if (postProcessedRows[row]) {
+ delete postProcessedRows[row][cellToRemove];
+ }
+ totalCellsRemoved++;
+ }
+ }
+
+ function cleanUpAndRenderCells(range) {
+ var cacheEntry;
+ var stringArray = [];
+ var processedRows = [];
+ var cellsAdded;
+ var totalCellsAdded = 0;
+ var colspan;
+
+ for (var row = range.top, btm = range.bottom; row <= btm; row++) {
+ cacheEntry = rowsCache[row];
+ if (!cacheEntry) {
+ continue;
+ }
+
+ // cellRenderQueue populated in renderRows() needs to be cleared first
+ ensureCellNodesInRowsCache(row);
+
+ cleanUpCells(range, row);
+
+ // Render missing cells.
+ cellsAdded = 0;
+
+ var metadata = data.getItemMetadata && data.getItemMetadata(row);
+ metadata = metadata && metadata.columns;
+
+ var d = getDataItem(row);
+
+ // TODO: shorten this loop (index? heuristics? binary search?)
+ for (var i = 0, ii = columns.length; i < ii; i++) {
+ // Cells to the right are outside the range.
+ if (columnPosLeft[i] > range.rightPx) {
+ break;
+ }
+
+ // Already rendered.
+ if ((colspan = cacheEntry.cellColSpans[i]) != null) {
+ i += (colspan > 1 ? colspan - 1 : 0);
+ continue;
+ }
+
+ colspan = 1;
+ if (metadata) {
+ var columnData = metadata[columns[i].id] || metadata[i];
+ colspan = (columnData && columnData.colspan) || 1;
+ if (colspan === "*") {
+ colspan = ii - i;
+ }
+ }
+
+ if (columnPosRight[Math.min(ii - 1, i + colspan - 1)] > range.leftPx) {
+ appendCellHtml(stringArray, row, i, colspan, d);
+ cellsAdded++;
+ }
+
+ i += (colspan > 1 ? colspan - 1 : 0);
+ }
+
+ if (cellsAdded) {
+ totalCellsAdded += cellsAdded;
+ processedRows.push(row);
+ }
+ }
+
+ if (!stringArray.length) {
+ return;
+ }
+
+ var x = document.createElement("div");
+ x.innerHTML = stringArray.join("");
+
+ var processedRow;
+ var node;
+ while ((processedRow = processedRows.pop()) != null) {
+ cacheEntry = rowsCache[processedRow];
+ var columnIdx;
+ while ((columnIdx = cacheEntry.cellRenderQueue.pop()) != null) {
+ node = x.lastChild;
+ cacheEntry.rowNode.appendChild(node);
+ cacheEntry.cellNodesByColumnIdx[columnIdx] = node;
+ }
+ }
+ }
+
+function renderRows(range) {
+ var parentNode = $canvas[0],
+ stringArray = [],
+ rows = [],
+ needToReselectCell = false,
+ dataLength = getDataLength();
+
+ for (var i = range.top, ii = range.bottom; i <= ii; i++) {
+ if (rowsCache[i]) {
+ continue;
+ }
+ renderedRows++;
+ rows.push(i);
+
+ // Create an entry right away so that appendRowHtml() can
+ // start populatating it.
+ rowsCache[i] = {
+ "rowNode": null,
+
+ // ColSpans of rendered cells (by column idx).
+ // Can also be used for checking whether a cell has been rendered.
+ "cellColSpans": [],
+
+ // Cell nodes (by column idx). Lazy-populated by ensureCellNodesInRowsCache().
+ "cellNodesByColumnIdx": [],
+
+ // Column indices of cell nodes that have been rendered, but not yet indexed in
+ // cellNodesByColumnIdx. These are in the same order as cell nodes added at the
+ // end of the row.
+ "cellRenderQueue": []
+ };
+
+ appendRowHtml(stringArray, i, range, dataLength);
+ if (activeCellNode && activeRow === i) {
+ needToReselectCell = true;
+ }
+ counter_rows_rendered++;
+ }
+
+ if (!rows.length) { return; }
+
+ var x = document.createElement("div");
+ x.innerHTML = stringArray.join("");
+
+ for (var i = 0, ii = rows.length; i < ii; i++) {
+ rowsCache[rows[i]].rowNode = parentNode.appendChild(x.firstChild);
+ }
+
+ if (needToReselectCell) {
+ activeCellNode = getCellNode(activeRow, activeCell);
+ }
+}
+
+function startPostProcessing() {
+ if (!options.enableAsyncPostRender) {
+ return;
+ }
+ clearTimeout(h_postrender);
+ h_postrender = setTimeout(asyncPostProcessRows, options.asyncPostRenderDelay);
+}
+
+function startPostProcessingCleanup() {
+ if (!options.enableAsyncPostRenderCleanup) {
+ return;
+ }
+ clearTimeout(h_postrenderCleanup);
+ h_postrenderCleanup = setTimeout(asyncPostProcessCleanupRows, options.asyncPostRenderCleanupDelay);
+}
+
+function invalidatePostProcessingResults(row) {
+ // change status of columns to be re-rendered
+ for (var columnIdx in postProcessedRows[row]) {
+ if (postProcessedRows[row].hasOwnProperty(columnIdx)) {
+ postProcessedRows[row][columnIdx] = 'C';
+ }
+ }
+ postProcessFromRow = Math.min(postProcessFromRow, row);
+ postProcessToRow = Math.max(postProcessToRow, row);
+ startPostProcessing();
+}
+
+function updateRowPositions() {
+ for (var row in rowsCache) {
+ rowsCache[row].rowNode.style.top = getRowTop(row) + "px";
+ }
+}
+
+function render() {
+ if (!initialized) { return; }
+ var visible = getVisibleRange();
+ var rendered = getRenderedRange();
+
+ // remove rows no longer in the viewport
+ cleanupRows(rendered);
+
+ // add new rows & missing cells in existing rows
+ if (lastRenderedScrollLeft != scrollLeft) {
+ cleanUpAndRenderCells(rendered);
+ }
+
+ // render missing rows
+ renderRows(rendered);
+
+ postProcessFromRow = visible.top;
+ postProcessToRow = Math.min(getDataLengthIncludingAddNew() - 1, visible.bottom);
+ startPostProcessing();
+
+ lastRenderedScrollTop = scrollTop;
+ lastRenderedScrollLeft = scrollLeft;
+ h_render = null;
+}
+
+function handleHeaderRowScroll() {
+ var scrollLeft = $headerRowScroller[0].scrollLeft;
+ if (scrollLeft != $viewport[0].scrollLeft) {
+ $viewport[0].scrollLeft = scrollLeft;
+ }
+}
+
+function handleFooterRowScroll() {
+ var scrollLeft = $footerRowScroller[0].scrollLeft;
+ if (scrollLeft != $viewport[0].scrollLeft) {
+ $viewport[0].scrollLeft = scrollLeft;
+ }
+}
+
+function handleScroll() {
+ scrollTop = $viewport[0].scrollTop;
+ scrollLeft = $viewport[0].scrollLeft;
+ var vScrollDist = Math.abs(scrollTop - prevScrollTop);
+ var hScrollDist = Math.abs(scrollLeft - prevScrollLeft);
+
+ if (hScrollDist) {
+ prevScrollLeft = scrollLeft;
+ $headerScroller[0].scrollLeft = scrollLeft;
+ $topPanelScroller[0].scrollLeft = scrollLeft;
+ $headerRowScroller[0].scrollLeft = scrollLeft;
+ if (options.createFooterRow) {
+ $footerRowScroller[0].scrollLeft = scrollLeft;
+ }
+ }
+
+ if (vScrollDist) {
+ vScrollDir = prevScrollTop < scrollTop ? 1 : -1;
+ prevScrollTop = scrollTop;
+
+ // switch virtual pages if needed
+ if (vScrollDist < viewportH) {
+ scrollTo(scrollTop + offset);
+ } else {
+ var oldOffset = offset;
+ if (h == viewportH) {
+ page = 0;
+ } else {
+ page = Math.min(n - 1, Math.floor(scrollTop * ((th - viewportH) / (h - viewportH)) * (1 / ph)));
+ }
+ offset = Math.round(page * cj);
+ if (oldOffset != offset) {
+ invalidateAllRows();
+ }
+ }
+ }
+
+ if (hScrollDist || vScrollDist) {
+ if (h_render) {
+ clearTimeout(h_render);
+ }
+
+ if (Math.abs(lastRenderedScrollTop - scrollTop) > 20 ||
+ Math.abs(lastRenderedScrollLeft - scrollLeft) > 20) {
+ if (options.forceSyncScrolling || (
+ Math.abs(lastRenderedScrollTop - scrollTop) < viewportH &&
+ Math.abs(lastRenderedScrollLeft - scrollLeft) < viewportW)) {
+ render();
+ } else {
+ h_render = setTimeout(render, 50);
+ }
+
+ trigger(self.onViewportChanged, {grid: self});
+ }
+ }
+
+ trigger(self.onScroll, {scrollLeft: scrollLeft, scrollTop: scrollTop, grid: self});
+}
+
+function asyncPostProcessRows() {
+ var dataLength = getDataLength();
+ while (postProcessFromRow <= postProcessToRow) {
+ var row = (vScrollDir >= 0) ? postProcessFromRow++ : postProcessToRow--;
+ var cacheEntry = rowsCache[row];
+ if (!cacheEntry || row >= dataLength) {
+ continue;
+ }
+
+ if (!postProcessedRows[row]) {
+ postProcessedRows[row] = {};
+ }
+
+ ensureCellNodesInRowsCache(row);
+ for (var columnIdx in cacheEntry.cellNodesByColumnIdx) {
+ if (!cacheEntry.cellNodesByColumnIdx.hasOwnProperty(columnIdx)) {
+ continue;
+ }
+
+ columnIdx = columnIdx | 0;
+
+ var m = columns[columnIdx];
+ var processedStatus = postProcessedRows[row][columnIdx]; // C=cleanup and re-render, R=rendered
+ if (m.asyncPostRender && processedStatus !== 'R') {
+ var node = cacheEntry.cellNodesByColumnIdx[columnIdx];
+ if (node) {
+ m.asyncPostRender(node, row, getDataItem(row), m, (processedStatus === 'C'));
+ }
+ postProcessedRows[row][columnIdx] = 'R';
+ }
+ }
+
+ h_postrender = setTimeout(asyncPostProcessRows, options.asyncPostRenderDelay);
+ return;
+ }
+}
+
+function asyncPostProcessCleanupRows() {
+ if (postProcessedCleanupQueue.length > 0) {
+ var groupId = postProcessedCleanupQueue[0].groupId;
+
+ // loop through all queue members with this groupID
+ while (postProcessedCleanupQueue.length > 0 && postProcessedCleanupQueue[0].groupId == groupId) {
+ var entry = postProcessedCleanupQueue.shift();
+ if (entry.actionType == 'R') {
+ $(entry.node).remove();
+ }
+ if (entry.actionType == 'C') {
+ var column = columns[entry.columnIdx];
+ if (column.asyncPostRenderCleanup && entry.node) {
+ // cleanup must also remove element
+ column.asyncPostRenderCleanup(entry.node, entry.rowIdx, column);
+ }
+ }
+ }
+
+ // call this function again after the specified delay
+ h_postrenderCleanup = setTimeout(asyncPostProcessCleanupRows, options.asyncPostRenderCleanupDelay);
+ }
+}
+
+function updateCellCssStylesOnRenderedRows(addedHash, removedHash) {
+ var node, columnId, addedRowHash, removedRowHash;
+ for (var row in rowsCache) {
+ removedRowHash = removedHash && removedHash[row];
+ addedRowHash = addedHash && addedHash[row];
+
+ if (removedRowHash) {
+ for (columnId in removedRowHash) {
+ if (!addedRowHash || removedRowHash[columnId] != addedRowHash[columnId]) {
+ node = getCellNode(row, getColumnIndex(columnId));
+ if (node) {
+ $(node).removeClass(removedRowHash[columnId]);
+ }
+ }
+ }
+ }
+
+ if (addedRowHash) {
+ for (columnId in addedRowHash) {
+ if (!removedRowHash || removedRowHash[columnId] != addedRowHash[columnId]) {
+ node = getCellNode(row, getColumnIndex(columnId));
+ if (node) {
+ $(node).addClass(addedRowHash[columnId]);
+ }
+ }
+ }
+ }
+ }
+}
+
+function addCellCssStyles(key, hash) {
+ if (cellCssClasses[key]) {
+ throw "addCellCssStyles: cell CSS hash with key '" + key + "' already exists.";
+ }
+
+ cellCssClasses[key] = hash;
+ updateCellCssStylesOnRenderedRows(hash, null);
+
+ trigger(self.onCellCssStylesChanged, { "key": key, "hash": hash, "grid": self });
+}
+
+function removeCellCssStyles(key) {
+ if (!cellCssClasses[key]) {
+ return;
+ }
+
+ updateCellCssStylesOnRenderedRows(null, cellCssClasses[key]);
+ delete cellCssClasses[key];
+
+ trigger(self.onCellCssStylesChanged, { "key": key, "hash": null, "grid": self });
+}
+
+function setCellCssStyles(key, hash) {
+ var prevHash = cellCssClasses[key];
+
+ cellCssClasses[key] = hash;
+ updateCellCssStylesOnRenderedRows(hash, prevHash);
+
+ trigger(self.onCellCssStylesChanged, { "key": key, "hash": hash, "grid": self });
+}
+
+function getCellCssStyles(key) {
+ return cellCssClasses[key];
+}
+
+function flashCell(row, cell, speed) {
+ speed = speed || 100;
+ if (rowsCache[row]) {
+ var $cell = $(getCellNode(row, cell));
+
+ function toggleCellClass(times) {
+ if (!times) {
+ return;
+ }
+ setTimeout(function () {
+ $cell.queue(function () {
+ $cell.toggleClass(options.cellFlashingCssClass).dequeue();
+ toggleCellClass(times - 1);
+ });
+ },
+ speed);
+ }
+
+ toggleCellClass(4);
+ }
+}
+
+//////////////////////////////////////////////////////////////////////////////////////////////
+// Interactivity
+
+function handleMouseWheel(e) {
+ var rowNode = $(e.target).closest(".slick-row")[0];
+ if (rowNode != rowNodeFromLastMouseWheelEvent) {
+ if (zombieRowNodeFromLastMouseWheelEvent && zombieRowNodeFromLastMouseWheelEvent != rowNode) {
+ if (options.enableAsyncPostRenderCleanup && zombieRowPostProcessedFromLastMouseWheelEvent) {
+ queuePostProcessedRowForCleanup(zombieRowCacheFromLastMouseWheelEvent,
+ zombieRowPostProcessedFromLastMouseWheelEvent);
+ } else {
+ $canvas[0].removeChild(zombieRowNodeFromLastMouseWheelEvent);
+ }
+ zombieRowNodeFromLastMouseWheelEvent = null;
+ zombieRowCacheFromLastMouseWheelEvent = null;
+ zombieRowPostProcessedFromLastMouseWheelEvent = null;
+
+ if (options.enableAsyncPostRenderCleanup) { startPostProcessingCleanup(); }
+ }
+ rowNodeFromLastMouseWheelEvent = rowNode;
+ }
+}
+
+function handleDragInit(e, dd) {
+ var cell = getCellFromEvent(e);
+ if (!cell || !cellExists(cell.row, cell.cell)) {
+ return false;
+ }
+
+ var retval = trigger(self.onDragInit, dd, e);
+ if (e.isImmediatePropagationStopped()) {
+ return retval;
+ }
+
+ // if nobody claims to be handling drag'n'drop by stopping immediate propagation,
+ // cancel out of it
+ return false;
+}
+
+function handleDragStart(e, dd) {
+ var cell = getCellFromEvent(e);
+ if (!cell || !cellExists(cell.row, cell.cell)) {
+ return false;
+ }
+
+ var retval = trigger(self.onDragStart, dd, e);
+ if (e.isImmediatePropagationStopped()) {
+ return retval;
+ }
+
+ return false;
+}
+
+function handleDrag(e, dd) {
+ return trigger(self.onDrag, dd, e);
+}
+
+function handleDragEnd(e, dd) {
+ trigger(self.onDragEnd, dd, e);
+}
+
+function handleKeyDown(e) {
+ trigger(self.onKeyDown, {row: activeRow, cell: activeCell, grid: self}, e);
+ var handled = e.isImmediatePropagationStopped();
+ var keyCode = Slick.keyCode;
+
+ if (!handled) {
+ if (!e.shiftKey && !e.altKey && !e.ctrlKey) {
+ // editor may specify an array of keys to bubble
+ if (options.editable && currentEditor && currentEditor.keyCaptureList) {
+ if (currentEditor.keyCaptureList.indexOf( e.which ) > -1) {
+ return;
+ }
+ }
+ if (e.which == keyCode.ESCAPE) {
+ if (!getEditorLock().isActive()) {
+ return; // no editing mode to cancel, allow bubbling and default processing (exit without cancelling the event)
+ }
+ cancelEditAndSetFocus();
+ } else if (e.which == keyCode.PAGE_DOWN) {
+ navigatePageDown();
+ handled = true;
+ } else if (e.which == keyCode.PAGE_UP) {
+ navigatePageUp();
+ handled = true;
+ } else if (e.which == keyCode.LEFT) {
+ handled = navigateLeft();
+ } else if (e.which == keyCode.RIGHT) {
+ handled = navigateRight();
+ } else if (e.which == keyCode.UP) {
+ handled = navigateUp();
+ } else if (e.which == keyCode.DOWN) {
+ handled = navigateDown();
+ } else if (e.which == keyCode.TAB) {
+ handled = navigateNext();
+ } else if (e.which == keyCode.ENTER) {
+ if (options.editable) {
+ if (currentEditor) {
+ // adding new row
+ if (activeRow === getDataLength()) {
+ navigateDown();
+ } else {
+ commitEditAndSetFocus();
+ }
+ } else {
+ if (getEditorLock().commitCurrentEdit()) {
+ makeActiveCellEditable();
+ }
+ }
+ }
+ handled = true;
+ }
+ } else if (e.which == keyCode.TAB && e.shiftKey && !e.ctrlKey && !e.altKey) {
+ handled = navigatePrev();
+ }
+ }
+
+ if (handled) {
+ // the event has been handled so don't let parent element (bubbling/propagation) or browser (default) handle it
+ e.stopPropagation();
+ e.preventDefault();
+ try {
+ e.originalEvent.keyCode = 0; // prevent default behaviour for special keys in IE browsers (F3, F5, etc.)
+ }
+ // ignore exceptions - setting the original event's keycode throws access denied exception for "Ctrl"
+ // (hitting control key only, nothing else), "Shift" (maybe others)
+ catch (error) {
+ }
+ }
+}
+
+function handleClick(e) {
+ if (!currentEditor) {
+ // if this click resulted in some cell child node getting focus,
+ // don't steal it back - keyboard events will still bubble up
+ // IE9+ seems to default DIVs to tabIndex=0 instead of -1, so check for cell clicks directly.
+ if (e.target != document.activeElement || $(e.target).hasClass("slick-cell")) {
+ setFocus();
+ }
+ }
+
+ var cell = getCellFromEvent(e);
+ if (!cell || (currentEditor !== null && activeRow == cell.row && activeCell == cell.cell)) {
+ return;
+ }
+
+ trigger(self.onClick, {row: cell.row, cell: cell.cell, grid: self}, e);
+ if (e.isImmediatePropagationStopped()) {
+ return;
+ }
+
+ // this optimisation causes trouble - MLeibman #329
+ //if ((activeCell != cell.cell || activeRow != cell.row) && canCellBeActive(cell.row, cell.cell)) {
+ if (canCellBeActive(cell.row, cell.cell)) {
+ if (!getEditorLock().isActive() || getEditorLock().commitCurrentEdit()) {
+ scrollRowIntoView(cell.row, false);
+ setActiveCellInternal(getCellNode(cell.row, cell.cell));
+ }
+ }
+}
+
+function handleContextMenu(e) {
+ var $cell = $(e.target).closest(".slick-cell", $canvas);
+ if ($cell.length === 0) {
+ return;
+ }
+
+ // are we editing this cell?
+ if (activeCellNode === $cell[0] && currentEditor !== null) {
+ return;
+ }
+
+ trigger(self.onContextMenu, {grid: self}, e);
+}
+
+function handleDblClick(e) {
+ var cell = getCellFromEvent(e);
+ if (!cell || (currentEditor !== null && activeRow == cell.row && activeCell == cell.cell)) {
+ return;
+ }
+
+ trigger(self.onDblClick, {row: cell.row, cell: cell.cell, grid: self}, e);
+ if (e.isImmediatePropagationStopped()) {
+ return;
+ }
+
+ if (options.editable) {
+ gotoCell(cell.row, cell.cell, true);
+ }
+}
+
+function handleHeaderMouseEnter(e) {
+ trigger(self.onHeaderMouseEnter, {
+ "column": $(this).data("column"),
+ "grid": self
+ }, e);
+}
+
+function handleHeaderMouseLeave(e) {
+ trigger(self.onHeaderMouseLeave, {
+ "column": $(this).data("column"),
+ "grid": self
+ }, e);
+}
+
+function handleHeaderContextMenu(e) {
+ var $header = $(e.target).closest(".slick-header-column", ".slick-header-columns");
+ var column = $header && $header.data("column");
+ trigger(self.onHeaderContextMenu, {column: column, grid: self}, e);
+}
+
+function handleHeaderClick(e) {
+ var $header = $(e.target).closest(".slick-header-column", ".slick-header-columns");
+ var column = $header && $header.data("column");
+ if (column) {
+ trigger(self.onHeaderClick, {column: column, grid: self}, e);
+ }
+}
+
+function handleMouseEnter(e) {
+ trigger(self.onMouseEnter, {grid: self}, e);
+}
+
+function handleMouseLeave(e) {
+ trigger(self.onMouseLeave, {grid: self}, e);
+}
+
+function cellExists(row, cell) {
+ return !(row < 0 || row >= getDataLength() || cell < 0 || cell >= columns.length);
+}
+
+function getCellFromPoint(x, y) {
+ var row = getRowFromPosition(y);
+ var cell = 0;
+
+ var w = 0;
+ for (var i = 0; i < columns.length && w < x; i++) {
+ w += columns[i].width;
+ cell++;
+ }
+
+ if (cell < 0) {
+ cell = 0;
+ }
+
+ return {row: row, cell: cell - 1};
+}
+
+function getCellFromNode(cellNode) {
+ // read column number from .l
CSS class
+ var cls = /l\d+/.exec(cellNode.className);
+ if (!cls) {
+ throw "getCellFromNode: cannot get cell - " + cellNode.className;
+ }
+ return parseInt(cls[0].substr(1, cls[0].length - 1), 10);
+}
+
+function getRowFromNode(rowNode) {
+ for (var row in rowsCache) {
+ if (rowsCache[row].rowNode === rowNode) {
+ return row | 0;
+ }
+ }
+
+ return null;
+}
+
+function getCellFromEvent(e) {
+ var $cell = $(e.target).closest(".slick-cell", $canvas);
+ if (!$cell.length) {
+ return null;
+ }
+
+ var row = getRowFromNode($cell[0].parentNode);
+ var cell = getCellFromNode($cell[0]);
+
+ if (row == null || cell == null) {
+ return null;
+ } else {
+ return {
+ "row": row,
+ "cell": cell
+ };
+ }
+}
+
+function getCellNodeBox(row, cell) {
+ if (!cellExists(row, cell)) {
+ return null;
+ }
+
+ var y1 = getRowTop(row);
+ var y2 = y1 + options.rowHeight - 1;
+ var x1 = 0;
+ for (var i = 0; i < cell; i++) {
+ x1 += columns[i].width;
+ }
+ var x2 = x1 + columns[cell].width;
+
+ return {
+ top: y1,
+ left: x1,
+ bottom: y2,
+ right: x2
+ };
+}
+
+//////////////////////////////////////////////////////////////////////////////////////////////
+// Cell switching
+
+function resetActiveCell() {
+ setActiveCellInternal(null, false);
+}
+
+function setFocus() {
+ if (tabbingDirection == -1) {
+ $focusSink[0].focus();
+ } else {
+ $focusSink2[0].focus();
+ }
+}
+
+function scrollCellIntoView(row, cell, doPaging) {
+ scrollRowIntoView(row, doPaging);
+
+ var colspan = getColspan(row, cell);
+ var left = columnPosLeft[cell],
+ right = columnPosRight[cell + (colspan > 1 ? colspan - 1 : 0)],
+ scrollRight = scrollLeft + viewportW;
+
+ if (left < scrollLeft) {
+ $viewport.scrollLeft(left);
+ handleScroll();
+ render();
+ } else if (right > scrollRight) {
+ $viewport.scrollLeft(Math.min(left, right - $viewport[0].clientWidth));
+ handleScroll();
+ render();
+ }
+}
+
+function setActiveCellInternal(newCell, opt_editMode) {
+ if (activeCellNode !== null) {
+ makeActiveCellNormal();
+ $(activeCellNode).removeClass("active");
+ if (rowsCache[activeRow]) {
+ $(rowsCache[activeRow].rowNode).removeClass("active");
+ }
+ }
+
+ var activeCellChanged = (activeCellNode !== newCell);
+ activeCellNode = newCell;
+
+ if (activeCellNode != null) {
+ activeRow = getRowFromNode(activeCellNode.parentNode);
+ activeCell = activePosX = getCellFromNode(activeCellNode);
+
+ if (opt_editMode == null) {
+ opt_editMode = (activeRow == getDataLength()) || options.autoEdit;
+ }
+
+ $(activeCellNode).addClass("active");
+ $(rowsCache[activeRow].rowNode).addClass("active");
+
+ if (options.editable && opt_editMode && isCellPotentiallyEditable(activeRow, activeCell)) {
+ clearTimeout(h_editorLoader);
+
+ if (options.asyncEditorLoading) {
+ h_editorLoader = setTimeout(function () {
+ makeActiveCellEditable();
+ }, options.asyncEditorLoadDelay);
+ } else {
+ makeActiveCellEditable();
+ }
+ }
+ } else {
+ activeRow = activeCell = null;
+ }
+
+ // this optimisation causes trouble - MLeibman #329
+ //if (activeCellChanged) {
+ trigger(self.onActiveCellChanged, getActiveCell());
+ //}
+}
+
+function clearTextSelection() {
+ if (document.selection && document.selection.empty) {
+ try {
+ //IE fails here if selected element is not in dom
+ document.selection.empty();
+ } catch (e) { }
+ } else if (window.getSelection) {
+ var sel = window.getSelection();
+ if (sel && sel.removeAllRanges) {
+ sel.removeAllRanges();
+ }
+ }
+}
+
+function isCellPotentiallyEditable(row, cell) {
+ var dataLength = getDataLength();
+ // is the data for this row loaded?
+ if (row < dataLength && !getDataItem(row)) {
+ return false;
+ }
+
+ // are we in the Add New row? can we create new from this cell?
+ if (columns[cell].cannotTriggerInsert && row >= dataLength) {
+ return false;
+ }
+
+ // does this cell have an editor?
+ if (!getEditor(row, cell)) {
+ return false;
+ }
+
+ return true;
+}
+
+function makeActiveCellNormal() {
+ if (!currentEditor) {
+ return;
+ }
+ trigger(self.onBeforeCellEditorDestroy, {editor: currentEditor, grid: self});
+ currentEditor.destroy();
+ currentEditor = null;
+
+ if (activeCellNode) {
+ var d = getDataItem(activeRow);
+ $(activeCellNode).removeClass("editable invalid");
+ if (d) {
+ var column = columns[activeCell];
+ var formatter = getFormatter(activeRow, column);
+ activeCellNode.innerHTML = formatter(activeRow, activeCell, getDataItemValueForColumn(d, column), column, d, self);
+ invalidatePostProcessingResults(activeRow);
+ }
+ }
+
+ // if there previously was text selected on a page (such as selected text in the edit cell just removed),
+ // IE can't set focus to anything else correctly
+ if (navigator.userAgent.toLowerCase().match(/msie/)) {
+ clearTextSelection();
+ }
+
+ getEditorLock().deactivate(editController);
+}
+
+function makeActiveCellEditable(editor) {
+ if (!activeCellNode) {
+ return;
+ }
+ if (!options.editable) {
+ throw "Grid : makeActiveCellEditable : should never get called when options.editable is false";
+ }
+
+ // cancel pending async call if there is one
+ clearTimeout(h_editorLoader);
+
+ if (!isCellPotentiallyEditable(activeRow, activeCell)) {
+ return;
+ }
+
+ var columnDef = columns[activeCell];
+ var item = getDataItem(activeRow);
+
+ if (trigger(self.onBeforeEditCell, {row: activeRow, cell: activeCell, item: item, column: columnDef, grid: self}) === false) {
+ setFocus();
+ return;
+ }
+
+ getEditorLock().activate(editController);
+ $(activeCellNode).addClass("editable");
+
+ var useEditor = editor || getEditor(activeRow, activeCell);
+
+ // don't clear the cell if a custom editor is passed through
+ if (!editor && !useEditor.suppressClearOnEdit) {
+ activeCellNode.innerHTML = "";
+ }
+
+ currentEditor = new useEditor({
+ grid: self,
+ gridPosition: absBox($container[0]),
+ position: absBox(activeCellNode),
+ container: activeCellNode,
+ column: columnDef,
+ item: item || {},
+ commitChanges: commitEditAndSetFocus,
+ cancelChanges: cancelEditAndSetFocus
+ });
+
+ if (item) {
+ currentEditor.loadValue(item);
+ }
+
+ serializedEditorValue = currentEditor.serializeValue();
+
+ if (currentEditor.position) {
+ handleActiveCellPositionChange();
+ }
+}
+
+function commitEditAndSetFocus() {
+ // if the commit fails, it would do so due to a validation error
+ // if so, do not steal the focus from the editor
+ if (getEditorLock().commitCurrentEdit()) {
+ setFocus();
+ if (options.autoEdit) {
+ navigateDown();
+ }
+ }
+}
+
+function cancelEditAndSetFocus() {
+ if (getEditorLock().cancelCurrentEdit()) {
+ setFocus();
+ }
+}
+
+function absBox(elem) {
+ var box = {
+ top: elem.offsetTop,
+ left: elem.offsetLeft,
+ bottom: 0,
+ right: 0,
+ width: $(elem).outerWidth(),
+ height: $(elem).outerHeight(),
+ visible: true};
+ box.bottom = box.top + box.height;
+ box.right = box.left + box.width;
+
+ // walk up the tree
+ var offsetParent = elem.offsetParent;
+ while ((elem = elem.parentNode) != document.body) {
+ if (elem == null) break;
+
+ if (box.visible && elem.scrollHeight != elem.offsetHeight && $(elem).css("overflowY") != "visible") {
+ box.visible = box.bottom > elem.scrollTop && box.top < elem.scrollTop + elem.clientHeight;
+ }
+
+ if (box.visible && elem.scrollWidth != elem.offsetWidth && $(elem).css("overflowX") != "visible") {
+ box.visible = box.right > elem.scrollLeft && box.left < elem.scrollLeft + elem.clientWidth;
+ }
+
+ box.left -= elem.scrollLeft;
+ box.top -= elem.scrollTop;
+
+ if (elem === offsetParent) {
+ box.left += elem.offsetLeft;
+ box.top += elem.offsetTop;
+ offsetParent = elem.offsetParent;
+ }
+
+ box.bottom = box.top + box.height;
+ box.right = box.left + box.width;
+ }
+
+ return box;
+}
+
+function getActiveCellPosition() {
+ return absBox(activeCellNode);
+}
+
+function getGridPosition() {
+ return absBox($container[0])
+}
+
+function handleActiveCellPositionChange() {
+ if (!activeCellNode) {
+ return;
+ }
+
+ trigger(self.onActiveCellPositionChanged, {grid: self});
+
+ if (currentEditor) {
+ var cellBox = getActiveCellPosition();
+ if (currentEditor.show && currentEditor.hide) {
+ if (!cellBox.visible) {
+ currentEditor.hide();
+ } else {
+ currentEditor.show();
+ }
+ }
+
+ if (currentEditor.position) {
+ currentEditor.position(cellBox);
+ }
+ }
+}
+
+function getCellEditor() {
+ return currentEditor;
+}
+
+function getActiveCell() {
+ if (!activeCellNode) {
+ return null;
+ } else {
+ return {row: activeRow, cell: activeCell, grid: self};
+ }
+}
+
+function getActiveCellNode() {
+ return activeCellNode;
+}
+
+function scrollRowIntoView(row, doPaging) {
+ var rowAtTop = row * options.rowHeight;
+ var rowAtBottom = (row + 1) * options.rowHeight - viewportH + (viewportHasHScroll ? scrollbarDimensions.height : 0);
+
+ // need to page down?
+ if ((row + 1) * options.rowHeight > scrollTop + viewportH + offset) {
+ scrollTo(doPaging ? rowAtTop : rowAtBottom);
+ render();
+ }
+ // or page up?
+ else if (row * options.rowHeight < scrollTop + offset) {
+ scrollTo(doPaging ? rowAtBottom : rowAtTop);
+ render();
+ }
+}
+
+function scrollRowToTop(row) {
+ scrollTo(row * options.rowHeight);
+ render();
+}
+
+function scrollPage(dir) {
+ var deltaRows = dir * numVisibleRows;
+ scrollTo((getRowFromPosition(scrollTop) + deltaRows) * options.rowHeight);
+ render();
+
+ if (options.enableCellNavigation && activeRow != null) {
+ var row = activeRow + deltaRows;
+ var dataLengthIncludingAddNew = getDataLengthIncludingAddNew();
+ if (row >= dataLengthIncludingAddNew) {
+ row = dataLengthIncludingAddNew - 1;
+ }
+ if (row < 0) {
+ row = 0;
+ }
+
+ var cell = 0, prevCell = null;
+ var prevActivePosX = activePosX;
+ while (cell <= activePosX) {
+ if (canCellBeActive(row, cell)) {
+ prevCell = cell;
+ }
+ cell += getColspan(row, cell);
+ }
+
+ if (prevCell !== null) {
+ setActiveCellInternal(getCellNode(row, prevCell));
+ activePosX = prevActivePosX;
+ } else {
+ resetActiveCell();
+ }
+ }
+}
+
+function navigatePageDown() {
+ scrollPage(1);
+}
+
+function navigatePageUp() {
+ scrollPage(-1);
+}
+
+function getColspan(row, cell) {
+ var metadata = data.getItemMetadata && data.getItemMetadata(row);
+ if (!metadata || !metadata.columns) {
+ return 1;
+ }
+
+ var columnData = metadata.columns[columns[cell].id] || metadata.columns[cell];
+ var colspan = (columnData && columnData.colspan);
+ if (colspan === "*") {
+ colspan = columns.length - cell;
+ } else {
+ colspan = colspan || 1;
+ }
+
+ return colspan;
+}
+
+function findFirstFocusableCell(row) {
+ var cell = 0;
+ while (cell < columns.length) {
+ if (canCellBeActive(row, cell)) {
+ return cell;
+ }
+ cell += getColspan(row, cell);
+ }
+ return null;
+}
+
+function findLastFocusableCell(row) {
+ var cell = 0;
+ var lastFocusableCell = null;
+ while (cell < columns.length) {
+ if (canCellBeActive(row, cell)) {
+ lastFocusableCell = cell;
+ }
+ cell += getColspan(row, cell);
+ }
+ return lastFocusableCell;
+}
+
+function gotoRight(row, cell, posX) {
+ if (cell >= columns.length) {
+ return null;
+ }
+
+ do {
+ cell += getColspan(row, cell);
+ }
+ while (cell < columns.length && !canCellBeActive(row, cell));
+
+ if (cell < columns.length) {
+ return {
+ "row": row,
+ "cell": cell,
+ "posX": cell
+ };
+ }
+ return null;
+}
+
+function gotoLeft(row, cell, posX) {
+ if (cell <= 0) {
+ return null;
+ }
+
+ var firstFocusableCell = findFirstFocusableCell(row);
+ if (firstFocusableCell === null || firstFocusableCell >= cell) {
+ return null;
+ }
+
+ var prev = {
+ "row": row,
+ "cell": firstFocusableCell,
+ "posX": firstFocusableCell
+ };
+ var pos;
+ while (true) {
+ pos = gotoRight(prev.row, prev.cell, prev.posX);
+ if (!pos) {
+ return null;
+ }
+ if (pos.cell >= cell) {
+ return prev;
+ }
+ prev = pos;
+ }
+}
+
+function gotoDown(row, cell, posX) {
+ var prevCell;
+ var dataLengthIncludingAddNew = getDataLengthIncludingAddNew();
+ while (true) {
+ if (++row >= dataLengthIncludingAddNew) {
+ return null;
+ }
+
+ prevCell = cell = 0;
+ while (cell <= posX) {
+ prevCell = cell;
+ cell += getColspan(row, cell);
+ }
+
+ if (canCellBeActive(row, prevCell)) {
+ return {
+ "row": row,
+ "cell": prevCell,
+ "posX": posX
+ };
+ }
+ }
+}
+
+function gotoUp(row, cell, posX) {
+ var prevCell;
+ while (true) {
+ if (--row < 0) {
+ return null;
+ }
+
+ prevCell = cell = 0;
+ while (cell <= posX) {
+ prevCell = cell;
+ cell += getColspan(row, cell);
+ }
+
+ if (canCellBeActive(row, prevCell)) {
+ return {
+ "row": row,
+ "cell": prevCell,
+ "posX": posX
+ };
+ }
+ }
+}
+
+function gotoNext(row, cell, posX) {
+ if (row == null && cell == null) {
+ row = cell = posX = 0;
+ if (canCellBeActive(row, cell)) {
+ return {
+ "row": row,
+ "cell": cell,
+ "posX": cell
+ };
+ }
+ }
+
+ var pos = gotoRight(row, cell, posX);
+ if (pos) {
+ return pos;
+ }
+
+ var firstFocusableCell = null;
+ var dataLengthIncludingAddNew = getDataLengthIncludingAddNew();
+ while (++row < dataLengthIncludingAddNew) {
+ firstFocusableCell = findFirstFocusableCell(row);
+ if (firstFocusableCell !== null) {
+ return {
+ "row": row,
+ "cell": firstFocusableCell,
+ "posX": firstFocusableCell
+ };
+ }
+ }
+ return null;
+}
+
+function gotoPrev(row, cell, posX) {
+ if (row == null && cell == null) {
+ row = getDataLengthIncludingAddNew() - 1;
+ cell = posX = columns.length - 1;
+ if (canCellBeActive(row, cell)) {
+ return {
+ "row": row,
+ "cell": cell,
+ "posX": cell
+ };
+ }
+ }
+
+ var pos;
+ var lastSelectableCell;
+ while (!pos) {
+ pos = gotoLeft(row, cell, posX);
+ if (pos) {
+ break;
+ }
+ if (--row < 0) {
+ return null;
+ }
+
+ cell = 0;
+ lastSelectableCell = findLastFocusableCell(row);
+ if (lastSelectableCell !== null) {
+ pos = {
+ "row": row,
+ "cell": lastSelectableCell,
+ "posX": lastSelectableCell
+ };
+ }
+ }
+ return pos;
+}
+
+function navigateRight() {
+ return navigate("right");
+}
+
+function navigateLeft() {
+ return navigate("left");
+}
+
+function navigateDown() {
+ return navigate("down");
+}
+
+function navigateUp() {
+ return navigate("up");
+}
+
+function navigateNext() {
+ return navigate("next");
+}
+
+function navigatePrev() {
+ return navigate("prev");
+}
+
+/**
+ * @param {string} dir Navigation direction.
+ * @return {boolean} Whether navigation resulted in a change of active cell.
+ */
+function navigate(dir) {
+ if (!options.enableCellNavigation) {
+ return false;
+ }
+
+ if (!activeCellNode && dir != "prev" && dir != "next") {
+ return false;
+ }
+
+ if (!getEditorLock().commitCurrentEdit()) {
+ return true;
+ }
+ setFocus();
+
+ var tabbingDirections = {
+ "up": -1,
+ "down": 1,
+ "left": -1,
+ "right": 1,
+ "prev": -1,
+ "next": 1
+ };
+ tabbingDirection = tabbingDirections[dir];
+
+ var stepFunctions = {
+ "up": gotoUp,
+ "down": gotoDown,
+ "left": gotoLeft,
+ "right": gotoRight,
+ "prev": gotoPrev,
+ "next": gotoNext
+ };
+ var stepFn = stepFunctions[dir];
+ var pos = stepFn(activeRow, activeCell, activePosX);
+ if (pos) {
+ var isAddNewRow = (pos.row == getDataLength());
+ scrollCellIntoView(pos.row, pos.cell, !isAddNewRow);
+ setActiveCellInternal(getCellNode(pos.row, pos.cell));
+ activePosX = pos.posX;
+ return true;
+ } else {
+ setActiveCellInternal(getCellNode(activeRow, activeCell));
+ return false;
+ }
+}
+
+function getCellNode(row, cell) {
+ if (rowsCache[row]) {
+ ensureCellNodesInRowsCache(row);
+ return rowsCache[row].cellNodesByColumnIdx[cell];
+ }
+ return null;
+}
+
+function setActiveCell(row, cell) {
+ if (!initialized) { return; }
+ if (row > getDataLength() || row < 0 || cell >= columns.length || cell < 0) {
+ return;
+ }
+
+ if (!options.enableCellNavigation) {
+ return;
+ }
+
+ scrollCellIntoView(row, cell, false);
+ setActiveCellInternal(getCellNode(row, cell), false);
+}
+
+function canCellBeActive(row, cell) {
+ if (!options.enableCellNavigation || row >= getDataLengthIncludingAddNew() ||
+ row < 0 || cell >= columns.length || cell < 0) {
+ return false;
+ }
+
+ var rowMetadata = data.getItemMetadata && data.getItemMetadata(row);
+ if (rowMetadata && typeof rowMetadata.focusable === "boolean") {
+ return rowMetadata.focusable;
+ }
+
+ var columnMetadata = rowMetadata && rowMetadata.columns;
+ if (columnMetadata && columnMetadata[columns[cell].id] && typeof columnMetadata[columns[cell].id].focusable === "boolean") {
+ return columnMetadata[columns[cell].id].focusable;
+ }
+ if (columnMetadata && columnMetadata[cell] && typeof columnMetadata[cell].focusable === "boolean") {
+ return columnMetadata[cell].focusable;
+ }
+
+ return columns[cell].focusable;
+}
+
+function canCellBeSelected(row, cell) {
+ if (row >= getDataLength() || row < 0 || cell >= columns.length || cell < 0) {
+ return false;
+ }
+
+ var rowMetadata = data.getItemMetadata && data.getItemMetadata(row);
+ if (rowMetadata && typeof rowMetadata.selectable === "boolean") {
+ return rowMetadata.selectable;
+ }
+
+ var columnMetadata = rowMetadata && rowMetadata.columns && (rowMetadata.columns[columns[cell].id] || rowMetadata.columns[cell]);
+ if (columnMetadata && typeof columnMetadata.selectable === "boolean") {
+ return columnMetadata.selectable;
+ }
+
+ return columns[cell].selectable;
+}
+
+function gotoCell(row, cell, forceEdit) {
+ if (!initialized) { return; }
+ if (!canCellBeActive(row, cell)) {
+ return;
+ }
+
+ if (!getEditorLock().commitCurrentEdit()) {
+ return;
+ }
+
+ scrollCellIntoView(row, cell, false);
+
+ var newCell = getCellNode(row, cell);
+
+ // if selecting the 'add new' row, start editing right away
+ setActiveCellInternal(newCell, forceEdit || (row === getDataLength()) || options.autoEdit);
+
+ // if no editor was created, set the focus back on the grid
+ if (!currentEditor) {
+ setFocus();
+ }
+}
+
+
+//////////////////////////////////////////////////////////////////////////////////////////////
+// IEditor implementation for the editor lock
+
+function commitCurrentEdit() {
+ var item = getDataItem(activeRow);
+ var column = columns[activeCell];
+
+ if (currentEditor) {
+ if (currentEditor.isValueChanged()) {
+ var validationResults = currentEditor.validate();
+
+ if (validationResults.valid) {
+ if (activeRow < getDataLength()) {
+ var editCommand = {
+ row: activeRow,
+ cell: activeCell,
+ editor: currentEditor,
+ serializedValue: currentEditor.serializeValue(),
+ prevSerializedValue: serializedEditorValue,
+ execute: function () {
+ this.editor.applyValue(item, this.serializedValue);
+ updateRow(this.row);
+ trigger(self.onCellChange, {
+ row: activeRow,
+ cell: activeCell,
+ item: item,
+ grid: self
+ });
+ },
+ undo: function () {
+ this.editor.applyValue(item, this.prevSerializedValue);
+ updateRow(this.row);
+ trigger(self.onCellChange, {
+ row: activeRow,
+ cell: activeCell,
+ item: item,
+ grid: self
+ });
+ }
+ };
+
+ if (options.editCommandHandler) {
+ makeActiveCellNormal();
+ options.editCommandHandler(item, column, editCommand);
+ } else {
+ editCommand.execute();
+ makeActiveCellNormal();
+ }
+
+ } else {
+ var newItem = {};
+ currentEditor.applyValue(newItem, currentEditor.serializeValue());
+ makeActiveCellNormal();
+ trigger(self.onAddNewRow, {item: newItem, column: column, grid: self});
+ }
+
+ // check whether the lock has been re-acquired by event handlers
+ return !getEditorLock().isActive();
+ } else {
+ // Re-add the CSS class to trigger transitions, if any.
+ $(activeCellNode).removeClass("invalid");
+ $(activeCellNode).width(); // force layout
+ $(activeCellNode).addClass("invalid");
+
+ trigger(self.onValidationError, {
+ editor: currentEditor,
+ cellNode: activeCellNode,
+ validationResults: validationResults,
+ row: activeRow,
+ cell: activeCell,
+ column: column,
+ grid: self
+ });
+
+ currentEditor.focus();
+ return false;
+ }
+ }
+
+ makeActiveCellNormal();
+ }
+ return true;
+}
+
+function cancelCurrentEdit() {
+ makeActiveCellNormal();
+ return true;
+}
+
+function rowsToRanges(rows) {
+ var ranges = [];
+ var lastCell = columns.length - 1;
+ for (var i = 0; i < rows.length; i++) {
+ ranges.push(new Slick.Range(rows[i], 0, rows[i], lastCell));
+ }
+ return ranges;
+}
+
+function getSelectedRows() {
+ if (!selectionModel) {
+ throw "Selection model is not set";
+ }
+ return selectedRows;
+}
+
+function setSelectedRows(rows) {
+ if (!selectionModel) {
+ throw "Selection model is not set";
+ }
+ selectionModel.setSelectedRanges(rowsToRanges(rows));
+}
+
+$.extend(this, {
+ slickGridVersion: '2.3.3',
+
+ // Events
+ onScroll: new Slick.Event(),
+ onSort: new Slick.Event(),
+ onHeaderMouseEnter: new Slick.Event(),
+ onHeaderMouseLeave: new Slick.Event(),
+ onHeaderContextMenu: new Slick.Event(),
+ onHeaderClick: new Slick.Event(),
+ onHeaderCellRendered: new Slick.Event(),
+ onBeforeHeaderCellDestroy: new Slick.Event(),
+ onHeaderRowCellRendered: new Slick.Event(),
+ onFooterRowCellRendered: new Slick.Event(),
+ onBeforeHeaderRowCellDestroy: new Slick.Event(),
+ onBeforeFooterRowCellDestroy: new Slick.Event(),
+ onMouseEnter: new Slick.Event(),
+ onMouseLeave: new Slick.Event(),
+ onClick: new Slick.Event(),
+ onDblClick: new Slick.Event(),
+ onContextMenu: new Slick.Event(),
+ onKeyDown: new Slick.Event(),
+ onAddNewRow: new Slick.Event(),
+ onValidationError: new Slick.Event(),
+ onViewportChanged: new Slick.Event(),
+ onColumnsReordered: new Slick.Event(),
+ onColumnsResized: new Slick.Event(),
+ onCellChange: new Slick.Event(),
+ onBeforeEditCell: new Slick.Event(),
+ onBeforeCellEditorDestroy: new Slick.Event(),
+ onBeforeDestroy: new Slick.Event(),
+ onActiveCellChanged: new Slick.Event(),
+ onActiveCellPositionChanged: new Slick.Event(),
+ onDragInit: new Slick.Event(),
+ onDragStart: new Slick.Event(),
+ onDrag: new Slick.Event(),
+ onDragEnd: new Slick.Event(),
+ onSelectedRowsChanged: new Slick.Event(),
+ onCellCssStylesChanged: new Slick.Event(),
+
+ // Methods
+ registerPlugin: registerPlugin,
+ unregisterPlugin: unregisterPlugin,
+ getColumns: getColumns,
+ setColumns: setColumns,
+ getColumnIndex: getColumnIndex,
+ updateColumnHeader: updateColumnHeader,
+ setSortColumn: setSortColumn,
+ setSortColumns: setSortColumns,
+ getSortColumns: getSortColumns,
+ autosizeColumns: autosizeColumns,
+ getOptions: getOptions,
+ setOptions: setOptions,
+ getData: getData,
+ getDataLength: getDataLength,
+ getDataItem: getDataItem,
+ setData: setData,
+ getSelectionModel: getSelectionModel,
+ setSelectionModel: setSelectionModel,
+ getSelectedRows: getSelectedRows,
+ setSelectedRows: setSelectedRows,
+ getContainerNode: getContainerNode,
+ updatePagingStatusFromView: updatePagingStatusFromView,
+
+ render: render,
+ invalidate: invalidate,
+ invalidateRow: invalidateRow,
+ invalidateRows: invalidateRows,
+ invalidateAllRows: invalidateAllRows,
+ updateCell: updateCell,
+ updateRow: updateRow,
+ getViewport: getVisibleRange,
+ getRenderedRange: getRenderedRange,
+ resizeCanvas: resizeCanvas,
+ updateRowCount: updateRowCount,
+ scrollRowIntoView: scrollRowIntoView,
+ scrollRowToTop: scrollRowToTop,
+ scrollCellIntoView: scrollCellIntoView,
+ getCanvasNode: getCanvasNode,
+ focus: setFocus,
+
+ getCellFromPoint: getCellFromPoint,
+ getCellFromEvent: getCellFromEvent,
+ getActiveCell: getActiveCell,
+ setActiveCell: setActiveCell,
+ getActiveCellNode: getActiveCellNode,
+ getActiveCellPosition: getActiveCellPosition,
+ resetActiveCell: resetActiveCell,
+ editActiveCell: makeActiveCellEditable,
+ getCellEditor: getCellEditor,
+ getCellNode: getCellNode,
+ getCellNodeBox: getCellNodeBox,
+ canCellBeSelected: canCellBeSelected,
+ canCellBeActive: canCellBeActive,
+ navigatePrev: navigatePrev,
+ navigateNext: navigateNext,
+ navigateUp: navigateUp,
+ navigateDown: navigateDown,
+ navigateLeft: navigateLeft,
+ navigateRight: navigateRight,
+ navigatePageUp: navigatePageUp,
+ navigatePageDown: navigatePageDown,
+ gotoCell: gotoCell,
+ getTopPanel: getTopPanel,
+ setTopPanelVisibility: setTopPanelVisibility,
+ setHeaderRowVisibility: setHeaderRowVisibility,
+ getHeaderRow: getHeaderRow,
+ getHeaderRowColumn: getHeaderRowColumn,
+ setFooterRowVisibility: setFooterRowVisibility,
+ getFooterRow: getFooterRow,
+ getFooterRowColumn: getFooterRowColumn,
+ getGridPosition: getGridPosition,
+ flashCell: flashCell,
+ addCellCssStyles: addCellCssStyles,
+ setCellCssStyles: setCellCssStyles,
+ removeCellCssStyles: removeCellCssStyles,
+ getCellCssStyles: getCellCssStyles,
+
+ init: finishInitialization,
+ destroy: destroy,
+
+ // IEditor implementation
+ getEditorLock: getEditorLock,
+ getEditController: getEditController
+});
+
+ init();
+}
+
+export default Grid;
+
diff --git a/src/js/util.js b/src/js/util.js
new file mode 100644
index 0000000..4875c4b
--- /dev/null
+++ b/src/js/util.js
@@ -0,0 +1,8 @@
+/* global $ */
+
+export function defined(value) {
+ return (typeof value !== 'undefined');
+}
+
+export const extend = $.extend;
+
diff --git a/src/scss/grid.scss b/src/scss/grid.scss
new file mode 100644
index 0000000..321861d
--- /dev/null
+++ b/src/scss/grid.scss
@@ -0,0 +1,168 @@
+$margin: 15px;
+$padding: 15px;
+$color-border: #d3d3d3;
+$color-background: #f8f8f8;
+$color-link: #4790cd;
+
+.grid-header,
+.grid-header-row,
+.grid-footer-row {
+ width: 100%;
+ overflow: hidden;
+ border-left: 0px !important;
+}
+
+.grid-header-columns,
+.grid-headerrow-columns,
+.grid-footerrow-columns {
+ position: relative;
+ white-space: nowrap;
+ cursor: default;
+ overflow: hidden;
+}
+
+.grid-column {
+ font-weight: bold;
+ font-size: 13px;
+ background-color: $color-background;
+ position: relative;
+ display: inline-block;
+ overflow: hidden;
+ -o-text-overflow: ellipsis;
+ text-overflow: ellipsis;
+ height: 38px;
+ margin: 0;
+ padding: ($padding / 3 * 2) $padding;
+ border: 0;
+ border-right: 1px dashed $color-border;
+ border-bottom: 1px solid $color-border;
+ float: left;
+}
+
+.headerrow-column,
+.footerrow-column {
+ padding: 4px;
+}
+
+.header-column-sorted {
+ font-style: italic;
+}
+
+.grid-column-sort {
+ display: inline-block;
+ width: 8px;
+ height: 5px;
+ margin-left: 4px;
+ margin-top: 6px;
+ float: left;
+}
+
+.grid-column-sort-desc {
+ background: url(http://github.com/images/sort-desc.gif);
+}
+
+.grid-column-sort-asc {
+ background: url(http://github.com/images/sort-asc.gif);
+}
+
+.grid-column-resize {
+ position: absolute;
+ font-size: 0.1px;
+ display: block;
+ cursor: col-resize;
+ width: 4px;
+ right: 0px;
+ top: 0;
+ height: 100%;
+}
+
+.grid-column-sortable {
+ color: $color-link;
+}
+
+.grid-canvas {
+ position: relative;
+ outline: 0;
+}
+
+.grid-row, .grid-row {
+ position: absolute;
+ border: 0px;
+ width: 100%;
+}
+
+.grid-cell, .grid-headerrow-column , .grid-footerrow-column{
+ position: absolute;
+ border: 1px solid transparent;
+ border-right: 1px dotted silver;
+ border-bottom-color: silver;
+ overflow: hidden;
+ -o-text-overflow: ellipsis;
+ text-overflow: ellipsis;
+ vertical-align: middle;
+ z-index: 1;
+ padding: 1px 2px 2px 1px;
+ margin: 0;
+ white-space: nowrap;
+ cursor: default;
+}
+.grid-cell, .grid-headerrow-column{
+ border-bottom-color: silver;
+}
+.grid-footerrow-column {
+ border-top-color: silver;
+}
+
+.grid-group {
+}
+
+.grid-group-toggle {
+ display: inline-block;
+}
+
+.grid-cell.highlighted {
+ background: lightskyblue;
+ background: rgba(0, 0, 255, 0.2);
+ -webkit-transition: all 0.5s;
+ -moz-transition: all 0.5s;
+ -o-transition: all 0.5s;
+ transition: all 0.5s;
+}
+
+.grid-cell.flashing {
+ border: 1px solid red !important;
+}
+
+.grid-cell.editable {
+ z-index: 11;
+ overflow: visible;
+ background: white;
+ border-color: black;
+ border-style: solid;
+}
+
+.grid-cell:focus {
+ outline: none;
+}
+
+.grid-reorder-proxy {
+ display: inline-block;
+ background: blue;
+ opacity: 0.15;
+ filter: alpha(opacity = 15);
+ cursor: move;
+}
+
+.grid-reorder-guide {
+ display: inline-block;
+ height: 2px;
+ background: blue;
+ opacity: 0.7;
+ filter: alpha(opacity = 70);
+}
+
+.grid-selection {
+ z-index: 10;
+ position: absolute;
+ border: 2px dashed black;
+}
diff --git a/src/scss/pager.css b/src/scss/pager.css
new file mode 100644
index 0000000..8973dcf
--- /dev/null
+++ b/src/scss/pager.css
@@ -0,0 +1,41 @@
+.slick-pager {
+ width: 100%;
+ height: 26px;
+ border: 1px solid gray;
+ border-top: 0;
+ background: url('http://github.com/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;
+}