react-graph-grid 0.1.4 → 0.1.6

package/dist/index23.esm.js

@@ -0,0 +1,340 @@
+import { require_jsx_runtime } from "./index7.esm.js";
+import { BaseComponent } from "./index8.esm.js";
+import { Images } from "./index16.esm.js";
+import { Dropdown } from "./index17.esm.js";
+import { GridDBClass } from "./index22.esm.js";
+import { useEffect, useState } from "react";
+var import_jsx_runtime = require_jsx_runtime();
+function GridFL(props) {
+	let grid = null;
+	const [gridState, setState] = useState({
+		grid,
+		ind: 0
+	});
+	grid = gridState.grid;
+	let needGetRows = false;
+	if (!grid || grid.uid !== props.uid && props.uid != null) {
+		grid = null;
+		if (props.findGrid) grid = props.findGrid(props);
+		grid = grid || new GridFLClass(props);
+		needGetRows = !props.noAutoRefresh && grid.hasVisibleParentGrids && !grid.hasVisibleParentGrids();
+	}
+	if (props.init) props.init(grid);
+	grid.refreshState = function() {
+		setState({
+			grid,
+			ind: grid.stateind++
+		});
+	};
+	grid._waitingRows = needGetRows && (grid.rows.length <= 0 || grid.columns.length <= 0);
+	useEffect(() => {
+		grid.setupEvents(grid);
+		if (grid._waitingRows) grid.getRows({
+			filters: grid.collectFilters(),
+			grid
+		}).then((rows) => {
+			grid.rows = rows;
+			grid.afterGetRows();
+			grid.refreshState();
+		}).finally(() => {
+			grid._waitingRows = false;
+			grid.refreshState();
+		});
+		else if (grid.columns.length <= 0 && grid.getColumns) grid.prepareColumns().then(() => grid.refreshState());
+		return () => {
+			grid.clearEvents();
+		};
+	}, [grid]);
+	return grid.render();
+}
+var GridFLClass = class extends GridDBClass {
+	constructor(props) {
+		super(props);
+		const grid = this;
+		grid.filtersDisabled = props.filtersDisabled;
+		grid.beforeOpen = props.beforeOpen;
+	}
+	render() {
+		const grid = this;
+		return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [super.render(), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Dropdown, {
+			getItems: (e) => {
+				return e.self._grid.getAutocomleteItems(e);
+			},
+			onItemClick: (e) => {
+				e.self._grid.onAutocomleteItemClick(e);
+			},
+			closeWhenMiss: true,
+			init: (dd) => {
+				if (grid._autocompleteDropdown) dd.visible = grid._autocompleteDropdown.visible;
+				grid._autocompleteDropdown = dd;
+				dd._grid = grid;
+				if (grid._autocompleteRect) dd.opt.parentRect = grid._autocompleteRect;
+			},
+			onClose: (e) => {
+				if (e.self._grid._inputingColumn) {
+					delete e.self._grid._inputingColumn;
+					if (e.self._grid.needRefresh()) {
+						e.self._grid.pageNumber = 1;
+						e.self._grid.selectedRowIndex = 0;
+						e.self._grid.refresh();
+					}
+				}
+			}
+		})] });
+	}
+	renderHeaderCell(col, context) {
+		const grid = this;
+		if (grid.filtersDisabled) return super.renderHeaderCell(col, context);
+		const hasFilter = col.filtrable && context !== "fake" && col.filter != null && col.filter !== "";
+		const needFocus = grid._autoFocusColumn === col;
+		if (needFocus) delete grid._autoFocusColumn;
+		const isDisabled = grid._waitingRows || grid.isEditing() || grid.isDisabled();
+		return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [super.renderHeaderCell(col, context), col.filtrable && context !== "fake" ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", {
+			className: `grid-col-filter ${grid.opt.inputClass || BaseComponent.theme.inputClass || ""}`,
+			value: col.filter != null ? col.filter : "",
+			title: col.filter != null ? col.filter : "",
+			style: {
+				gridColumn: !hasFilter ? "span 2" : "",
+				width: "calc(100% - 10px)"
+			},
+			"grid-col-filter": `${grid.id}_${col.id}_`,
+			onChange: (e) => {
+				grid.onColumnFilterChanging(col, e.target.value, e);
+			},
+			onClick: (e) => {
+				grid.onColumnFilterClick(col, e);
+			},
+			onInput: (e) => {
+				grid.onColumnFilterInput(col, e);
+			},
+			autoFocus: needFocus,
+			disabled: isDisabled ? "disabled" : "",
+			onBlur: (e) => {
+				grid.onColumnFocusLost(col, col.filter, e);
+			},
+			autoComplete: "off",
+			autocomplete: "off"
+		}, `colFilter_${grid.id}_${col.id}_`), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+			className: "grid-filter-clear",
+			style: {
+				color: "black",
+				display: hasFilter ? "flex" : "none",
+				justifyContent: "center",
+				alignItems: "center",
+				width: "8px"
+			},
+			type: "button",
+			disabled: isDisabled ? "disabled" : "",
+			onClick: () => grid.clearColumnFilter(col),
+			children: "×"
+		}, `colFilterClear_${grid.id}_${col.id}_`)] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {})] });
+	}
+	afterGetColumns() {
+		super.afterGetColumns();
+		const grid = this;
+		grid.hasColumnFilter = false;
+		for (let col of grid.columns) if (col.filtrable) {
+			grid.hasColumnFilter = true;
+			break;
+		}
+	}
+	getHeaderMinHeight() {
+		return !this.hasColumnFilter ? "1em" : "3em";
+	}
+	getAutocomleteItems() {
+		const grid = this;
+		return new Promise(function(resolve) {
+			grid.getRows({
+				filters: grid.collectFilters(true),
+				grid,
+				autocompleteColumn: grid._inputingColumn
+			}).then((rows) => {
+				const res = [];
+				if (grid._inputingColumn) {
+					let i = 0;
+					for (let row of rows) {
+						let txt = row[grid._inputingColumn.name] || String(row);
+						if (grid._inputingColumn.type === "date") txt = grid.formatDate(txt, grid.dateFormat);
+						else if (grid._inputingColumn.type === "datetime") txt = grid.formatDate(txt, grid.dateTimeFormat);
+						res.push({
+							id: i++,
+							text: txt
+						});
+					}
+				}
+				resolve(res);
+			});
+		});
+	}
+	collectFilters(noSaveFilterStr) {
+		const grid = this;
+		const filters = super.collectFilters();
+		const filterList = [];
+		let fo;
+		for (let col of grid.columns) {
+			if (!col.filtrable || col.filter == null || col.filter === "") continue;
+			fo = {
+				type: "column",
+				filter: `${col.name} = ${col.filter}`
+			};
+			filters.push(fo);
+			if (!noSaveFilterStr) filterList.push(fo.filter);
+		}
+		if (grid.beforeOpen != null && grid.beforeOpen !== "") {
+			fo = {
+				type: "graphLink",
+				filter: grid.beforeOpen
+			};
+			filters.push(fo);
+		}
+		if (!noSaveFilterStr) grid._lastFilters = filterList.join("&+&");
+		return filters;
+	}
+	showAutocomplete(e) {
+		const grid = this;
+		if (grid._waitingRows) return;
+		if (grid._autocompleteRect) grid._autocompleteDropdown.opt.parentRect = grid._autocompleteRect;
+		delete grid._autocompleteDropdown.maxW;
+		if (grid._inputingColumn && grid._inputingColumn.maxW) grid._autocompleteDropdown.maxW = +grid._inputingColumn.maxW;
+		grid._autocompleteDropdown.popup(e);
+		if (grid._autocompleteRect) delete grid._autocompleteRect;
+	}
+	needRefresh() {
+		const grid = this;
+		const prevFilterStr = grid._lastFilters;
+		grid.collectFilters();
+		return prevFilterStr !== grid._lastFilters;
+	}
+	onAutocomleteItemClick(e) {
+		const grid = this;
+		const item = grid._autocompleteDropdown.items.find(function(item$1) {
+			return String(item$1.id) === String(e.itemId);
+		});
+		if (!item) {
+			grid.log("onAutocomleteItemClick: " + e.itemId + " - does not found!");
+			return;
+		}
+		e.self.items = [];
+		grid._autocompleteDropdown.items = [];
+		grid._autocompleteDropdown.visible = false;
+		grid._autoFocusColumn = grid._inputingColumn;
+		grid._inputingColumn.filter = item.text;
+		if (e && e.target) grid._autocompleteRect = e.target.getBoundingClientRect();
+		if (grid.needRefresh()) {
+			grid.pageNumber = 1;
+			grid.selectedRowIndex = 0;
+			grid.refresh();
+		}
+	}
+	onColumnFilterChanging(column, filter, e) {
+		const grid = this;
+		column.filter = filter;
+		if (e && e.target) grid._autocompleteRect = e.target.getBoundingClientRect();
+		grid._autocompleteDropdown.items = [];
+		grid.refreshState();
+	}
+	onColumnFocusLost(column, filter, e) {
+		const grid = this;
+		grid._waitingRows = true;
+		if (grid._inputingColumn !== column) delete grid._inputingColumn;
+		if (e && e.target) grid._autocompleteRect = e.target.getBoundingClientRect();
+		setTimeout(() => {
+			if (grid.needRefresh()) {
+				grid._autocompleteDropdown.visible = false;
+				grid.pageNumber = 1;
+				grid.selectedRowIndex = 0;
+				grid.refresh();
+			} else grid._waitingRows = false;
+		}, 150);
+	}
+	onColumnFilterClick(col, e) {
+		const grid = this;
+		if (grid._waitingRows) return;
+		grid._inputingColumn = col;
+		e.target.focus();
+		setTimeout(() => {
+			grid._autocompleteDropdown.items = [];
+			grid._autocompleteRect = e.target.getBoundingClientRect();
+			grid.showAutocomplete(e);
+		}, 150);
+	}
+	onColumnFilterInput(col, e) {
+		const grid = this;
+		grid._autocompleteSeq = grid._autocompleteSeq || 0;
+		let prevSeq = grid._autocompleteSeq;
+		grid._autocompleteSeq++;
+		col.filter = e.target.value;
+		grid._autoFocusColumn = col;
+		setTimeout(() => {
+			if (++prevSeq !== grid._autocompleteSeq) return;
+			grid._inputingColumn = col;
+			grid._autocompleteDropdown.items = [];
+			const elem = document.getElementById(e.target.id);
+			grid._autocompleteRect = elem ? elem.getBoundingClientRect() : e.target.getBoundingClientRect();
+			grid.showAutocomplete(e);
+		}, 100);
+	}
+	clearColumnFilter(column) {
+		const grid = this;
+		column.filter = "";
+		grid.pageNumber = 1;
+		grid.selectedRowIndex = 0;
+		grid.refresh();
+	}
+	clearAllColumnFilters() {
+		const grid = this;
+		for (let col of grid.columns) col.filter = "";
+		grid.pageNumber = 1;
+		grid.selectedRowIndex = 0;
+		grid.refresh();
+	}
+	isFiltered() {
+		const grid = this;
+		for (let col of grid.columns) if (col.filter) return true;
+		return false;
+	}
+	getHeaderGridTemplateColumns(col) {
+		return col.sortInd == null ? "auto 16px" : "auto 22px";
+	}
+	getGridSettingsList() {
+		const res = super.getGridSettingsList();
+		const grid = this;
+		if (!grid.filtersDisabled) res.push({
+			id: 3,
+			text: grid.translate("Clear all filters", "grid-menu")
+		});
+		return res;
+	}
+	onSettingsItemClick(itemId) {
+		super.onSettingsItemClick(itemId);
+		const grid = this;
+		switch (String(itemId)) {
+			case "3":
+				grid.clearAllColumnFilters();
+				break;
+			default:
+		}
+	}
+	setupPagerButtons() {
+		const grid = this;
+		if (grid.pagerButtons && grid.pagerButtons.length > 0) return;
+		super.setupPagerButtons();
+		const clear = {
+			id: 10,
+			name: "clear",
+			title: "Clear all filters",
+			label: Images.images.clear ? "" : "Clear",
+			click: () => {
+				grid.clearAllColumnFilters();
+			},
+			getDisabled: () => {
+				return grid._waitingRows || !grid.isFiltered();
+			},
+			img: Images.images.clear,
+			class: grid.pagerButtonsClass
+		};
+		grid.pagerButtons.unshift(clear);
+		grid.pagerButtonsDict[clear.id] = grid.pagerButtonsDict[clear.name] = clear;
+	}
+};
+export { GridFL, GridFLClass };

package/dist/index23.js

@@ -0,0 +1,341 @@
+const require_jsx_runtime$1 = require("./index7.js");
+const require_Base = require("./index8.js");
+const require_Images = require("./index16.js");
+const require_Dropdown = require("./index17.js");
+const require_GridDB = require("./index22.js");
+let react = require("react");
+var import_jsx_runtime = require_jsx_runtime$1.default;
+function GridFL(props) {
+	let grid = null;
+	const [gridState, setState] = (0, react.useState)({
+		grid,
+		ind: 0
+	});
+	grid = gridState.grid;
+	let needGetRows = false;
+	if (!grid || grid.uid !== props.uid && props.uid != null) {
+		grid = null;
+		if (props.findGrid) grid = props.findGrid(props);
+		grid = grid || new GridFLClass(props);
+		needGetRows = !props.noAutoRefresh && grid.hasVisibleParentGrids && !grid.hasVisibleParentGrids();
+	}
+	if (props.init) props.init(grid);
+	grid.refreshState = function() {
+		setState({
+			grid,
+			ind: grid.stateind++
+		});
+	};
+	grid._waitingRows = needGetRows && (grid.rows.length <= 0 || grid.columns.length <= 0);
+	(0, react.useEffect)(() => {
+		grid.setupEvents(grid);
+		if (grid._waitingRows) grid.getRows({
+			filters: grid.collectFilters(),
+			grid
+		}).then((rows) => {
+			grid.rows = rows;
+			grid.afterGetRows();
+			grid.refreshState();
+		}).finally(() => {
+			grid._waitingRows = false;
+			grid.refreshState();
+		});
+		else if (grid.columns.length <= 0 && grid.getColumns) grid.prepareColumns().then(() => grid.refreshState());
+		return () => {
+			grid.clearEvents();
+		};
+	}, [grid]);
+	return grid.render();
+}
+var GridFLClass = class extends require_GridDB.GridDBClass {
+	constructor(props) {
+		super(props);
+		const grid = this;
+		grid.filtersDisabled = props.filtersDisabled;
+		grid.beforeOpen = props.beforeOpen;
+	}
+	render() {
+		const grid = this;
+		return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [super.render(), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(require_Dropdown.Dropdown, {
+			getItems: (e) => {
+				return e.self._grid.getAutocomleteItems(e);
+			},
+			onItemClick: (e) => {
+				e.self._grid.onAutocomleteItemClick(e);
+			},
+			closeWhenMiss: true,
+			init: (dd) => {
+				if (grid._autocompleteDropdown) dd.visible = grid._autocompleteDropdown.visible;
+				grid._autocompleteDropdown = dd;
+				dd._grid = grid;
+				if (grid._autocompleteRect) dd.opt.parentRect = grid._autocompleteRect;
+			},
+			onClose: (e) => {
+				if (e.self._grid._inputingColumn) {
+					delete e.self._grid._inputingColumn;
+					if (e.self._grid.needRefresh()) {
+						e.self._grid.pageNumber = 1;
+						e.self._grid.selectedRowIndex = 0;
+						e.self._grid.refresh();
+					}
+				}
+			}
+		})] });
+	}
+	renderHeaderCell(col, context) {
+		const grid = this;
+		if (grid.filtersDisabled) return super.renderHeaderCell(col, context);
+		const hasFilter = col.filtrable && context !== "fake" && col.filter != null && col.filter !== "";
+		const needFocus = grid._autoFocusColumn === col;
+		if (needFocus) delete grid._autoFocusColumn;
+		const isDisabled = grid._waitingRows || grid.isEditing() || grid.isDisabled();
+		return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [super.renderHeaderCell(col, context), col.filtrable && context !== "fake" ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", {
+			className: `grid-col-filter ${grid.opt.inputClass || require_Base.BaseComponent.theme.inputClass || ""}`,
+			value: col.filter != null ? col.filter : "",
+			title: col.filter != null ? col.filter : "",
+			style: {
+				gridColumn: !hasFilter ? "span 2" : "",
+				width: "calc(100% - 10px)"
+			},
+			"grid-col-filter": `${grid.id}_${col.id}_`,
+			onChange: (e) => {
+				grid.onColumnFilterChanging(col, e.target.value, e);
+			},
+			onClick: (e) => {
+				grid.onColumnFilterClick(col, e);
+			},
+			onInput: (e) => {
+				grid.onColumnFilterInput(col, e);
+			},
+			autoFocus: needFocus,
+			disabled: isDisabled ? "disabled" : "",
+			onBlur: (e) => {
+				grid.onColumnFocusLost(col, col.filter, e);
+			},
+			autoComplete: "off",
+			autocomplete: "off"
+		}, `colFilter_${grid.id}_${col.id}_`), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+			className: "grid-filter-clear",
+			style: {
+				color: "black",
+				display: hasFilter ? "flex" : "none",
+				justifyContent: "center",
+				alignItems: "center",
+				width: "8px"
+			},
+			type: "button",
+			disabled: isDisabled ? "disabled" : "",
+			onClick: () => grid.clearColumnFilter(col),
+			children: "×"
+		}, `colFilterClear_${grid.id}_${col.id}_`)] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {})] });
+	}
+	afterGetColumns() {
+		super.afterGetColumns();
+		const grid = this;
+		grid.hasColumnFilter = false;
+		for (let col of grid.columns) if (col.filtrable) {
+			grid.hasColumnFilter = true;
+			break;
+		}
+	}
+	getHeaderMinHeight() {
+		return !this.hasColumnFilter ? "1em" : "3em";
+	}
+	getAutocomleteItems() {
+		const grid = this;
+		return new Promise(function(resolve) {
+			grid.getRows({
+				filters: grid.collectFilters(true),
+				grid,
+				autocompleteColumn: grid._inputingColumn
+			}).then((rows) => {
+				const res = [];
+				if (grid._inputingColumn) {
+					let i = 0;
+					for (let row of rows) {
+						let txt = row[grid._inputingColumn.name] || String(row);
+						if (grid._inputingColumn.type === "date") txt = grid.formatDate(txt, grid.dateFormat);
+						else if (grid._inputingColumn.type === "datetime") txt = grid.formatDate(txt, grid.dateTimeFormat);
+						res.push({
+							id: i++,
+							text: txt
+						});
+					}
+				}
+				resolve(res);
+			});
+		});
+	}
+	collectFilters(noSaveFilterStr) {
+		const grid = this;
+		const filters = super.collectFilters();
+		const filterList = [];
+		let fo;
+		for (let col of grid.columns) {
+			if (!col.filtrable || col.filter == null || col.filter === "") continue;
+			fo = {
+				type: "column",
+				filter: `${col.name} = ${col.filter}`
+			};
+			filters.push(fo);
+			if (!noSaveFilterStr) filterList.push(fo.filter);
+		}
+		if (grid.beforeOpen != null && grid.beforeOpen !== "") {
+			fo = {
+				type: "graphLink",
+				filter: grid.beforeOpen
+			};
+			filters.push(fo);
+		}
+		if (!noSaveFilterStr) grid._lastFilters = filterList.join("&+&");
+		return filters;
+	}
+	showAutocomplete(e) {
+		const grid = this;
+		if (grid._waitingRows) return;
+		if (grid._autocompleteRect) grid._autocompleteDropdown.opt.parentRect = grid._autocompleteRect;
+		delete grid._autocompleteDropdown.maxW;
+		if (grid._inputingColumn && grid._inputingColumn.maxW) grid._autocompleteDropdown.maxW = +grid._inputingColumn.maxW;
+		grid._autocompleteDropdown.popup(e);
+		if (grid._autocompleteRect) delete grid._autocompleteRect;
+	}
+	needRefresh() {
+		const grid = this;
+		const prevFilterStr = grid._lastFilters;
+		grid.collectFilters();
+		return prevFilterStr !== grid._lastFilters;
+	}
+	onAutocomleteItemClick(e) {
+		const grid = this;
+		const item = grid._autocompleteDropdown.items.find(function(item$1) {
+			return String(item$1.id) === String(e.itemId);
+		});
+		if (!item) {
+			grid.log("onAutocomleteItemClick: " + e.itemId + " - does not found!");
+			return;
+		}
+		e.self.items = [];
+		grid._autocompleteDropdown.items = [];
+		grid._autocompleteDropdown.visible = false;
+		grid._autoFocusColumn = grid._inputingColumn;
+		grid._inputingColumn.filter = item.text;
+		if (e && e.target) grid._autocompleteRect = e.target.getBoundingClientRect();
+		if (grid.needRefresh()) {
+			grid.pageNumber = 1;
+			grid.selectedRowIndex = 0;
+			grid.refresh();
+		}
+	}
+	onColumnFilterChanging(column, filter, e) {
+		const grid = this;
+		column.filter = filter;
+		if (e && e.target) grid._autocompleteRect = e.target.getBoundingClientRect();
+		grid._autocompleteDropdown.items = [];
+		grid.refreshState();
+	}
+	onColumnFocusLost(column, filter, e) {
+		const grid = this;
+		grid._waitingRows = true;
+		if (grid._inputingColumn !== column) delete grid._inputingColumn;
+		if (e && e.target) grid._autocompleteRect = e.target.getBoundingClientRect();
+		setTimeout(() => {
+			if (grid.needRefresh()) {
+				grid._autocompleteDropdown.visible = false;
+				grid.pageNumber = 1;
+				grid.selectedRowIndex = 0;
+				grid.refresh();
+			} else grid._waitingRows = false;
+		}, 150);
+	}
+	onColumnFilterClick(col, e) {
+		const grid = this;
+		if (grid._waitingRows) return;
+		grid._inputingColumn = col;
+		e.target.focus();
+		setTimeout(() => {
+			grid._autocompleteDropdown.items = [];
+			grid._autocompleteRect = e.target.getBoundingClientRect();
+			grid.showAutocomplete(e);
+		}, 150);
+	}
+	onColumnFilterInput(col, e) {
+		const grid = this;
+		grid._autocompleteSeq = grid._autocompleteSeq || 0;
+		let prevSeq = grid._autocompleteSeq;
+		grid._autocompleteSeq++;
+		col.filter = e.target.value;
+		grid._autoFocusColumn = col;
+		setTimeout(() => {
+			if (++prevSeq !== grid._autocompleteSeq) return;
+			grid._inputingColumn = col;
+			grid._autocompleteDropdown.items = [];
+			const elem = document.getElementById(e.target.id);
+			grid._autocompleteRect = elem ? elem.getBoundingClientRect() : e.target.getBoundingClientRect();
+			grid.showAutocomplete(e);
+		}, 100);
+	}
+	clearColumnFilter(column) {
+		const grid = this;
+		column.filter = "";
+		grid.pageNumber = 1;
+		grid.selectedRowIndex = 0;
+		grid.refresh();
+	}
+	clearAllColumnFilters() {
+		const grid = this;
+		for (let col of grid.columns) col.filter = "";
+		grid.pageNumber = 1;
+		grid.selectedRowIndex = 0;
+		grid.refresh();
+	}
+	isFiltered() {
+		const grid = this;
+		for (let col of grid.columns) if (col.filter) return true;
+		return false;
+	}
+	getHeaderGridTemplateColumns(col) {
+		return col.sortInd == null ? "auto 16px" : "auto 22px";
+	}
+	getGridSettingsList() {
+		const res = super.getGridSettingsList();
+		const grid = this;
+		if (!grid.filtersDisabled) res.push({
+			id: 3,
+			text: grid.translate("Clear all filters", "grid-menu")
+		});
+		return res;
+	}
+	onSettingsItemClick(itemId) {
+		super.onSettingsItemClick(itemId);
+		const grid = this;
+		switch (String(itemId)) {
+			case "3":
+				grid.clearAllColumnFilters();
+				break;
+			default:
+		}
+	}
+	setupPagerButtons() {
+		const grid = this;
+		if (grid.pagerButtons && grid.pagerButtons.length > 0) return;
+		super.setupPagerButtons();
+		const clear = {
+			id: 10,
+			name: "clear",
+			title: "Clear all filters",
+			label: require_Images.Images.images.clear ? "" : "Clear",
+			click: () => {
+				grid.clearAllColumnFilters();
+			},
+			getDisabled: () => {
+				return grid._waitingRows || !grid.isFiltered();
+			},
+			img: require_Images.Images.images.clear,
+			class: grid.pagerButtonsClass
+		};
+		grid.pagerButtons.unshift(clear);
+		grid.pagerButtonsDict[clear.id] = grid.pagerButtonsDict[clear.name] = clear;
+	}
+};
+exports.GridFL = GridFL;
+exports.GridFLClass = GridFLClass;