Skip to content

Commit f337675

Browse files
silviyabotevasilviyaboteva
committed
chore: update grid props in react-coffee-warehouse app
1 parent 46eecce commit f337675

File tree

2 files changed

+48
-131
lines changed

2 files changed

+48
-131
lines changed

‎examples/react-coffee-warehouse/src/components/Grid.jsx‎

Lines changed: 42 additions & 125 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,10 @@ import { Grid as KendoGrid, GridColumn, GridColumnMenuSort, GridColumnMenuFilter
66
import { Button } from '@progress/kendo-react-buttons'
77
import { GridPDFExport } from '@progress/kendo-react-pdf';
88
import { ExcelExport } from '@progress/kendo-react-excel-export';
9-
import { process } from '@progress/kendo-data-query';
109
import { Input } from '@progress/kendo-react-inputs';
1110
import { useLocalization } from '@progress/kendo-react-intl';
1211
import { fileExcelIcon, filePdfIcon } from '@progress/kendo-svg-icons';
12+
import { filterBy } from '@progress/kendo-data-query';
1313

1414
export const Column = GridColumn;
1515

@@ -23,39 +23,17 @@ export const ColumnMenu = (props) => {
2323
}
2424

2525
export const Grid = (props) => {
26-
const { data, onDataChange, ...others } = props;
26+
const { data, onDataChange, defaultFilter, ...others } = props;
2727

2828
const excelExportRef = React.useRef(null);
2929
const pdfExportRef = React.useRef(null);
3030

3131
const [isPdfExporting, setIsPdfExporting] = React.useState(false);
32-
const [take, setTake] = React.useState(10);
33-
const [skip, setSkip] = React.useState(0);
34-
const [sort, setSort] = React.useState([]);
35-
const [group, setGroup] = React.useState([]);
36-
const [filter, setFilter] = React.useState(null);
37-
const lastSelectedIndexRef = React.useRef(0);
38-
const [allColumnFilter, setAllColumnFilter] = React.useState('');
32+
const [filter, setFilter] = React.useState(defaultFilter);
33+
const filteredData = filterBy(data, filter);
34+
const [select, setSelect] = React.useState({});
3935
const localizationService = useLocalization();
4036

41-
const dataState = {
42-
take,
43-
skip,
44-
sort,
45-
group,
46-
filter
47-
};
48-
49-
const onDataStateChange = React.useCallback(
50-
(event) => {
51-
setTake(event.dataState.take);
52-
setSkip(event.dataState.skip);
53-
setSort(event.dataState.sort);
54-
setGroup(event.dataState.group);
55-
setFilter(event.dataState.filter);
56-
},
57-
[setTake, setSkip, setSort, setGroup]
58-
);
5937

6038
const onExcelExport = React.useCallback(
6139
() => {
@@ -73,122 +51,68 @@ export const Grid = (props) => {
7351
[]
7452
);
7553

76-
const onAllColumnFilterChange = React.useCallback(
54+
const handleFilterChange = React.useCallback(
7755
(event) => {
78-
setAllColumnFilter(event.value);
56+
let filter = {
57+
logic: 'or',
58+
filters: [
59+
{ field: 'contactName', operator: 'contains', value: event.value },
60+
{ field: 'jobTitle', operator: 'contains', value: event.value },
61+
{ field: 'budget', operator: 'contains', value: event.value },
62+
{ field: 'phone', operator: 'contains', value: event.value },
63+
{ field: 'address', operator: 'contains', value: event.value }
64+
]
65+
};
66+
setFilter(filter);
7967
},
80-
[setAllColumnFilter]
68+
[setFilter]
8169
);
8270

83-
const onSelectionChange = React.useCallback(
84-
(event) => {
85-
let last = lastSelectedIndexRef.current;
86-
const updatedData = data.map(dataItem => {
87-
return {...dataItem};
88-
});
89-
const current = data.findIndex(dataItem => dataItem === event.dataItem);
90-
91-
if (!event.nativeEvent.shiftKey) {
92-
lastSelectedIndexRef.current = last = current;
93-
}
94-
95-
if (!event.nativeEvent.ctrlKey) {
96-
updatedData.forEach(item => (item.selected = false));
97-
}
98-
const select = !event.dataItem.selected;
99-
for (let i = Math.min(last, current); i <= Math.max(last, current); i++) {
100-
updatedData[i].selected = select;
101-
}
71+
const onSelectionChange = React.useCallback((event) => {
72+
setSelect(event.select);
73+
}, []);
10274

103-
onDataChange(updatedData);
104-
},
105-
[data, onDataChange]
106-
);
107-
108-
const onHeaderSelectionChange = React.useCallback(
109-
(event) => {
110-
const checked = event.syntheticEvent.target.checked;
111-
const updatedData = data.map(item=>{
112-
return {
113-
...item,
114-
selected: checked
115-
};
116-
});
117-
118-
onDataChange(updatedData);
119-
},
120-
[data, onDataChange]
121-
);
122-
123-
const textColumns = props.children.map(col => {
124-
if (col.props.children) {
125-
return col.props.children.map(child => {
126-
if (!child.props.filter || child.props.filter === "text") {
127-
return child.props.field;
128-
}
129-
return null;
130-
});
131-
} else if (col.props.field) {
132-
if (!col.props.filter || col.props.filter === "text") {
133-
return col.props.field;
134-
}
135-
}
136-
return null;
137-
})
138-
.flat()
139-
.filter(field => field);
140-
141-
const allColumnsFilters = textColumns.map(column => ({
142-
field: column,
143-
operator: 'contains',
144-
value: allColumnFilter
145-
}));
146-
147-
const allColumnFilteredData = allColumnFilter ?
148-
process(data, {filter: { logic: "or", filters: allColumnsFilters }}).data :
149-
data;
150-
151-
const processedData = process(allColumnFilteredData, dataState);
152-
153-
React.useEffect(
154-
() => {
155-
if (!processedData.data.length) {
156-
setSkip(0);
157-
}
158-
},
159-
[processedData]
160-
);
75+
const onHeaderSelectionChange = React.useCallback((event) => {
76+
setSelect(event.select);
77+
}, []);
16178

16279
const onPdfExport = React.useCallback(
16380
() => {
16481
if (pdfExportRef.current) {
16582
setIsPdfExporting(true);
166-
pdfExportRef.current.save(processedData.data, onPdfExportDone);
83+
pdfExportRef.current.save(data, onPdfExportDone);
16784
}
16885
},
169-
[processedData, onPdfExportDone]
86+
[data, onPdfExportDone]
17087
);
17188

17289
const GridElement = (
17390
<KendoGrid
174-
{...dataState}
17591
{...others}
17692
rowHeight={40}
17793
pageable
94+
defaultSkip={0}
95+
defaultTake={10}
17896
sortable
17997
groupable
180-
selectedField={'selected'}
181-
182-
data={processedData}
183-
onDataStateChange={onDataStateChange}
184-
98+
filter={filter}
99+
100+
data={filteredData}
101+
dataItemKey={'id'}
102+
autoProcessData={true}
103+
selectable={{
104+
enabled: true,
105+
drag: false,
106+
cell: false,
107+
mode: 'single'
108+
}}
109+
select={select}
185110
onSelectionChange={onSelectionChange}
186111
onHeaderSelectionChange={onHeaderSelectionChange}
187112
>
188113
<GridToolbar>
189114
<Input
190-
value={allColumnFilter}
191-
onChange={onAllColumnFilterChange}
115+
onChange={handleFilterChange}
192116
placeholder={localizationService.toLanguageString('custom.gridSearch')}
193117
/>
194118
<Button
@@ -205,14 +129,7 @@ export const Grid = (props) => {
205129
{localizationService.toLanguageString('custom.exportPdf')}
206130
</Button>
207131
</GridToolbar>
208-
<Column
209-
field={'selected'}
210-
width={50}
211-
title={' '}
212-
headerSelectionValue={
213-
data.findIndex(dataItem => dataItem.selected === false) === -1
214-
}
215-
/>
132+
<Column columnType="checkbox" />
216133
{props.children}
217134
</KendoGrid>
218135
);

‎examples/react-coffee-warehouse/src/pages/Dashboard.jsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -124,15 +124,15 @@ const Dashboard = () => {
124124
<div className="card-component">
125125
<Grid data={filterBy(data, gridFilterExpression)} style={{ height: 450 }} onDataChange={data => setData(data)}>
126126
<Column title={localizationService.toLanguageString('custom.employee')} groupable={false}>
127-
<Column field={'fullName'} title={localizationService.toLanguageString('custom.contactName')} columnMenu={ColumnMenu} width={230} cell={FullNameCell} />
127+
<Column field={'fullName'} title={localizationService.toLanguageString('custom.contactName')} columnMenu={ColumnMenu} width={230} cells={{ data: FullNameCell }} />
128128
<Column field={'jobTitle'} title={localizationService.toLanguageString('custom.jobTitle')} columnMenu={ColumnMenu} width={230} />
129-
<Column field={'country'} title={localizationService.toLanguageString('custom.country')} columnMenu={ColumnMenu} width={100} cell={FlagCell} />
130-
<Column field={'isOnline'} title={localizationService.toLanguageString('custom.status')} columnMenu={ColumnMenu} width={100} cell={OnlineCell} filter={'boolean'} />
129+
<Column field={'country'} title={localizationService.toLanguageString('custom.country')} columnMenu={ColumnMenu} width={100} cells={{ data: FlagCell }} />
130+
<Column field={'isOnline'} title={localizationService.toLanguageString('custom.status')} columnMenu={ColumnMenu} width={100} cells={{ data: OnlineCell }} filter={'boolean'} />
131131
</Column>
132132
<Column title={localizationService.toLanguageString('custom.performance')} groupable={false}>
133-
<Column field={'rating'} title={localizationService.toLanguageString('custom.rating')} columnMenu={ColumnMenu} width={110} cell={RatingCell} filter={'numeric'} />
134-
<Column field={'target'} title={localizationService.toLanguageString('custom.engagement')} columnMenu={ColumnMenu} width={200} cell={EngagementCell} filter={'numeric'} />
135-
<Column field={'budget'} title={localizationService.toLanguageString('custom.budget')} columnMenu={ColumnMenu} width={100} cell={CurrencyCell} filter={'numeric'} />
133+
<Column field={'rating'} title={localizationService.toLanguageString('custom.rating')} columnMenu={ColumnMenu} width={110} cells={{ data: RatingCell }} filter={'numeric'} />
134+
<Column field={'target'} title={localizationService.toLanguageString('custom.engagement')} columnMenu={ColumnMenu} width={200} cells={{ data: EngagementCell }} filter={'numeric'} />
135+
<Column field={'budget'} title={localizationService.toLanguageString('custom.budget')} columnMenu={ColumnMenu} width={100} cells={{ data: CurrencyCell }} filter={'numeric'} />
136136
</Column>
137137
<Column title={localizationService.toLanguageString('custom.contacts')} groupable={false}>
138138
<Column field={'phone'} title={localizationService.toLanguageString('custom.phone')} columnMenu={ColumnMenu} width={130} />

0 commit comments

Comments
 (0)