@progress/kendo-react-grid
Version:
KendoReact Grid package
657 lines • 32.9 kB
JavaScript
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)
t[p[i]] = s[p[i]];
return t;
};
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import * as PropTypes from 'prop-types';
import { dispatchEvent } from '@progress/kendo-react-common';
import { GridSelectionCell } from './cells/GridSelectionCell';
import { GridHierarchyCell } from './cells/GridHierarchyCell';
import { GridEditCell } from './cells/GridEditCell';
import { Header } from './header/Header';
import { HeaderRow } from './header/HeaderRow';
import { FilterRow } from './header/FilterRow';
import { GroupPanel } from './header/GroupPanel';
import { Pager } from './paging/Pager';
import { VirtualScroll } from './VirtualScroll';
import { ColumnResize } from './drag/ColumnResize';
import { CommonDragLogic } from './drag/CommonDragLogic';
import { DragClue } from './drag/DragClue';
import { DropClue } from './drag/DropClue';
import { getNestedValue, flatData, mapColumns, readColumns, autoGenerateColumns } from './utils/index';
import { GridCell } from './cells/GridCell';
import { GridGroupCell } from './cells/GridGroupCell';
import { GridRow } from './rows/GridRow';
import { GridHeaderSelectionCell } from './header/GridHeaderSelectionCell';
import { GridNoRecords } from './GridNoRecords';
/**
* Represents the [KendoReact Grid component]({% slug overview_grid %}).
*
* @example
* ```jsx
* class App extends React.Component {
* constructor(props) {
* super(props);
* this.state = {
* data: [
* { 'foo': 'A1', 'bar': 'B1' },
* { 'foo': 'A2', 'bar': 'B2' },
* { 'foo': 'A3', 'bar': 'B2' }
* ]
* };
* }
* render() {
* return (
* <Grid
* data={this.state.data}
* reorderable={true}
* >
* <GridColumn field="foo" />
* <GridColumn field="bar" />
* </Grid>
* );
* }
* }
* ReactDOM.render(<App />, document.querySelector('my-app'));
* ```
*/
var Grid = /** @class */ (function (_super) {
__extends(Grid, _super);
function Grid(props) {
var _this = _super.call(this, props) || this;
_this._columns = [];
_this._columnsMap = [[]];
_this._header = null;
_this.forceUpdateTimeout = undefined;
_this.scrollHandler = function (event) {
if (event.currentTarget !== event.currentTarget) {
return;
}
clearTimeout(_this.forceUpdateTimeout);
if (_this.props.columnVirtualization && !_this.vs.scrollableVirtual) {
_this.forceUpdateTimeout = setTimeout(function () { _this.forceUpdate(); }, 0);
}
if (_this._header) {
_this._header.setScrollLeft(event.currentTarget.scrollLeft);
}
if (_this.vs) {
_this.vs.scrollHandler(event);
}
dispatchEvent(_this.props.onScroll, event, _this, {});
};
_this.rowClick = function (e, item) {
if (_this.props.onRowClick && e.target.nodeName === 'TD') {
_this.props.onRowClick.call(undefined, __assign({ dataItem: item.dataItem }, _this.getArguments(e)));
}
};
_this.itemChange = function (event) {
var itemChange = _this.props.onItemChange;
if (event.field === _this.props.expandField || _this.props.group && event.field === undefined) {
var expandChange = _this.props.onExpandChange;
if (expandChange) {
expandChange.call(undefined, __assign({}, _this.getArguments(event.syntheticEvent), { dataItem: event.dataItem, value: event.value }));
}
return;
}
if (itemChange) {
itemChange.call(undefined, __assign({}, _this.getArguments(event.syntheticEvent), { dataItem: event.dataItem, field: event.field, value: event.value }));
}
};
_this.onHeaderSelectionChange = function (event) {
if (_this.props.onHeaderSelectionChange) {
_this.props.onHeaderSelectionChange.call(undefined, {
field: event.field,
nativeEvent: event.syntheticEvent && event.syntheticEvent.nativeEvent,
syntheticEvent: event.syntheticEvent,
target: _this
});
}
};
_this.pageChange = function (page, syntheticEvent) {
_this.raiseDataEvent(_this.props.onPageChange, { page: page }, { skip: page.skip, take: page.take }, syntheticEvent);
};
_this.sortChange = function (sort, syntheticEvent) {
_this.raiseDataEvent(_this.props.onSortChange, { sort: sort }, { sort: sort }, syntheticEvent);
};
_this.filterChange = function (filter, syntheticEvent) {
_this.raiseDataEvent(_this.props.onFilterChange, { filter: filter }, { filter: filter, skip: 0 }, syntheticEvent);
};
_this.groupChange = function (groups, event) {
var syntheticEvent = event.nativeEvent ?
event : { nativeEvent: event.nativeEvent || event.originalEvent };
_this.raiseDataEvent(_this.props.onGroupChange, { group: groups }, { group: groups, skip: 0 }, syntheticEvent);
};
_this.resolveTitle = function (field) {
var column = _this._columns.find(function (c) { return c.field === field; });
var title = column && (column.title || column.field);
return title === undefined ? field : title;
};
var groupable = _this.props.groupable === true ||
(typeof _this.props.groupable === 'object') && _this.props.groupable.enabled !== false;
_this.vs = new VirtualScroll(groupable || props.rowHeight === undefined || props.rowHeight === 0);
_this.dragLogic = new CommonDragLogic(_this.columnReorder.bind(_this), _this.groupReorder.bind(_this), _this.columnToGroup.bind(_this));
_this.columnResize = new ColumnResize(_this.onResize.bind(_this));
return _this;
}
Object.defineProperty(Grid.prototype, "columns", {
// tslint:disable:max-line-length
/**
* A getter of the current columns. Gets the current column width or current columns, or any other [`GridColumnProps`]({% slug api_grid_gridcolumnprops %}) for each defined column. Can be used on each Grid instance. To obtain the instance of the rendered Grid, use the `ref` callback. The following example demonstrates how to reorder the columns by dragging their handlers and check the properties afterwards. You can check the result in the browser console.
*
* @example
* ```jsx
* class App extends React.Component {
* constructor(props) {
* super(props);
* this.state = {
* data: [
* { 'foo': 'A1', 'bar': 'B1' },
* { 'foo': 'A2', 'bar': 'B2' },
* { 'foo': 'A3', 'bar': 'B2' }
* ]
* };
* this.grid = null;
* }
* render() {
* return (
* <div>
* <Grid
* data={this.state.data}
* reorderable={true}
* ref={(g) => { this.grid = g; }}
* >
* <GridColumn field="foo" />
* <GridColumn field="bar" />
* </Grid>
* <button onClick={() => console.log(JSON.stringify(this.grid.columns))}>
* log current properties into browser console.
* </button>
* </div>
* );
* }
* }
* ReactDOM.render(<App />, document.querySelector('my-app'));
* ```
*/
// tslint:enable:max-line-length
get: function () {
var shuffledColumns = this._columns.filter(function (q) { return q.declarationIndex >= 0 && q.parentIndex === -1; });
var sanitize = function (columns) {
columns.sort(function (a, b) { return a.declarationIndex - b.declarationIndex; });
return columns.map(function (column) {
var declarationIndex = column.declarationIndex, parentIndex = column.parentIndex, depth = column.depth, colSpan = column.colSpan, rowSpan = column.rowSpan, index = column.index, kFirst = column.kFirst, children = column.children, props = __rest(column, ["declarationIndex", "parentIndex", "depth", "colSpan", "rowSpan", "index", "kFirst", "children"]);
return children.length ? __assign({ children: sanitize(children) }, props) : props;
});
};
return sanitize(shuffledColumns);
},
enumerable: true,
configurable: true
});
/**
* @hidden
*/
Grid.prototype.componentWillReceiveProps = function (nextProps) {
var groupable = this.props.groupable === true ||
(typeof this.props.groupable === 'object') && this.props.groupable.enabled !== false;
if (nextProps.total !== this.props.total ||
nextProps.rowHeight !== this.props.rowHeight) {
this.vs.reset();
this.vs = new VirtualScroll(groupable || nextProps.rowHeight === undefined || nextProps.rowHeight === 0);
}
else if (Math.max(0, this.vs.attendedSkip) !== nextProps.skip && nextProps.skip !== undefined) {
this.vs.attendedSkip = nextProps.skip;
this.vs.propsSkip = (nextProps.skip || 0) + (nextProps.scrollable === 'virtual' ?
this.vs.topCacheCount + (this.vs.attendedSkip - (nextProps.skip || 0)) : 0);
this.vs.syncScroll();
}
};
/**
* @hidden
*/
Grid.prototype.componentWillUnmount = function () {
clearTimeout(this.forceUpdateTimeout);
this.columnResize.columns = [];
this.dragLogic.columns = [];
this._columns = [];
};
/**
* @hidden
*/
Grid.prototype.render = function () {
var _this = this;
var total = this.props.total || 0;
var propsData = [];
if (Array.isArray(this.props.data)) {
propsData = this.props.data;
}
else if (this.props.data) {
propsData = this.props.data.data;
total = total || this.props.data.total;
}
var groupable = this.props.groupable === true ||
(typeof this.props.groupable === 'object') && this.props.groupable.enabled !== false;
this.columnResize.resizable = this.props.resizable || false;
this.dragLogic.reorderable = this.props.reorderable || false;
this.dragLogic.groupable = groupable;
this.vs.PageChange = this.pageChange;
this.vs.realSkip = this.props.skip || 0;
this.vs.pageSize = (this.props.take !== undefined ? this.props.take : this.props.pageSize) || 0;
this.vs.scrollableVirtual = (this.props.scrollable === 'virtual');
this.vs.total = total;
this.vs.propsSkip = (this.props.skip || 0) + (this.props.scrollable === 'virtual' ?
this.vs.topCacheCount + (this.vs.attendedSkip - (this.props.skip || 0)) : 0);
if (this.props.rowHeight !== undefined && this.props.rowHeight > 0 && !groupable) {
this.vs.containerHeight = Math.min(1533915, this.props.rowHeight * (total || 0));
}
else {
this.vs.containerHeight = 1533915;
}
var footer = (typeof this.props.groupable === 'object') && this.props.groupable.footer || 'none';
var data = [];
var resolvedGroupsCount = flatData(data, propsData, footer, { index: this.props.skip || 0 }, this.props.group !== undefined, this.props.expandField);
var children = React.Children.toArray(this.props.children);
this.initColumns(children.filter(function (child) { return child &&
child.type.displayName === 'KendoReactGridColumn'; }), resolvedGroupsCount);
var toolbar = children.filter(function (child) { return child &&
child.type.displayName === 'KendoReactGridToolbar'; });
var noRecords = children.filter(function (child) { return child &&
child.type.displayName === 'KendoReactGridNoRecords'; });
var columnsWithColGroup = this._columns.filter(function (c) { return c.children.length === 0; });
var groupingPanel = groupable && (React.createElement(GroupPanel, { group: this.props.group || [], groupChange: this.groupChange, pressHandler: this.dragLogic.pressHandler, dragHandler: this.dragLogic.dragHandler, releaseHandler: this.dragLogic.releaseHandler, refCallback: this.dragLogic.refGroupPanelDiv, resolveTitle: this.resolveTitle }));
var clues = (this.dragLogic.reorderable || this.dragLogic.groupable) && document && document.body && [
ReactDOM.createPortal(React.createElement(DropClue, { ref: this.dragLogic.refDropElementClue }), document.body),
ReactDOM.createPortal(React.createElement(DragClue, { ref: this.dragLogic.refDragElementClue }), document.body)
];
var header = (React.createElement(Header, { columnResize: this.columnResize, staticHeaders: this.props.scrollable !== 'none', ref: function (h) { _this._header = h; }, headerRow: React.createElement(HeaderRow, { sort: this.props.sort, sortable: this.props.sortable, sortChange: this.sortChange, filter: this.props.filter, filterable: this.props.filterable, filterChange: this.filterChange, columnMenu: this.props.columnMenu, selectionChange: this.onHeaderSelectionChange, columns: this._columns, columnResize: this.columnResize, pressHandler: this.dragLogic.pressHandler, dragHandler: this.dragLogic.dragHandler, releaseHandler: this.dragLogic.releaseHandler, columnsMap: this._columnsMap, cellRender: this.props.headerCellRender }), filterRow: this.props.filterable && React.createElement(FilterRow, { columns: this._columns, filter: this.props.filter, filterChange: this.filterChange, sort: this.props.sort, cellRender: this.props.filterCellRender }) || undefined, cols: columnsWithColGroup.map(function (column, index) { return React.createElement("col", { key: index.toString(), width: column.width !== undefined ?
Math.floor(parseFloat(column.width.toString())) + 'px' : undefined }); }) }));
var leftWidth = 0;
var tableWidth = parseFloat(((this.props.style || {}).width || '').toString());
var scrollLeft = this.vs && this.vs.container && this.vs.container.scrollLeft || 0;
var leftColspan = 1;
var dataRow = function (item) { return _this._columns.map(function (column, index) {
if (_this.props.columnVirtualization) {
if (leftWidth > scrollLeft + 1.5 * tableWidth) {
return null;
}
leftWidth += parseFloat((column.width || '').toString()) || column.minResizableWidth || 10;
if (leftWidth + tableWidth / 2 < scrollLeft) {
leftColspan++;
return null;
}
}
var cellProps = {
colSpan: leftColspan,
dataItem: item.dataItem,
field: column.field,
editor: column.editor,
format: column.format,
className: column.className,
render: _this.props.cellRender,
onChange: _this.itemChange,
selectionChange: (_this.props.onSelectionChange) ? (function (e) {
_this.selectionChange(e, item.dataItem);
}) : undefined,
columnIndex: index,
columnsCount: _this._columns.filter(function (c) { return !c.children.length; }).length,
rowType: item.rowType,
level: item.level,
expanded: item.expanded,
dataIndex: item.dataIndex,
style: (column.left !== undefined) && {
position: 'sticky',
left: column.left,
right: column.right,
zIndex: 1,
background: '#f6f6f6',
borderRightWidth: column.rightBorder ? '1px' : ''
} || {}
};
leftColspan = 1;
if (column.cell) {
return React.createElement(column.cell, __assign({ key: index }, cellProps));
}
if (column.editable && _this.props.editField) {
var inEdit = getNestedValue(_this.props.editField, item.dataItem);
if (inEdit === true || inEdit === column.field) {
return React.createElement(GridEditCell, __assign({ key: index }, cellProps));
}
}
return React.createElement(GridCell, __assign({ key: index }, cellProps));
}); };
var hiddenRows = 0;
if (this.props.scrollable === 'virtual') {
for (var i = 0; i < this.vs.topCacheCount + this.vs.attendedSkip - (this.props.skip || 0); i++) {
var item = data.shift();
if (item) {
data.push(item);
hiddenRows++;
if (item.rowType === 'groupHeader') {
i--;
}
}
else {
break;
}
}
}
var hidden = function (index) { return (index >= data.length - hiddenRows); };
var absoluteIndex = function (index) { return index + (_this.vs.propsSkip || 0); };
var absoluteDataIndex = this.vs.propsSkip || 0;
var body = data.length && data.map(function (item, index) {
if (item.rowType === 'data') {
absoluteDataIndex++;
}
var isAlt = absoluteDataIndex % 2 === 0;
leftWidth = 0;
return [(React.createElement(GridRow, { key: absoluteIndex(index) * 2, dataItem: item.dataItem, isAltRow: isAlt, rowType: item.rowType, isHidden: hidden(index), onClick: function (e) { return _this.rowClick(e, item); }, selectedField: _this.props.selectedField, rowHeight: _this.props.rowHeight, render: _this.props.rowRender }, dataRow(item))),
_this.props.detail && item.rowType === 'data' && item.expanded && (React.createElement("tr", { key: absoluteIndex(index) * 2 + 1, className: isAlt ? 'k-detail-row k-alt' : 'k-detail-row', style: { visibility: hidden(index) ? 'hidden' : '' } },
_this.props.group && _this.props.group.map(function (group, idx) {
return (React.createElement(GridGroupCell, { dataIndex: item.dataIndex, field: group.field, dataItem: item.dataItem, key: idx, style: {} }));
}),
_this.props.expandField && React.createElement("td", { className: "k-hierarchy-cell" }),
React.createElement("td", { className: "k-detail-cell", colSpan: _this._columns.filter(function (c) { return !c.children.length; }).length
- (_this.props.expandField ? 1 : 0)
- (_this.props.group ? _this.props.group.length : 0) },
React.createElement(_this.props.detail, { dataItem: item.dataItem }))))
];
}) || (React.createElement("tr", { className: "k-grid-norecords" },
React.createElement("td", { colSpan: this._columns.filter(function (c) { return !c.children.length; }).length }, noRecords.length ? noRecords : React.createElement(GridNoRecords, null))));
var pager = this.props.pageable && (React.createElement(Pager, { pageChange: this.pageChange, total: total, skip: this.vs.propsSkip || 0, pageSize: (this.props.take !== undefined ? this.props.take : this.props.pageSize) || 10, settings: this.props.pageable }));
var sorted = function (field) {
return _this.props.sort && _this.props.sort.filter(function (descriptor) { return descriptor.field === field; }).length > 0;
};
var colGroups = (React.createElement("colgroup", { ref: function (c) { _this.columnResize.colGroupMain = c; } }, columnsWithColGroup.map(function (column, index) { return (React.createElement("col", { key: index.toString(), className: sorted(column.field) ? 'k-sorted' : undefined, width: column.width !== undefined ?
Math.floor(parseFloat(column.width.toString())) + 'px' : undefined })); })));
if (this.props.scrollable === 'none') {
return (React.createElement("div", { style: this.props.style, className: "k-widget k-grid" },
toolbar,
groupingPanel,
React.createElement("table", { ref: function (table) {
_this.vs.table = table;
_this.resetTableWidth();
} },
colGroups,
header,
React.createElement("tbody", null, body)),
pager,
clues));
}
var wrapperStyle = this.props.style || {};
if (this.props.scrollable === 'virtual') {
// Set the default height for vs if not existing.
if (!wrapperStyle.height) {
wrapperStyle = Object.assign({}, wrapperStyle, { height: '450px' });
}
}
return (React.createElement("div", { style: wrapperStyle, className: 'k-widget k-grid' + (this.props.scrollable === 'virtual' ? ' k-grid-virtual' : '') },
toolbar,
groupingPanel,
header,
React.createElement("div", { className: "k-grid-container" },
React.createElement("div", { ref: function (container) { _this.vs.container = container; }, className: "k-grid-content k-virtual-content", onScroll: this.scrollHandler },
React.createElement("div", { style: { 'position': 'relative' } },
React.createElement("table", { tabIndex: -1, className: 'k-grid-table', ref: function (table) {
_this.vs.table = table;
_this.resetTableWidth();
} },
colGroups,
React.createElement("tbody", { ref: function (tableBody) { _this.vs.tableBody = tableBody; } }, body))),
React.createElement("div", { className: "k-height-container" },
React.createElement("div", { style: this.props.scrollable === 'virtual' ?
{ 'height': (this.vs.containerHeight) + 'px' } : {} })))),
pager,
clues));
};
Grid.prototype.selectionChange = function (event, dataItem) {
if (this.props.onSelectionChange) {
this.props.onSelectionChange.call(undefined, __assign({}, this.getArguments(event.syntheticEvent), { dataItem: dataItem }));
}
};
Grid.prototype.raiseDataEvent = function (handler, data, moreData, syntheticEvent) {
var dataStateChange = this.props.onDataStateChange;
if (handler) {
handler.call(undefined, __assign({}, this.getArguments(syntheticEvent), data));
}
else if (dataStateChange) {
dataStateChange.call(undefined, __assign({}, this.getArguments(syntheticEvent), { data: __assign({}, this.getDataState(), moreData) }));
}
};
Grid.prototype.columnReorder = function (prev, next, nativeEvent) {
var _this = this;
var _a;
var depth = this._columns[prev].depth;
var end = function (index) {
do {
index++;
} while (index < _this._columns.length && _this._columns[index].depth > depth);
return index;
};
var spliced = this._columns.splice(prev, end(prev) - prev);
(_a = this._columns).splice.apply(_a, [prev < next ? end(next - spliced.length) : next, 0].concat(spliced));
this._columns.filter(function (q) { return q.declarationIndex >= 0; }).forEach(function (c, i) { return c.orderIndex = i; });
var eventColumnProps = this.columns;
this.forceUpdate();
if (this.props.onColumnReorder) {
this.props.onColumnReorder.call(undefined, {
target: this,
columns: eventColumnProps,
nativeEvent: nativeEvent
});
}
};
Grid.prototype.groupReorder = function (prevIndex, nextIndex, nativeEvent) {
if (this.props.group === undefined) {
return;
}
var group = this.props.group.slice();
group.splice.apply(group, [nextIndex, 0].concat(group.splice(prevIndex, 1)));
this.groupChange(group, nativeEvent);
};
Grid.prototype.columnToGroup = function (columnIndex, groupIndex, nativeEvent) {
var field = this._columns[columnIndex].field;
if (!field) {
return;
}
var group = (this.props.group || []).slice();
group.splice(groupIndex, 0, { field: field });
this.groupChange(group, nativeEvent);
};
Grid.prototype.resetTableWidth = function () {
var totalWidth = 0;
if (!this.columnResize.colGroupMain) {
return;
}
var colElements = this.columnResize.colGroupMain.children;
for (var i = 0; i < colElements.length; i++) {
var width = colElements[i].width;
if (!width) {
return;
}
totalWidth += parseFloat(width.toString());
}
totalWidth = Math.round(totalWidth);
if (this._header) {
this._header.setWidth(totalWidth);
}
if (this.vs.table) {
this.vs.table.style.width = totalWidth + 'px';
}
};
Grid.prototype.onResize = function (index, newWidth, oldWidth, nativeEvent, end) {
this.resetTableWidth();
if (this.props.onColumnResize) {
this.props.onColumnResize.call(undefined, {
columns: this.columns,
index: index,
nativeEvent: nativeEvent,
newWidth: newWidth,
oldWidth: oldWidth,
end: end,
target: this
});
}
};
Grid.prototype.initColumns = function (columnElements, groupCount) {
var _this = this;
this._columns = readColumns(columnElements, this.columns);
if (this._columns.length === 0) {
this._columns = autoGenerateColumns(this.props.data, this.props.group, this.props.expandField);
}
if (this.props.selectedField) {
this._columns.filter(function (c) { return c.field === _this.props.selectedField; }).forEach(function (c) {
c.width = c.width || '50px';
c.cell = c.cell || GridSelectionCell;
c.headerCell = c.headerCell || GridHeaderSelectionCell;
});
}
var defaultServiceProps = {
resizable: true,
width: '32px',
title: ' ',
declarationIndex: -1,
orderIndex: -1,
children: [],
parentIndex: -1,
depth: 0,
colSpan: 0,
rowSpan: 0,
left: 0,
right: 0,
index: 0,
rightBorder: false
};
var columnIndexOffset = 0;
if (this.props.expandField && (this.props.onExpandChange) && this.props.detail) {
this._columns.unshift(__assign({}, defaultServiceProps, { cell: GridHierarchyCell, field: this.props.expandField, headerClassName: 'k-hierarchy-cell k-header' }));
columnIndexOffset++;
}
for (var i = 0; i < groupCount; i++) {
this._columns.unshift(__assign({}, defaultServiceProps, { cell: GridGroupCell, field: 'value' }));
columnIndexOffset++;
}
this._columns.slice(columnIndexOffset).forEach(function (c) { return c.parentIndex >= 0 && (c.parentIndex += columnIndexOffset); });
this._columnsMap = mapColumns(this._columns);
this.columnResize.columns = this._columns;
this.dragLogic.columns = this._columns;
};
Grid.prototype.getDataState = function () {
return {
filter: this.props.filter,
sort: this.props.sort,
skip: this.props.skip,
take: (this.props.take !== undefined ? this.props.take : this.props.pageSize),
group: this.props.group
};
};
Grid.prototype.getArguments = function (syntheticEvent) {
return {
nativeEvent: syntheticEvent && syntheticEvent.nativeEvent,
syntheticEvent: syntheticEvent,
target: this
};
};
/**
* @hidden
*/
Grid.displayName = 'KendoReactGrid';
/**
* @hidden
*/
Grid.defaultProps = {
scrollable: 'scrollable'
// All other properties are undefined by default.
};
/**
* @hidden
*/
Grid.propTypes = {
data: PropTypes.oneOfType([
PropTypes.array,
PropTypes.shape({
data: PropTypes.array,
total: PropTypes.number
})
]),
sortable: PropTypes.oneOfType([
PropTypes.bool,
PropTypes.shape({
mode: PropTypes.oneOf(['single', 'multiple']),
allowUnsort: PropTypes.bool
})
]),
onSortChange: PropTypes.func,
sort: PropTypes.array,
filterable: PropTypes.bool,
filter: PropTypes.any,
onFilterChange: PropTypes.func,
pageable: PropTypes.oneOfType([
PropTypes.bool,
PropTypes.shape({
buttonCount: PropTypes.number,
info: PropTypes.bool,
type: PropTypes.oneOf(['numeric', 'input']),
pageSizes: PropTypes.oneOfType([PropTypes.bool, PropTypes.arrayOf(PropTypes.number)]),
previousNext: PropTypes.bool
})
]),
pageSize: PropTypes.number,
onPageChange: PropTypes.func,
total: PropTypes.number,
skip: PropTypes.number,
take: PropTypes.number,
onExpandChange: PropTypes.func,
expandField: PropTypes.string,
selectedField: PropTypes.string,
onSelectionChange: PropTypes.func,
onHeaderSelectionChange: PropTypes.func,
resizable: PropTypes.bool,
reorderable: PropTypes.bool,
group: PropTypes.any,
groupable: PropTypes.oneOfType([
PropTypes.bool,
PropTypes.shape({
enabled: PropTypes.bool,
footer: PropTypes.oneOf(['always', 'visible', 'none'])
})
]),
onGroupChange: PropTypes.func,
onRowClick: PropTypes.func,
onItemChange: PropTypes.func,
editField: PropTypes.string,
scrollable: PropTypes.oneOf(['none', 'scrollable', 'virtual']),
rowHeight: PropTypes.number,
detail: PropTypes.any,
style: PropTypes.object,
onDataStateChange: PropTypes.func,
onColumnResize: PropTypes.func,
onColumnReorder: PropTypes.func
};
return Grid;
}(React.Component));
export { Grid };
//# sourceMappingURL=Grid.js.map