diff --git a/examples/kendo-react-stackblitz-app/package.json b/examples/kendo-react-stackblitz-app/package.json index 78b77e26..33099aed 100644 --- a/examples/kendo-react-stackblitz-app/package.json +++ b/examples/kendo-react-stackblitz-app/package.json @@ -3,18 +3,19 @@ "version": "0.1.0", "private": true, "dependencies": { - "@progress/kendo-data-query": "^1.7.0", + "@progress/kendo-data-query": "^1.7.1", "@progress/kendo-drawing": "^1.21.2", - "@progress/kendo-react-charts": "^10.0.0", - "@progress/kendo-react-dateinputs": "^10.0.0", - "@progress/kendo-react-dialogs": "^10.0.0", - "@progress/kendo-react-dropdowns": "^10.0.0", - "@progress/kendo-react-grid": "^10.0.0", - "@progress/kendo-react-inputs": "^10.0.0", - "@progress/kendo-react-intl": "^10.0.0", - "@progress/kendo-react-layout": "^10.0.0", - "@progress/kendo-react-tooltip": "^10.0.0", - "@progress/kendo-theme-default": "^10.0.1", + "@progress/kendo-react-charts": "^11.0.0", + "@progress/kendo-react-common": "^11.0.0", + "@progress/kendo-react-dateinputs": "^11.0.0", + "@progress/kendo-react-dialogs": "^11.0.0", + "@progress/kendo-react-dropdowns": "^11.0.0", + "@progress/kendo-react-grid": "^11.0.0", + "@progress/kendo-react-inputs": "^11.0.0", + "@progress/kendo-react-intl": "^11.0.0", + "@progress/kendo-react-layout": "^11.0.0", + "@progress/kendo-react-tooltip": "^11.0.0", + "@progress/kendo-theme-default": "^11.0.2", "bootstrap": "5.2.1", "hammerjs": "^2.0.8", "react": "^18.2.0", diff --git a/examples/kendo-react-stackblitz-app/src/common/products-services.jsx b/examples/kendo-react-stackblitz-app/src/common/products-services.jsx new file mode 100644 index 00000000..e8c89777 --- /dev/null +++ b/examples/kendo-react-stackblitz-app/src/common/products-services.jsx @@ -0,0 +1,27 @@ +import { sampleProducts } from './sample-products'; + +const data = [...sampleProducts]; + +const generateId = (data) => data.reduce((acc, current) => Math.max(acc, current.ProductID), 0) + 1; + +export const insertItem = (item) => { + item.ProductID = generateId(data); + data.unshift(item); + return data; +}; + +export const getItems = () => { + return data; +}; + +export const updateItem = (item) => { + const index = data.findIndex((record) => record.ProductID === item.ProductID); + data[index] = item; + return data; +}; + +export const deleteItem = (item) => { + const index = data.findIndex((record) => record.ProductID === item.ProductID); + data.splice(index, 1); + return data; +}; \ No newline at end of file diff --git a/examples/kendo-react-stackblitz-app/src/components/GridPage.jsx b/examples/kendo-react-stackblitz-app/src/components/GridPage.jsx index 2ea0ada4..273bc2c2 100644 --- a/examples/kendo-react-stackblitz-app/src/components/GridPage.jsx +++ b/examples/kendo-react-stackblitz-app/src/components/GridPage.jsx @@ -3,149 +3,143 @@ import { sampleProducts } from '../common/sample-products'; import { MyCommandCell } from './MyCommandCell.jsx'; import { Grid, GridColumn as Column, GridToolbar } from '@progress/kendo-react-grid'; import { Button } from '@progress/kendo-react-buttons'; -import { process } from '@progress/kendo-data-query'; +import { insertItem, getItems, updateItem, deleteItem } from '../common/products-services'; import ThemeChooser from './ThemeChooser'; -const GridPage = (props) => { - const editField = "inEdit"; - const [data, setData] = useState(sampleProducts); - const [dataState, setDataState] = useState({skip: 0, take: 10 }) - - const generateId = data => data.reduce((acc, current) => Math.max(acc, current.ProductID), 0) + 1; +const GridContext = React.createContext({}); - const removeItem = (data, item) => { - let index = data.findIndex(p => (p === item || item.ProductID) && (p.ProductID === item.ProductID)); - if (index >= 0) { - data.splice(index, 1); - } - } +const CommandCell = (props) => { + const { enterEdit, remove, add, discard, update, cancel } = React.useContext(GridContext); + return ( + + ) +}; +const DATA_ITEM_KEY = 'ProductID'; - const enterEdit = (dataItem) => { - setData(data.map(item => - item.ProductID === dataItem.ProductID ? - { ...item, inEdit: true } : item - )); - } +const GridPage = (props) => { + const [data, setData] = useState(sampleProducts); + const [edit, setEdit] = useState({}); const remove = (dataItem) => { - - const newData = [...data]; - removeItem(newData, dataItem); - removeItem(sampleProducts, dataItem); + const newData = deleteItem(dataItem); setData([...newData]); - } + }; const add = (dataItem) => { - dataItem.inEdit = undefined; - dataItem.ProductID = generateId(sampleProducts); - - sampleProducts.unshift(dataItem); - setData([...data]) - } - - const discard = (dataItem) => { - const newData = [data]; - removeItem(newData, dataItem); - + const newData = insertItem(dataItem); setData(newData); - } + setEdit({}); + }; const update = (dataItem) => { - const newData = [...data] - const updatedItem = { ...dataItem, inEdit: undefined }; - - updateItem(newData, updatedItem); - updateItem(sampleProducts, updatedItem); + dataItem.inEdit = false; + const newData = updateItem(dataItem); + setData(newData); + setEdit((edit) => ({ ...edit, [String(dataItem[DATA_ITEM_KEY])]: false })); + }; + const discard = (dataItem) => { + const newData = [...data]; + newData.splice(0, 1); setData(newData); - } + setEdit(() => ({ ...edit, [String(dataItem[DATA_ITEM_KEY])]: false })); + }; const cancel = (dataItem) => { - const originalItem = sampleProducts.find(p => p.ProductID === dataItem.ProductID); - const newData = data.map(item => item.ProductID === originalItem.ProductID ? originalItem : item); + const originalItem = getItems().find((p) => p[DATA_ITEM_KEY] === dataItem[DATA_ITEM_KEY]); + const newData = data.map((item) => + item[DATA_ITEM_KEY] === originalItem?.[DATA_ITEM_KEY] ? originalItem : item + ); setData(newData); - } + setEdit(() => ({ ...edit, [String(dataItem[DATA_ITEM_KEY])]: false })); + }; - const updateItem = (data, item) => { - let index = data.findIndex(p => p === item || (item.ProductID && p.ProductID === item.ProductID)); - if (index >= 0) { - data[index] = { ...item }; - } - } + const enterEdit = (dataItem) => { + setEdit((edit) => ({ ...edit, [String(dataItem[DATA_ITEM_KEY])]: true })); + }; const itemChange = (event) => { - const newData = data.map(item => - item.ProductID === event.dataItem.ProductID ? - { ...item, [event.field]: event.value } : item + const field = event.field || ''; + const newData = data.map((item) => + item[DATA_ITEM_KEY] === event.dataItem[DATA_ITEM_KEY] ? { ...item, [field]: event.value } : item ); + setData(newData); - } + }; const addNew = () => { - const newDataItem = { inEdit: true, Discontinued: false }; + const newDataItem = { + [DATA_ITEM_KEY]: null, + Discontinued: false + }; + setData([newDataItem, ...data]); - } + setEdit((edit) => ({ ...edit, [String(newDataItem[DATA_ITEM_KEY])]: true })); + }; const cancelCurrentChanges = () => { setData([...sampleProducts]); } - const CommandCell = (props) => ( - - ); - const hasEditedItem = data.some(p => p.inEdit); return (
- - setDataState(e.dataState) - } // uncomment to enable data operations - {...dataState} // uncomment to enable data operations - > - - - {hasEditedItem && ( + + + - )} - - - - - - - - + {Object.keys(edit).length > 0 && ( + + )} + + + + + + + }} width="240px" filterable={false} /> + +

KendoReact Grid

diff --git a/examples/kendo-react-stackblitz-app/src/components/Home.jsx b/examples/kendo-react-stackblitz-app/src/components/Home.jsx index 8c76f925..c8ae7651 100644 --- a/examples/kendo-react-stackblitz-app/src/components/Home.jsx +++ b/examples/kendo-react-stackblitz-app/src/components/Home.jsx @@ -6,7 +6,7 @@ const Home = (props) => {

Welcome to KendoReact

-

This is a sample application built with KendoReact - a set of over 60 UI components built from the ground-up specifically for React.

+

This is a sample application built with KendoReact - a React component library of 120+ enterprise-grade UI components and an AI Coding Assistant. Build polished, high-performing and accessible applications.

diff --git a/examples/kendo-react-stackblitz-app/src/components/MyCommandCell.jsx b/examples/kendo-react-stackblitz-app/src/components/MyCommandCell.jsx index 361a1053..4e150a3d 100644 --- a/examples/kendo-react-stackblitz-app/src/components/MyCommandCell.jsx +++ b/examples/kendo-react-stackblitz-app/src/components/MyCommandCell.jsx @@ -1,48 +1,38 @@ import * as React from "react"; import { Button } from '@progress/kendo-react-buttons'; +import { classNames } from '@progress/kendo-react-common'; export const MyCommandCell = (props) => { const { dataItem } = props; - const inEdit = dataItem[props.editField]; - const isNewItem = dataItem.ProductID === undefined; - return inEdit ? ( - - + const inEdit = props.isInEdit; + const isNewItem = dataItem.ProductID === null; + + const onDeleteData = (dataItem) => { + props.remove(dataItem); + }; + return ( + - - ) : ( - - );