app/assets/javascripts/SlickGrid/2.02/slick.grid.js
/**
* @license
* (c) 2009-2013 Michael Leibman
* michael{dot}leibman{at}gmail{dot}com
* http://github.com/mleibman/slickgrid
*
* Distributed under MIT license.
* All rights reserved.
*
* SlickGrid v2.2
*
* NOTES:
* Cell/row DOM manipulations are done directly bypassing jQuery's DOM manipulation methods.
* This increases the speed dramatically, but can only be done safely because there are no event handlers
* or data associated with any cell/row DOM nodes. Cell editors must make sure they implement .destroy()
* and do proper cleanup.
*/
// make sure required JavaScript modules are loaded
if (typeof jQuery === "undefined") {
throw "SlickGrid requires jquery module to be loaded";
}
if (!jQuery.fn.drag) {
throw "SlickGrid requires jquery.event.drag module to be loaded";
}
if (typeof Slick === "undefined") {
throw "slick.core.js not loaded";
}
(function ($) {
// Slick.Grid
$.extend(true, window, {
Slick: {
Grid: SlickGrid
}
});
// shared across all grids on the page
var scrollbarDimensions;
var maxSupportedCssHeight; // browser's breaking point
//////////////////////////////////////////////////////////////////////////////////////////////
// SlickGrid class implementation (available as Slick.Grid)
/**
* Creates a new instance of the grid.
* @class SlickGrid
* @constructor
* @param {Node} container Container node to create the grid in.
* @param {Array,Object} data An array of objects for databinding.
* @param {Array} columns An array of column definitions.
* @param {Object} options Grid options.
**/
function SlickGrid(container, data, columns, options) {
// settings
var defaults = {
explicitInitialization: false,
rowHeight: 25,
defaultColumnWidth: 80,
enableAddRow: false,
leaveSpaceForNewRows: false,
editable: false,
autoEdit: true,
enableCellNavigation: true,
enableColumnReorder: true,
asyncEditorLoading: false,
asyncEditorLoadDelay: 100,
forceFitColumns: false,
enableAsyncPostRender: false,
asyncPostRenderDelay: 50,
autoHeight: false,
editorLock: Slick.GlobalEditorLock,
showHeaderRow: false,
headerRowHeight: 25,
showTopPanel: false,
topPanelHeight: 25,
formatterFactory: null,
editorFactory: null,
cellFlashingCssClass: "flashing",
selectedCellCssClass: "selected",
multiSelect: true,
enableTextSelectionOnCells: false,
dataItemColumnValueExtractor: null,
fullWidthRows: false,
multiColumnSort: false,
defaultFormatter: defaultFormatter,
forceSyncScrolling: false
};
var columnDefaults = {
name: "",
resizable: true,
sortable: false,
minWidth: 30,
rerenderOnResize: false,
headerCssClass: null,
defaultSortAsc: true,
focusable: true,
selectable: true
};
// scroller
var th; // virtual height
var h; // real scrollable height
var ph; // page height
var n; // number of pages
var cj; // "jumpiness" coefficient
var page = 0; // current page
var offset = 0; // current page offset
var vScrollDir = 1;
// private
var initialized = false;
var $container;
var uid = "slickgrid_" + Math.round(1000000 * Math.random());
var self = this;
var $focusSink, $focusSink2;
var $headerScroller;
var $headers;
var $headerRow, $headerRowScroller, $headerRowSpacer;
var $topPanelScroller;
var $topPanel;
var $viewport;
var $canvas;
var $style;
var $boundAncestors;
var stylesheet, columnCssRulesL, columnCssRulesR;
var viewportH, viewportW;
var canvasWidth;
var viewportHasHScroll, viewportHasVScroll;
var headerColumnWidthDiff = 0, headerColumnHeightDiff = 0, // border+padding
cellWidthDiff = 0, cellHeightDiff = 0;
var absoluteColumnMinWidth;
var numberOfRows = 0;
var tabbingDirection = 1;
var activePosX;
var activeRow, activeCell;
var activeCellNode = null;
var currentEditor = null;
var serializedEditorValue;
var editController;
var rowsCache = {};
var renderedRows = 0;
var numVisibleRows;
var prevScrollTop = 0;
var scrollTop = 0;
var lastRenderedScrollTop = 0;
var lastRenderedScrollLeft = 0;
var prevScrollLeft = 0;
var scrollLeft = 0;
var selectionModel;
var selectedRows = [];
var plugins = [];
var cellCssClasses = {};
var columnsById = {};
var sortColumns = [];
var columnPosLeft = [];
var columnPosRight = [];
// async call handles
var h_editorLoader = null;
var h_render = null;
var h_postrender = null;
var postProcessedRows = {};
var postProcessToRow = null;
var postProcessFromRow = null;
// perf counters
var counter_rows_rendered = 0;
var counter_rows_removed = 0;
//////////////////////////////////////////////////////////////////////////////////////////////
// Initialization
function init() {
$container = $(container);
if ($container.length < 1) {
throw new Error("SlickGrid requires a valid container, " + container + " does not exist in the DOM.");
}
// calculate these only once and share between grid instances
maxSupportedCssHeight = maxSupportedCssHeight || getMaxSupportedCssHeight();
scrollbarDimensions = scrollbarDimensions || measureScrollbar();
options = $.extend({}, defaults, options);
validateAndEnforceOptions();
columnDefaults.width = options.defaultColumnWidth;
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;
}
}
// validate loaded JavaScript modules against requested options
if (options.enableColumnReorder && !$.fn.sortable) {
throw new Error("SlickGrid's 'enableColumnReorder = true' option requires jquery-ui.sortable module to be loaded");
}
editController = {
"commitCurrentEdit": commitCurrentEdit,
"cancelCurrentEdit": cancelCurrentEdit
};
$container
.empty()
.css("overflow", "hidden")
.css("outline", 0)
.addClass(uid)
.addClass("ui-widget");
// set up a positioning container if needed
if (!/relative|absolute|fixed/.test($container.css("position"))) {
$container.css("position", "relative");
}
$focusSink = $("<div tabIndex='0' hideFocus style='position:fixed;width:0;height:0;top:0;left:0;outline:0;'></div>").appendTo($container);
$headerScroller = $("<div class='slick-header ui-state-default' style='overflow:hidden;position:relative;' />").appendTo($container);
$headers = $("<div class='slick-header-columns' style='left:-1000px' />").appendTo($headerScroller);
$headers.width(getHeadersWidth());
$headerRowScroller = $("<div class='slick-headerrow ui-state-default' style='overflow:hidden;position:relative;' />").appendTo($container);
$headerRow = $("<div class='slick-headerrow-columns' />").appendTo($headerRowScroller);
$headerRowSpacer = $("<div style='display:block;height:1px;position:absolute;top:0;left:0;'></div>")
.css("width", getCanvasWidth() + scrollbarDimensions.width + "px")
.appendTo($headerRowScroller);
$topPanelScroller = $("<div class='slick-top-panel-scroller ui-state-default' style='overflow:hidden;position:relative;' />").appendTo($container);
$topPanel = $("<div class='slick-top-panel' style='width:10000px' />").appendTo($topPanelScroller);
if (!options.showTopPanel) {
$topPanelScroller.hide();
}
if (!options.showHeaderRow) {
$headerRowScroller.hide();
}
$viewport = $("<div class='slick-viewport' style='width:100%;overflow:auto;outline:0;position:relative;;'>").appendTo($container);
$viewport.css("overflow-y", options.autoHeight ? "hidden" : "auto");
$canvas = $("<div class='grid-canvas' />").appendTo($viewport);
$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 SlickGrid 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.bind("selectstart.ui", function (event) {
return $(event.target).is("input,textarea");
});
}
updateColumnCaches();
createColumnHeaders();
setupColumnSort();
createCssRules();
resizeCanvas();
bindAncestorScrollEvents();
$container
.bind("resize.slickgrid", resizeCanvas);
$viewport
.bind("click", handleClick)
.bind("scroll", handleScroll);
$headerScroller
.bind("contextmenu", handleHeaderContextMenu)
.bind("click", handleHeaderClick)
.delegate(".slick-header-column", "mouseenter", handleHeaderMouseEnter)
.delegate(".slick-header-column", "mouseleave", handleHeaderMouseLeave);
$headerRowScroller
.bind("scroll", handleHeaderRowScroll);
$focusSink.add($focusSink2)
.bind("keydown", handleKeyDown);
$canvas
.bind("keydown", handleKeyDown)
.bind("click", handleClick)
.bind("dblclick", handleDblClick)
.bind("contextmenu", handleContextMenu)
.bind("draginit", handleDragInit)
.bind("dragstart", {distance: 3}, handleDragStart)
.bind("drag", handleDrag)
.bind("dragend", handleDragEnd)
.delegate(".slick-cell", "mouseenter", handleMouseEnter)
.delegate(".slick-cell", "mouseleave", handleMouseLeave);
}
}
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 = $("<div style='position:absolute; top:-10000px; left:-10000px; width:100px; height:100px; overflow:scroll;'></div>").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);
$headers.width(getHeadersWidth());
viewportHasHScroll = (canvasWidth > viewportW - scrollbarDimensions.width);
}
$headerRowSpacer.width(canvasWidth + (viewportHasVScroll ? scrollbarDimensions.width : 0));
if (canvasWidth != oldCanvasWidth || forceColumnWidthsUpdate) {
applyColumnWidths();
}
}
function disableSelection($target) {
if ($target && $target.jquery) {
$target
.attr("unselectable", "on")
.css("MozUserSelect", "none")
.bind("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 = $("<div style='display:none' />").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.bind("scroll." + uid, handleActiveCellPositionChange);
}
}
}
function unbindAncestorScrollEvents() {
if (!$boundAncestors) {
return;
}
$boundAncestors.unbind("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
});
$header
.attr("title", toolTip || "")
.children().eq(0).html(title);
trigger(self.onHeaderCellRendered, {
"node": $header[0],
"column": columnDef
});
}
}
function getHeaderRow() {
return $headerRow[0];
}
function getHeaderRowColumn(columnId) {
var idx = getColumnIndex(columnId);
var $header = $headerRow.children().eq(idx);
return $header && $header[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
});
}
});
$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
});
}
});
$headerRow.empty();
for (var i = 0; i < columns.length; i++) {
var m = columns[i];
var header = $("<div class='ui-state-default slick-header-column' />")
.html("<span class='slick-column-name'>" + m.name + "</span>")
.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.prepend("<span class='slick-sort-indicator' />");
}
trigger(self.onHeaderCellRendered, {
"node": header[0],
"column": m
});
if (options.showHeaderRow) {
var headerRowCell = $("<div class='ui-state-default slick-headerrow-column l" + i + " r" + i + "'></div>")
.data("column", m)
.appendTo($headerRow);
trigger(self.onHeaderRowCellRendered, {
"node": headerRowCell[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}, e);
} else {
trigger(self.onSort, {
multiColumnSort: true,
sortCols: $.map(sortColumns, function(col) {
return {sortCol: columns[getColumnIndex(col.columnId)], sortAsc: col.sortAsc };
})}, 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",
forcePlaceholderSize: true,
start: function (e, ui) {
$(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, {});
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);
$("<div class='slick-resizable-handle' />")
.appendTo(e)
.bind("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);
})
.bind("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();
}
})
.bind("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, {});
});
});
}
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"];
el = $("<div class='ui-state-default slick-header-column' style='visibility:hidden'>-</div>").appendTo($headers);
headerColumnWidthDiff = headerColumnHeightDiff = 0;
$.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 = $("<div class='slick-row' />").appendTo($canvas);
el = $("<div class='slick-cell' id='' style='visibility:hidden'>-</div>").appendTo(r);
cellWidthDiff = cellHeightDiff = 0;
$.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 = $("<style type='text/css' rel='stylesheet' />").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-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) {
if (!stylesheet) {
var sheets = document.styleSheets;
for (var 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 (var 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, {});
var i = plugins.length;
while(i--) {
unregisterPlugin(plugins[i]);
}
if (options.enableColumnReorder) {
$headers.filter(":ui-sortable").sortable("destroy");
}
unbindAncestorScrollEvents();
$container.unbind(".slickgrid");
removeCssRules();
$canvas.unbind("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];
if (!c.resizable || c.maxWidth <= c.width) {
continue;
}
var growSize = Math.min(Math.floor(growProportion * c.width) - c.width, (c.maxWidth - c.width) || 1000000) || 1;
total += growSize;
widths[i] += growSize;
}
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 (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()}, 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) {
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");
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 ? 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 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, {});
}
}
function defaultFormatter(row, cell, value, columnDef, dataContext) {
if (value == null) {
return "";
} else {
return (value + "").replace(/&/g,"&").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");
var metadata = data.getItemMetadata && data.getItemMetadata(row);
if (metadata && metadata.cssClasses) {
rowCss += " " + metadata.cssClasses;
}
stringArray.push("<div class='ui-widget-content " + rowCss + "' style='top:" + getRowTop(row) + "px'>");
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("</div>");
}
function appendCellHtml(stringArray, row, cell, colspan, item) {
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("<div class='" + cellCss + "'>");
// 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("</div>");
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);
}
}
}
function invalidate() {
updateRowCount();
invalidateAllRows();
render();
}
function invalidateAllRows() {
if (currentEditor) {
makeActiveCellNormal();
}
for (var row in rowsCache) {
removeRowFromCache(row);
}
}
function removeRowFromCache(row) {
var cacheEntry = rowsCache[row];
if (!cacheEntry) {
return;
}
$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;
for (i = 0, rl = rows.length; i < rl; i++) {
if (currentEditor && activeRow === rows[i]) {
makeActiveCellNormal();
}
if (rowsCache[rows[i]]) {
removeRowFromCache(rows[i]);
}
}
}
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);
}
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 updateRowCount() {
var dataLength = getDataLength();
if (!initialized) { return; }
numberOfRows = getDataLengthIncludingAddNew() +
(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);
// 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 l = getDataLengthIncludingAddNew() - 1;
for (var i in rowsCache) {
if (i >= l) {
removeRowFromCache(i);
}
}
if (activeCellNode && activeRow > l) {
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;
while ((cellToRemove = cellsToRemove.pop()) != null) {
cacheEntry.rowNode.removeChild(cacheEntry.cellNodesByColumnIdx[cellToRemove]);
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 invalidatePostProcessingResults(row) {
delete postProcessedRows[row];
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 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 (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, {});
}
}
trigger(self.onScroll, {scrollLeft: scrollLeft, scrollTop: scrollTop});
}
function asyncPostProcessRows() {
while (postProcessFromRow <= postProcessToRow) {
var row = (vScrollDir >= 0) ? postProcessFromRow++ : postProcessToRow--;
var cacheEntry = rowsCache[row];
if (!cacheEntry || row >= getDataLength()) {
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];
if (m.asyncPostRender && !postProcessedRows[row][columnIdx]) {
var node = cacheEntry.cellNodesByColumnIdx[columnIdx];
if (node) {
m.asyncPostRender(node, row, getDataItem(row), m);
}
postProcessedRows[row][columnIdx] = true;
}
}
h_postrender = setTimeout(asyncPostProcessRows, options.asyncPostRenderDelay);
return;
}
}
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 });
}
function removeCellCssStyles(key) {
if (!cellCssClasses[key]) {
return;
}
updateCellCssStylesOnRenderedRows(null, cellCssClasses[key]);
delete cellCssClasses[key];
trigger(self.onCellCssStylesChanged, { "key": key, "hash": null });
}
function setCellCssStyles(key, hash) {
var prevHash = cellCssClasses[key];
cellCssClasses[key] = hash;
updateCellCssStylesOnRenderedRows(hash, prevHash);
trigger(self.onCellCssStylesChanged, { "key": key, "hash": hash });
}
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 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}, e);
var handled = e.isImmediatePropagationStopped();
if (!handled) {
if (!e.shiftKey && !e.altKey && !e.ctrlKey) {
if (e.which == 27) {
if (!getEditorLock().isActive()) {
return; // no editing mode to cancel, allow bubbling and default processing (exit without cancelling the event)
}
cancelEditAndSetFocus();
} else if (e.which == 34) {
navigatePageDown();
handled = true;
} else if (e.which == 33) {
navigatePageUp();
handled = true;
} else if (e.which == 37) {
handled = navigateLeft();
} else if (e.which == 39) {
handled = navigateRight();
} else if (e.which == 38) {
handled = navigateUp();
} else if (e.which == 40) {
handled = navigateDown();
} else if (e.which == 9) {
handled = navigateNext();
} else if (e.which == 13) {
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 == 9 && 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.
var selection = getTextSelection(); //store text-selection and restore it after
if (e.target != document.activeElement || $(e.target).hasClass("slick-cell")) {
setFocus();
}
if ( options.enableTextSelectionOnCells ) {
setTextSelection(selection);
}
}
var cell = getCellFromEvent(e);
if (!cell || (currentEditor !== null && activeRow == cell.row && activeCell == cell.cell)) {
return;
}
trigger(self.onClick, {row: cell.row, cell: cell.cell}, e);
if (e.isImmediatePropagationStopped()) {
return;
}
if ((activeCell != cell.cell || activeRow != cell.row) && 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, {}, 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}, e);
if (e.isImmediatePropagationStopped()) {
return;
}
if (options.editable) {
gotoCell(cell.row, cell.cell, true);
}
}
function handleHeaderMouseEnter(e) {
trigger(self.onHeaderMouseEnter, {
"column": $(this).data("column")
}, e);
}
function handleHeaderMouseLeave(e) {
trigger(self.onHeaderMouseLeave, {
"column": $(this).data("column")
}, 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}, 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}, e);
}
}
function handleMouseEnter(e) {
trigger(self.onMouseEnter, {}, e);
}
function handleMouseLeave(e) {
trigger(self.onMouseLeave, {}, 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<columnNumber> 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();
}
}
//This get/set methods are used for keeping text-selection. These don't consider IE because they don't loose text-selection.
function getTextSelection(){
var selection = null;
if (window.getSelection && window.getSelection().rangeCount > 0) {
selection = window.getSelection().getRangeAt(0);
}
return selection;
}
function setTextSelection(selection){
if (window.getSelection && selection) {
var target = window.getSelection();
target.removeAllRanges();
target.addRange(selection);
}
}
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;
}
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) {
// is the data for this row loaded?
if (row < getDataLength() && !getDataItem(row)) {
return false;
}
// are we in the Add New row? can we create new from this cell?
if (columns[cell].cannotTriggerInsert && row >= getDataLength()) {
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});
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);
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}) === false) {
setFocus();
return;
}
getEditorLock().activate(editController);
$(activeCellNode).addClass("editable");
// don't clear the cell if a custom editor is passed through
if (!editor) {
activeCellNode.innerHTML = "";
}
currentEditor = new (editor || getEditor(activeRow, activeCell))({
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 (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, {});
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};
}
}
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;
if (row >= getDataLengthIncludingAddNew()) {
row = getDataLengthIncludingAddNew() - 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;
while (true) {
if (++row >= getDataLengthIncludingAddNew()) {
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;
while (++row < getDataLengthIncludingAddNew()) {
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);
},
undo: function () {
this.editor.applyValue(item, this.prevSerializedValue);
updateRow(this.row);
}
};
if (options.editCommandHandler) {
makeActiveCellNormal();
options.editCommandHandler(item, column, editCommand);
} else {
editCommand.execute();
makeActiveCellNormal();
}
trigger(self.onCellChange, {
row: activeRow,
cell: activeCell,
item: item
});
} else {
var newItem = {};
currentEditor.applyValue(newItem, currentEditor.serializeValue());
makeActiveCellNormal();
trigger(self.onAddNewRow, {item: newItem, column: column});
}
// 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
});
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));
}
//////////////////////////////////////////////////////////////////////////////////////////////
// Debug
this.debug = function () {
var s = "";
s += ("\n" + "counter_rows_rendered: " + counter_rows_rendered);
s += ("\n" + "counter_rows_removed: " + counter_rows_removed);
s += ("\n" + "renderedRows: " + renderedRows);
s += ("\n" + "numVisibleRows: " + numVisibleRows);
s += ("\n" + "maxSupportedCssHeight: " + maxSupportedCssHeight);
s += ("\n" + "n(umber of pages): " + n);
s += ("\n" + "(current) page: " + page);
s += ("\n" + "page height (ph): " + ph);
s += ("\n" + "vScrollDir: " + vScrollDir);
alert(s);
};
// a debug helper to be able to access private members
this.eval = function (expr) {
return eval(expr);
};
//////////////////////////////////////////////////////////////////////////////////////////////
// Public API
$.extend(this, {
"slickGridVersion": "2.1",
// 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(),
"onBeforeHeaderRowCellDestroy": 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,
"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,
"getGridPosition": getGridPosition,
"flashCell": flashCell,
"addCellCssStyles": addCellCssStyles,
"setCellCssStyles": setCellCssStyles,
"removeCellCssStyles": removeCellCssStyles,
"getCellCssStyles": getCellCssStyles,
"init": finishInitialization,
"destroy": destroy,
// IEditor implementation
"getEditorLock": getEditorLock,
"getEditController": getEditController
});
init();
}
}(jQuery));