sccoreui
Version:
ui-sccore
126 lines (125 loc) • 6.18 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
require("@ag-grid-community/styles/ag-grid.css");
require("@ag-grid-community/styles/ag-theme-quartz.css");
const core_1 = require("@ag-grid-community/core");
const column_tool_panel_1 = require("@ag-grid-enterprise/column-tool-panel");
const menu_1 = require("@ag-grid-enterprise/menu");
const row_grouping_1 = require("@ag-grid-enterprise/row-grouping");
const server_side_row_model_1 = require("@ag-grid-enterprise/server-side-row-model");
const dummyData_1 = require("./dummyData");
const parent_for_grid_1 = tslib_1.__importDefault(require("../../components/ag-grid/parent-for-grid"));
const constants_1 = require("../../components/ag-grid/constants");
const type_1 = require("../../components/types/type");
core_1.ModuleRegistry.registerModules([
column_tool_panel_1.ColumnsToolPanelModule,
menu_1.MenuModule,
row_grouping_1.RowGroupingModule,
server_side_row_model_1.ServerSideRowModelModule,
]);
const GridRowGroupingSSRM = () => {
const containerStyle = (0, react_1.useMemo)(() => ({ width: "100%", height: "500px" }), []);
const gridStyle = (0, react_1.useMemo)(() => ({ height: "500px", width: "100%" }), []);
const [text, setText] = (0, react_1.useState)("");
const [columnDefs] = (0, react_1.useState)([
{ field: "employeeId", },
{ field: "employeeName", },
{ field: "jobTitle" },
{ field: "employmentType" },
]);
const defaultColDef = (0, react_1.useMemo)(() => {
return {
width: 240,
flex: 1,
sortable: false,
};
}, []);
const autoGroupColumnDef = (0, react_1.useMemo)(() => {
return {
field: "employeeName",
headerName: `Search Results`,
headerCheckboxSelection: true,
cellRendererParams: {
innerRenderer: () => {
// Add custom styling or content to the group label
return ((0, jsx_runtime_1.jsx)("div", { children: "kjasdnfkjasdf" }));
},
checkbox: true,
},
};
}, []);
const isServerSideGroupOpenByDefault = (0, react_1.useCallback)((params) => {
// open first two levels by default
if (text === "") {
return false;
}
return params.rowNode.level < 2;
}, [text]);
const isServerSideGroup = (0, react_1.useCallback)((dataItem) => {
// indicate if node is a group
return dataItem.group;
}, []);
const getServerSideGroupKey = (0, react_1.useCallback)((dataItem) => {
// specify which group key to use
return dataItem.id;
}, []);
const getRowData = (a, b, c, d) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
console.log(a, b);
console.log(c, d, "params");
setText(c.searchedText);
var allRows = yield (0, dummyData_1.getAllData)(c.searchedText);
const result = { rowData: allRows };
return result;
// setTimeout(() => {
// params.success(result);
// }, 200);
});
// const onGridReady = useCallback((params: GridReadyEvent) => {
// params.api!.setGridOption("serverSideDatasource", { getRows: getData });
// }, []);
const initialConditions = {
displayAdvancedFilter: false,
displaySort: true,
displayFeaturesHeader: true,
displaySearch: type_1.VisibilityState.ENABLE,
displayFilter: type_1.VisibilityState.ENABLE
};
const rowSelection = (0, react_1.useMemo)(() => {
return {
mode: "multiRow",
};
}, []);
const gridApi = (0, react_1.useRef)(null);
const onSelectionChanged = (0, react_1.useCallback)(() => {
const selectedRows = gridApi.current.api.getServerSideSelectionState(); // Get selected rows
// const allRowsSelected = gridApi.current.api.getSelectedRows().length === gridApi.current.api.getDisplayedRowCount();
console.log("Selected rows: ", selectedRows);
console.log("Selected----- ");
// If all rows are selected, you can perform your custom logic
}, [gridApi]);
// const onFilterTextBoxChanged = useCallback(() => {
// const cahed = gridApi.current.api.getCacheBlockState(); // See loaded blocks
// gridApi.current.api.forEachNode((node) => console.log(node.data, cahed, "cache")); // Access cached rows
// // gridApi.current!.api.setGridOption(
// // "quickFilterText",
// // (document.getElementById("filter-text-box") as HTMLInputElement).value,
// // );
// }, []);
return ((0, jsx_runtime_1.jsx)("div", Object.assign({ style: containerStyle }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ style: gridStyle, className: "ag-theme-quartz" }, { children: (0, jsx_runtime_1.jsx)(parent_for_grid_1.default, { getGridRef: gridApi, columnData: columnDefs, style: { height: "500px" }, getRowData: getRowData, conditionsToDisplay: initialConditions, rowModelType: constants_1.ROWMODELTYPE.SERVER_SIDE, shouldRefetch: false, filterConditions: [
{ id: 1, label: "AND" },
{ id: 2, label: "OR" },
],
// GroupHeaderComponent={GroupHeaderComponent}
enableCheckboxForGroupHeader: true,
// AdvancedFilter={AdvancedFilter}
serverSideInitialRowCount: 3, treeData: true, gridProps: {
isServerSideGroupOpenByDefault,
isServerSideGroup,
getServerSideGroupKey,
rowSelection: "multiple"
}, columnDefs: columnDefs, defaultColDef: defaultColDef, autoGroupColumnDef: autoGroupColumnDef, rowSelection: rowSelection, onSelectionChanged: onSelectionChanged }) })) })));
};
exports.default = GridRowGroupingSSRM;