Skip to content

Commit cb94107

Browse files
silviyabotevasilviyaboteva
committed
chore: update grid props
1 parent 0681163 commit cb94107

File tree

2 files changed

+137
-130
lines changed

2 files changed

+137
-130
lines changed

‎examples/kendo-react-nextjs/app/components/grid/main.tsx‎

Lines changed: 134 additions & 127 deletions
Original file line numberDiff line numberDiff line change
@@ -1,128 +1,135 @@
1-
'use client';
2-
import * as React from 'react';
3-
import { GridColumn, GridDetailRowProps, GridDataStateChangeEvent, GridExpandChangeEvent } from '@progress/kendo-react-grid';
4-
import { IntlService } from '@progress/kendo-react-intl';
5-
import { DataResult, process, State } from '@progress/kendo-data-query';
6-
import { Button } from "@progress/kendo-react-buttons";
7-
import { useRouter } from "next/navigation";
8-
import dynamic from 'next/dynamic';
9-
10-
const MyGrid: any = dynamic(
11-
() =>
12-
import("@progress/kendo-react-grid").then(
13-
(module) => module.Grid
14-
) as any,
15-
{ ssr: false }
16-
);
17-
18-
import orders from './orders.json';
19-
import { Order } from './interfaces';
20-
21-
interface LocaleInterface {
22-
language: string,
23-
locale: string
24-
}
25-
26-
const DATE_FORMAT = 'yyyy-mm-dd hh:mm:ss.SSS';
27-
const intl = new IntlService('en');
28-
29-
orders.forEach((o: Order) => {
30-
o.orderDate = intl.parseDate(
31-
o.orderDate ? o.orderDate.toString() : '20/20/2020',
32-
DATE_FORMAT
33-
);
34-
35-
o.shippedDate = intl.parseDate(
36-
o.shippedDate ? o.shippedDate.toString() : "20/20/2020",
37-
DATE_FORMAT
38-
);
39-
});
40-
41-
const DetailComponent = (props: GridDetailRowProps) => {
42-
const dataItem = props.dataItem;
43-
return (
44-
<div>
45-
<section style={{ width: "200px", float: "left" }}>
46-
<p><strong>Street:</strong> {dataItem.shipAddress.street}</p>
47-
<p><strong>City:</strong> {dataItem.shipAddress.city}</p>
48-
<p><strong>Country:</strong> {dataItem.shipAddress.country}</p>
49-
<p><strong>Postal Code:</strong> {dataItem.shipAddress.postalCode}</p>
50-
</section>
51-
<MyGrid style={{ width: "500px" }} data={dataItem.details} />
52-
</div>
53-
);
54-
}
55-
56-
export const GridNextjs = () => {
57-
const locales: LocaleInterface[] = [
58-
{
59-
language: 'en-US',
60-
locale: 'en'
61-
},
62-
{
63-
language: 'es-ES',
64-
locale: 'es'
65-
}
66-
]
67-
const router = useRouter();
68-
const [dataState, setDataState] = React.useState<State>({
69-
skip: 0,
70-
take: 20,
71-
sort: [
72-
{ field: 'orderDate', dir: 'desc' }
73-
],
74-
group: [
75-
{ field: 'customerID' }
76-
]
77-
})
78-
const [currentLocale, setCurrentLocale] = React.useState<LocaleInterface>(locales[0]);
79-
const [dataResult, setDataResult] = React.useState<DataResult>(process(orders, dataState))
80-
81-
const dataStateChange = (event: GridDataStateChangeEvent) => {
82-
setDataResult(process(orders, event.dataState));
83-
setDataState(event.dataState);
84-
}
85-
86-
const expandChange = (event: GridExpandChangeEvent) => {
87-
const isExpanded =
88-
event.dataItem.expanded === undefined ?
89-
event.dataItem.aggregates : event.dataItem.expanded;
90-
event.dataItem.expanded = !isExpanded;
91-
92-
setDataResult({ ...dataResult, data: [...dataResult.data] })
93-
}
94-
95-
const navigateToIndex = () => {
96-
router.push('/');
97-
}
98-
99-
return (
100-
<div>
101-
<div><Button onClick={navigateToIndex}>Index Page</Button></div><br />
102-
<MyGrid
103-
style={{ height: '700px' }}
104-
sortable={true}
105-
filterable={true}
106-
groupable={true}
107-
reorderable={true}
108-
pageable={{ buttonCount: 4, pageSizes: true }}
109-
110-
data={dataResult}
111-
{...dataState}
112-
onDataStateChange={dataStateChange}
113-
114-
detail={DetailComponent}
115-
expandField="expanded"
116-
onExpandChange={expandChange}
117-
>
118-
<GridColumn field="customerID" width="200px" />
119-
<GridColumn field="orderDate" filter="date" format="{0:D}" width="300px" />
120-
<GridColumn field="shipName" width="280px" />
121-
<GridColumn field="freight" filter="numeric" width="200px" />
122-
<GridColumn field="shippedDate" filter="date" format="{0:D}" width="300px" />
123-
<GridColumn field="employeeID" filter="numeric" width="200px" />
124-
<GridColumn locked={true} field="orderID" filterable={false} title="ID" width="90px" />
125-
</MyGrid>
126-
</div>
127-
);
1+
'use client';
2+
import * as React from 'react';
3+
import { GridColumn, GridDetailRowProps, GridReorderDropPosition, GridRowReorderEvent } from '@progress/kendo-react-grid';
4+
import { IntlService } from '@progress/kendo-react-intl';
5+
import { Button } from "@progress/kendo-react-buttons";
6+
import { useRouter } from "next/navigation";
7+
import dynamic from 'next/dynamic';
8+
9+
const MyGrid: any = dynamic(
10+
() =>
11+
import("@progress/kendo-react-grid").then(
12+
(module) => module.Grid
13+
) as any,
14+
{ ssr: false }
15+
);
16+
17+
import orders from './orders.json';
18+
import { Order } from './interfaces';
19+
20+
interface LocaleInterface {
21+
language: string,
22+
locale: string
23+
}
24+
25+
const DATE_FORMAT = 'yyyy-mm-dd hh:mm:ss.SSS';
26+
const intl = new IntlService('en');
27+
28+
orders.forEach((o: Order) => {
29+
o.orderDate = intl.parseDate(
30+
o.orderDate ? o.orderDate.toString() : '20/20/2020',
31+
DATE_FORMAT
32+
);
33+
34+
o.shippedDate = intl.parseDate(
35+
o.shippedDate ? o.shippedDate.toString() : "20/20/2020",
36+
DATE_FORMAT
37+
);
38+
});
39+
40+
const DetailComponent = (props: GridDetailRowProps) => {
41+
const dataItem = props.dataItem;
42+
return (
43+
<div>
44+
<section style={{ width: "200px", float: "left" }}>
45+
<p><strong>Street:</strong> {dataItem.shipAddress.street}</p>
46+
<p><strong>City:</strong> {dataItem.shipAddress.city}</p>
47+
<p><strong>Country:</strong> {dataItem.shipAddress.country}</p>
48+
<p><strong>Postal Code:</strong> {dataItem.shipAddress.postalCode}</p>
49+
</section>
50+
<MyGrid style={{ width: "500px" }} data={dataItem.details} />
51+
</div>
52+
);
53+
}
54+
55+
export const GridNextjs = () => {
56+
const [data, setData] = React.useState<Array<any>>(orders);
57+
58+
const locales: LocaleInterface[] = [
59+
{
60+
language: 'en-US',
61+
locale: 'en'
62+
},
63+
{
64+
language: 'es-ES',
65+
locale: 'es'
66+
}
67+
]
68+
const router = useRouter();
69+
70+
const navigateToIndex = () => {
71+
router.push('/');
72+
}
73+
74+
const calculateIndexToAdd = (dragIndex: number, dropIndex: number, dropPosition: GridReorderDropPosition) => {
75+
const isDropPosition = dropPosition === 'after';
76+
77+
if (dragIndex > dropIndex) {
78+
return isDropPosition ? dropIndex + 1 : dropIndex;
79+
}
80+
81+
return isDropPosition ? dropIndex : dropIndex - 1;
82+
};
83+
84+
const handleRowReorder = (event: GridRowReorderEvent) => {
85+
const reorderedData = [...data];
86+
const droppedItemIndex = data.findIndex((item) => item === event.droppedDataItem);
87+
88+
event.draggedDataItems.forEach((draggedItem: any) => {
89+
const draggedItemIndex = data.findIndex((item) => item === draggedItem);
90+
const idxToAdd: number = calculateIndexToAdd(draggedItemIndex, droppedItemIndex, event.dropPosition)!;
91+
92+
reorderedData.splice(draggedItemIndex, 1);
93+
reorderedData.splice(idxToAdd, 0, event.draggedDataItems[0]);
94+
});
95+
96+
setData(reorderedData);
97+
};
98+
99+
return (
100+
<div>
101+
<div><Button onClick={navigateToIndex}>Index Page</Button></div><br />
102+
<MyGrid
103+
style={{ height: '700px' }}
104+
data={data}
105+
autoProcessData={true}
106+
dataItemKey="orderID"
107+
108+
sortable={true}
109+
defaultSort={[ { field: 'orderDate', dir: 'desc' } ]}
110+
111+
filterable={true}
112+
113+
groupable={true}
114+
defaultGroup={[{ field: 'customerID' }]}
115+
116+
rowReorderable={{ enabled: true }}
117+
onRowReorder={handleRowReorder}
118+
119+
pageable={{ buttonCount: 4, pageSizes: true }}
120+
defaultSkip={0}
121+
defaultTake={20}
122+
123+
detail={DetailComponent}
124+
>
125+
<GridColumn field="customerID" width="200px" />
126+
<GridColumn field="orderDate" filter="date" format="{0:D}" width="300px" />
127+
<GridColumn field="shipName" width="280px" />
128+
<GridColumn field="freight" filter="numeric" width="200px" />
129+
<GridColumn field="shippedDate" filter="date" format="{0:D}" width="300px" />
130+
<GridColumn field="employeeID" filter="numeric" width="200px" />
131+
<GridColumn locked={true} field="orderID" filterable={false} title="ID" width="90px" />
132+
</MyGrid>
133+
</div>
134+
);
128135
}

‎examples/kendo-react-nextjs/package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,9 @@
99
"lint": "next lint"
1010
},
1111
"dependencies": {
12-
"@progress/kendo-data-query": "^1.7.0",
12+
"@progress/kendo-data-query": "^1.7.1",
1313
"@progress/kendo-drawing": "^1.21.2",
14-
"@progress/kendo-licensing": "^1.3.5",
14+
"@progress/kendo-licensing": "^1.6.0",
1515
"@progress/kendo-react-animation": "^11.0.0",
1616
"@progress/kendo-react-buttons": "^11.0.0",
1717
"@progress/kendo-react-data-tools": "^11.0.0",
@@ -22,7 +22,7 @@
2222
"@progress/kendo-react-intl": "^11.0.0",
2323
"@progress/kendo-react-popup": "^11.0.0",
2424
"@progress/kendo-react-treeview": "^11.0.0",
25-
"@progress/kendo-svg-icons": "^4.0.0",
25+
"@progress/kendo-svg-icons": "^4.3.0",
2626
"@progress/kendo-theme-default": "^11.0.2",
2727
"next": "^14.2.25",
2828
"react": "latest",

0 commit comments

Comments
 (0)