From c1054dab88635da3ac6dcae8de9707841e40c681 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Mon, 2 Jun 2025 16:04:18 +0000 Subject: [PATCH 1/2] chore: bump the kendo-dependencies group across 1 directory with 10 updates Bumps the kendo-dependencies group with 10 updates in the /examples/kendo-react-stackblitz-app directory: | Package | From | To | | --- | --- | --- | | [@progress/kendo-react-charts](https://github.com/telerik/kendo-react) | `10.2.0` | `11.0.0` | | [@progress/kendo-react-dateinputs](https://github.com/telerik/kendo-react) | `10.2.0` | `11.0.0` | | [@progress/kendo-react-dialogs](https://github.com/telerik/kendo-react) | `10.2.0` | `11.0.0` | | [@progress/kendo-react-dropdowns](https://github.com/telerik/kendo-react) | `10.2.0` | `11.0.0` | | [@progress/kendo-react-grid](https://github.com/telerik/kendo-react) | `10.2.0` | `11.0.0` | | [@progress/kendo-react-inputs](https://github.com/telerik/kendo-react) | `10.2.0` | `11.0.0` | | [@progress/kendo-react-intl](https://github.com/telerik/kendo-react) | `10.2.0` | `11.0.0` | | [@progress/kendo-react-layout](https://github.com/telerik/kendo-react) | `10.2.0` | `11.0.0` | | [@progress/kendo-react-tooltip](https://github.com/telerik/kendo-react) | `10.2.0` | `11.0.0` | | [@progress/kendo-theme-default](https://github.com/telerik/kendo-themes/tree/HEAD/packages/default) | `10.6.0` | `11.0.2` | Updates `@progress/kendo-react-charts` from 10.2.0 to 11.0.0 - [Commits](https://github.com/telerik/kendo-react/commits) Updates `@progress/kendo-react-dateinputs` from 10.2.0 to 11.0.0 - [Commits](https://github.com/telerik/kendo-react/commits) Updates `@progress/kendo-react-dialogs` from 10.2.0 to 11.0.0 - [Commits](https://github.com/telerik/kendo-react/commits) Updates `@progress/kendo-react-dropdowns` from 10.2.0 to 11.0.0 - [Commits](https://github.com/telerik/kendo-react/commits) Updates `@progress/kendo-react-grid` from 10.2.0 to 11.0.0 - [Commits](https://github.com/telerik/kendo-react/commits) Updates `@progress/kendo-react-inputs` from 10.2.0 to 11.0.0 - [Commits](https://github.com/telerik/kendo-react/commits) Updates `@progress/kendo-react-intl` from 10.2.0 to 11.0.0 - [Commits](https://github.com/telerik/kendo-react/commits) Updates `@progress/kendo-react-layout` from 10.2.0 to 11.0.0 - [Commits](https://github.com/telerik/kendo-react/commits) Updates `@progress/kendo-react-tooltip` from 10.2.0 to 11.0.0 - [Commits](https://github.com/telerik/kendo-react/commits) Updates `@progress/kendo-theme-default` from 10.6.0 to 11.0.2 - [Release notes](https://github.com/telerik/kendo-themes/releases) - [Changelog](https://github.com/telerik/kendo-themes/blob/develop/packages/default/CHANGELOG.md) - [Commits](https://github.com/telerik/kendo-themes/commits/v11.0.2/packages/default) --- updated-dependencies: - dependency-name: "@progress/kendo-react-charts" dependency-version: 11.0.0 dependency-type: direct:production update-type: version-update:semver-major dependency-group: kendo-dependencies - dependency-name: "@progress/kendo-react-dateinputs" dependency-version: 11.0.0 dependency-type: direct:production update-type: version-update:semver-major dependency-group: kendo-dependencies - dependency-name: "@progress/kendo-react-dialogs" dependency-version: 11.0.0 dependency-type: direct:production update-type: version-update:semver-major dependency-group: kendo-dependencies - dependency-name: "@progress/kendo-react-dropdowns" dependency-version: 11.0.0 dependency-type: direct:production update-type: version-update:semver-major dependency-group: kendo-dependencies - dependency-name: "@progress/kendo-react-grid" dependency-version: 11.0.0 dependency-type: direct:production update-type: version-update:semver-major dependency-group: kendo-dependencies - dependency-name: "@progress/kendo-react-inputs" dependency-version: 11.0.0 dependency-type: direct:production update-type: version-update:semver-major dependency-group: kendo-dependencies - dependency-name: "@progress/kendo-react-intl" dependency-version: 11.0.0 dependency-type: direct:production update-type: version-update:semver-major dependency-group: kendo-dependencies - dependency-name: "@progress/kendo-react-layout" dependency-version: 11.0.0 dependency-type: direct:production update-type: version-update:semver-major dependency-group: kendo-dependencies - dependency-name: "@progress/kendo-react-tooltip" dependency-version: 11.0.0 dependency-type: direct:production update-type: version-update:semver-major dependency-group: kendo-dependencies - dependency-name: "@progress/kendo-theme-default" dependency-version: 11.0.2 dependency-type: direct:production update-type: version-update:semver-major dependency-group: kendo-dependencies ... Signed-off-by: dependabot[bot] --- .../kendo-react-stackblitz-app/package.json | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/examples/kendo-react-stackblitz-app/package.json b/examples/kendo-react-stackblitz-app/package.json index 78b77e26..dd7a68da 100644 --- a/examples/kendo-react-stackblitz-app/package.json +++ b/examples/kendo-react-stackblitz-app/package.json @@ -5,16 +5,16 @@ "dependencies": { "@progress/kendo-data-query": "^1.7.0", "@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-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", From be7251f0d64c23b0cb95e56d9568e27f9ed6327f Mon Sep 17 00:00:00 2001 From: Silviya Boteva Date: Tue, 3 Jun 2025 16:04:58 +0300 Subject: [PATCH 2/2] chore: update grid props --- .../kendo-react-stackblitz-app/package.json | 3 +- .../src/common/products-services.jsx | 27 +++ .../src/components/GridPage.jsx | 200 +++++++++--------- .../src/components/Home.jsx | 2 +- .../src/components/MyCommandCell.jsx | 52 ++--- 5 files changed, 148 insertions(+), 136 deletions(-) create mode 100644 examples/kendo-react-stackblitz-app/src/common/products-services.jsx diff --git a/examples/kendo-react-stackblitz-app/package.json b/examples/kendo-react-stackblitz-app/package.json index dd7a68da..33099aed 100644 --- a/examples/kendo-react-stackblitz-app/package.json +++ b/examples/kendo-react-stackblitz-app/package.json @@ -3,9 +3,10 @@ "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": "^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", 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 ( + - - ) : ( - - );