item.ProductName)}
- onChange={dropDownChange}
- />
- Clear
-
-
-
- );
-};
-
-export default App;
diff --git a/docs/knowledge-base/examples/grid/grid-external-dropdownlist-filter/main.jsx b/docs/knowledge-base/examples/grid/grid-external-dropdownlist-filter/main.jsx
deleted file mode 100644
index 36d8526e..00000000
--- a/docs/knowledge-base/examples/grid/grid-external-dropdownlist-filter/main.jsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import * as React from 'react';
-import { createRoot } from 'react-dom/client';
-import App from './app'
-
-const root = createRoot(document.querySelector('my-app'));
-root.render(
-
- {
- this.state.columns.map((column, idx) =>
- (
-
-
- );
- }
-}
-
-export default App;
\ No newline at end of file
diff --git a/docs/knowledge-base/examples/grid/grid-filter-checkbox/customColumnMenu.jsx b/docs/knowledge-base/examples/grid/grid-filter-checkbox/customColumnMenu.jsx
deleted file mode 100644
index 3df29618..00000000
--- a/docs/knowledge-base/examples/grid/grid-filter-checkbox/customColumnMenu.jsx
+++ /dev/null
@@ -1,100 +0,0 @@
-import * as React from 'react';
-import {
- GridColumnMenuSort,
- GridColumnMenuItemGroup, GridColumnMenuItem, GridColumnMenuItemContent
-} from '@progress/kendo-react-grid';
-
-export class CustomColumnMenu extends React.Component {
- constructor(props) {
- super(props);
-
- this.state = {
- data: this.props.data,
- columnsExpanded: true
- };
- }
-
- onToggleColumn = (item) => {
- let data = this.props.data
- data.map(dataItem => {
- if (dataItem.ProductID === item.ProductID) {
- dataItem.filterChecked ?
- dataItem.filterChecked = false :
- dataItem.filterChecked = true
- }
- return item
- })
-
- this.setState({
- data: data
- })
- }
-
- onReset = (event) => {
- event.preventDefault();
- this.props.onReset();
- if (this.props.onCloseMenu) {
- this.props.onCloseMenu();
- }
- }
-
- onSubmit = (event) => {
- if (event) {
- event.preventDefault();
- }
- this.props.onColumnsSubmit(this.state.data);
- if (this.props.onCloseMenu) {
- this.props.onCloseMenu();
- }
- }
-
- render() {
-
- return (
- );
- }
-}
diff --git a/docs/knowledge-base/examples/grid/grid-filter-checkbox/main.jsx b/docs/knowledge-base/examples/grid/grid-filter-checkbox/main.jsx
deleted file mode 100644
index 36d8526e..00000000
--- a/docs/knowledge-base/examples/grid/grid-filter-checkbox/main.jsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import * as React from 'react';
-import { createRoot } from 'react-dom/client';
-import App from './app'
-
-const root = createRoot(document.querySelector('my-app'));
-root.render( setFilter(e.filter)}
- >
-
- );
-};
-
-export default App;
diff --git a/docs/knowledge-base/examples/grid/grid-filtering-api/main.tsx b/docs/knowledge-base/examples/grid/grid-filtering-api/main.tsx
deleted file mode 100644
index 36d8526e..00000000
--- a/docs/knowledge-base/examples/grid/grid-filtering-api/main.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import * as React from 'react';
-import { createRoot } from 'react-dom/client';
-import App from './app'
-
-const root = createRoot(document.querySelector('my-app'));
-root.render(
-
- );
- }
-
- return (
-
- );
-};
-
-const App = () => {
- const baseUrl = 'https://demos.telerik.com/kendo-ui/service-v4/odata/';
- const init = {
- method: 'GET',
- accept: 'application/json',
- headers: {},
- };
- const [categories, setCategories] = React.useState([]);
-
- const expandChange = (event) => {
- event.dataItem.expanded = event.value;
- let categoryID = event.dataItem.CategoryID;
- setCategories([...categories]);
-
- if (!event.value || event.dataItem.details) {
- return;
- }
-
- fetch(baseUrl + `Products?$filter=CategoryID%20eq%20` + categoryID, init)
- .then((response) => response.json())
- .then((json) => {
- let data = categories.slice();
- let index = data.findIndex((d) => d.CategoryID === categoryID);
- data[index].details = json.value;
- setCategories(data);
- });
- };
-
- React.useEffect(() => {
- fetch(baseUrl + `Categories`, init)
- .then((response) => response.json())
- .then((json) => setCategories(json.value));
- }, []);
-
- const cellRender = (td, props) => {
- if (props.field == 'expanded' && props.dataItem.CategoryID == 3) {
- return
-
-
-
- );
-};
-
-export default App;
diff --git a/docs/knowledge-base/examples/grid/grid-hide-expand-icon-conditionally/main.jsx b/docs/knowledge-base/examples/grid/grid-hide-expand-icon-conditionally/main.jsx
deleted file mode 100644
index 36d8526e..00000000
--- a/docs/knowledge-base/examples/grid/grid-hide-expand-icon-conditionally/main.jsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import * as React from 'react';
-import { createRoot } from 'react-dom/client';
-import App from './app'
-
-const root = createRoot(document.querySelector('my-app'));
-root.render(
-
-
- {collapsedState.length ? 'Expand' : 'Collapse'} Groups
-
-
- {stateColumns.map(
- (column, idx) =>
- column.show && (
-
- );
-};
-
-export default App;
diff --git a/docs/knowledge-base/examples/grid/grid-hide-grouped-columns/main.jsx b/docs/knowledge-base/examples/grid/grid-hide-grouped-columns/main.jsx
deleted file mode 100644
index 36d8526e..00000000
--- a/docs/knowledge-base/examples/grid/grid-hide-grouped-columns/main.jsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import * as React from 'react';
-import { createRoot } from 'react-dom/client';
-import App from './app'
-
-const root = createRoot(document.querySelector('my-app'));
-root.render(
-
-
- Export with method
-
-
-
-
-
-
Creator: ${
- this.state.creator
- } Watermark
`;
- };
-
- exportPDFWithMethod = () => {
- let gridElement = document.getElementsByClassName('k-grid')[0];
- drawDOM(gridElement, {
- paperSize: 'A3',
- margin: 100,
- template: this.PageTemplate
- })
- .then(group => {
- return exportPDF(group);
- })
- .then(dataUri => {
- saveAs(dataUri, 'scene.pdf');
- console.log(dataUri.split(';base64,')[1]);
- });
- };
-}
-
-export default App;
diff --git a/docs/knowledge-base/examples/grid/grid-pdf-export-with-watermark/main.jsx b/docs/knowledge-base/examples/grid/grid-pdf-export-with-watermark/main.jsx
deleted file mode 100644
index 36d8526e..00000000
--- a/docs/knowledge-base/examples/grid/grid-pdf-export-with-watermark/main.jsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import * as React from 'react';
-import { createRoot } from 'react-dom/client';
-import App from './app'
-
-const root = createRoot(document.querySelector('my-app'));
-root.render(
-
- );
- //Using the props.render ensures that the cellRender will be called for the custom cell
- return props.render
- ? props.render.call(undefined, content, props)
- : content;
- } else {
- return null;
- }
-};
-const App = () => {
- return (
-
-
- );
-};
-
-export default App;
diff --git a/docs/knowledge-base/examples/grid/grid-progressbar-cell/main.jsx b/docs/knowledge-base/examples/grid/grid-progressbar-cell/main.jsx
deleted file mode 100644
index 36d8526e..00000000
--- a/docs/knowledge-base/examples/grid/grid-progressbar-cell/main.jsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import * as React from 'react';
-import { createRoot } from 'react-dom/client';
-import App from './app'
-
-const root = createRoot(document.querySelector('my-app'));
-root.render(
-
-
-
-
- );
-};
-export default App;
diff --git a/docs/knowledge-base/examples/grid/grid-row-colors/alternate-colors/main.jsx b/docs/knowledge-base/examples/grid/grid-row-colors/alternate-colors/main.jsx
deleted file mode 100644
index 36d8526e..00000000
--- a/docs/knowledge-base/examples/grid/grid-row-colors/alternate-colors/main.jsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import * as React from 'react';
-import { createRoot } from 'react-dom/client';
-import App from './app'
-
-const root = createRoot(document.querySelector('my-app'));
-root.render(
-
-
-
-
- );
-};
-export default App;
diff --git a/docs/knowledge-base/examples/grid/grid-row-colors/single-row-color/main.jsx b/docs/knowledge-base/examples/grid/grid-row-colors/single-row-color/main.jsx
deleted file mode 100644
index 36d8526e..00000000
--- a/docs/knowledge-base/examples/grid/grid-row-colors/single-row-color/main.jsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import * as React from 'react';
-import { createRoot } from 'react-dom/client';
-import App from './app'
-
-const root = createRoot(document.querySelector('my-app'));
-root.render( {
- setDataState(e.dataState);
- }}
- >
- (
-
-
- )}
- />
-
- );
-};
-
-export default App;
diff --git a/docs/knowledge-base/examples/grid/grid-save-datastate-to-localstorage/main.jsx b/docs/knowledge-base/examples/grid/grid-save-datastate-to-localstorage/main.jsx
deleted file mode 100644
index 36d8526e..00000000
--- a/docs/knowledge-base/examples/grid/grid-save-datastate-to-localstorage/main.jsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import * as React from 'react';
-import { createRoot } from 'react-dom/client';
-import App from './app'
-
-const root = createRoot(document.querySelector('my-app'));
-root.render($1 '
- );
- if (node !== modifiedContent) {
- return (
-
-
-
-
-
- Search:{' '}
-
-
-
-
-
-
-
- ({
- ...item,
- [SELECTED_FIELD]: selectedState[idGetter(item)],
- }))}
- style={{
- height: '400px',
- }}
- dataItemKey={DATA_ITEM_KEY}
- selectedField={SELECTED_FIELD}
- selectable={
- useDeviceType() === 'Mobile' || useDeviceType() === 'Tablet'
- ? null
- : {
- enabled: true,
- drag: false,
- cell: false,
- mode: 'multiple',
- }
- }
- onSelectionChange={onSelectionChange}
- onHeaderSelectionChange={onHeaderSelectionChange}
- >
- !selectedState[idGetter(item)]) === -1
- }
- />
-
-
- );
-};
-
-export default App;
diff --git a/docs/knowledge-base/examples/grid/grid-selection-mobile-scrolling/isMobile.jsx b/docs/knowledge-base/examples/grid/grid-selection-mobile-scrolling/isMobile.jsx
deleted file mode 100644
index d0bc47fd..00000000
--- a/docs/knowledge-base/examples/grid/grid-selection-mobile-scrolling/isMobile.jsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import { useState, useEffect } from 'react';
-
-export function useDeviceType() {
- const [device, setDevice] = useState('');
-
- useEffect(() => {
- function handleDeviceDetection() {
- const userAgent = navigator.userAgent.toLowerCase();
- const isMobile = /iphone|ipad|ipod|android|windows phone/g.test(
- userAgent
- );
- const isTablet =
- /(ipad|tablet|playbook|silk)|(android(?!.*mobile))/g.test(userAgent);
-
- if (isMobile) setDevice('Mobile');
- else if (isTablet) setDevice('Tablet');
- else setDevice('Desktop');
- }
-
- handleDeviceDetection();
- window.addEventListener('resize', handleDeviceDetection);
-
- return () => window.removeEventListener('resize', handleDeviceDetection);
- }, []);
-
- return device;
-}
diff --git a/docs/knowledge-base/examples/grid/grid-selection-mobile-scrolling/main.jsx b/docs/knowledge-base/examples/grid/grid-selection-mobile-scrolling/main.jsx
deleted file mode 100644
index 36d8526e..00000000
--- a/docs/knowledge-base/examples/grid/grid-selection-mobile-scrolling/main.jsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import * as React from 'react';
-import { createRoot } from 'react-dom/client';
-import App from './app'
-
-const root = createRoot(document.querySelector('my-app'));
-root.render(
- showPopover(dataItem, ev.target)}
- >
- Show popover
-
-
- );
-};
-
-const PopoverTemplate = (props) => {
- if (props.item) {
- return (
-
-
- Unit Price: {props.item.UnitPrice}
-
-
Product name: {props.item.ProductName}
-
- props.showPopover(dataItem, ev.target)}
- >
- Show popover
-
-
- );
-};
diff --git a/docs/knowledge-base/examples/grid/grid-show-different-field-in-group/app.jsx b/docs/knowledge-base/examples/grid/grid-show-different-field-in-group/app.jsx
deleted file mode 100644
index c6443282..00000000
--- a/docs/knowledge-base/examples/grid/grid-show-different-field-in-group/app.jsx
+++ /dev/null
@@ -1,133 +0,0 @@
-import * as React from 'react';
-
-import { process } from '@progress/kendo-data-query';
-import {
- Grid,
- GridColumn as Column,
- GridToolbar,
-} from '@progress/kendo-react-grid';
-import {
- setGroupIds,
- getGroupIds,
- setExpandedState,
-} from '@progress/kendo-react-data-tools';
-import products from './products.json';
-const initialDataState = {
- take: 10,
- skip: 0,
- group: [
- {
- field: 'ProductID',
- },
- ],
-};
-
-const processWithGroups = (data, dataState) => {
- const newDataState = process(data, dataState);
- setGroupIds({
- data: newDataState.data,
- group: dataState.group,
- });
- return newDataState;
-};
-
-const findFirstDataItem = (item) => {
- if (item.items && item.items.length > 0 && !item.items[0].groupId) {
- return item.items[0];
- } else {
- return findFirstDataItem(item.items[0]);
- }
-};
-
-const App = () => {
- const [dataState, setDataState] = React.useState(initialDataState);
- const [resultState, setResultState] = React.useState(
- processWithGroups(products, initialDataState)
- );
- const [collapsedState, setCollapsedState] = React.useState([]);
- const onDataStateChange = React.useCallback((event) => {
- const newDataState = processWithGroups(products, event.dataState);
- setDataState(event.dataState);
- setResultState(newDataState);
- }, []);
- const onExpandChange = React.useCallback(
- (event) => {
- const item = event.dataItem;
-
- if (item.groupId) {
- const collapsedIds = !event.value
- ? [...collapsedState, item.groupId]
- : collapsedState.filter((groupId) => groupId !== item.groupId);
- setCollapsedState(collapsedIds);
- }
- },
- [collapsedState]
- );
- const onGroupsToggle = React.useCallback(() => {
- const dataStateWithoutPaging = processWithGroups(products, {
- group: dataState.group,
- });
- setCollapsedState(
- collapsedState.length
- ? []
- : getGroupIds({
- data: dataStateWithoutPaging.data,
- })
- );
- }, [collapsedState, dataState]);
- const newData = setExpandedState({
- data: resultState.data,
- collapsedIds: collapsedState,
- });
-
- const cellRender = (td, props) => {
- if (
- props.rowType == 'groupHeader' &&
- props.field == 'value' &&
- props.dataItem.field == 'ProductID' &&
- td
- ) {
- if (td.props.children) {
- let children = (
-
- {td.props.children.props.children}:{' '}
- {findFirstDataItem(props.dataItem).ProductName}
-
- );
- return React.cloneElement(td, td.props, children);
- }
- }
- return td;
- };
- return (
-
-
-
- {collapsedState.length ? 'Expand' : 'Collapse'} Groups
-
-
-
- );
-};
-
-export default App;
diff --git a/docs/knowledge-base/examples/grid/grid-show-different-field-in-group/main.jsx b/docs/knowledge-base/examples/grid/grid-show-different-field-in-group/main.jsx
deleted file mode 100644
index 36d8526e..00000000
--- a/docs/knowledge-base/examples/grid/grid-show-different-field-in-group/main.jsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import * as React from 'react';
-import { createRoot } from 'react-dom/client';
-import App from './app'
-
-const root = createRoot(document.querySelector('my-app'));
-root.render(
-
-
-
- );
-};
-export default App;
diff --git a/docs/knowledge-base/examples/grid/grid-show-placeholder-for-filters/grid-with-filtering.jsx b/docs/knowledge-base/examples/grid/grid-show-placeholder-for-filters/grid-with-filtering.jsx
deleted file mode 100644
index 221dc074..00000000
--- a/docs/knowledge-base/examples/grid/grid-show-placeholder-for-filters/grid-with-filtering.jsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import * as React from 'react';
-import { Grid, GridColumn } from '@progress/kendo-react-grid';
-import { filterBy } from '@progress/kendo-data-query';
-import { sampleProducts } from './sample-products';
-const initialFilter = {
- logic: 'and',
- filters: [],
-};
-export const GridWithFiltering = () => {
- const [filter, setFilter] = React.useState(initialFilter);
- return (
- setFilter(e.filter)}
- >
-
- );
-};
diff --git a/docs/knowledge-base/examples/grid/grid-show-placeholder-for-filters/main.jsx b/docs/knowledge-base/examples/grid/grid-show-placeholder-for-filters/main.jsx
deleted file mode 100644
index 36d8526e..00000000
--- a/docs/knowledge-base/examples/grid/grid-show-placeholder-for-filters/main.jsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import * as React from 'react';
-import { createRoot } from 'react-dom/client';
-import App from './app'
-
-const root = createRoot(document.querySelector('my-app'));
-root.render(
-
-
-
-
- );
-};
-export default App;
diff --git a/docs/knowledge-base/examples/grid/grid-whitespace-textoverflow/CSS/main.jsx b/docs/knowledge-base/examples/grid/grid-whitespace-textoverflow/CSS/main.jsx
deleted file mode 100644
index 36d8526e..00000000
--- a/docs/knowledge-base/examples/grid/grid-whitespace-textoverflow/CSS/main.jsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import * as React from 'react';
-import { createRoot } from 'react-dom/client';
-import App from './app'
-
-const root = createRoot(document.querySelector('my-app'));
-root.render(
- {props.dataItem.ProductName}
-
- );
- };
- return (
-
-
- );
-};
-export default App;
diff --git a/docs/knowledge-base/examples/grid/grid-whitespace-textoverflow/cell/main.jsx b/docs/knowledge-base/examples/grid/grid-whitespace-textoverflow/cell/main.jsx
deleted file mode 100644
index 36d8526e..00000000
--- a/docs/knowledge-base/examples/grid/grid-whitespace-textoverflow/cell/main.jsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import * as React from 'react';
-import { createRoot } from 'react-dom/client';
-import App from './app'
-
-const root = createRoot(document.querySelector('my-app'));
-root.render(
- {props.props.children}
-
- );
- };
- return (
-
-
- );
-};
-export default App;
diff --git a/docs/knowledge-base/examples/grid/grid-whitespace-textoverflow/cellRender/main.jsx b/docs/knowledge-base/examples/grid/grid-whitespace-textoverflow/cellRender/main.jsx
deleted file mode 100644
index 36d8526e..00000000
--- a/docs/knowledge-base/examples/grid/grid-whitespace-textoverflow/cellRender/main.jsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import * as React from 'react';
-import { createRoot } from 'react-dom/client';
-import App from './app'
-
-const root = createRoot(document.querySelector('my-app'));
-root.render({td.props.children.props.children} count: {props.dataItem.items.length}
- return React.cloneElement(td, td.props, children);
- }
- return td
- }
-
- render() {
- return (
-
-
- );
- }
-
- createAppState(dataState) {
- return {
- result: process(products, dataState),
- dataState: dataState
- };
- }
-
- dataStateChange = (event) => {
- this.setState(this.createAppState(event.data));
- }
-
- expandChange = (event) => {
- event.dataItem[event.target.props.expandField] = event.value;
- this.setState({
- result: Object.assign({}, this.state.result),
- dataState: this.state.dataState
- });
- }
-}
-
-export default App;
diff --git a/docs/knowledge-base/examples/grid/group-header-render/cells-header/app.jsx b/docs/knowledge-base/examples/grid/group-header-render/cells-header/app.jsx
deleted file mode 100644
index 57d53848..00000000
--- a/docs/knowledge-base/examples/grid/group-header-render/cells-header/app.jsx
+++ /dev/null
@@ -1,106 +0,0 @@
-import * as React from 'react';
-
-import { Grid, GridColumn as Column } from '@progress/kendo-react-grid';
-import { groupBy } from '@progress/kendo-data-query';
-import {
- setExpandedState,
- setGroupIds,
-} from '@progress/kendo-react-data-tools';
-import products from './shared-products.json';
-const initialGroup = [
- {
- field: 'UnitsInStock',
- },
- {
- field: 'ProductName',
- },
-];
-const processWithGroups = (data, group) => {
- const newDataState = groupBy(data, group);
- setGroupIds({
- data: newDataState,
- group: group,
- });
- return newDataState;
-};
-
-const CustomCell = (props) => {
- return (
- props.tdProps && (
-
- {props.children && (
-
- {props.children.props.children[0]}
- {props.dataItem.items.length}:{props.dataItem[props.field]}
-
- )}
-
- )
- );
-};
-
-const GroupMyHeaderCustomCell = (props) => (
-
-
- );
-};
-export default App;
diff --git a/docs/knowledge-base/examples/grid/group-header-render/cells-header/main.jsx b/docs/knowledge-base/examples/grid/group-header-render/cells-header/main.jsx
deleted file mode 100644
index 36d8526e..00000000
--- a/docs/knowledge-base/examples/grid/group-header-render/cells-header/main.jsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import * as React from 'react';
-import { createRoot } from 'react-dom/client';
-import App from './app'
-
-const root = createRoot(document.querySelector('my-app'));
-root.render({dataItem[field]} ;
-};
-
-const CategoryNameCell = ({ dataItem, rowType }) => {
- if (rowType === "groupHeader") {
- return null;
- }
- return (
-
- {dataItem && dataItem.Category && dataItem.Category.CategoryName}
-
- );
-};
-
-class App extends React.PureComponent {
- state = this.createAppState({
- take: 10,
- group: [{ field: "UnitsInStock" }]
- });
-
- render() {
- return (
-
-
- );
- }
-
- createAppState(dataState) {
- return {
- result: process(products, dataState),
- dataState: dataState
- };
- }
-
- dataStateChange = event => {
- this.setState(this.createAppState(event.data));
- };
-
- expandChange = event => {
- event.dataItem[event.target.props.expandField] = event.value;
- this.setState({
- result: Object.assign({}, this.state.result),
- dataState: this.state.dataState
- });
- };
-}
-
-export default App;
diff --git a/docs/knowledge-base/examples/grid/grouping-with-custom-cell/main.jsx b/docs/knowledge-base/examples/grid/grouping-with-custom-cell/main.jsx
deleted file mode 100644
index 36d8526e..00000000
--- a/docs/knowledge-base/examples/grid/grouping-with-custom-cell/main.jsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import * as React from 'react';
-import { createRoot } from 'react-dom/client';
-import App from './app'
-
-const root = createRoot(document.querySelector('my-app'));
-root.render(
-
- );
-};
-export default App;
diff --git a/docs/knowledge-base/examples/grid/ignore-diacritics/inputFilterCell.jsx b/docs/knowledge-base/examples/grid/ignore-diacritics/inputFilterCell.jsx
deleted file mode 100644
index ee55e0ed..00000000
--- a/docs/knowledge-base/examples/grid/ignore-diacritics/inputFilterCell.jsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import * as React from 'react';
-import { Input } from '@progress/kendo-react-inputs';
-import { Button } from '@progress/kendo-react-buttons';
-
-export const InputFilterCell = (props) => {
- let hasValue = (value) => Boolean(value);
- const onChange = (event) => {
- hasValue = hasValue(event.target.value);
- props.onChange({
- value: hasValue
- ? event.target.value.normalize('NFD').replace(/[\u0300-\u036f]/g, '')
- : '',
- operator: hasValue ? 'contains' : '',
- syntheticEvent: event.syntheticEvent,
- });
- };
- const onClearButtonClick = (event) => {
- event.preventDefault();
- props.onChange({
- value: '',
- operator: '',
- syntheticEvent: event,
- });
- };
- return (
-
-
- );
-};
diff --git a/docs/knowledge-base/examples/grid/ignore-diacritics/main.jsx b/docs/knowledge-base/examples/grid/ignore-diacritics/main.jsx
deleted file mode 100644
index 36d8526e..00000000
--- a/docs/knowledge-base/examples/grid/ignore-diacritics/main.jsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import * as React from 'react';
-import { createRoot } from 'react-dom/client';
-import App from './app'
-
-const root = createRoot(document.querySelector('my-app'));
-root.render(
- Min:
-
- {
- minTextBox = numeric;
- }}
- onChange={onChange}
- />
-
- Max:
-
- {
- maxTextBox = numeric;
- }}
- onChange={onChange}
- />
-
-
-
-
- );
-};
-
-import { DropDownList } from '@progress/kendo-react-dropdowns';
-export const DropdownFilterCell = (props) => {
- let hasValue = (value) => Boolean(value && value !== props.defaultItem);
-
- const onChange = (event) => {
- hasValue = hasValue(event.target.value);
- props.onChange({
- value: hasValue ? event.target.value : '',
- operator: hasValue ? 'eq' : '',
- syntheticEvent: event.syntheticEvent,
- });
- };
-
- const onClearButtonClick = (event) => {
- event.preventDefault();
- props.onChange({
- value: '',
- operator: '',
- syntheticEvent: event,
- });
- };
-
- return (
-
-
-
-
- );
-};
-const categories = Array.from(
- new Set(
- products.map((p) => (p.Category ? p.Category.CategoryName : ''))
- )
-);
-
-const CategoryFilterCell = (props) => (
-
-
- );
-};
-
-export default App;
diff --git a/docs/knowledge-base/examples/grid/limit-numeric-filter-value/main.jsx b/docs/knowledge-base/examples/grid/limit-numeric-filter-value/main.jsx
deleted file mode 100644
index 36d8526e..00000000
--- a/docs/knowledge-base/examples/grid/limit-numeric-filter-value/main.jsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import * as React from 'react';
-import { createRoot } from 'react-dom/client';
-import App from './app'
-
-const root = createRoot(document.querySelector('my-app'));
-root.render(
- Collapse All
- Expand All
-
-
-
- );
-};
-
-export default App;
diff --git a/docs/knowledge-base/examples/grid/lock-row-headers/main.jsx b/docs/knowledge-base/examples/grid/lock-row-headers/main.jsx
deleted file mode 100644
index 36d8526e..00000000
--- a/docs/knowledge-base/examples/grid/lock-row-headers/main.jsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import * as React from 'react';
-import { createRoot } from 'react-dom/client';
-import App from './app'
-
-const root = createRoot(document.querySelector('my-app'));
-root.render(
- {' '}
-
- );
- } else {
- return
-
-
-
- );
-};
-export default App;
diff --git a/docs/knowledge-base/examples/grid/merge-rows-and-cells/main.jsx b/docs/knowledge-base/examples/grid/merge-rows-and-cells/main.jsx
deleted file mode 100644
index 36d8526e..00000000
--- a/docs/knowledge-base/examples/grid/merge-rows-and-cells/main.jsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import * as React from 'react';
-import { createRoot } from 'react-dom/client';
-import App from './app'
-
-const root = createRoot(document.querySelector('my-app'));
-root.render( {
- this.handleMergedHover(
- dataItem,
- dataItem.discontinuedCellRowSpan,
- true
- );
- }}
- onMouseOut={() => {
- this.handleMergedHover(
- dataItem,
- dataItem.discontinuedCellRowSpan,
- false
- );
- }}
- >
- {cell.props.children}
-
- );
- } else if (dataItem.discontinuedCellRowSpan === 1) {
- return {cell.props.children} ;
- } else {
- return null;
- }
- }
- return (
- {
- this.handleCellHover(props.dataItem, true);
- }}
- onMouseOut={() => {
- this.handleCellHover(props.dataItem, false);
- }}
- >
- {cell.props.children}
-
- );
- };
-
- render() {
- return (
-
-
-
-
- );
- }
-}
-
-export default App;
diff --git a/docs/knowledge-base/examples/grid/merge-rows/main.jsx b/docs/knowledge-base/examples/grid/merge-rows/main.jsx
deleted file mode 100644
index 36d8526e..00000000
--- a/docs/knowledge-base/examples/grid/merge-rows/main.jsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import * as React from 'react';
-import { createRoot } from 'react-dom/client';
-import App from './app'
-
-const root = createRoot(document.querySelector('my-app'));
-root.render(
- props.enterEdit(props.dataItem)}
- >
- Edit
-
-
- );
-};
-
-class App extends React.Component {
- state = {
- openForm: false,
- editItem: {},
- data: [...products],
- result: process(products, {}),
- dataState: {}
- };
-
- enterEdit = item => {
- this.setState({
- openForm: true,
- editItem: item
- });
- };
-
- handleSubmit = event => {
- const newData = this.state.data.map((item, i) => {
- if (event.ProductID === item.ProductID) {
- item = { ...event };
- }
- return item;
- });
- this.setState({
- data: newData,
- result: process(newData, this.state.dataState),
- openForm: false
- });
- };
-
- handleCancelEdit = () => {
- this.setState({ openForm: false });
- };
-
- MyEditCommandCell = props => (
-
-
- {this.state.openForm && (
-
- {validationMessage} }
-
- );
-};
-
-const EditForm = props => {
- return (
-
-
- );
-};
-export default EditForm;
diff --git a/docs/knowledge-base/examples/grid/multiple-functionalities/main.jsx b/docs/knowledge-base/examples/grid/multiple-functionalities/main.jsx
deleted file mode 100644
index 36d8526e..00000000
--- a/docs/knowledge-base/examples/grid/multiple-functionalities/main.jsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import * as React from 'react';
-import { createRoot } from 'react-dom/client';
-import App from './app'
-
-const root = createRoot(document.querySelector('my-app'));
-root.render(
- { this._exportGridOne = exporter; }}
- >
-
-
-
- Export to Excel
-
-
-
-
- { this._exportGridTwo = exporter; }}
- >
-
-
-
- Export to Excel
-
-
-
-
-
- );
- }
-}
-
-export default App;
-
diff --git a/docs/knowledge-base/examples/grid/multiple-grid-export-excel/main.jsx b/docs/knowledge-base/examples/grid/multiple-grid-export-excel/main.jsx
deleted file mode 100644
index 36d8526e..00000000
--- a/docs/knowledge-base/examples/grid/multiple-grid-export-excel/main.jsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import * as React from 'react';
-import { createRoot } from 'react-dom/client';
-import App from './app'
-
-const root = createRoot(document.querySelector('my-app'));
-root.render( {
- setDataState(e.dataState);
- }}
- >
-
- );
-};
-export default App;
diff --git a/docs/knowledge-base/examples/grid/multiselect-filter-cell/main.jsx b/docs/knowledge-base/examples/grid/multiselect-filter-cell/main.jsx
deleted file mode 100644
index 36d8526e..00000000
--- a/docs/knowledge-base/examples/grid/multiselect-filter-cell/main.jsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import * as React from 'react';
-import { createRoot } from 'react-dom/client';
-import App from './app'
-
-const root = createRoot(document.querySelector('my-app'));
-root.render(
-
-
-
- );
-}
diff --git a/docs/knowledge-base/examples/grid/multiselect-filter-cell/products.json b/docs/knowledge-base/examples/grid/multiselect-filter-cell/products.json
deleted file mode 100644
index e9a52241..00000000
--- a/docs/knowledge-base/examples/grid/multiselect-filter-cell/products.json
+++ /dev/null
@@ -1,1233 +0,0 @@
-[{
- "ProductID" : 1,
- "ProductName" : "Chai",
- "SupplierID" : 1,
- "CategoryID" : 1,
- "QuantityPerUnit" : "10 boxes x 20 bags",
- "UnitPrice" : 18.0000,
- "UnitsInStock" : 39,
- "UnitsOnOrder" : 0,
- "ReorderLevel" : 10,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 1,
- "CategoryName" : "Beverages",
- "Description" : "Soft drinks, coffees, teas, beers, and ales"
- }
-}, {
- "ProductID" : 2,
- "ProductName" : "Chang",
- "SupplierID" : 1,
- "CategoryID" : 1,
- "QuantityPerUnit" : "24 - 12 oz bottles",
- "UnitPrice" : 19.0000,
- "UnitsInStock" : 17,
- "UnitsOnOrder" : 40,
- "ReorderLevel" : 25,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 1,
- "CategoryName" : "Beverages",
- "Description" : "Soft drinks, coffees, teas, beers, and ales"
- }
-}, {
- "ProductID" : 3,
- "ProductName" : "Aniseed Syrup",
- "SupplierID" : 1,
- "CategoryID" : 2,
- "QuantityPerUnit" : "12 - 550 ml bottles",
- "UnitPrice" : 10.0000,
- "UnitsInStock" : 13,
- "UnitsOnOrder" : 70,
- "ReorderLevel" : 25,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 2,
- "CategoryName" : "Condiments",
- "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
- }
-}, {
- "ProductID" : 4,
- "ProductName" : "Chef Anton's Cajun Seasoning",
- "SupplierID" : 2,
- "CategoryID" : 2,
- "QuantityPerUnit" : "48 - 6 oz jars",
- "UnitPrice" : 22.0000,
- "UnitsInStock" : 53,
- "UnitsOnOrder" : 0,
- "ReorderLevel" : 0,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 2,
- "CategoryName" : "Condiments",
- "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
- }
-}, {
- "ProductID" : 5,
- "ProductName" : "Chef Anton's Gumbo Mix",
- "SupplierID" : 2,
- "CategoryID" : 2,
- "QuantityPerUnit" : "36 boxes",
- "UnitPrice" : 21.3500,
- "UnitsInStock" : 0,
- "UnitsOnOrder" : 0,
- "ReorderLevel" : 0,
- "Discontinued" : true,
- "Category" : {
- "CategoryID" : 2,
- "CategoryName" : "Condiments",
- "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
- }
-}, {
- "ProductID" : 6,
- "ProductName" : "Grandma's Boysenberry Spread",
- "SupplierID" : 3,
- "CategoryID" : 2,
- "QuantityPerUnit" : "12 - 8 oz jars",
- "UnitPrice" : 25.0000,
- "UnitsInStock" : 120,
- "UnitsOnOrder" : 0,
- "ReorderLevel" : 25,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 2,
- "CategoryName" : "Condiments",
- "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
- }
-}, {
- "ProductID" : 7,
- "ProductName" : "Uncle Bob's Organic Dried Pears",
- "SupplierID" : 3,
- "CategoryID" : 7,
- "QuantityPerUnit" : "12 - 1 lb pkgs.",
- "UnitPrice" : 30.0000,
- "UnitsInStock" : 15,
- "UnitsOnOrder" : 0,
- "ReorderLevel" : 10,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 7,
- "CategoryName" : "Produce",
- "Description" : "Dried fruit and bean curd"
- }
-}, {
- "ProductID" : 8,
- "ProductName" : "Northwoods Cranberry Sauce",
- "SupplierID" : 3,
- "CategoryID" : 2,
- "QuantityPerUnit" : "12 - 12 oz jars",
- "UnitPrice" : 40.0000,
- "UnitsInStock" : 6,
- "UnitsOnOrder" : 0,
- "ReorderLevel" : 0,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 2,
- "CategoryName" : "Condiments",
- "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
- }
-}, {
- "ProductID" : 9,
- "ProductName" : "Mishi Kobe Niku",
- "SupplierID" : 4,
- "CategoryID" : 6,
- "QuantityPerUnit" : "18 - 500 g pkgs.",
- "UnitPrice" : 97.0000,
- "UnitsInStock" : 29,
- "UnitsOnOrder" : 0,
- "ReorderLevel" : 0,
- "Discontinued" : true,
- "Category" : {
- "CategoryID" : 6,
- "CategoryName" : "Meat/Poultry",
- "Description" : "Prepared meats"
- }
-}, {
- "ProductID" : 10,
- "ProductName" : "Ikura",
- "SupplierID" : 4,
- "CategoryID" : 8,
- "QuantityPerUnit" : "12 - 200 ml jars",
- "UnitPrice" : 31.0000,
- "UnitsInStock" : 31,
- "UnitsOnOrder" : 0,
- "ReorderLevel" : 0,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 8,
- "CategoryName" : "Seafood",
- "Description" : "Seaweed and fish"
- }
-}, {
- "ProductID" : 11,
- "ProductName" : "Queso Cabrales",
- "SupplierID" : 5,
- "CategoryID" : 4,
- "QuantityPerUnit" : "1 kg pkg.",
- "UnitPrice" : 21.0000,
- "UnitsInStock" : 22,
- "UnitsOnOrder" : 30,
- "ReorderLevel" : 30,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 4,
- "CategoryName" : "Dairy Products",
- "Description" : "Cheeses"
- }
-}, {
- "ProductID" : 12,
- "ProductName" : "Queso Manchego La Pastora",
- "SupplierID" : 5,
- "CategoryID" : 4,
- "QuantityPerUnit" : "10 - 500 g pkgs.",
- "UnitPrice" : 38.0000,
- "UnitsInStock" : 86,
- "UnitsOnOrder" : 0,
- "ReorderLevel" : 0,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 4,
- "CategoryName" : "Dairy Products",
- "Description" : "Cheeses"
- }
-}, {
- "ProductID" : 13,
- "ProductName" : "Konbu",
- "SupplierID" : 6,
- "CategoryID" : 8,
- "QuantityPerUnit" : "2 kg box",
- "UnitPrice" : 6.0000,
- "UnitsInStock" : 24,
- "UnitsOnOrder" : 0,
- "ReorderLevel" : 5,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 8,
- "CategoryName" : "Seafood",
- "Description" : "Seaweed and fish"
- }
-}, {
- "ProductID" : 14,
- "ProductName" : "Tofu",
- "SupplierID" : 6,
- "CategoryID" : 7,
- "QuantityPerUnit" : "40 - 100 g pkgs.",
- "UnitPrice" : 23.2500,
- "UnitsInStock" : 35,
- "UnitsOnOrder" : 0,
- "ReorderLevel" : 0,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 7,
- "CategoryName" : "Produce",
- "Description" : "Dried fruit and bean curd"
- }
-}, {
- "ProductID" : 15,
- "ProductName" : "Genen Shouyu",
- "SupplierID" : 6,
- "CategoryID" : 2,
- "QuantityPerUnit" : "24 - 250 ml bottles",
- "UnitPrice" : 15.5000,
- "UnitsInStock" : 39,
- "UnitsOnOrder" : 0,
- "ReorderLevel" : 5,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 2,
- "CategoryName" : "Condiments",
- "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
- }
-}, {
- "ProductID" : 16,
- "ProductName" : "Pavlova",
- "SupplierID" : 7,
- "CategoryID" : 3,
- "QuantityPerUnit" : "32 - 500 g boxes",
- "UnitPrice" : 17.4500,
- "UnitsInStock" : 29,
- "UnitsOnOrder" : 0,
- "ReorderLevel" : 10,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 3,
- "CategoryName" : "Confections",
- "Description" : "Desserts, candies, and sweet breads"
- }
-}, {
- "ProductID" : 17,
- "ProductName" : "Alice Mutton",
- "SupplierID" : 7,
- "CategoryID" : 6,
- "QuantityPerUnit" : "20 - 1 kg tins",
- "UnitPrice" : 39.0000,
- "UnitsInStock" : 0,
- "UnitsOnOrder" : 0,
- "ReorderLevel" : 0,
- "Discontinued" : true,
- "Category" : {
- "CategoryID" : 6,
- "CategoryName" : "Meat/Poultry",
- "Description" : "Prepared meats"
- }
-}, {
- "ProductID" : 18,
- "ProductName" : "Carnarvon Tigers",
- "SupplierID" : 7,
- "CategoryID" : 8,
- "QuantityPerUnit" : "16 kg pkg.",
- "UnitPrice" : 62.5000,
- "UnitsInStock" : 42,
- "UnitsOnOrder" : 0,
- "ReorderLevel" : 0,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 8,
- "CategoryName" : "Seafood",
- "Description" : "Seaweed and fish"
- }
-}, {
- "ProductID" : 19,
- "ProductName" : "Teatime Chocolate Biscuits",
- "SupplierID" : 8,
- "CategoryID" : 3,
- "QuantityPerUnit" : "10 boxes x 12 pieces",
- "UnitPrice" : 9.2000,
- "UnitsInStock" : 25,
- "UnitsOnOrder" : 0,
- "ReorderLevel" : 5,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 3,
- "CategoryName" : "Confections",
- "Description" : "Desserts, candies, and sweet breads"
- }
-}, {
- "ProductID" : 20,
- "ProductName" : "Sir Rodney's Marmalade",
- "SupplierID" : 8,
- "CategoryID" : 3,
- "QuantityPerUnit" : "30 gift boxes",
- "UnitPrice" : 81.0000,
- "UnitsInStock" : 40,
- "UnitsOnOrder" : 0,
- "ReorderLevel" : 0,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 3,
- "CategoryName" : "Confections",
- "Description" : "Desserts, candies, and sweet breads"
- }
-}, {
- "ProductID" : 21,
- "ProductName" : "Sir Rodney's Scones",
- "SupplierID" : 8,
- "CategoryID" : 3,
- "QuantityPerUnit" : "24 pkgs. x 4 pieces",
- "UnitPrice" : 10.0000,
- "UnitsInStock" : 3,
- "UnitsOnOrder" : 40,
- "ReorderLevel" : 5,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 3,
- "CategoryName" : "Confections",
- "Description" : "Desserts, candies, and sweet breads"
- }
-}, {
- "ProductID" : 22,
- "ProductName" : "Gustaf's Knäckebröd",
- "SupplierID" : 9,
- "CategoryID" : 5,
- "QuantityPerUnit" : "24 - 500 g pkgs.",
- "UnitPrice" : 21.0000,
- "UnitsInStock" : 104,
- "UnitsOnOrder" : 0,
- "ReorderLevel" : 25,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 5,
- "CategoryName" : "Grains/Cereals",
- "Description" : "Breads, crackers, pasta, and cereal"
- }
-}, {
- "ProductID" : 23,
- "ProductName" : "Tunnbröd",
- "SupplierID" : 9,
- "CategoryID" : 5,
- "QuantityPerUnit" : "12 - 250 g pkgs.",
- "UnitPrice" : 9.0000,
- "UnitsInStock" : 61,
- "UnitsOnOrder" : 0,
- "ReorderLevel" : 25,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 5,
- "CategoryName" : "Grains/Cereals",
- "Description" : "Breads, crackers, pasta, and cereal"
- }
-}, {
- "ProductID" : 24,
- "ProductName" : "Guaraná Fantástica",
- "SupplierID" : 10,
- "CategoryID" : 1,
- "QuantityPerUnit" : "12 - 355 ml cans",
- "UnitPrice" : 4.5000,
- "UnitsInStock" : 20,
- "UnitsOnOrder" : 0,
- "ReorderLevel" : 0,
- "Discontinued" : true,
- "Category" : {
- "CategoryID" : 1,
- "CategoryName" : "Beverages",
- "Description" : "Soft drinks, coffees, teas, beers, and ales"
- }
-}, {
- "ProductID" : 25,
- "ProductName" : "NuNuCa Nuß-Nougat-Creme",
- "SupplierID" : 11,
- "CategoryID" : 3,
- "QuantityPerUnit" : "20 - 450 g glasses",
- "UnitPrice" : 14.0000,
- "UnitsInStock" : 76,
- "UnitsOnOrder" : 0,
- "ReorderLevel" : 30,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 3,
- "CategoryName" : "Confections",
- "Description" : "Desserts, candies, and sweet breads"
- }
-}, {
- "ProductID" : 26,
- "ProductName" : "Gumbär Gummibärchen",
- "SupplierID" : 11,
- "CategoryID" : 3,
- "QuantityPerUnit" : "100 - 250 g bags",
- "UnitPrice" : 31.2300,
- "UnitsInStock" : 15,
- "UnitsOnOrder" : 0,
- "ReorderLevel" : 0,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 3,
- "CategoryName" : "Confections",
- "Description" : "Desserts, candies, and sweet breads"
- }
-}, {
- "ProductID" : 27,
- "ProductName" : "Schoggi Schokolade",
- "SupplierID" : 11,
- "CategoryID" : 3,
- "QuantityPerUnit" : "100 - 100 g pieces",
- "UnitPrice" : 43.9000,
- "UnitsInStock" : 49,
- "UnitsOnOrder" : 0,
- "ReorderLevel" : 30,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 3,
- "CategoryName" : "Confections",
- "Description" : "Desserts, candies, and sweet breads"
- }
-}, {
- "ProductID" : 28,
- "ProductName" : "Rössle Sauerkraut",
- "SupplierID" : 12,
- "CategoryID" : 7,
- "QuantityPerUnit" : "25 - 825 g cans",
- "UnitPrice" : 45.6000,
- "UnitsInStock" : 26,
- "UnitsOnOrder" : 0,
- "ReorderLevel" : 0,
- "Discontinued" : true,
- "Category" : {
- "CategoryID" : 7,
- "CategoryName" : "Produce",
- "Description" : "Dried fruit and bean curd"
- }
-}, {
- "ProductID" : 29,
- "ProductName" : "Thüringer Rostbratwurst",
- "SupplierID" : 12,
- "CategoryID" : 6,
- "QuantityPerUnit" : "50 bags x 30 sausgs.",
- "UnitPrice" : 123.7900,
- "UnitsInStock" : 0,
- "UnitsOnOrder" : 0,
- "ReorderLevel" : 0,
- "Discontinued" : true,
- "Category" : {
- "CategoryID" : 6,
- "CategoryName" : "Meat/Poultry",
- "Description" : "Prepared meats"
- }
-}, {
- "ProductID" : 30,
- "ProductName" : "Nord-Ost Matjeshering",
- "SupplierID" : 13,
- "CategoryID" : 8,
- "QuantityPerUnit" : "10 - 200 g glasses",
- "UnitPrice" : 25.8900,
- "UnitsInStock" : 10,
- "UnitsOnOrder" : 0,
- "ReorderLevel" : 15,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 8,
- "CategoryName" : "Seafood",
- "Description" : "Seaweed and fish"
- }
-}, {
- "ProductID" : 31,
- "ProductName" : "Gorgonzola Telino",
- "SupplierID" : 14,
- "CategoryID" : 4,
- "QuantityPerUnit" : "12 - 100 g pkgs",
- "UnitPrice" : 12.5000,
- "UnitsInStock" : 0,
- "UnitsOnOrder" : 70,
- "ReorderLevel" : 20,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 4,
- "CategoryName" : "Dairy Products",
- "Description" : "Cheeses"
- }
-}, {
- "ProductID" : 32,
- "ProductName" : "Mascarpone Fabioli",
- "SupplierID" : 14,
- "CategoryID" : 4,
- "QuantityPerUnit" : "24 - 200 g pkgs.",
- "UnitPrice" : 32.0000,
- "UnitsInStock" : 9,
- "UnitsOnOrder" : 40,
- "ReorderLevel" : 25,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 4,
- "CategoryName" : "Dairy Products",
- "Description" : "Cheeses"
- }
-}, {
- "ProductID" : 33,
- "ProductName" : "Geitost",
- "SupplierID" : 15,
- "CategoryID" : 4,
- "QuantityPerUnit" : "500 g",
- "UnitPrice" : 2.5000,
- "UnitsInStock" : 112,
- "UnitsOnOrder" : 0,
- "ReorderLevel" : 20,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 4,
- "CategoryName" : "Dairy Products",
- "Description" : "Cheeses"
- }
-}, {
- "ProductID" : 34,
- "ProductName" : "Sasquatch Ale",
- "SupplierID" : 16,
- "CategoryID" : 1,
- "QuantityPerUnit" : "24 - 12 oz bottles",
- "UnitPrice" : 14.0000,
- "UnitsInStock" : 111,
- "UnitsOnOrder" : 0,
- "ReorderLevel" : 15,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 1,
- "CategoryName" : "Beverages",
- "Description" : "Soft drinks, coffees, teas, beers, and ales"
- }
-}, {
- "ProductID" : 35,
- "ProductName" : "Steeleye Stout",
- "SupplierID" : 16,
- "CategoryID" : 1,
- "QuantityPerUnit" : "24 - 12 oz bottles",
- "UnitPrice" : 18.0000,
- "UnitsInStock" : 20,
- "UnitsOnOrder" : 0,
- "ReorderLevel" : 15,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 1,
- "CategoryName" : "Beverages",
- "Description" : "Soft drinks, coffees, teas, beers, and ales"
- }
-}, {
- "ProductID" : 36,
- "ProductName" : "Inlagd Sill",
- "SupplierID" : 17,
- "CategoryID" : 8,
- "QuantityPerUnit" : "24 - 250 g jars",
- "UnitPrice" : 19.0000,
- "UnitsInStock" : 112,
- "UnitsOnOrder" : 0,
- "ReorderLevel" : 20,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 8,
- "CategoryName" : "Seafood",
- "Description" : "Seaweed and fish"
- }
-}, {
- "ProductID" : 37,
- "ProductName" : "Gravad lax",
- "SupplierID" : 17,
- "CategoryID" : 8,
- "QuantityPerUnit" : "12 - 500 g pkgs.",
- "UnitPrice" : 26.0000,
- "UnitsInStock" : 11,
- "UnitsOnOrder" : 50,
- "ReorderLevel" : 25,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 8,
- "CategoryName" : "Seafood",
- "Description" : "Seaweed and fish"
- }
-}, {
- "ProductID" : 38,
- "ProductName" : "Côte de Blaye",
- "SupplierID" : 18,
- "CategoryID" : 1,
- "QuantityPerUnit" : "12 - 75 cl bottles",
- "UnitPrice" : 263.5000,
- "UnitsInStock" : 17,
- "UnitsOnOrder" : 0,
- "ReorderLevel" : 15,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 1,
- "CategoryName" : "Beverages",
- "Description" : "Soft drinks, coffees, teas, beers, and ales"
- }
-}, {
- "ProductID" : 39,
- "ProductName" : "Chartreuse verte",
- "SupplierID" : 18,
- "CategoryID" : 1,
- "QuantityPerUnit" : "750 cc per bottle",
- "UnitPrice" : 18.0000,
- "UnitsInStock" : 69,
- "UnitsOnOrder" : 0,
- "ReorderLevel" : 5,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 1,
- "CategoryName" : "Beverages",
- "Description" : "Soft drinks, coffees, teas, beers, and ales"
- }
-}, {
- "ProductID" : 40,
- "ProductName" : "Boston Crab Meat",
- "SupplierID" : 19,
- "CategoryID" : 8,
- "QuantityPerUnit" : "24 - 4 oz tins",
- "UnitPrice" : 18.4000,
- "UnitsInStock" : 123,
- "UnitsOnOrder" : 0,
- "ReorderLevel" : 30,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 8,
- "CategoryName" : "Seafood",
- "Description" : "Seaweed and fish"
- }
-}, {
- "ProductID" : 41,
- "ProductName" : "Jack's New England Clam Chowder",
- "SupplierID" : 19,
- "CategoryID" : 8,
- "QuantityPerUnit" : "12 - 12 oz cans",
- "UnitPrice" : 9.6500,
- "UnitsInStock" : 85,
- "UnitsOnOrder" : 0,
- "ReorderLevel" : 10,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 8,
- "CategoryName" : "Seafood",
- "Description" : "Seaweed and fish"
- }
-}, {
- "ProductID" : 42,
- "ProductName" : "Singaporean Hokkien Fried Mee",
- "SupplierID" : 20,
- "CategoryID" : 5,
- "QuantityPerUnit" : "32 - 1 kg pkgs.",
- "UnitPrice" : 14.0000,
- "UnitsInStock" : 26,
- "UnitsOnOrder" : 0,
- "ReorderLevel" : 0,
- "Discontinued" : true,
- "Category" : {
- "CategoryID" : 5,
- "CategoryName" : "Grains/Cereals",
- "Description" : "Breads, crackers, pasta, and cereal"
- }
-}, {
- "ProductID" : 43,
- "ProductName" : "Ipoh Coffee",
- "SupplierID" : 20,
- "CategoryID" : 1,
- "QuantityPerUnit" : "16 - 500 g tins",
- "UnitPrice" : 46.0000,
- "UnitsInStock" : 17,
- "UnitsOnOrder" : 10,
- "ReorderLevel" : 25,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 1,
- "CategoryName" : "Beverages",
- "Description" : "Soft drinks, coffees, teas, beers, and ales"
- }
-}, {
- "ProductID" : 44,
- "ProductName" : "Gula Malacca",
- "SupplierID" : 20,
- "CategoryID" : 2,
- "QuantityPerUnit" : "20 - 2 kg bags",
- "UnitPrice" : 19.4500,
- "UnitsInStock" : 27,
- "UnitsOnOrder" : 0,
- "ReorderLevel" : 15,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 2,
- "CategoryName" : "Condiments",
- "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
- }
-}, {
- "ProductID" : 45,
- "ProductName" : "Rogede sild",
- "SupplierID" : 21,
- "CategoryID" : 8,
- "QuantityPerUnit" : "1k pkg.",
- "UnitPrice" : 9.5000,
- "UnitsInStock" : 5,
- "UnitsOnOrder" : 70,
- "ReorderLevel" : 15,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 8,
- "CategoryName" : "Seafood",
- "Description" : "Seaweed and fish"
- }
-}, {
- "ProductID" : 46,
- "ProductName" : "Spegesild",
- "SupplierID" : 21,
- "CategoryID" : 8,
- "QuantityPerUnit" : "4 - 450 g glasses",
- "UnitPrice" : 12.0000,
- "UnitsInStock" : 95,
- "UnitsOnOrder" : 0,
- "ReorderLevel" : 0,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 8,
- "CategoryName" : "Seafood",
- "Description" : "Seaweed and fish"
- }
-}, {
- "ProductID" : 47,
- "ProductName" : "Zaanse koeken",
- "SupplierID" : 22,
- "CategoryID" : 3,
- "QuantityPerUnit" : "10 - 4 oz boxes",
- "UnitPrice" : 9.5000,
- "UnitsInStock" : 36,
- "UnitsOnOrder" : 0,
- "ReorderLevel" : 0,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 3,
- "CategoryName" : "Confections",
- "Description" : "Desserts, candies, and sweet breads"
- }
-}, {
- "ProductID" : 48,
- "ProductName" : "Chocolade",
- "SupplierID" : 22,
- "CategoryID" : 3,
- "QuantityPerUnit" : "10 pkgs.",
- "UnitPrice" : 12.7500,
- "UnitsInStock" : 15,
- "UnitsOnOrder" : 70,
- "ReorderLevel" : 25,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 3,
- "CategoryName" : "Confections",
- "Description" : "Desserts, candies, and sweet breads"
- }
-}, {
- "ProductID" : 49,
- "ProductName" : "Maxilaku",
- "SupplierID" : 23,
- "CategoryID" : 3,
- "QuantityPerUnit" : "24 - 50 g pkgs.",
- "UnitPrice" : 20.0000,
- "UnitsInStock" : 10,
- "UnitsOnOrder" : 60,
- "ReorderLevel" : 15,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 3,
- "CategoryName" : "Confections",
- "Description" : "Desserts, candies, and sweet breads"
- }
-}, {
- "ProductID" : 50,
- "ProductName" : "Valkoinen suklaa",
- "SupplierID" : 23,
- "CategoryID" : 3,
- "QuantityPerUnit" : "12 - 100 g bars",
- "UnitPrice" : 16.2500,
- "UnitsInStock" : 65,
- "UnitsOnOrder" : 0,
- "ReorderLevel" : 30,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 3,
- "CategoryName" : "Confections",
- "Description" : "Desserts, candies, and sweet breads"
- }
-}, {
- "ProductID" : 51,
- "ProductName" : "Manjimup Dried Apples",
- "SupplierID" : 24,
- "CategoryID" : 7,
- "QuantityPerUnit" : "50 - 300 g pkgs.",
- "UnitPrice" : 53.0000,
- "UnitsInStock" : 20,
- "UnitsOnOrder" : 0,
- "ReorderLevel" : 10,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 7,
- "CategoryName" : "Produce",
- "Description" : "Dried fruit and bean curd"
- }
-}, {
- "ProductID" : 52,
- "ProductName" : "Filo Mix",
- "SupplierID" : 24,
- "CategoryID" : 5,
- "QuantityPerUnit" : "16 - 2 kg boxes",
- "UnitPrice" : 7.0000,
- "UnitsInStock" : 38,
- "UnitsOnOrder" : 0,
- "ReorderLevel" : 25,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 5,
- "CategoryName" : "Grains/Cereals",
- "Description" : "Breads, crackers, pasta, and cereal"
- }
-}, {
- "ProductID" : 53,
- "ProductName" : "Perth Pasties",
- "SupplierID" : 24,
- "CategoryID" : 6,
- "QuantityPerUnit" : "48 pieces",
- "UnitPrice" : 32.8000,
- "UnitsInStock" : 0,
- "UnitsOnOrder" : 0,
- "ReorderLevel" : 0,
- "Discontinued" : true,
- "Category" : {
- "CategoryID" : 6,
- "CategoryName" : "Meat/Poultry",
- "Description" : "Prepared meats"
- }
-}, {
- "ProductID" : 54,
- "ProductName" : "Tourtière",
- "SupplierID" : 25,
- "CategoryID" : 6,
- "QuantityPerUnit" : "16 pies",
- "UnitPrice" : 7.4500,
- "UnitsInStock" : 21,
- "UnitsOnOrder" : 0,
- "ReorderLevel" : 10,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 6,
- "CategoryName" : "Meat/Poultry",
- "Description" : "Prepared meats"
- }
-}, {
- "ProductID" : 55,
- "ProductName" : "Pâté chinois",
- "SupplierID" : 25,
- "CategoryID" : 6,
- "QuantityPerUnit" : "24 boxes x 2 pies",
- "UnitPrice" : 24.0000,
- "UnitsInStock" : 115,
- "UnitsOnOrder" : 0,
- "ReorderLevel" : 20,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 6,
- "CategoryName" : "Meat/Poultry",
- "Description" : "Prepared meats"
- }
-}, {
- "ProductID" : 56,
- "ProductName" : "Gnocchi di nonna Alice",
- "SupplierID" : 26,
- "CategoryID" : 5,
- "QuantityPerUnit" : "24 - 250 g pkgs.",
- "UnitPrice" : 38.0000,
- "UnitsInStock" : 21,
- "UnitsOnOrder" : 10,
- "ReorderLevel" : 30,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 5,
- "CategoryName" : "Grains/Cereals",
- "Description" : "Breads, crackers, pasta, and cereal"
- }
-}, {
- "ProductID" : 57,
- "ProductName" : "Ravioli Angelo",
- "SupplierID" : 26,
- "CategoryID" : 5,
- "QuantityPerUnit" : "24 - 250 g pkgs.",
- "UnitPrice" : 19.5000,
- "UnitsInStock" : 36,
- "UnitsOnOrder" : 0,
- "ReorderLevel" : 20,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 5,
- "CategoryName" : "Grains/Cereals",
- "Description" : "Breads, crackers, pasta, and cereal"
- }
-}, {
- "ProductID" : 58,
- "ProductName" : "Escargots de Bourgogne",
- "SupplierID" : 27,
- "CategoryID" : 8,
- "QuantityPerUnit" : "24 pieces",
- "UnitPrice" : 13.2500,
- "UnitsInStock" : 62,
- "UnitsOnOrder" : 0,
- "ReorderLevel" : 20,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 8,
- "CategoryName" : "Seafood",
- "Description" : "Seaweed and fish"
- }
-}, {
- "ProductID" : 59,
- "ProductName" : "Raclette Courdavault",
- "SupplierID" : 28,
- "CategoryID" : 4,
- "QuantityPerUnit" : "5 kg pkg.",
- "UnitPrice" : 55.0000,
- "UnitsInStock" : 79,
- "UnitsOnOrder" : 0,
- "ReorderLevel" : 0,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 4,
- "CategoryName" : "Dairy Products",
- "Description" : "Cheeses"
- }
-}, {
- "ProductID" : 60,
- "ProductName" : "Camembert Pierrot",
- "SupplierID" : 28,
- "CategoryID" : 4,
- "QuantityPerUnit" : "15 - 300 g rounds",
- "UnitPrice" : 34.0000,
- "UnitsInStock" : 19,
- "UnitsOnOrder" : 0,
- "ReorderLevel" : 0,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 4,
- "CategoryName" : "Dairy Products",
- "Description" : "Cheeses"
- }
-}, {
- "ProductID" : 61,
- "ProductName" : "Sirop d'érable",
- "SupplierID" : 29,
- "CategoryID" : 2,
- "QuantityPerUnit" : "24 - 500 ml bottles",
- "UnitPrice" : 28.5000,
- "UnitsInStock" : 113,
- "UnitsOnOrder" : 0,
- "ReorderLevel" : 25,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 2,
- "CategoryName" : "Condiments",
- "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
- }
-}, {
- "ProductID" : 62,
- "ProductName" : "Tarte au sucre",
- "SupplierID" : 29,
- "CategoryID" : 3,
- "QuantityPerUnit" : "48 pies",
- "UnitPrice" : 49.3000,
- "UnitsInStock" : 17,
- "UnitsOnOrder" : 0,
- "ReorderLevel" : 0,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 3,
- "CategoryName" : "Confections",
- "Description" : "Desserts, candies, and sweet breads"
- }
-}, {
- "ProductID" : 63,
- "ProductName" : "Vegie-spread",
- "SupplierID" : 7,
- "CategoryID" : 2,
- "QuantityPerUnit" : "15 - 625 g jars",
- "UnitPrice" : 43.9000,
- "UnitsInStock" : 24,
- "UnitsOnOrder" : 0,
- "ReorderLevel" : 5,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 2,
- "CategoryName" : "Condiments",
- "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
- }
-}, {
- "ProductID" : 64,
- "ProductName" : "Wimmers gute Semmelknödel",
- "SupplierID" : 12,
- "CategoryID" : 5,
- "QuantityPerUnit" : "20 bags x 4 pieces",
- "UnitPrice" : 33.2500,
- "UnitsInStock" : 22,
- "UnitsOnOrder" : 80,
- "ReorderLevel" : 30,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 5,
- "CategoryName" : "Grains/Cereals",
- "Description" : "Breads, crackers, pasta, and cereal"
- }
-}, {
- "ProductID" : 65,
- "ProductName" : "Louisiana Fiery Hot Pepper Sauce",
- "SupplierID" : 2,
- "CategoryID" : 2,
- "QuantityPerUnit" : "32 - 8 oz bottles",
- "UnitPrice" : 21.0500,
- "UnitsInStock" : 76,
- "UnitsOnOrder" : 0,
- "ReorderLevel" : 0,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 2,
- "CategoryName" : "Condiments",
- "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
- }
-}, {
- "ProductID" : 66,
- "ProductName" : "Louisiana Hot Spiced Okra",
- "SupplierID" : 2,
- "CategoryID" : 2,
- "QuantityPerUnit" : "24 - 8 oz jars",
- "UnitPrice" : 17.0000,
- "UnitsInStock" : 4,
- "UnitsOnOrder" : 100,
- "ReorderLevel" : 20,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 2,
- "CategoryName" : "Condiments",
- "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
- }
-}, {
- "ProductID" : 67,
- "ProductName" : "Laughing Lumberjack Lager",
- "SupplierID" : 16,
- "CategoryID" : 1,
- "QuantityPerUnit" : "24 - 12 oz bottles",
- "UnitPrice" : 14.0000,
- "UnitsInStock" : 52,
- "UnitsOnOrder" : 0,
- "ReorderLevel" : 10,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 1,
- "CategoryName" : "Beverages",
- "Description" : "Soft drinks, coffees, teas, beers, and ales"
- }
-}, {
- "ProductID" : 68,
- "ProductName" : "Scottish Longbreads",
- "SupplierID" : 8,
- "CategoryID" : 3,
- "QuantityPerUnit" : "10 boxes x 8 pieces",
- "UnitPrice" : 12.5000,
- "UnitsInStock" : 6,
- "UnitsOnOrder" : 10,
- "ReorderLevel" : 15,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 3,
- "CategoryName" : "Confections",
- "Description" : "Desserts, candies, and sweet breads"
- }
-}, {
- "ProductID" : 69,
- "ProductName" : "Gudbrandsdalsost",
- "SupplierID" : 15,
- "CategoryID" : 4,
- "QuantityPerUnit" : "10 kg pkg.",
- "UnitPrice" : 36.0000,
- "UnitsInStock" : 26,
- "UnitsOnOrder" : 0,
- "ReorderLevel" : 15,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 4,
- "CategoryName" : "Dairy Products",
- "Description" : "Cheeses"
- }
-}, {
- "ProductID" : 70,
- "ProductName" : "Outback Lager",
- "SupplierID" : 7,
- "CategoryID" : 1,
- "QuantityPerUnit" : "24 - 355 ml bottles",
- "UnitPrice" : 15.0000,
- "UnitsInStock" : 15,
- "UnitsOnOrder" : 10,
- "ReorderLevel" : 30,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 1,
- "CategoryName" : "Beverages",
- "Description" : "Soft drinks, coffees, teas, beers, and ales"
- }
-}, {
- "ProductID" : 71,
- "ProductName" : "Flotemysost",
- "SupplierID" : 15,
- "CategoryID" : 4,
- "QuantityPerUnit" : "10 - 500 g pkgs.",
- "UnitPrice" : 21.5000,
- "UnitsInStock" : 26,
- "UnitsOnOrder" : 0,
- "ReorderLevel" : 0,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 4,
- "CategoryName" : "Dairy Products",
- "Description" : "Cheeses"
- }
-}, {
- "ProductID" : 72,
- "ProductName" : "Mozzarella di Giovanni",
- "SupplierID" : 14,
- "CategoryID" : 4,
- "QuantityPerUnit" : "24 - 200 g pkgs.",
- "UnitPrice" : 34.8000,
- "UnitsInStock" : 14,
- "UnitsOnOrder" : 0,
- "ReorderLevel" : 0,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 4,
- "CategoryName" : "Dairy Products",
- "Description" : "Cheeses"
- }
-}, {
- "ProductID" : 73,
- "ProductName" : "Röd Kaviar",
- "SupplierID" : 17,
- "CategoryID" : 8,
- "QuantityPerUnit" : "24 - 150 g jars",
- "UnitPrice" : 15.0000,
- "UnitsInStock" : 101,
- "UnitsOnOrder" : 0,
- "ReorderLevel" : 5,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 8,
- "CategoryName" : "Seafood",
- "Description" : "Seaweed and fish"
- }
-}, {
- "ProductID" : 74,
- "ProductName" : "Longlife Tofu",
- "SupplierID" : 4,
- "CategoryID" : 7,
- "QuantityPerUnit" : "5 kg pkg.",
- "UnitPrice" : 10.0000,
- "UnitsInStock" : 4,
- "UnitsOnOrder" : 20,
- "ReorderLevel" : 5,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 7,
- "CategoryName" : "Produce",
- "Description" : "Dried fruit and bean curd"
- }
-}, {
- "ProductID" : 75,
- "ProductName" : "Rhönbräu Klosterbier",
- "SupplierID" : 12,
- "CategoryID" : 1,
- "QuantityPerUnit" : "24 - 0.5 l bottles",
- "UnitPrice" : 7.7500,
- "UnitsInStock" : 125,
- "UnitsOnOrder" : 0,
- "ReorderLevel" : 25,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 1,
- "CategoryName" : "Beverages",
- "Description" : "Soft drinks, coffees, teas, beers, and ales"
- }
-}, {
- "ProductID" : 76,
- "ProductName" : "Lakkalikööri",
- "SupplierID" : 23,
- "CategoryID" : 1,
- "QuantityPerUnit" : "500 ml",
- "UnitPrice" : 18.0000,
- "UnitsInStock" : 57,
- "UnitsOnOrder" : 0,
- "ReorderLevel" : 20,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 1,
- "CategoryName" : "Beverages",
- "Description" : "Soft drinks, coffees, teas, beers, and ales"
- }
-}, {
- "ProductID" : 77,
- "ProductName" : "Original Frankfurter grüne Soße",
- "SupplierID" : 12,
- "CategoryID" : 2,
- "QuantityPerUnit" : "12 boxes",
- "UnitPrice" : 13.0000,
- "UnitsInStock" : 32,
- "UnitsOnOrder" : 0,
- "ReorderLevel" : 15,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 2,
- "CategoryName" : "Condiments",
- "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
- }
-}]
diff --git a/docs/knowledge-base/examples/grid/odata-server-operations/app.jsx b/docs/knowledge-base/examples/grid/odata-server-operations/app.jsx
deleted file mode 100644
index 9fde1dfd..00000000
--- a/docs/knowledge-base/examples/grid/odata-server-operations/app.jsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import * as React from 'react';
-
-
-import { Grid, GridColumn as Column } from '@progress/kendo-react-grid';
-import { ProductsLoader } from './shared-products-loader.jsx';
-
-class App extends React.Component {
- constructor(props) {
- super(props);
- this.state = {
- products: { data: [], total: 0 },
- dataState: { take: 10, skip: 0 }
- };
- }
-
- dataStateChange = (e) => {
- this.setState({
- ...this.state,
- dataState: e.dataState
- });
- }
-
- dataReceived = (products) => {
- this.setState({
- ...this.state,
- products: products
- });
- }
-
- render() {
- return (
-
- );
- }
-}
-
-export default App;
diff --git a/docs/knowledge-base/examples/grid/odata-server-operations/main.jsx b/docs/knowledge-base/examples/grid/odata-server-operations/main.jsx
deleted file mode 100644
index 36d8526e..00000000
--- a/docs/knowledge-base/examples/grid/odata-server-operations/main.jsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import * as React from 'react';
-import { createRoot } from 'react-dom/client';
-import App from './app'
-
-const root = createRoot(document.querySelector('my-app'));
-root.render(
-
- Select the sample TSV snippet below:
-
- {`1 Chai Beverages 18 39
-2 Chang Beverages 19 17
-3 Aniseed Syrup Condiments 10 13
-4 Chef Anton's Cajun Seasoning Condiments 22 53
-5 Chef Anton's Gumbo Mix Condiments 21.35 0
-6 Grandma's Boysenberry Spread Condiments 25 120
-7 Uncle Bob's Organic Dried Pears Produce 30 15
-`}
-
-
- Click on the Grid and paste it with Ctrl+V or ⌘+V
-
-
-
-
-
-
- );
- }
-}
-
-export default App;
diff --git a/docs/knowledge-base/examples/grid/paste-from-excel/main.jsx b/docs/knowledge-base/examples/grid/paste-from-excel/main.jsx
deleted file mode 100644
index 36d8526e..00000000
--- a/docs/knowledge-base/examples/grid/paste-from-excel/main.jsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import * as React from 'react';
-import { createRoot } from 'react-dom/client';
-import App from './app'
-
-const root = createRoot(document.querySelector('my-app'));
-root.render(
- ({
- ...item,
- [SELECTED_FIELD]: selectedState[idGetter(item)],
- }))}
- style={{
- height: '400px',
- }}
- headerCellRender={headerCellRender}
- dataItemKey={DATA_ITEM_KEY}
- selectedField={SELECTED_FIELD}
- selectable={{
- enabled: true,
- drag: false,
- cell: false,
- mode: 'multiple',
- }}
- onSelectionChange={onSelectionChange}
- >
-
-
- );
-};
-
-export default App;
diff --git a/docs/knowledge-base/examples/grid/remove-select-all/main.jsx b/docs/knowledge-base/examples/grid/remove-select-all/main.jsx
deleted file mode 100644
index 36d8526e..00000000
--- a/docs/knowledge-base/examples/grid/remove-select-all/main.jsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import * as React from 'react';
-import { createRoot } from 'react-dom/client';
-import App from './app'
-
-const root = createRoot(document.querySelector('my-app'));
-root.render(
-
-
-
- Paris is the capital and most populous city of France. It has an
- area of 105 square kilometres (41 square miles) and a population in
- 2013 of 2,229,621 within its administrative limits. The city is both
- a commune and department, and forms the centre and headquarters of
- the Île-de-France, or Paris Region, which has an area of 12,012
- square kilometres (4,638 square miles) and a population in 2014 of
- 12,005,077, comprising 18.2 percent of the population of France.
-
-
-
-
-
- (
-
-
- )}
- />
-
-
-
-
-
-
- Tallinn is the capital and largest city of Estonia. It is situated
- on the northern coast of the country, on the shore of the Gulf of
- Finland, 80 km (50 mi) south of Helsinki, east of Stockholm and west
- of Saint Petersburg. From the 13th century until 1918 (and briefly
- during the Nazi occupation of Estonia from 1941 to 1944), the city
- was known as Reval. Tallinn occupies an area of 159.2 km2 (61.5 sq
- mi) and has a population of 443,894. Approximately 32% of Estonia's
- total population lives in Tallinn.
-
-
- Tallinn was founded in 1248, but the earliest human settlements are
- over 5,000 years old, making it one of the oldest capital cities of
- Northern Europe. Due to its strategic location, the city became a
- major trade hub, especially from the 14th to the 16th century, when
- it grew in importance as part of the Hanseatic League.
-
-
-
- );
-};
-
-export default App;
diff --git a/docs/knowledge-base/examples/grid/save-scroll-position-in-tabstrip/main.jsx b/docs/knowledge-base/examples/grid/save-scroll-position-in-tabstrip/main.jsx
deleted file mode 100644
index 36d8526e..00000000
--- a/docs/knowledge-base/examples/grid/save-scroll-position-in-tabstrip/main.jsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import * as React from 'react';
-import { createRoot } from 'react-dom/client';
-import App from './app'
-
-const root = createRoot(document.querySelector('my-app'));
-root.render(Show Columns
- Product ID
- Product Name
- Category Name
-
- {this.state.columns.map((column, i) => {
- return (
- column.show && (
-
-
- );
- }
-}
-
-export default App;
diff --git a/docs/knowledge-base/examples/grid/show-hide-columns/main.jsx b/docs/knowledge-base/examples/grid/show-hide-columns/main.jsx
deleted file mode 100644
index 36d8526e..00000000
--- a/docs/knowledge-base/examples/grid/show-hide-columns/main.jsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import * as React from 'react';
-import { createRoot } from 'react-dom/client';
-import App from './app'
-
-const root = createRoot(document.querySelector('my-app'));
-root.render(
- {this.state.gridData.length === 0 && loadingPanel}
-
-
-
- );
- }
-}
-
-export default App;
-
diff --git a/docs/knowledge-base/examples/grid/show-loading-indicator/main.jsx b/docs/knowledge-base/examples/grid/show-loading-indicator/main.jsx
deleted file mode 100644
index 36d8526e..00000000
--- a/docs/knowledge-base/examples/grid/show-loading-indicator/main.jsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import * as React from 'react';
-import { createRoot } from 'react-dom/client';
-import App from './app'
-
-const root = createRoot(document.querySelector('my-app'));
-root.render(
-
-
-
-
-
- );
-};
-
-export default App;
diff --git a/docs/knowledge-base/examples/grid/stateful/main.jsx b/docs/knowledge-base/examples/grid/stateful/main.jsx
deleted file mode 100644
index 36d8526e..00000000
--- a/docs/knowledge-base/examples/grid/stateful/main.jsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import * as React from 'react';
-import { createRoot } from 'react-dom/client';
-import App from './app'
-
-const root = createRoot(document.querySelector('my-app'));
-root.render(
-
- {columns.map((column, index) => {
- return
-
- );
-};
-
-export default App;
diff --git a/docs/knowledge-base/examples/grid/store-columns-width-and-order/main.jsx b/docs/knowledge-base/examples/grid/store-columns-width-and-order/main.jsx
deleted file mode 100644
index 36d8526e..00000000
--- a/docs/knowledge-base/examples/grid/store-columns-width-and-order/main.jsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import * as React from 'react';
-import { createRoot } from 'react-dom/client';
-import App from './app'
-
-const root = createRoot(document.querySelector('my-app'));
-root.render(
-
- );
- }
-}
-
-export default App;
diff --git a/docs/knowledge-base/examples/grid/transpose-data/main.jsx b/docs/knowledge-base/examples/grid/transpose-data/main.jsx
deleted file mode 100644
index 36d8526e..00000000
--- a/docs/knowledge-base/examples/grid/transpose-data/main.jsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import * as React from 'react';
-import { createRoot } from 'react-dom/client';
-import App from './app'
-
-const root = createRoot(document.querySelector('my-app'));
-root.render(
-
- );
-};
-export default App;
diff --git a/docs/knowledge-base/examples/grid/unique-groups/main.jsx b/docs/knowledge-base/examples/grid/unique-groups/main.jsx
deleted file mode 100644
index 36d8526e..00000000
--- a/docs/knowledge-base/examples/grid/unique-groups/main.jsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import * as React from 'react';
-import { createRoot } from 'react-dom/client';
-import App from './app'
-
-const root = createRoot(document.querySelector('my-app'));
-root.render(
-
- );
-};
-
-export default App;
diff --git a/docs/knowledge-base/examples/grid/using-fitColumns-method/main.jsx b/docs/knowledge-base/examples/grid/using-fitColumns-method/main.jsx
deleted file mode 100644
index 36d8526e..00000000
--- a/docs/knowledge-base/examples/grid/using-fitColumns-method/main.jsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import * as React from 'react';
-import { createRoot } from 'react-dom/client';
-import App from './app'
-
-const root = createRoot(document.querySelector('my-app'));
-root.render(
- {' '}
-
- );
- } // default rendering for this cell
-
- return tdElement;
- };
- return (
-
-
- );
-};
-export default App;
diff --git a/docs/knowledge-base/examples/grid/virtual-scrolling-pagechange-event/main.jsx b/docs/knowledge-base/examples/grid/virtual-scrolling-pagechange-event/main.jsx
deleted file mode 100644
index 36d8526e..00000000
--- a/docs/knowledge-base/examples/grid/virtual-scrolling-pagechange-event/main.jsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import * as React from 'react';
-import { createRoot } from 'react-dom/client';
-import App from './app'
-
-const root = createRoot(document.querySelector('my-app'));
-root.render(
- {this.props.dataItem.ProductName}
-
- );
- }
-}
-class ProductNameHeader extends React.Component {
- render() {
- return (
-
- {this.props.title}
- {this.props.children}
-
- );
- }
- }
-class App extends React.Component {
- render() {
- return (
-
-
-
-
-
-
-
- );
- }
-}
-export default App;
diff --git a/docs/knowledge-base/examples/grid/with-tooltip/main.jsx b/docs/knowledge-base/examples/grid/with-tooltip/main.jsx
deleted file mode 100644
index 36d8526e..00000000
--- a/docs/knowledge-base/examples/grid/with-tooltip/main.jsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import * as React from 'react';
-import { createRoot } from 'react-dom/client';
-import App from './app'
-
-const root = createRoot(document.querySelector('my-app'));
-root.render(
- * The delayed value will be changed after a threshold (1 second in this
- example)
-
- Instant value: {value}
-
- Delayed value: {delayedValue}
-
- );
-};
-
-export default App;
diff --git a/docs/knowledge-base/examples/inputs/inputs-delayed-value-change/main.jsx b/docs/knowledge-base/examples/inputs/inputs-delayed-value-change/main.jsx
deleted file mode 100644
index 36d8526e..00000000
--- a/docs/knowledge-base/examples/inputs/inputs-delayed-value-change/main.jsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import * as React from 'react';
-import { createRoot } from 'react-dom/client';
-import App from './app'
-
-const root = createRoot(document.querySelector('my-app'));
-root.render(
- Kilometers:
-
-
-
- );
-};
-
-export default App;
diff --git a/docs/knowledge-base/examples/inputs/numerictextbox-clear-value-on-esc-key/main.jsx b/docs/knowledge-base/examples/inputs/numerictextbox-clear-value-on-esc-key/main.jsx
deleted file mode 100644
index 36d8526e..00000000
--- a/docs/knowledge-base/examples/inputs/numerictextbox-clear-value-on-esc-key/main.jsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import * as React from 'react';
-import { createRoot } from 'react-dom/client';
-import App from './app'
-
-const root = createRoot(document.querySelector('my-app'));
-root.render(
- {[0, 25, 50, 75, 100].map((perc, i) => (
-
- {perc.toString()}
-
- ))}
-
- );
-};
-
-export default App;
diff --git a/docs/knowledge-base/examples/inputs/rangeslider-show-value-as-tooltip/main.jsx b/docs/knowledge-base/examples/inputs/rangeslider-show-value-as-tooltip/main.jsx
deleted file mode 100644
index 36d8526e..00000000
--- a/docs/knowledge-base/examples/inputs/rangeslider-show-value-as-tooltip/main.jsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import * as React from 'react';
-import { createRoot } from 'react-dom/client';
-import App from './app'
-
-const root = createRoot(document.querySelector('my-app'));
-root.render(
- {[0, 25, 50, 75, 100].map((perc, i) => (
-
- {perc.toString()}
-
- ))}
-
- );
-};
-
-export default App;
diff --git a/docs/knowledge-base/examples/inputs/rangeslider-slider-dots-title/main.jsx b/docs/knowledge-base/examples/inputs/rangeslider-slider-dots-title/main.jsx
deleted file mode 100644
index 36d8526e..00000000
--- a/docs/knowledge-base/examples/inputs/rangeslider-slider-dots-title/main.jsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import * as React from 'react';
-import { createRoot } from 'react-dom/client';
-import App from './app'
-
-const root = createRoot(document.querySelector('my-app'));
-root.render(
-
- 1
-
-
- 3
-
-
- 5
-
-
- 7
-
-
- 10
-
-
- );
-};
-
-export default App;
diff --git a/docs/knowledge-base/examples/inputs/slider-label-single-click/main.jsx b/docs/knowledge-base/examples/inputs/slider-label-single-click/main.jsx
deleted file mode 100644
index 36d8526e..00000000
--- a/docs/knowledge-base/examples/inputs/slider-label-single-click/main.jsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import * as React from 'react';
-import { createRoot } from 'react-dom/client';
-import App from './app'
-
-const root = createRoot(document.querySelector('my-app'));
-root.render(Home content
;
-};
-
-const Library = () => {
- return Library content
;
-};
-
-const Search = () => {
- return Search content
;
-};
-
-const NavigationData = [
-
-
-
{NavigationData[selectedIndex]}
-
({
- ...item,
- selected: index === selectedIndex,
- }))}
- onSelect={handleSelect}
- />
-
-
-
({
- ...item,
- selected: index === selectedId,
- }))}
- onSelect={handleSelect}
- >
-
-
- Toggle the drawer state
-
-
-
- );
-};
-export default App;
diff --git a/docs/knowledge-base/examples/layout/drawer-close-on-click/main.jsx b/docs/knowledge-base/examples/layout/drawer-close-on-click/main.jsx
deleted file mode 100644
index 36d8526e..00000000
--- a/docs/knowledge-base/examples/layout/drawer-close-on-click/main.jsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import * as React from 'react';
-import { createRoot } from 'react-dom/client';
-import App from './app'
-
-const root = createRoot(document.querySelector('my-app'));
-root.render(
-
- So cuffed therefore by some sadistically mallard rewrote yet accommodatingly more
- cat adequate pesky far this dear fitting and groundhog horse some selfish jeepers juggled
- about since upheld heatedly well much.
-
-
- Therefore falcon usefully crab during onto hello regally rat wiped misread reluctant unlike
- iguanodon fish far bald abjectly far chameleon more scurrilous gagged virtuously sufficient
- arrogant cobra froze dog waywardly staunch thus consoled.
-
-
- Amphibious darn well densely far meanly inanimately incoherent away flamingo outside yet jeez
- that yawned secret evasive dear overrode rat cow one overpaid far hatchet much.
-
-
- Had aerial well well coasted darn chuckled studied underlay fatally the but among because
- patient or shook depending much sloth wetted cheered some bee.
-
-
- Bombastically yikes some coquettish erroneously in therefore disgracefully glanced some
- connected and goodness more read marvelous up one rebukingly darn fuzzily.
-
-
- Meadowlark and hence regarding flaunting amongst steadfastly demurely like far and stiffly
- bled reluctant alongside jeez this save opposite well and this shuddered and smoked wherever
- condescendingly hey onto much.
-
-
- Hello gosh gosh up effortlessly valiant hotly less rubbed gerbil and ouch inside fatuous
- suitably far fuzzily unihibitedly locked froze timidly hello much revealed lorikeet lantern
- this much one and far decidedly.
-
-
-
About
- {props.children ? props.children : text}
- ;
-};
-
-export default About;
\ No newline at end of file
diff --git a/docs/knowledge-base/examples/layout/drawer-router-v6/DrawerContainer.jsx b/docs/knowledge-base/examples/layout/drawer-router-v6/DrawerContainer.jsx
deleted file mode 100644
index ec9d1c76..00000000
--- a/docs/knowledge-base/examples/layout/drawer-router-v6/DrawerContainer.jsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import * as React from 'react';
-import { useLocation, useNavigate } from 'react-router-dom';
-import { Drawer, DrawerContent } from '@progress/kendo-react-layout';
-import { Button } from '@progress/kendo-react-buttons';
-
-const items = [
- {
- text: 'Home',
- selected: true,
- route: '/',
- },
- {
- text: 'Products',
- route: '/products',
- },
- {
- text: 'About',
- route: '/about',
- },
-];
-
-const DrawerContainer = (props) => {
- const navigate = useNavigate();
- const location = useLocation();
- const [expanded, setExpanded] = React.useState(true);
-
- const handleClick = () => {
- setExpanded(!expanded);
- };
-
- const onSelect = (e) => {
- navigate(e.itemTarget.props.route);
- };
-
- const setSelectedItem = (pathName) => {
- let currentPath = items.find((item) => item.route === pathName);
-
- if (currentPath.text) {
- return currentPath.text;
- }
- };
-
- const selected = setSelectedItem(location.pathname);
-
- return (
-
-
- Navigational drawer
-
-
({
- ...item,
- selected: item.text === selected,
- }))}
- onSelect={onSelect}
- >
- {props.children}
-
-
-
- However engaging wherever growled much methodic shamefully more human
- agreeable gracefully and less equitable insistent gasped that when wasp
- baboon rebuilt more slept stingily along knew llama.
-
-
- Prim crud far healthy wholesomely more far chortled ouch in adroitly
- gawked affably reasonably manfully reindeer mysteriously overpaid
- considering far far until.
-
-
- Red-handed off thickly save aboard mawkishly that amidst moth pending
- jerkily monogamous some much or creatively indecent neat far jeepers up
- spoiled about.
-
-
- Owing desperate like one shark or bit yikes up so thus grumbled gosh more
- bawled much and regardless hey far bought through crud well staunchly
- hysteric inside incorrect the closed.
-
-
- Industrious jubilant blanched bestially yet that less far far a wow the
- militant preparatory crudely acrimonious under a towards lemur wedded that
- while decorously this peered darn a much.
-
-
- Dizzy boundless hence but because moodily and alas a truculently less
- hardheaded so on ambiguously incompetently less moaned hilarious until one
- jeepers amid heinously.
-
-
- Where beneath less misspelled across artistically spiteful jeepers much
- more that when blushed a much a this groundhog therefore far arduous
- dependent much satanic where dear goodness hummingbird.
-
-
-
Home page
- {props.children ? props.children : text}
-
- );
-};
-
-export default Home;
diff --git a/docs/knowledge-base/examples/layout/drawer-router-v6/Products.jsx b/docs/knowledge-base/examples/layout/drawer-router-v6/Products.jsx
deleted file mode 100644
index f0158de8..00000000
--- a/docs/knowledge-base/examples/layout/drawer-router-v6/Products.jsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import * as React from 'react';
-const text =
-
- Inclusive and foolishly more on yikes far one vociferous squinted lied much the howled disagreed
- yet seal needlessly vulgarly far moistly wanton.
-
-
- Human and some barring roadrunner behind swore hello ebulliently pending less upon amiable less
- amiably dear harsh telepathic regarding hey poignant ahead.
-
-
- Immensely a that gosh accurately by naughtily patted laxly far pangolin ouch this like marvelous
- bitter crab jeez after unobtrusive flamboyant octopus.
-
-
- So koala that ouch and much porpoise falcon from and wasp curtly crud much more frequently and
- accidental beneath during far.
-
-
-
Products
- {props.children ? props.children : text}
- ;
-};
-
-export default Products;
\ No newline at end of file
diff --git a/docs/knowledge-base/examples/layout/drawer-router-v6/Team.jsx b/docs/knowledge-base/examples/layout/drawer-router-v6/Team.jsx
deleted file mode 100644
index 78ce753a..00000000
--- a/docs/knowledge-base/examples/layout/drawer-router-v6/Team.jsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import * as React from 'react';
-const text =
-
- Leapt sprang volubly that or adroitly cozy sold creepy shuffled spent flirted withdrew gosh zebra
- prideful swung yawned monkey penguin.
-
-
- This wow flinched one immoral this dear far inflexible newt far outside up hey excluding goodness
- hello much after feverishly direly fitted wow some youthful crud stark more strict unjustifiable
- that told one.
-
-
- Shark audible mistook removed tryingly much delicate yet sudden after contrary thus brusque more
- won wallaby frowningly much censorious spryly thanks circuitous this sewed dreamed wow.
-
-
- The against alas less adoringly some cutting aboard lighted some dear agilely and enticingly before
- thanks upon was neglectful merrily some porpoise tenably and and groundhog together kiwi much barked
- miser.
-
-
- Much flamingo mocking much far far some since among ritually since crud near one tartly left far and
- far this ineffectively goodness mighty some and intricately far.
-
-
- Modestly mastodon hypocritically hatchet gerbil successful dispassionate nefariously and
- the dangerously far in one less save gosh became and sparing that by alas.
-
-
-
Team
- {props.children ? props.children : text}
- ;
-};
-
-export default Team;
\ No newline at end of file
diff --git a/docs/knowledge-base/examples/layout/drawer-router-v6/app.jsx b/docs/knowledge-base/examples/layout/drawer-router-v6/app.jsx
deleted file mode 100644
index 63514efa..00000000
--- a/docs/knowledge-base/examples/layout/drawer-router-v6/app.jsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import * as React from 'react';
-import { Router, BrowserRouter, Routes, Route } from 'react-router-dom';
-import About from './About';
-import Home from './Home';
-import Products from './Products';
-import DrawerContainer from './DrawerContainer';
-import './styles.css';
-
-const App = () => {
- return (
-
-
-
-
-
-
-
-
- );
-};
-
-export default App;
\ No newline at end of file
diff --git a/docs/knowledge-base/examples/layout/drawer-router-v6/main.jsx b/docs/knowledge-base/examples/layout/drawer-router-v6/main.jsx
deleted file mode 100644
index 36d8526e..00000000
--- a/docs/knowledge-base/examples/layout/drawer-router-v6/main.jsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import * as React from 'react';
-import { createRoot } from 'react-dom/client';
-import App from './app'
-
-const root = createRoot(document.querySelector('my-app'));
-root.render(
-
- So cuffed therefore by some sadistically mallard rewrote yet accommodatingly more
- cat adequate pesky far this dear fitting and groundhog horse some selfish jeepers juggled
- about since upheld heatedly well much.
-
-
- Therefore falcon usefully crab during onto hello regally rat wiped misread reluctant unlike
- iguanodon fish far bald abjectly far chameleon more scurrilous gagged virtuously sufficient
- arrogant cobra froze dog waywardly staunch thus consoled.
-
-
- Amphibious darn well densely far meanly inanimately incoherent away flamingo outside yet jeez
- that yawned secret evasive dear overrode rat cow one overpaid far hatchet much.
-
-
- Had aerial well well coasted darn chuckled studied underlay fatally the but among because
- patient or shook depending much sloth wetted cheered some bee.
-
-
- Bombastically yikes some coquettish erroneously in therefore disgracefully glanced some
- connected and goodness more read marvelous up one rebukingly darn fuzzily.
-
-
- Meadowlark and hence regarding flaunting amongst steadfastly demurely like far and stiffly
- bled reluctant alongside jeez this save opposite well and this shuddered and smoked wherever
- condescendingly hey onto much.
-
-
- Hello gosh gosh up effortlessly valiant hotly less rubbed gerbil and ouch inside fatuous
- suitably far fuzzily unihibitedly locked froze timidly hello much revealed lorikeet lantern
- this much one and far decidedly.
-
-
-
About
- {props.children ? props.children : text}
- ;
-};
-export default About;
\ No newline at end of file
diff --git a/docs/knowledge-base/examples/layout/panelbar-open-in-new-window/Home.jsx b/docs/knowledge-base/examples/layout/panelbar-open-in-new-window/Home.jsx
deleted file mode 100644
index 4873340f..00000000
--- a/docs/knowledge-base/examples/layout/panelbar-open-in-new-window/Home.jsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import * as React from 'react';
-const text =
-
- However engaging wherever growled much methodic shamefully more human agreeable gracefully and
- less equitable insistent gasped that when wasp baboon rebuilt more slept stingily along knew llama.
-
-
- Prim crud far healthy wholesomely more far chortled ouch in adroitly gawked affably reasonably
- manfully reindeer mysteriously overpaid considering far far until.
-
-
- Red-handed off thickly save aboard mawkishly that amidst moth pending jerkily monogamous some much
- or creatively indecent neat far jeepers up spoiled about.
-
-
- Owing desperate like one shark or bit yikes up so thus grumbled gosh more bawled much and regardless
- hey far bought through crud well staunchly hysteric inside incorrect the closed.
-
-
- Industrious jubilant blanched bestially yet that less far far a wow the militant preparatory
- crudely acrimonious under a towards lemur wedded that while decorously this peered darn a much.
-
-
- Dizzy boundless hence but because moodily and alas a truculently less hardheaded so on ambiguously
- incompetently less moaned hilarious until one jeepers amid heinously.
-
-
- Where beneath less misspelled across artistically spiteful jeepers much more that when blushed a
- much a this groundhog therefore far arduous dependent much satanic where dear goodness hummingbird.
-
-
-
Home page
- {props.children ? props.children : text}
- ;
-};
-export default Home;
\ No newline at end of file
diff --git a/docs/knowledge-base/examples/layout/panelbar-open-in-new-window/PanelBarNavContainer.jsx b/docs/knowledge-base/examples/layout/panelbar-open-in-new-window/PanelBarNavContainer.jsx
deleted file mode 100644
index ae1c4524..00000000
--- a/docs/knowledge-base/examples/layout/panelbar-open-in-new-window/PanelBarNavContainer.jsx
+++ /dev/null
@@ -1,92 +0,0 @@
-import * as React from 'react';
-import { PanelBar, PanelBarItem } from '@progress/kendo-react-layout';
-import { useNavigate } from 'react-router';
-
-export const withRouter = (Component) =>{
- const Wrapper = (props) =>{
- const history = useNavigate();
- return
- {props.title}
-
-
- );
-};
-const paths = [
- {
- path: '/',
- index: '.0',
- },
- {
- path: '/products',
- index: '.1',
- },
- {
- path: '/about',
- index: '.2',
- },
- {
- path: '/about/team',
- index: '.2.0',
- },
-];
-const PanelBarNavContainer = (props) => {
- const onSelect = (event) => {
- props.history.push(event.target.props.route);
- };
- const setSelectedIndex = (pathName) => {
- let currentPath = paths.find((item) => item.path === pathName);
- return currentPath.index;
- };
- const selected = setSelectedIndex(props.location.pathname);
- return (
-
-
-
-
-
-
- {props.children}
-
-
-
- Inclusive and foolishly more on yikes far one vociferous squinted lied much the howled disagreed
- yet seal needlessly vulgarly far moistly wanton.
-
-
- Human and some barring roadrunner behind swore hello ebulliently pending less upon amiable less
- amiably dear harsh telepathic regarding hey poignant ahead.
-
-
- Immensely a that gosh accurately by naughtily patted laxly far pangolin ouch this like marvelous
- bitter crab jeez after unobtrusive flamboyant octopus.
-
-
- So koala that ouch and much porpoise falcon from and wasp curtly crud much more frequently and
- accidental beneath during far.
-
-
-
Products
- {props.children ? props.children : text}
- ;
-};
-export default Products;
\ No newline at end of file
diff --git a/docs/knowledge-base/examples/layout/panelbar-open-in-new-window/Team.jsx b/docs/knowledge-base/examples/layout/panelbar-open-in-new-window/Team.jsx
deleted file mode 100644
index 49d33417..00000000
--- a/docs/knowledge-base/examples/layout/panelbar-open-in-new-window/Team.jsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import * as React from 'react';
-const text =
-
- Leapt sprang volubly that or adroitly cozy sold creepy shuffled spent flirted withdrew gosh zebra
- prideful swung yawned monkey penguin.
-
-
- This wow flinched one immoral this dear far inflexible newt far outside up hey excluding goodness
- hello much after feverishly direly fitted wow some youthful crud stark more strict unjustifiable
- that told one.
-
-
- Shark audible mistook removed tryingly much delicate yet sudden after contrary thus brusque more
- won wallaby frowningly much censorious spryly thanks circuitous this sewed dreamed wow.
-
-
- The against alas less adoringly some cutting aboard lighted some dear agilely and enticingly before
- thanks upon was neglectful merrily some porpoise tenably and and groundhog together kiwi much barked
- miser.
-
-
- Much flamingo mocking much far far some since among ritually since crud near one tartly left far and
- far this ineffectively goodness mighty some and intricately far.
-
-
- Modestly mastodon hypocritically hatchet gerbil successful dispassionate nefariously and
- the dangerously far in one less save gosh became and sparing that by alas.
-
-
-
Team
- {props.children ? props.children : text}
- ;
-};
-export default Team;
\ No newline at end of file
diff --git a/docs/knowledge-base/examples/layout/panelbar-open-in-new-window/app.jsx b/docs/knowledge-base/examples/layout/panelbar-open-in-new-window/app.jsx
deleted file mode 100644
index 55253d3a..00000000
--- a/docs/knowledge-base/examples/layout/panelbar-open-in-new-window/app.jsx
+++ /dev/null
@@ -1,25 +0,0 @@
-
-import * as React from 'react';
-import { HashRouter, Routes, Route } from 'react-router-dom';
-import About from './About';
-import Team from './Team';
-import Home from './Home';
-import Products from './Products';
-import PanelBarNavContainer from './PanelBarNavContainer';
-
-const App = () => {
- return (
-
-
-
-
-
-
- );
-};
-
-export default App;
diff --git a/docs/knowledge-base/examples/layout/panelbar-open-in-new-window/main.jsx b/docs/knowledge-base/examples/layout/panelbar-open-in-new-window/main.jsx
deleted file mode 100644
index 36d8526e..00000000
--- a/docs/knowledge-base/examples/layout/panelbar-open-in-new-window/main.jsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import * as React from 'react';
-import { createRoot } from 'react-dom/client';
-import App from './app'
-
-const root = createRoot(document.querySelector('my-app'));
-root.render(
- {props.title}
-
- Add
-
-
- );
-};
-
-const App = () => {
- const [count, setCount] = React.useState(1);
-
- const addButtonClick = (e) => {
- //prevent the propagation of the click event, so the PanelBarItem does not get selected or expanded/collapsed
- e.preventDefault();
- e.stopPropagation();
- setCount(count + 1);
- };
- return (
-
- Count: {count}
-
- );
-};
-
-export default App;
diff --git a/docs/knowledge-base/examples/layout/panelbar-render-button-in-panelbaritem/main.jsx b/docs/knowledge-base/examples/layout/panelbar-render-button-in-panelbaritem/main.jsx
deleted file mode 100644
index 36d8526e..00000000
--- a/docs/knowledge-base/examples/layout/panelbar-render-button-in-panelbaritem/main.jsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import * as React from 'react';
-import { createRoot } from 'react-dom/client';
-import App from './app'
-
-const root = createRoot(document.querySelector('my-app'));
-root.render(
- Click me Tab 1 title
-
- );
- };
- return (
-
- Tab 1 Content
-
-
- Tab 2 Content
-
-
- Tab 3 Content
-
-
- );
-};
-
-export default App;
diff --git a/docs/knowledge-base/examples/layout/tabstrip-button-in-tabs/main.jsx b/docs/knowledge-base/examples/layout/tabstrip-button-in-tabs/main.jsx
deleted file mode 100644
index 36d8526e..00000000
--- a/docs/knowledge-base/examples/layout/tabstrip-button-in-tabs/main.jsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import * as React from 'react';
-import { createRoot } from 'react-dom/client';
-import App from './app'
-
-const root = createRoot(document.querySelector('my-app'));
-root.render(
-
-
- Tab 1 Content
-
-
- Tab 2 Content
-
-
- Tab 3 Content
-
-
- Tab 4 Content
-
-
- Tab 5 Content
-
-
-
-
-
- Tab 1 Content
-
-
- Tab 2 Content
-
-
- Tab 3 Content
-
-
- Tab 4 Content
-
-
- Tab 5 Content
-
-
-
-
-
-
Employees
-
- handleItemClick(e, 'employees', 'developers')}
- onDragStart={handleDragStart}
- onDrop={handleDrop}
- toolbar={() => {
- return (
-
-
-
-
Developers
- handleItemClick(e, 'developers', 'employees')}
- onDragStart={handleDragStart}
- onDrop={handleDrop}
- />
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
\ No newline at end of file
diff --git a/docs/knowledge-base/examples/listbox/show-drag-clue/products.json b/docs/knowledge-base/examples/listbox/show-drag-clue/products.json
deleted file mode 100644
index 4df1c408..00000000
--- a/docs/knowledge-base/examples/listbox/show-drag-clue/products.json
+++ /dev/null
@@ -1,1233 +0,0 @@
-[{
- "ProductID" : 1,
- "ProductName" : "Chai",
- "SupplierID" : 1,
- "CategoryID" : 1,
- "QuantityPerUnit" : "10 boxes x 20 bags",
- "UnitPrice" : 18.0000,
- "UnitsInStock" : 39,
- "UnitsOnOrder" : 0,
- "ReorderLevel" : 10,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 1,
- "CategoryName" : "Beverages",
- "Description" : "Soft drinks, coffees, teas, beers, and ales"
- }
-}, {
- "ProductID" : 2,
- "ProductName" : "Chang",
- "SupplierID" : 1,
- "CategoryID" : 1,
- "QuantityPerUnit" : "24 - 12 oz bottles",
- "UnitPrice" : 19.0000,
- "UnitsInStock" : 17,
- "UnitsOnOrder" : 40,
- "ReorderLevel" : 25,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 1,
- "CategoryName" : "Beverages",
- "Description" : "Soft drinks, coffees, teas, beers, and ales"
- }
-}, {
- "ProductID" : 3,
- "ProductName" : "Aniseed Syrup",
- "SupplierID" : 1,
- "CategoryID" : 2,
- "QuantityPerUnit" : "12 - 550 ml bottles",
- "UnitPrice" : 10.0000,
- "UnitsInStock" : 13,
- "UnitsOnOrder" : 70,
- "ReorderLevel" : 25,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 2,
- "CategoryName" : "Condiments",
- "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
- }
-}, {
- "ProductID" : 4,
- "ProductName" : "Chef Anton's Cajun Seasoning",
- "SupplierID" : 2,
- "CategoryID" : 2,
- "QuantityPerUnit" : "48 - 6 oz jars",
- "UnitPrice" : 22.0000,
- "UnitsInStock" : 53,
- "UnitsOnOrder" : 0,
- "ReorderLevel" : 0,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 2,
- "CategoryName" : "Condiments",
- "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
- }
-}, {
- "ProductID" : 5,
- "ProductName" : "Chef Anton's Gumbo Mix",
- "SupplierID" : 2,
- "CategoryID" : 2,
- "QuantityPerUnit" : "36 boxes",
- "UnitPrice" : 21.3500,
- "UnitsInStock" : 0,
- "UnitsOnOrder" : 0,
- "ReorderLevel" : 0,
- "Discontinued" : true,
- "Category" : {
- "CategoryID" : 2,
- "CategoryName" : "Condiments",
- "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
- }
-}, {
- "ProductID" : 6,
- "ProductName" : "Grandma's Boysenberry Spread",
- "SupplierID" : 3,
- "CategoryID" : 2,
- "QuantityPerUnit" : "12 - 8 oz jars",
- "UnitPrice" : 25.0000,
- "UnitsInStock" : 120,
- "UnitsOnOrder" : 0,
- "ReorderLevel" : 25,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 2,
- "CategoryName" : "Condiments",
- "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
- }
-}, {
- "ProductID" : 7,
- "ProductName" : "Uncle Bob's Organic Dried Pears",
- "SupplierID" : 3,
- "CategoryID" : 7,
- "QuantityPerUnit" : "12 - 1 lb pkgs.",
- "UnitPrice" : 30.0000,
- "UnitsInStock" : 15,
- "UnitsOnOrder" : 0,
- "ReorderLevel" : 10,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 7,
- "CategoryName" : "Produce",
- "Description" : "Dried fruit and bean curd"
- }
-}, {
- "ProductID" : 8,
- "ProductName" : "Northwoods Cranberry Sauce",
- "SupplierID" : 3,
- "CategoryID" : 2,
- "QuantityPerUnit" : "12 - 12 oz jars",
- "UnitPrice" : 40.0000,
- "UnitsInStock" : 6,
- "UnitsOnOrder" : 0,
- "ReorderLevel" : 0,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 2,
- "CategoryName" : "Condiments",
- "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
- }
-}, {
- "ProductID" : 9,
- "ProductName" : "Mishi Kobe Niku",
- "SupplierID" : 4,
- "CategoryID" : 6,
- "QuantityPerUnit" : "18 - 500 g pkgs.",
- "UnitPrice" : 97.0000,
- "UnitsInStock" : 29,
- "UnitsOnOrder" : 0,
- "ReorderLevel" : 0,
- "Discontinued" : true,
- "Category" : {
- "CategoryID" : 6,
- "CategoryName" : "Meat/Poultry",
- "Description" : "Prepared meats"
- }
-}, {
- "ProductID" : 10,
- "ProductName" : "Ikura",
- "SupplierID" : 4,
- "CategoryID" : 8,
- "QuantityPerUnit" : "12 - 200 ml jars",
- "UnitPrice" : 31.0000,
- "UnitsInStock" : 31,
- "UnitsOnOrder" : 0,
- "ReorderLevel" : 0,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 8,
- "CategoryName" : "Seafood",
- "Description" : "Seaweed and fish"
- }
-}, {
- "ProductID" : 11,
- "ProductName" : "Queso Cabrales",
- "SupplierID" : 5,
- "CategoryID" : 4,
- "QuantityPerUnit" : "1 kg pkg.",
- "UnitPrice" : 21.0000,
- "UnitsInStock" : 22,
- "UnitsOnOrder" : 30,
- "ReorderLevel" : 30,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 4,
- "CategoryName" : "Dairy Products",
- "Description" : "Cheeses"
- }
-}, {
- "ProductID" : 12,
- "ProductName" : "Queso Manchego La Pastora",
- "SupplierID" : 5,
- "CategoryID" : 4,
- "QuantityPerUnit" : "10 - 500 g pkgs.",
- "UnitPrice" : 38.0000,
- "UnitsInStock" : 86,
- "UnitsOnOrder" : 0,
- "ReorderLevel" : 0,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 4,
- "CategoryName" : "Dairy Products",
- "Description" : "Cheeses"
- }
-}, {
- "ProductID" : 13,
- "ProductName" : "Konbu",
- "SupplierID" : 6,
- "CategoryID" : 8,
- "QuantityPerUnit" : "2 kg box",
- "UnitPrice" : 6.0000,
- "UnitsInStock" : 24,
- "UnitsOnOrder" : 0,
- "ReorderLevel" : 5,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 8,
- "CategoryName" : "Seafood",
- "Description" : "Seaweed and fish"
- }
-}, {
- "ProductID" : 14,
- "ProductName" : "Tofu",
- "SupplierID" : 6,
- "CategoryID" : 7,
- "QuantityPerUnit" : "40 - 100 g pkgs.",
- "UnitPrice" : 23.2500,
- "UnitsInStock" : 35,
- "UnitsOnOrder" : 0,
- "ReorderLevel" : 0,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 7,
- "CategoryName" : "Produce",
- "Description" : "Dried fruit and bean curd"
- }
-}, {
- "ProductID" : 15,
- "ProductName" : "Genen Shouyu",
- "SupplierID" : 6,
- "CategoryID" : 2,
- "QuantityPerUnit" : "24 - 250 ml bottles",
- "UnitPrice" : 15.5000,
- "UnitsInStock" : 39,
- "UnitsOnOrder" : 0,
- "ReorderLevel" : 5,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 2,
- "CategoryName" : "Condiments",
- "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
- }
-}, {
- "ProductID" : 16,
- "ProductName" : "Pavlova",
- "SupplierID" : 7,
- "CategoryID" : 3,
- "QuantityPerUnit" : "32 - 500 g boxes",
- "UnitPrice" : 17.4500,
- "UnitsInStock" : 29,
- "UnitsOnOrder" : 0,
- "ReorderLevel" : 10,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 3,
- "CategoryName" : "Confections",
- "Description" : "Desserts, candies, and sweet breads"
- }
-}, {
- "ProductID" : 17,
- "ProductName" : "Alice Mutton",
- "SupplierID" : 7,
- "CategoryID" : 6,
- "QuantityPerUnit" : "20 - 1 kg tins",
- "UnitPrice" : 39.0000,
- "UnitsInStock" : 0,
- "UnitsOnOrder" : 0,
- "ReorderLevel" : 0,
- "Discontinued" : true,
- "Category" : {
- "CategoryID" : 6,
- "CategoryName" : "Meat/Poultry",
- "Description" : "Prepared meats"
- }
-}, {
- "ProductID" : 18,
- "ProductName" : "Carnarvon Tigers",
- "SupplierID" : 7,
- "CategoryID" : 8,
- "QuantityPerUnit" : "16 kg pkg.",
- "UnitPrice" : 62.5000,
- "UnitsInStock" : 42,
- "UnitsOnOrder" : 0,
- "ReorderLevel" : 0,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 8,
- "CategoryName" : "Seafood",
- "Description" : "Seaweed and fish"
- }
-}, {
- "ProductID" : 19,
- "ProductName" : "Teatime Chocolate Biscuits",
- "SupplierID" : 8,
- "CategoryID" : 3,
- "QuantityPerUnit" : "10 boxes x 12 pieces",
- "UnitPrice" : 9.2000,
- "UnitsInStock" : 25,
- "UnitsOnOrder" : 0,
- "ReorderLevel" : 5,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 3,
- "CategoryName" : "Confections",
- "Description" : "Desserts, candies, and sweet breads"
- }
-}, {
- "ProductID" : 20,
- "ProductName" : "Sir Rodney's Marmalade",
- "SupplierID" : 8,
- "CategoryID" : 3,
- "QuantityPerUnit" : "30 gift boxes",
- "UnitPrice" : 81.0000,
- "UnitsInStock" : 40,
- "UnitsOnOrder" : 0,
- "ReorderLevel" : 0,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 3,
- "CategoryName" : "Confections",
- "Description" : "Desserts, candies, and sweet breads"
- }
-}, {
- "ProductID" : 21,
- "ProductName" : "Sir Rodney's Scones",
- "SupplierID" : 8,
- "CategoryID" : 3,
- "QuantityPerUnit" : "24 pkgs. x 4 pieces",
- "UnitPrice" : 10.0000,
- "UnitsInStock" : 3,
- "UnitsOnOrder" : 40,
- "ReorderLevel" : 5,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 3,
- "CategoryName" : "Confections",
- "Description" : "Desserts, candies, and sweet breads"
- }
-}, {
- "ProductID" : 22,
- "ProductName" : "Gustaf's Knäckebröd",
- "SupplierID" : 9,
- "CategoryID" : 5,
- "QuantityPerUnit" : "24 - 500 g pkgs.",
- "UnitPrice" : 21.0000,
- "UnitsInStock" : 104,
- "UnitsOnOrder" : 0,
- "ReorderLevel" : 25,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 5,
- "CategoryName" : "Grains/Cereals",
- "Description" : "Breads, crackers, pasta, and cereal"
- }
-}, {
- "ProductID" : 23,
- "ProductName" : "Tunnbröd",
- "SupplierID" : 9,
- "CategoryID" : 5,
- "QuantityPerUnit" : "12 - 250 g pkgs.",
- "UnitPrice" : 9.0000,
- "UnitsInStock" : 61,
- "UnitsOnOrder" : 0,
- "ReorderLevel" : 25,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 5,
- "CategoryName" : "Grains/Cereals",
- "Description" : "Breads, crackers, pasta, and cereal"
- }
-}, {
- "ProductID" : 24,
- "ProductName" : "Guaraná Fantástica",
- "SupplierID" : 10,
- "CategoryID" : 1,
- "QuantityPerUnit" : "12 - 355 ml cans",
- "UnitPrice" : 4.5000,
- "UnitsInStock" : 20,
- "UnitsOnOrder" : 0,
- "ReorderLevel" : 0,
- "Discontinued" : true,
- "Category" : {
- "CategoryID" : 1,
- "CategoryName" : "Beverages",
- "Description" : "Soft drinks, coffees, teas, beers, and ales"
- }
-}, {
- "ProductID" : 25,
- "ProductName" : "NuNuCa Nuß-Nougat-Creme",
- "SupplierID" : 11,
- "CategoryID" : 3,
- "QuantityPerUnit" : "20 - 450 g glasses",
- "UnitPrice" : 14.0000,
- "UnitsInStock" : 76,
- "UnitsOnOrder" : 0,
- "ReorderLevel" : 30,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 3,
- "CategoryName" : "Confections",
- "Description" : "Desserts, candies, and sweet breads"
- }
-}, {
- "ProductID" : 26,
- "ProductName" : "Gumbär Gummibärchen",
- "SupplierID" : 11,
- "CategoryID" : 3,
- "QuantityPerUnit" : "100 - 250 g bags",
- "UnitPrice" : 31.2300,
- "UnitsInStock" : 15,
- "UnitsOnOrder" : 0,
- "ReorderLevel" : 0,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 3,
- "CategoryName" : "Confections",
- "Description" : "Desserts, candies, and sweet breads"
- }
-}, {
- "ProductID" : 27,
- "ProductName" : "Schoggi Schokolade",
- "SupplierID" : 11,
- "CategoryID" : 3,
- "QuantityPerUnit" : "100 - 100 g pieces",
- "UnitPrice" : 43.9000,
- "UnitsInStock" : 49,
- "UnitsOnOrder" : 0,
- "ReorderLevel" : 30,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 3,
- "CategoryName" : "Confections",
- "Description" : "Desserts, candies, and sweet breads"
- }
-}, {
- "ProductID" : 28,
- "ProductName" : "Rössle Sauerkraut",
- "SupplierID" : 12,
- "CategoryID" : 7,
- "QuantityPerUnit" : "25 - 825 g cans",
- "UnitPrice" : 45.6000,
- "UnitsInStock" : 26,
- "UnitsOnOrder" : 0,
- "ReorderLevel" : 0,
- "Discontinued" : true,
- "Category" : {
- "CategoryID" : 7,
- "CategoryName" : "Produce",
- "Description" : "Dried fruit and bean curd"
- }
-}, {
- "ProductID" : 29,
- "ProductName" : "Thüringer Rostbratwurst",
- "SupplierID" : 12,
- "CategoryID" : 6,
- "QuantityPerUnit" : "50 bags x 30 sausgs.",
- "UnitPrice" : 123.7900,
- "UnitsInStock" : 0,
- "UnitsOnOrder" : 0,
- "ReorderLevel" : 0,
- "Discontinued" : true,
- "Category" : {
- "CategoryID" : 6,
- "CategoryName" : "Meat/Poultry",
- "Description" : "Prepared meats"
- }
-}, {
- "ProductID" : 30,
- "ProductName" : "Nord-Ost Matjeshering",
- "SupplierID" : 13,
- "CategoryID" : 8,
- "QuantityPerUnit" : "10 - 200 g glasses",
- "UnitPrice" : 25.8900,
- "UnitsInStock" : 10,
- "UnitsOnOrder" : 0,
- "ReorderLevel" : 15,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 8,
- "CategoryName" : "Seafood",
- "Description" : "Seaweed and fish"
- }
-}, {
- "ProductID" : 31,
- "ProductName" : "Gorgonzola Telino",
- "SupplierID" : 14,
- "CategoryID" : 4,
- "QuantityPerUnit" : "12 - 100 g pkgs",
- "UnitPrice" : 12.5000,
- "UnitsInStock" : 0,
- "UnitsOnOrder" : 70,
- "ReorderLevel" : 20,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 4,
- "CategoryName" : "Dairy Products",
- "Description" : "Cheeses"
- }
-}, {
- "ProductID" : 32,
- "ProductName" : "Mascarpone Fabioli",
- "SupplierID" : 14,
- "CategoryID" : 4,
- "QuantityPerUnit" : "24 - 200 g pkgs.",
- "UnitPrice" : 32.0000,
- "UnitsInStock" : 9,
- "UnitsOnOrder" : 40,
- "ReorderLevel" : 25,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 4,
- "CategoryName" : "Dairy Products",
- "Description" : "Cheeses"
- }
-}, {
- "ProductID" : 33,
- "ProductName" : "Geitost",
- "SupplierID" : 15,
- "CategoryID" : 4,
- "QuantityPerUnit" : "500 g",
- "UnitPrice" : 2.5000,
- "UnitsInStock" : 112,
- "UnitsOnOrder" : 0,
- "ReorderLevel" : 20,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 4,
- "CategoryName" : "Dairy Products",
- "Description" : "Cheeses"
- }
-}, {
- "ProductID" : 34,
- "ProductName" : "Sasquatch Ale",
- "SupplierID" : 16,
- "CategoryID" : 1,
- "QuantityPerUnit" : "24 - 12 oz bottles",
- "UnitPrice" : 14.0000,
- "UnitsInStock" : 111,
- "UnitsOnOrder" : 0,
- "ReorderLevel" : 15,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 1,
- "CategoryName" : "Beverages",
- "Description" : "Soft drinks, coffees, teas, beers, and ales"
- }
-}, {
- "ProductID" : 35,
- "ProductName" : "Steeleye Stout",
- "SupplierID" : 16,
- "CategoryID" : 1,
- "QuantityPerUnit" : "24 - 12 oz bottles",
- "UnitPrice" : 18.0000,
- "UnitsInStock" : 20,
- "UnitsOnOrder" : 0,
- "ReorderLevel" : 15,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 1,
- "CategoryName" : "Beverages",
- "Description" : "Soft drinks, coffees, teas, beers, and ales"
- }
-}, {
- "ProductID" : 36,
- "ProductName" : "Inlagd Sill",
- "SupplierID" : 17,
- "CategoryID" : 8,
- "QuantityPerUnit" : "24 - 250 g jars",
- "UnitPrice" : 19.0000,
- "UnitsInStock" : 112,
- "UnitsOnOrder" : 0,
- "ReorderLevel" : 20,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 8,
- "CategoryName" : "Seafood",
- "Description" : "Seaweed and fish"
- }
-}, {
- "ProductID" : 37,
- "ProductName" : "Gravad lax",
- "SupplierID" : 17,
- "CategoryID" : 8,
- "QuantityPerUnit" : "12 - 500 g pkgs.",
- "UnitPrice" : 26.0000,
- "UnitsInStock" : 11,
- "UnitsOnOrder" : 50,
- "ReorderLevel" : 25,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 8,
- "CategoryName" : "Seafood",
- "Description" : "Seaweed and fish"
- }
-}, {
- "ProductID" : 38,
- "ProductName" : "Côte de Blaye",
- "SupplierID" : 18,
- "CategoryID" : 1,
- "QuantityPerUnit" : "12 - 75 cl bottles",
- "UnitPrice" : 263.5000,
- "UnitsInStock" : 17,
- "UnitsOnOrder" : 0,
- "ReorderLevel" : 15,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 1,
- "CategoryName" : "Beverages",
- "Description" : "Soft drinks, coffees, teas, beers, and ales"
- }
-}, {
- "ProductID" : 39,
- "ProductName" : "Chartreuse verte",
- "SupplierID" : 18,
- "CategoryID" : 1,
- "QuantityPerUnit" : "750 cc per bottle",
- "UnitPrice" : 18.0000,
- "UnitsInStock" : 69,
- "UnitsOnOrder" : 0,
- "ReorderLevel" : 5,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 1,
- "CategoryName" : "Beverages",
- "Description" : "Soft drinks, coffees, teas, beers, and ales"
- }
-}, {
- "ProductID" : 40,
- "ProductName" : "Boston Crab Meat",
- "SupplierID" : 19,
- "CategoryID" : 8,
- "QuantityPerUnit" : "24 - 4 oz tins",
- "UnitPrice" : 18.4000,
- "UnitsInStock" : 123,
- "UnitsOnOrder" : 0,
- "ReorderLevel" : 30,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 8,
- "CategoryName" : "Seafood",
- "Description" : "Seaweed and fish"
- }
-}, {
- "ProductID" : 41,
- "ProductName" : "Jack's New England Clam Chowder",
- "SupplierID" : 19,
- "CategoryID" : 8,
- "QuantityPerUnit" : "12 - 12 oz cans",
- "UnitPrice" : 9.6500,
- "UnitsInStock" : 85,
- "UnitsOnOrder" : 0,
- "ReorderLevel" : 10,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 8,
- "CategoryName" : "Seafood",
- "Description" : "Seaweed and fish"
- }
-}, {
- "ProductID" : 42,
- "ProductName" : "Singaporean Hokkien Fried Mee",
- "SupplierID" : 20,
- "CategoryID" : 5,
- "QuantityPerUnit" : "32 - 1 kg pkgs.",
- "UnitPrice" : 14.0000,
- "UnitsInStock" : 26,
- "UnitsOnOrder" : 0,
- "ReorderLevel" : 0,
- "Discontinued" : true,
- "Category" : {
- "CategoryID" : 5,
- "CategoryName" : "Grains/Cereals",
- "Description" : "Breads, crackers, pasta, and cereal"
- }
-}, {
- "ProductID" : 43,
- "ProductName" : "Ipoh Coffee",
- "SupplierID" : 20,
- "CategoryID" : 1,
- "QuantityPerUnit" : "16 - 500 g tins",
- "UnitPrice" : 46.0000,
- "UnitsInStock" : 17,
- "UnitsOnOrder" : 10,
- "ReorderLevel" : 25,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 1,
- "CategoryName" : "Beverages",
- "Description" : "Soft drinks, coffees, teas, beers, and ales"
- }
-}, {
- "ProductID" : 44,
- "ProductName" : "Gula Malacca",
- "SupplierID" : 20,
- "CategoryID" : 2,
- "QuantityPerUnit" : "20 - 2 kg bags",
- "UnitPrice" : 19.4500,
- "UnitsInStock" : 27,
- "UnitsOnOrder" : 0,
- "ReorderLevel" : 15,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 2,
- "CategoryName" : "Condiments",
- "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
- }
-}, {
- "ProductID" : 45,
- "ProductName" : "Rogede sild",
- "SupplierID" : 21,
- "CategoryID" : 8,
- "QuantityPerUnit" : "1k pkg.",
- "UnitPrice" : 9.5000,
- "UnitsInStock" : 5,
- "UnitsOnOrder" : 70,
- "ReorderLevel" : 15,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 8,
- "CategoryName" : "Seafood",
- "Description" : "Seaweed and fish"
- }
-}, {
- "ProductID" : 46,
- "ProductName" : "Spegesild",
- "SupplierID" : 21,
- "CategoryID" : 8,
- "QuantityPerUnit" : "4 - 450 g glasses",
- "UnitPrice" : 12.0000,
- "UnitsInStock" : 95,
- "UnitsOnOrder" : 0,
- "ReorderLevel" : 0,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 8,
- "CategoryName" : "Seafood",
- "Description" : "Seaweed and fish"
- }
-}, {
- "ProductID" : 47,
- "ProductName" : "Zaanse koeken",
- "SupplierID" : 22,
- "CategoryID" : 3,
- "QuantityPerUnit" : "10 - 4 oz boxes",
- "UnitPrice" : 9.5000,
- "UnitsInStock" : 36,
- "UnitsOnOrder" : 0,
- "ReorderLevel" : 0,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 3,
- "CategoryName" : "Confections",
- "Description" : "Desserts, candies, and sweet breads"
- }
-}, {
- "ProductID" : 48,
- "ProductName" : "Chocolade",
- "SupplierID" : 22,
- "CategoryID" : 3,
- "QuantityPerUnit" : "10 pkgs.",
- "UnitPrice" : 12.7500,
- "UnitsInStock" : 15,
- "UnitsOnOrder" : 70,
- "ReorderLevel" : 25,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 3,
- "CategoryName" : "Confections",
- "Description" : "Desserts, candies, and sweet breads"
- }
-}, {
- "ProductID" : 49,
- "ProductName" : "Maxilaku",
- "SupplierID" : 23,
- "CategoryID" : 3,
- "QuantityPerUnit" : "24 - 50 g pkgs.",
- "UnitPrice" : 20.0000,
- "UnitsInStock" : 10,
- "UnitsOnOrder" : 60,
- "ReorderLevel" : 15,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 3,
- "CategoryName" : "Confections",
- "Description" : "Desserts, candies, and sweet breads"
- }
-}, {
- "ProductID" : 50,
- "ProductName" : "Valkoinen suklaa",
- "SupplierID" : 23,
- "CategoryID" : 3,
- "QuantityPerUnit" : "12 - 100 g bars",
- "UnitPrice" : 16.2500,
- "UnitsInStock" : 65,
- "UnitsOnOrder" : 0,
- "ReorderLevel" : 30,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 3,
- "CategoryName" : "Confections",
- "Description" : "Desserts, candies, and sweet breads"
- }
-}, {
- "ProductID" : 51,
- "ProductName" : "Manjimup Dried Apples",
- "SupplierID" : 24,
- "CategoryID" : 7,
- "QuantityPerUnit" : "50 - 300 g pkgs.",
- "UnitPrice" : 53.0000,
- "UnitsInStock" : 20,
- "UnitsOnOrder" : 0,
- "ReorderLevel" : 10,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 7,
- "CategoryName" : "Produce",
- "Description" : "Dried fruit and bean curd"
- }
-}, {
- "ProductID" : 52,
- "ProductName" : "Filo Mix",
- "SupplierID" : 24,
- "CategoryID" : 5,
- "QuantityPerUnit" : "16 - 2 kg boxes",
- "UnitPrice" : 7.0000,
- "UnitsInStock" : 38,
- "UnitsOnOrder" : 0,
- "ReorderLevel" : 25,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 5,
- "CategoryName" : "Grains/Cereals",
- "Description" : "Breads, crackers, pasta, and cereal"
- }
-}, {
- "ProductID" : 53,
- "ProductName" : "Perth Pasties",
- "SupplierID" : 24,
- "CategoryID" : 6,
- "QuantityPerUnit" : "48 pieces",
- "UnitPrice" : 32.8000,
- "UnitsInStock" : 0,
- "UnitsOnOrder" : 0,
- "ReorderLevel" : 0,
- "Discontinued" : true,
- "Category" : {
- "CategoryID" : 6,
- "CategoryName" : "Meat/Poultry",
- "Description" : "Prepared meats"
- }
-}, {
- "ProductID" : 54,
- "ProductName" : "Tourtière",
- "SupplierID" : 25,
- "CategoryID" : 6,
- "QuantityPerUnit" : "16 pies",
- "UnitPrice" : 7.4500,
- "UnitsInStock" : 21,
- "UnitsOnOrder" : 0,
- "ReorderLevel" : 10,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 6,
- "CategoryName" : "Meat/Poultry",
- "Description" : "Prepared meats"
- }
-}, {
- "ProductID" : 55,
- "ProductName" : "Pâté chinois",
- "SupplierID" : 25,
- "CategoryID" : 6,
- "QuantityPerUnit" : "24 boxes x 2 pies",
- "UnitPrice" : 24.0000,
- "UnitsInStock" : 115,
- "UnitsOnOrder" : 0,
- "ReorderLevel" : 20,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 6,
- "CategoryName" : "Meat/Poultry",
- "Description" : "Prepared meats"
- }
-}, {
- "ProductID" : 56,
- "ProductName" : "Gnocchi di nonna Alice",
- "SupplierID" : 26,
- "CategoryID" : 5,
- "QuantityPerUnit" : "24 - 250 g pkgs.",
- "UnitPrice" : 38.0000,
- "UnitsInStock" : 21,
- "UnitsOnOrder" : 10,
- "ReorderLevel" : 30,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 5,
- "CategoryName" : "Grains/Cereals",
- "Description" : "Breads, crackers, pasta, and cereal"
- }
-}, {
- "ProductID" : 57,
- "ProductName" : "Ravioli Angelo",
- "SupplierID" : 26,
- "CategoryID" : 5,
- "QuantityPerUnit" : "24 - 250 g pkgs.",
- "UnitPrice" : 19.5000,
- "UnitsInStock" : 36,
- "UnitsOnOrder" : 0,
- "ReorderLevel" : 20,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 5,
- "CategoryName" : "Grains/Cereals",
- "Description" : "Breads, crackers, pasta, and cereal"
- }
-}, {
- "ProductID" : 58,
- "ProductName" : "Escargots de Bourgogne",
- "SupplierID" : 27,
- "CategoryID" : 8,
- "QuantityPerUnit" : "24 pieces",
- "UnitPrice" : 13.2500,
- "UnitsInStock" : 62,
- "UnitsOnOrder" : 0,
- "ReorderLevel" : 20,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 8,
- "CategoryName" : "Seafood",
- "Description" : "Seaweed and fish"
- }
-}, {
- "ProductID" : 59,
- "ProductName" : "Raclette Courdavault",
- "SupplierID" : 28,
- "CategoryID" : 4,
- "QuantityPerUnit" : "5 kg pkg.",
- "UnitPrice" : 55.0000,
- "UnitsInStock" : 79,
- "UnitsOnOrder" : 0,
- "ReorderLevel" : 0,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 4,
- "CategoryName" : "Dairy Products",
- "Description" : "Cheeses"
- }
-}, {
- "ProductID" : 60,
- "ProductName" : "Camembert Pierrot",
- "SupplierID" : 28,
- "CategoryID" : 4,
- "QuantityPerUnit" : "15 - 300 g rounds",
- "UnitPrice" : 34.0000,
- "UnitsInStock" : 19,
- "UnitsOnOrder" : 0,
- "ReorderLevel" : 0,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 4,
- "CategoryName" : "Dairy Products",
- "Description" : "Cheeses"
- }
-}, {
- "ProductID" : 61,
- "ProductName" : "Sirop d'érable",
- "SupplierID" : 29,
- "CategoryID" : 2,
- "QuantityPerUnit" : "24 - 500 ml bottles",
- "UnitPrice" : 28.5000,
- "UnitsInStock" : 113,
- "UnitsOnOrder" : 0,
- "ReorderLevel" : 25,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 2,
- "CategoryName" : "Condiments",
- "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
- }
-}, {
- "ProductID" : 62,
- "ProductName" : "Tarte au sucre",
- "SupplierID" : 29,
- "CategoryID" : 3,
- "QuantityPerUnit" : "48 pies",
- "UnitPrice" : 49.3000,
- "UnitsInStock" : 17,
- "UnitsOnOrder" : 0,
- "ReorderLevel" : 0,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 3,
- "CategoryName" : "Confections",
- "Description" : "Desserts, candies, and sweet breads"
- }
-}, {
- "ProductID" : 63,
- "ProductName" : "Vegie-spread",
- "SupplierID" : 7,
- "CategoryID" : 2,
- "QuantityPerUnit" : "15 - 625 g jars",
- "UnitPrice" : 43.9000,
- "UnitsInStock" : 24,
- "UnitsOnOrder" : 0,
- "ReorderLevel" : 5,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 2,
- "CategoryName" : "Condiments",
- "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
- }
-}, {
- "ProductID" : 64,
- "ProductName" : "Wimmers gute Semmelknödel",
- "SupplierID" : 12,
- "CategoryID" : 5,
- "QuantityPerUnit" : "20 bags x 4 pieces",
- "UnitPrice" : 33.2500,
- "UnitsInStock" : 22,
- "UnitsOnOrder" : 80,
- "ReorderLevel" : 30,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 5,
- "CategoryName" : "Grains/Cereals",
- "Description" : "Breads, crackers, pasta, and cereal"
- }
-}, {
- "ProductID" : 65,
- "ProductName" : "Louisiana Fiery Hot Pepper Sauce",
- "SupplierID" : 2,
- "CategoryID" : 2,
- "QuantityPerUnit" : "32 - 8 oz bottles",
- "UnitPrice" : 21.0500,
- "UnitsInStock" : 76,
- "UnitsOnOrder" : 0,
- "ReorderLevel" : 0,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 2,
- "CategoryName" : "Condiments",
- "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
- }
-}, {
- "ProductID" : 66,
- "ProductName" : "Louisiana Hot Spiced Okra",
- "SupplierID" : 2,
- "CategoryID" : 2,
- "QuantityPerUnit" : "24 - 8 oz jars",
- "UnitPrice" : 17.0000,
- "UnitsInStock" : 4,
- "UnitsOnOrder" : 100,
- "ReorderLevel" : 20,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 2,
- "CategoryName" : "Condiments",
- "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
- }
-}, {
- "ProductID" : 67,
- "ProductName" : "Laughing Lumberjack Lager",
- "SupplierID" : 16,
- "CategoryID" : 1,
- "QuantityPerUnit" : "24 - 12 oz bottles",
- "UnitPrice" : 14.0000,
- "UnitsInStock" : 52,
- "UnitsOnOrder" : 0,
- "ReorderLevel" : 10,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 1,
- "CategoryName" : "Beverages",
- "Description" : "Soft drinks, coffees, teas, beers, and ales"
- }
-}, {
- "ProductID" : 68,
- "ProductName" : "Scottish Longbreads",
- "SupplierID" : 8,
- "CategoryID" : 3,
- "QuantityPerUnit" : "10 boxes x 8 pieces",
- "UnitPrice" : 12.5000,
- "UnitsInStock" : 6,
- "UnitsOnOrder" : 10,
- "ReorderLevel" : 15,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 3,
- "CategoryName" : "Confections",
- "Description" : "Desserts, candies, and sweet breads"
- }
-}, {
- "ProductID" : 69,
- "ProductName" : "Gudbrandsdalsost",
- "SupplierID" : 15,
- "CategoryID" : 4,
- "QuantityPerUnit" : "10 kg pkg.",
- "UnitPrice" : 36.0000,
- "UnitsInStock" : 26,
- "UnitsOnOrder" : 0,
- "ReorderLevel" : 15,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 4,
- "CategoryName" : "Dairy Products",
- "Description" : "Cheeses"
- }
-}, {
- "ProductID" : 70,
- "ProductName" : "Outback Lager",
- "SupplierID" : 7,
- "CategoryID" : 1,
- "QuantityPerUnit" : "24 - 355 ml bottles",
- "UnitPrice" : 15.0000,
- "UnitsInStock" : 15,
- "UnitsOnOrder" : 10,
- "ReorderLevel" : 30,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 1,
- "CategoryName" : "Beverages",
- "Description" : "Soft drinks, coffees, teas, beers, and ales"
- }
-}, {
- "ProductID" : 71,
- "ProductName" : "Flotemysost",
- "SupplierID" : 15,
- "CategoryID" : 4,
- "QuantityPerUnit" : "10 - 500 g pkgs.",
- "UnitPrice" : 21.5000,
- "UnitsInStock" : 26,
- "UnitsOnOrder" : 0,
- "ReorderLevel" : 0,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 4,
- "CategoryName" : "Dairy Products",
- "Description" : "Cheeses"
- }
-}, {
- "ProductID" : 72,
- "ProductName" : "Mozzarella di Giovanni",
- "SupplierID" : 14,
- "CategoryID" : 4,
- "QuantityPerUnit" : "24 - 200 g pkgs.",
- "UnitPrice" : 34.8000,
- "UnitsInStock" : 14,
- "UnitsOnOrder" : 0,
- "ReorderLevel" : 0,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 4,
- "CategoryName" : "Dairy Products",
- "Description" : "Cheeses"
- }
-}, {
- "ProductID" : 73,
- "ProductName" : "Röd Kaviar",
- "SupplierID" : 17,
- "CategoryID" : 8,
- "QuantityPerUnit" : "24 - 150 g jars",
- "UnitPrice" : 15.0000,
- "UnitsInStock" : 101,
- "UnitsOnOrder" : 0,
- "ReorderLevel" : 5,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 8,
- "CategoryName" : "Seafood",
- "Description" : "Seaweed and fish"
- }
-}, {
- "ProductID" : 74,
- "ProductName" : "Longlife Tofu",
- "SupplierID" : 4,
- "CategoryID" : 7,
- "QuantityPerUnit" : "5 kg pkg.",
- "UnitPrice" : 10.0000,
- "UnitsInStock" : 4,
- "UnitsOnOrder" : 20,
- "ReorderLevel" : 5,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 7,
- "CategoryName" : "Produce",
- "Description" : "Dried fruit and bean curd"
- }
-}, {
- "ProductID" : 75,
- "ProductName" : "Rhönbräu Klosterbier",
- "SupplierID" : 12,
- "CategoryID" : 1,
- "QuantityPerUnit" : "24 - 0.5 l bottles",
- "UnitPrice" : 7.7500,
- "UnitsInStock" : 125,
- "UnitsOnOrder" : 0,
- "ReorderLevel" : 25,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 1,
- "CategoryName" : "Beverages",
- "Description" : "Soft drinks, coffees, teas, beers, and ales"
- }
-}, {
- "ProductID" : 76,
- "ProductName" : "Lakkalikööri",
- "SupplierID" : 23,
- "CategoryID" : 1,
- "QuantityPerUnit" : "500 ml",
- "UnitPrice" : 18.0000,
- "UnitsInStock" : 57,
- "UnitsOnOrder" : 0,
- "ReorderLevel" : 20,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 1,
- "CategoryName" : "Beverages",
- "Description" : "Soft drinks, coffees, teas, beers, and ales"
- }
-}, {
- "ProductID" : 77,
- "ProductName" : "Original Frankfurter grüne Soße",
- "SupplierID" : 12,
- "CategoryID" : 2,
- "QuantityPerUnit" : "12 boxes",
- "UnitPrice" : 13.0000,
- "UnitsInStock" : 32,
- "UnitsOnOrder" : 0,
- "ReorderLevel" : 15,
- "Discontinued" : false,
- "Category" : {
- "CategoryID" : 2,
- "CategoryName" : "Condiments",
- "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
- }
-}]
diff --git a/docs/knowledge-base/examples/listbox/show-drag-clue/styles.css b/docs/knowledge-base/examples/listbox/show-drag-clue/styles.css
deleted file mode 100644
index 7e31a6ec..00000000
--- a/docs/knowledge-base/examples/listbox/show-drag-clue/styles.css
+++ /dev/null
@@ -1,7 +0,0 @@
-.listbox-clue {
- border-bottom: 1px solid red;
- }
- .listbox-clue-top {
- border-top: 1px solid red;
- }
-
\ No newline at end of file
diff --git a/docs/knowledge-base/examples/listview/listview-grouping/app.jsx b/docs/knowledge-base/examples/listview/listview-grouping/app.jsx
deleted file mode 100644
index 125126b4..00000000
--- a/docs/knowledge-base/examples/listview/listview-grouping/app.jsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import * as React from 'react';
-import { ListView } from '@progress/kendo-react-listview';
-import products from './products.json';
-import { groupBy } from '@progress/kendo-data-query';
-
-const MyItemRender = (props) => {
- let groupItemItem = props.dataItem;
- let items = groupItemItem.items;
- let groupName = groupItemItem.value;
- return (
-
-
- {"= " + groupName}
-
-
- {items.map((item) => {
- return (
-
- {item.ProductName}
-
- );
- })}
-
- );
-};
-const App = () => {
- return (
-
-
- );
-};
-
-export default App;
\ No newline at end of file
diff --git a/docs/knowledge-base/examples/listview/listview-grouping/main.jsx b/docs/knowledge-base/examples/listview/listview-grouping/main.jsx
deleted file mode 100644
index 36d8526e..00000000
--- a/docs/knowledge-base/examples/listview/listview-grouping/main.jsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import * as React from 'react';
-import { createRoot } from 'react-dom/client';
-import App from './app'
-
-const root = createRoot(document.querySelector('my-app'));
-root.render(
-
- {props.label}:
-
- {props.options.map((option, key) => {option} )}
-
-
-
;
-};
\ No newline at end of file
diff --git a/docs/knowledge-base/examples/localization/use-variable-in-messages/Message.jsx b/docs/knowledge-base/examples/localization/use-variable-in-messages/Message.jsx
deleted file mode 100644
index cee5610b..00000000
--- a/docs/knowledge-base/examples/localization/use-variable-in-messages/Message.jsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import * as React from 'react';
-import { useLocalization } from '@progress/kendo-react-intl';
-export const Message = (props) => {
- const localization = useLocalization();
- return (
-
- {localization.toLanguageString(props.messageKey, props.defaultMessage)}
-
- );
-};
diff --git a/docs/knowledge-base/examples/localization/use-variable-in-messages/MyLocalizationProvider.jsx b/docs/knowledge-base/examples/localization/use-variable-in-messages/MyLocalizationProvider.jsx
deleted file mode 100644
index 9c175c2d..00000000
--- a/docs/knowledge-base/examples/localization/use-variable-in-messages/MyLocalizationProvider.jsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import {
- LocalizationProvider,
- LocalizationService,
- } from '@progress/kendo-react-intl';
-
- import { messages } from './messages';
-
- const fillTemplate = (templateString, templateVars) => {
- return new Function('return `' + templateString + '`;').call(templateVars);
- };
-
- export default class MyLocalizationProvider extends LocalizationProvider {
- constructor(language, contextParameters) {
- super(language, contextParameters);
- this.language = language;
- this.contextParameters = this.props.contextParameters;
- }
- getLocalizationService() {
- return new MyLocalizationService({
- language: this.props.language,
- contextParameters: this.props.contextParameters,
- });
- }
- }
-
- export class MyLocalizationService extends LocalizationService {
- constructor(props) {
- super(props);
- this.language = props.language;
- this.contextParameters = props.contextParameters;
- }
- toLanguageString(key, defaultValue) {
- if (
- this.language &&
- messages[this.language] &&
- messages[this.language].hasOwnProperty(key)
- ) {
- return fillTemplate(messages[this.language][key], this.contextParameters);
- } else {
- return fillTemplate(defaultValue, this.contextParameters);
- }
- }
- }
-
\ No newline at end of file
diff --git a/docs/knowledge-base/examples/localization/use-variable-in-messages/app.jsx b/docs/knowledge-base/examples/localization/use-variable-in-messages/app.jsx
deleted file mode 100644
index d8774d3d..00000000
--- a/docs/knowledge-base/examples/localization/use-variable-in-messages/app.jsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import * as React from 'react';
-import { useLocalization, loadMessages } from '@progress/kendo-react-intl';
-import { Chooser } from './Chooser';
-import {
- messages,
- todaysMessages,
- yesterdaysMessageKey,
- tomorrowsMessageKey,
-} from './messages';
-import { Message } from './Message';
-//Extended LocalizationProvider for handling ${variable} syntax within messages
-import MyLocalizationProvider from './MyLocalizationProvider';
-
-const App = () => {
- //State variable that will be used within the messages
- const [userName, setUserName] = React.useState('some user name');
- const [language, setLanguage] = React.useState('en');
- const languages = ['en', 'es', 'bg'];
-
- const defaultMessages = {
- [yesterdaysMessageKey]: 'Yesterday was a good day!',
- [todaysMessages]:
- 'Today is a good day as well! Some count: ${this.userName}',
- [tomorrowsMessageKey]: 'Tomorrow will be even better!',
- };
-
- loadMessages(messages['es'], 'es');
- loadMessages(messages['bg'], 'bg');
-
- const handleChange = React.useCallback((event) => {
- setLanguage(event.target.value);
- }, []);
-
- return (
-
-
-
{
- setUserName('UserName' + Math.floor(Math.random() * 1000));
- }}
- >
- Change username
-
-
-
-
-
-
OpenStreetMap contributors ';
-
-const shapeStyle: ShapeOptions = {
- fill: {
- opacity: 0.75
- }
-};
-
-const shapeCreated = (e: ShapeCreatedEvent) => {
- const title = e.dataItem.properties.abbrev;
- drawTitle(e.shape, title, e.layer.surface);
-}
-
-const drawTitle = (shape: Element, title: string, surface: Surface) => {
- // Calculate the shape bounding box.
- const bbox = shape.bbox();
- const center = bbox.center();
-
- // Create the label.
- const label = new Text(title, [0, 0]);
- const labelCenter = label.bbox().center();
-
- // Position the label.
- label.position([
- center.x - labelCenter.x,
- center.y - labelCenter.y
- ]);
-
- // Render the label on the layer surface.
- surface.draw(label);
-}
-
-const App = () => (
-
-
-
-
-);
-
-export default App;
diff --git a/docs/knowledge-base/examples/map/add-shape-titles/main.tsx b/docs/knowledge-base/examples/map/add-shape-titles/main.tsx
deleted file mode 100644
index 36d8526e..00000000
--- a/docs/knowledge-base/examples/map/add-shape-titles/main.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import * as React from 'react';
-import { createRoot } from 'react-dom/client';
-import App from './app'
-
-const root = createRoot(document.querySelector('my-app'));
-root.render(OpenStreetMap contributors ';
-
-const drawLine = (map: Map) => (args: BubbleLayerSymbolArgs) => {
- // Bubble location
- const location = args.location;
-
- // Find locations 100km west and east of center.
- // Actual distance can be bound to args.dataItem fields
- const l1 = location.destination(100000, 270);
- const l2 = location.destination(100000, 90);
-
- // Get the view (screen) coordinates for the locations.
- const p1 = map.locationToView(l1);
- const p2 = map.locationToView(l2);
-
- // Draw the lines.
- const path = new Path({
- stroke: {
- width: 2,
- color: 'red'
- }
- });
-
- path.moveTo(p1).lineTo(p2);
-
- return path;
-};
-
-const App = () => {
- const map = React.useRef(null);
- const lineSymbol = (args: BubbleLayerSymbolArgs) => {
- return drawLine(map.current)(args);
- };
-
- return (
-
-
-
-
- );
-};
-
-export default App;
diff --git a/docs/knowledge-base/examples/map/custom-bubble-symbols/main.tsx b/docs/knowledge-base/examples/map/custom-bubble-symbols/main.tsx
deleted file mode 100644
index 36d8526e..00000000
--- a/docs/knowledge-base/examples/map/custom-bubble-symbols/main.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import * as React from 'react';
-import { createRoot } from 'react-dom/client';
-import App from './app'
-
-const root = createRoot(document.querySelector('my-app'));
-root.render(OpenStreetMap contributors ';
-
-const markers = [{
- location: [20.69, -70.96],
- title: "Foo",
- pointTo: [18.89, -72.19]
-}];
-
-const linkMarker = (map: Map, marker: MapMarker) => {
- const data = marker.dataItem;
- if (data.pointTo) {
- // Convert the latitude and longitude locations to coordinates on the screen.
- const from = map.locationToView(marker.location());
- const to = map.locationToView(data.pointTo);
-
- // Draw a path on the shape layer.
- const layer = map.layers[1];
- const line = new Path({
- stroke: {
- color: "#fcc",
- width: 6,
- lineCap: 'round'
- }
- });
- line.moveTo(from).lineTo(to);
-
- layer.surface.draw(line);
- }
-}
-
-const reset = (args: ResetEvent) => {
- const map = args.target;
- const layer = map.layers[2];
-
- for (let marker of layer.items) {
- linkMarker(map, marker);
- }
-};
-
-const App = () => (
-
-
-
-
-);
-
-export default App;
diff --git a/docs/knowledge-base/examples/map/link-markers/main.tsx b/docs/knowledge-base/examples/map/link-markers/main.tsx
deleted file mode 100644
index 36d8526e..00000000
--- a/docs/knowledge-base/examples/map/link-markers/main.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import * as React from 'react';
-import { createRoot } from 'react-dom/client';
-import App from './app'
-
-const root = createRoot(document.querySelector('my-app'));
-root.render(
- {tagText}
- ,
- li.props.children,
- ]
- );
- };
- return (
-
- );
-};
-
-export default App;
\ No newline at end of file
diff --git a/docs/knowledge-base/examples/multiselect/multiselect-color-tags/main.jsx b/docs/knowledge-base/examples/multiselect/multiselect-color-tags/main.jsx
deleted file mode 100644
index 36d8526e..00000000
--- a/docs/knowledge-base/examples/multiselect/multiselect-color-tags/main.jsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import * as React from 'react';
-import { createRoot } from 'react-dom/client';
-import App from './app'
-
-const root = createRoot(document.querySelector('my-app'));
-root.render({li.props.children} ;
- return (
-
- {itemChildren}
-
- );
- };
- const handleClose = (event) => {
- console.log(event.syntheticEvent.target.classList);
- if (!(event.syntheticEvent.target.classList[0] === 'k-list-ul')) {
- setOpen(false);
- }
- };
- const handleBlur = () => {
- console.log('blur');
- setOpen(false);
- };
-
- const handleOpen = () => {
- setOpen(true);
- };
-
- return (
-
-
Select European countries:
-
-
-
- {dataItem.text}
-
- );
-};
-
-const App = () => {
- const [value, setValue] = React.useState([
- { text: 'X-Small', id: 1 },
- { text: 'Small', id: 2 },
- { text: 'Medium', id: 3 },
- ]);
-
- const handleChange = (event) => {
- setValue(event.target.value);
- };
-
- const onDragOver = (event) => {
- setValue(event.newState);
- };
-
- const onNavigate = (event) => {
- setValue(event.newState);
- };
-
- return (
-
-
Selected values: {value.map(i=>i.text).join(",")}
-
-
} //removeing original tags
- />
-
-
- );
- return React.cloneElement(li, li.props, itemChildren);
- };
-
- render() {
- const value = this.state.value;
- const selected = value.length;
- return (
-
-
Select European countries:
-
0
- ? [{ text: `${selected} items selected`, data: [...value] }]
- : []
- }
- />
-
-
- );
- return React.cloneElement(li, li.props, itemChildren);
- };
- const value = state.value;
- const selected = value.length;
- return (
-
-
Select European countries:
-
0
- ? [{ text: `${selected} items selected`, data: [...value] }]
- : []
- }
- />
-
- {icon ? icon : tagData.text}
- ,
- li.props.children,
- ]);
- };
-
- const handleChange = React.useCallback(
- (event) => {
- const close = event.syntheticEvent.target.classList[0] === 'k-icon';
- if (!(event.value.length < value.length) && !close) {
- tags[0].text = `${event.value.length} task`;
- setTags((tags) => [
- ...tags,
- {
- text: `${event.value[event.value.length - 1]}`,
- data: [...value],
- },
- ]);
- } else {
- const deletedEl = event.nativeEvent.target.outerText;
- setTags((tags) => tags.filter((tag) => tag.text !== deletedEl));
- }
-
- setValue(event.value);
- },
- [tags]
- );
-
- return (
-
- );
-};
-export default App;
diff --git a/docs/knowledge-base/examples/multiselect/multiselect-tags-and-tagrender/main.jsx b/docs/knowledge-base/examples/multiselect/multiselect-tags-and-tagrender/main.jsx
deleted file mode 100644
index 36d8526e..00000000
--- a/docs/knowledge-base/examples/multiselect/multiselect-tags-and-tagrender/main.jsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import * as React from 'react';
-import { createRoot } from 'react-dom/client';
-import App from './app'
-
-const root = createRoot(document.querySelector('my-app'));
-root.render(
- this.onToggle('success')}
- >
- {(success ? 'hide ' : 'show ') + 'Success'}
-
-
-
-
- {success && this.setState({ success: false })}
- >
- Your data has been saved.
- }
-
-
-
- );
- }
-}
-
-export default App;
-
diff --git a/docs/knowledge-base/examples/notification/hide-after/main.jsx b/docs/knowledge-base/examples/notification/hide-after/main.jsx
deleted file mode 100644
index 36d8526e..00000000
--- a/docs/knowledge-base/examples/notification/hide-after/main.jsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import * as React from 'react';
-import { createRoot } from 'react-dom/client';
-import App from './app'
-
-const root = createRoot(document.querySelector('my-app'));
-root.render(
- ({
- ...item,
- selected: item.ProductID === selectedID
- }))}
- selectedField="selected"
- onRowClick={e => {
- this.setState({
- selectedID: e.dataItem.ProductID,
- notifications: [
- ...notifications,
- { row: e.dataItem.ProductID, show: true }
- ]
- }),
- setTimeout(() => {
- this.hideNotification(e.dataItem.ProductID);
- }, 4000);
- }}
- >
-
-
-
-
- {notifications.map((notification, i) => {
- return (
- notification.show && (
- this.closeNotification(i)}
- >
- Product Clicked: {this.state.data.map(item => {
- if (notification.row == item.ProductID) {
- return item.ProductName
- }
- })}
-
- )
- );
- })}
- {" "}
-
-
- );
- }
-}
-
-export default App;
diff --git a/docs/knowledge-base/examples/notification/stack-and-hide-after/main.jsx b/docs/knowledge-base/examples/notification/stack-and-hide-after/main.jsx
deleted file mode 100644
index 36d8526e..00000000
--- a/docs/knowledge-base/examples/notification/stack-and-hide-after/main.jsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import * as React from 'react';
-import { createRoot } from 'react-dom/client';
-import App from './app'
-
-const root = createRoot(document.querySelector('my-app'));
-root.render(
-
- addNotification('new message' + new Date().toTimeString())
- }
- >
- Add message
-
-
- {state.messages &&
- state.messages.map((message, index) => {
- return (
-
- {
- let newMessages = state.messages.map((item) => item);
- newMessages.splice(index, 1);
- setState({ messages: newMessages });
- }}
- >
- {message}
-
-
- );
- })}
-
-
- );
-};
-
-export default App;
diff --git a/docs/knowledge-base/examples/notification/stack-notifications/main.jsx b/docs/knowledge-base/examples/notification/stack-notifications/main.jsx
deleted file mode 100644
index 36d8526e..00000000
--- a/docs/knowledge-base/examples/notification/stack-notifications/main.jsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import * as React from 'react';
-import { createRoot } from 'react-dom/client';
-import App from './app'
-
-const root = createRoot(document.querySelector('my-app'));
-root.render(
-
{
- this.anchor = button;
- }}
- >
- {this.state.show ? "Hide" : "Show"}
-
-
-
- some content
-
-
-
-
{
- this.anchor = button;
- }}
- >
- {this.state.show ? 'Hide' : 'Show'}
-
-
- Popup content.
-
-
- {value}{' '}
-
-
- );
-};
-
-export default App;
\ No newline at end of file
diff --git a/docs/knowledge-base/examples/radialgauge/main.tsx b/docs/knowledge-base/examples/radialgauge/main.tsx
deleted file mode 100644
index 36d8526e..00000000
--- a/docs/knowledge-base/examples/radialgauge/main.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import * as React from 'react';
-import { createRoot } from 'react-dom/client';
-import App from './app'
-
-const root = createRoot(document.querySelector('my-app'));
-root.render(
-
-
-
-
-
- (
-
-
-
- );
-};
-
-export default App;
diff --git a/docs/knowledge-base/examples/scheduler/dnd-from-grid-mobile/draggable/drag-handle-cell.jsx b/docs/knowledge-base/examples/scheduler/dnd-from-grid-mobile/draggable/drag-handle-cell.jsx
deleted file mode 100644
index c9b26f98..00000000
--- a/docs/knowledge-base/examples/scheduler/dnd-from-grid-mobile/draggable/drag-handle-cell.jsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import * as React from 'react';
-export const DragHandleCell = (props) => {
- return (
-
-
- );
-};
diff --git a/docs/knowledge-base/examples/scheduler/dnd-from-grid-mobile/draggable/draggable-row.jsx b/docs/knowledge-base/examples/scheduler/dnd-from-grid-mobile/draggable/draggable-row.jsx
deleted file mode 100644
index b49470ee..00000000
--- a/docs/knowledge-base/examples/scheduler/dnd-from-grid-mobile/draggable/draggable-row.jsx
+++ /dev/null
@@ -1,87 +0,0 @@
-import * as React from 'react';
-import { createPortal } from 'react-dom';
-import { ReorderContext } from './app';
-import { useDraggable } from '@progress/kendo-react-common';
-
-export const DraggableRow = (props) => {
- const [position, setPosition] = React.useState({ x: 50, y: 50 });
- const [dragged, setDragged] = React.useState(false);
- const { dragStart } = React.useContext(ReorderContext);
- const element = React.useRef(null);
- const hint = React.useRef(null);
-
- const handlePress = React.useCallback(() => {}, []);
-
- const handleDragStart = React.useCallback(
- (event) => {
- setDragged(true);
- dragStart(props.dataItem);
- },
- [position.x, position.y]
- );
-
- const handleDrag = React.useCallback((event) => {
- setPosition({
- x: event.clientX + 50,
- y: event.clientY - 50,
- });
- }, []);
-
- const handleDragEnd = React.useCallback(() => {
- setDragged(false);
- }, []);
-
- const handleRelease = React.useCallback(() => {
- setPosition({ x: 50, y: 50 });
- }, []);
-
- useDraggable(
- element,
- {
- onPress: handlePress,
- onDragStart: handleDragStart,
- onDrag: handleDrag,
- onDragEnd: handleDragEnd,
- onRelease: handleRelease,
- },
- { hint: hint }
- );
-
- return (
-
- {createPortal(
- dragged ? (
-
- ) : null,
- document.body
- )}
-
- );
-};
diff --git a/docs/knowledge-base/examples/scheduler/dnd-from-grid-mobile/draggable/main.jsx b/docs/knowledge-base/examples/scheduler/dnd-from-grid-mobile/draggable/main.jsx
deleted file mode 100644
index 36d8526e..00000000
--- a/docs/knowledge-base/examples/scheduler/dnd-from-grid-mobile/draggable/main.jsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import * as React from 'react';
-import { createRoot } from 'react-dom/client';
-import App from './app'
-
-const root = createRoot(document.querySelector('my-app'));
-root.render(
-
-
-
-
-
- );
-};
-
-export default App;
diff --git a/docs/knowledge-base/examples/scheduler/dnd-from-grid-mobile/polyfill/main.jsx b/docs/knowledge-base/examples/scheduler/dnd-from-grid-mobile/polyfill/main.jsx
deleted file mode 100644
index 36d8526e..00000000
--- a/docs/knowledge-base/examples/scheduler/dnd-from-grid-mobile/polyfill/main.jsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import * as React from 'react';
-import { createRoot } from 'react-dom/client';
-import App from './app'
-
-const root = createRoot(document.querySelector('my-app'));
-root.render(
-
-
-
-
- );
-};
-
-export default App;
diff --git a/docs/knowledge-base/examples/scheduler/dnd-from-grid/main.jsx b/docs/knowledge-base/examples/scheduler/dnd-from-grid/main.jsx
deleted file mode 100644
index 36d8526e..00000000
--- a/docs/knowledge-base/examples/scheduler/dnd-from-grid/main.jsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import * as React from 'react';
-import { createRoot } from 'react-dom/client';
-import App from './app'
-
-const root = createRoot(document.querySelector('my-app'));
-root.render( {
- refDragItem.current = props.dataItem;
- }}
- style={{ padding: 10, borderBottom: '1px solid lightgrey' }}
- >
- {item.title}
-
- );
- };
- return (
- <>
-
-
-
- Export to iCal
- {props.children}
-
- );
- };
-
- const exportToIcal = () => {
- var component = new ICAL.Component(["vcalendar", [], []]);
- component.updatePropertyWithValue("prodid", "iCal.js Example");
- component.updatePropertyWithValue("version", "2.0");
-
- var schedulerEvents = data;
-
- for (var i = 0; i < schedulerEvents.length; i++) {
- var schedulerEvent = schedulerEvents[i];
- var vevent = new ICAL.Component("vevent");
- var event = new ICAL.Event(vevent);
-
- event.uid = schedulerEvent.recurrenceId
- ? schedulerEvent.recurrenceId.toString()
- : schedulerEvent.id.toString();
- event.summary = schedulerEvent.title;
- event.description = schedulerEvent.description;
- event.startDate = ICAL.Time.fromDateTimeString(
- getISOString(schedulerEvent.start, true)
- );
- event.endDate = ICAL.Time.fromDateTimeString(
- getISOString(schedulerEvent.end, true)
- );
-
- if (schedulerEvent.recurrenceRule) {
- event.component.addProperty(
- new ICAL.Property(
- ICAL.parse.property("RRULE:" + schedulerEvent.recurrenceRule)
- )
- );
- }
-
- if (schedulerEvent.recurrenceException) {
- event.component.addProperty(
- new ICAL.Property(
- ICAL.parse.property("EXDATE:" + schedulerEvent.recurrenceException)
- )
- );
- }
-
- if (schedulerEvent.recurrenceId) {
- event.recurrenceId = ICAL.Time.fromDateTimeString(
- getISOString(schedulerEvent.start, true)
- );
- }
-
- event.component.addPropertyWithValue(
- "dtstamp",
- ICAL.Time.fromDateTimeString(getISOString(new Date(), true))
- );
- component.addSubcomponent(vevent);
- }
- saveAs(
- "data:text/calendar," + component.toString(),
- "KendoSchedulerCal.ics"
- );
- };
- return (
-
-
- );
-};
-
-export default App;
diff --git a/docs/knowledge-base/examples/scheduler/export-to-ical/main.jsx b/docs/knowledge-base/examples/scheduler/export-to-ical/main.jsx
deleted file mode 100644
index 36d8526e..00000000
--- a/docs/knowledge-base/examples/scheduler/export-to-ical/main.jsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import * as React from 'react';
-import { createRoot } from 'react-dom/client';
-import App from './app'
-
-const root = createRoot(document.querySelector('my-app'));
-root.render(
- Meeting room 101{' '}
-
- ),
- value: 1,
- color: '#5392E4',
- },
- {
- text: 'Meeting Room 201',
- value: 2,
- color: '#FF7272',
- },
- ],
- field: 'roomId',
- valueField: 'value',
- textField: 'text',
- colorField: 'color',
- },
- {
- name: 'Person',
- data: [
- {
- text: (
-
- Peter{' '}
-
- ),
- value: 1,
- },
- {
- text: 'Alex',
- value: 2,
- },
- ],
- field: 'personId',
- valueField: 'value',
- textField: 'text',
- colorField: 'color',
- },
-];
-
-const App = () => {
- return (
-
-
- );
-};
-
-export default App;
diff --git a/docs/knowledge-base/examples/scheduler/icon-in-group-header/data.js b/docs/knowledge-base/examples/scheduler/icon-in-group-header/data.js
deleted file mode 100644
index 30a1c7a3..00000000
--- a/docs/knowledge-base/examples/scheduler/icon-in-group-header/data.js
+++ /dev/null
@@ -1,30 +0,0 @@
-export const defaultDate = new Date("2011-06-09T00:00:00.000Z");
-export const data = [{
- id: 0,
- title: 'Room 1, Person 1',
- start: new Date("2011-06-09T09:00:00.000Z"),
- end: new Date("2011-06-09T11:00:00.000Z"),
- roomId: 1,
- personId: 1
-}, {
- id: 1,
- title: 'Room 1, Person 2',
- start: new Date("2011-06-09T09:00:00.000Z"),
- end: new Date("2011-06-09T11:00:00.000Z"),
- roomId: 1,
- personId: 2
-}, {
- id: 2,
- title: 'Room 2, Person 1',
- start: new Date("2011-06-09T09:00:00.000Z"),
- end: new Date("2011-06-09T11:00:00.000Z"),
- roomId: 2,
- personId: 1
-}, {
- id: 3,
- title: 'Room 2, Person 2',
- start: new Date("2011-06-09T09:00:00.000Z"),
- end: new Date("2011-06-09T11:00:00.000Z"),
- roomId: 2,
- personId: 2
-}];
\ No newline at end of file
diff --git a/docs/knowledge-base/examples/scheduler/icon-in-group-header/main.jsx b/docs/knowledge-base/examples/scheduler/icon-in-group-header/main.jsx
deleted file mode 100644
index 36d8526e..00000000
--- a/docs/knowledge-base/examples/scheduler/icon-in-group-header/main.jsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import * as React from 'react';
-import { createRoot } from 'react-dom/client';
-import App from './app'
-
-const root = createRoot(document.querySelector('my-app'));
-root.render(
-
- );
-};
-
-export default App;
diff --git a/docs/knowledge-base/examples/scheduler/recurring-event-form-editor/custom-dialog.jsx b/docs/knowledge-base/examples/scheduler/recurring-event-form-editor/custom-dialog.jsx
deleted file mode 100644
index c8701a37..00000000
--- a/docs/knowledge-base/examples/scheduler/recurring-event-form-editor/custom-dialog.jsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import * as React from 'react';
-import { Dialog } from '@progress/kendo-react-dialogs';
-export const CustomDialog = props => {
- return
-
-
Patient Name
-
- {props.errors.Patient} }
-
-
-
Treatment
-
- {props.errors.Treatment} }
-
-
- );
-};
diff --git a/docs/knowledge-base/examples/scheduler/recurring-event-form-editor/custom-form.jsx b/docs/knowledge-base/examples/scheduler/recurring-event-form-editor/custom-form.jsx
deleted file mode 100644
index eae374e5..00000000
--- a/docs/knowledge-base/examples/scheduler/recurring-event-form-editor/custom-form.jsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import * as React from 'react';
-import { SchedulerForm } from '@progress/kendo-react-scheduler';
-import { CustomFormEditor } from './custom-form-editor';
-import { CustomDialog } from './custom-dialog';
-export const FormWithCustomEditor = props => {
- const requiredValidator = React.useCallback(value => value === undefined || value === null || value === '' ? 'Field is required.' : undefined, []);
- const formValidator = (_dataItem, formValueGetter) => {
- let result = {};
- result.Patient = [requiredValidator(formValueGetter('Patient'))].filter(Boolean).reduce((current, acc) => current || acc, '');
- result.Treatment = [requiredValidator(formValueGetter('Treatment'))].filter(Boolean).reduce((current, acc) => current || acc, '');
- return result;
- };
- return p.id === props.value)} data={patients} dataItemKey={'id'} textField={'name'} />;
-};
-export const TreatmentEditor = props => {
- const handleChange = event => {
- if (props.onChange) {
- props.onChange.call(undefined, {
- value: event.value.value
- });
- }
- };
- return t.value === props.value)} data={treatments} dataItemKey={'value'} textField={'text'} />;
-};
-export const TherapistEditor = props => {
- const handleChange = event => {
- if (props.onChange) {
- props.onChange.call(undefined, {
- value: event.value.value
- });
- }
- };
- return t.value === props.value)} data={therapists} dataItemKey={'value'} textField={'name'} />;
-};
-export const RoomEditor = props => {
- const handleChange = event => {
- if (props.onChange) {
- props.onChange.call(undefined, {
- value: event.value.id
- });
- }
- };
- return r.id === props.value)} data={rooms} dataItemKey={'id'} textField={'title'} />;
-};
\ No newline at end of file
diff --git a/docs/knowledge-base/examples/scheduler/recurring-event-form-editor/main.jsx b/docs/knowledge-base/examples/scheduler/recurring-event-form-editor/main.jsx
deleted file mode 100644
index 36d8526e..00000000
--- a/docs/knowledge-base/examples/scheduler/recurring-event-form-editor/main.jsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import * as React from 'react';
-import { createRoot } from 'react-dom/client';
-import App from './app'
-
-const root = createRoot(document.querySelector('my-app'));
-root.render(
-
start: {start.toString()}
-
end: {end.toString()}
-
-
-
-
- );
-};
-
-export default App;
diff --git a/docs/knowledge-base/examples/splitbutton/disable-left-part/main.jsx b/docs/knowledge-base/examples/splitbutton/disable-left-part/main.jsx
deleted file mode 100644
index 36d8526e..00000000
--- a/docs/knowledge-base/examples/splitbutton/disable-left-part/main.jsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import * as React from 'react';
-import { createRoot } from 'react-dom/client';
-import App from './app'
-
-const root = createRoot(document.querySelector('my-app'));
-root.render(
- {data.map((i) => (
-
-
- inputChange({ syntheticEvent: event.syntheticEvent, value: i })
- }
- checked={filter.value.includes(i)}
- label={String(i)}
- labelPlacement="after"
- />
-
- ))}
-
- );
-};
-
-export const ColumnMenuCustomCheckboxesColumn = (props) => {
- const initialFilter = React.useCallback(
- (field) => ({
- logic: 'or',
- filters: [
- {
- operator: (current, values) => values.includes(current),
- field,
- value: [],
- },
- ],
- }),
- []
- );
-
- return (
- (
-
- {textLabel}
-
- );
-};
-
-export const ColumnMenuCustomDateColumn = props => {
- const initialFilter = React.useCallback(
- field => ({
- logic: "and",
- filters: [
- {
- field,
- operator: "gte",
- value: new Date("01/01/2012")
- },
- {
- field,
- operator: "lte",
- value: new Date("01/01/2015")
- }
- ]
- }),
- []
- );
- return (
-
-
-
-
-
-
-
- );
- }
-}
-
-export default App;
-
diff --git a/docs/knowledge-base/examples/treelist/drag-and-drop/main.jsx b/docs/knowledge-base/examples/treelist/drag-and-drop/main.jsx
deleted file mode 100644
index 36d8526e..00000000
--- a/docs/knowledge-base/examples/treelist/drag-and-drop/main.jsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import * as React from 'react';
-import { createRoot } from 'react-dom/client';
-import App from './app'
-
-const root = createRoot(document.querySelector('my-app'));
-root.render(
- {DropedItem.title}
-
-
-
- );
-
- return props.render
- ? props.render.call(undefined, defaultRendering, props)
- : defaultRendering;
-};
diff --git a/docs/knowledge-base/examples/treelist/treelist-custom-editor/app.jsx b/docs/knowledge-base/examples/treelist/treelist-custom-editor/app.jsx
deleted file mode 100644
index c5de1144..00000000
--- a/docs/knowledge-base/examples/treelist/treelist-custom-editor/app.jsx
+++ /dev/null
@@ -1,198 +0,0 @@
-import * as React from 'react';
-import {
- TreeList,
- TreeListToolbar,
- mapTree,
- extendDataItem,
- removeItems,
- modifySubItems,
- TreeListTextEditor,
- TreeListBooleanEditor,
-} from '@progress/kendo-react-treelist';
-import MyCommandCell from './my-command-cell';
-import employees from './data';
-import { MyCustomTreeListTextEditor } from './MyCustomTreeListTextEditor';
-const subItemsField = 'employees';
-const expandField = 'expanded';
-const editField = 'inEdit';
-const App = () => {
- const [state, setState] = React.useState({
- data: employees.slice(),
- expanded: [1, 2, 32],
- inEdit: [],
- });
-
- const addChild = (dataItem) => {
- const newRecord = createNewItem();
- setState({
- ...state,
- inEdit: [...state.inEdit, newRecord],
- expanded: [...state.expanded, dataItem.id],
- data: modifySubItems(
- state.data,
- subItemsField,
- (item) => item.id === dataItem.id,
- (subItems) => [newRecord, ...subItems]
- ),
- });
- };
-
- const enterEdit = (dataItem) => {
- setState({
- ...state,
- inEdit: [...state.inEdit, extendDataItem(dataItem, subItemsField)],
- });
- };
-
- const save = (dataItem) => {
- const { isNew, inEdit, ...itemToSave } = dataItem;
- setState({
- ...state,
- data: mapTree(state.data, subItemsField, (item) =>
- item.id === itemToSave.id ? itemToSave : item
- ),
- inEdit: state.inEdit.filter((i) => i.id !== itemToSave.id),
- });
- };
-
- const cancel = (editedItem) => {
- const { inEdit, data } = state;
-
- if (editedItem.isNew) {
- return remove(editedItem);
- }
-
- setState({
- ...state,
- data: mapTree(data, subItemsField, (item) =>
- item.id === editedItem.id ? inEdit.find((i) => i.id === item.id) : item
- ),
- inEdit: inEdit.filter((i) => i.id !== editedItem.id),
- });
- };
-
- const remove = (dataItem) => {
- setState({
- ...state,
- data: removeItems(state.data, subItemsField, (i) => i.id === dataItem.id),
- inEdit: state.inEdit.filter((i) => i.id !== dataItem.id),
- });
- };
-
- const onExpandChange = (e) => {
- setState({
- ...state,
- expanded: e.value
- ? state.expanded.filter((id) => id !== e.dataItem.id)
- : [...state.expanded, e.dataItem.id],
- });
- };
-
- const onItemChange = (event) => {
- const field = event.field;
- setState({
- ...state,
- data: mapTree(state.data, subItemsField, (item) =>
- item.id === event.dataItem.id
- ? extendDataItem(item, subItemsField, {
- [field]: event.value,
- })
- : item
- ),
- });
- };
-
- const addRecord = () => {
- const newRecord = createNewItem();
- setState({
- ...state,
- data: [newRecord, ...state.data],
- inEdit: [...state.inEdit, { ...newRecord }],
- });
- };
-
- const createNewItem = () => {
- const timestamp = new Date().getTime();
- return {
- id: timestamp,
- isNew: true,
- };
- };
-
- const CommandCell = MyCommandCell(
- enterEdit,
- remove,
- save,
- cancel,
- addChild,
- editField
- );
-
- const columns = [
- {
- field: 'name',
- title: 'Name',
- width: '280px',
- editCell: React.useCallback(
- (props) =>
- extendDataItem(item, subItemsField, {
- [expandField]: expanded.includes(item.id),
- [editField]: Boolean(inEdit.find((i) => i.id === item.id)),
- })
- )}
- editField={editField}
- expandField={expandField}
- subItemsField={subItemsField}
- onItemChange={onItemChange}
- onExpandChange={onExpandChange}
- columns={columns}
- toolbar={
-
-
- Add new
-
-
- }
- />
- );
-};
-
-export default App;
diff --git a/docs/knowledge-base/examples/treelist/treelist-custom-editor/data.js b/docs/knowledge-base/examples/treelist/treelist-custom-editor/data.js
deleted file mode 100644
index ab659696..00000000
--- a/docs/knowledge-base/examples/treelist/treelist-custom-editor/data.js
+++ /dev/null
@@ -1,1020 +0,0 @@
-const employees = [{
- "id": 1,
- "name": "Daryl Sweeney",
- "reportsTo": null,
- "phone": "(555) 924-9726",
- "extension": 8253,
- "hireDate": new Date(2012, 2, 7),
- "fullTime": true,
- "position": "CEO",
- "timeInPosition": 2,
- "employees": [{
- "id": 2,
- "name": "Guy Wooten",
- "reportsTo": 1,
- "phone": "(438) 738-4935",
- "extension": 1155,
- "hireDate": new Date(2010, 3, 3),
- "fullTime": true,
- "position": "Chief Technical Officer",
- "timeInPosition": 1,
- "employees": [{
- "id": 32,
- "name": "Buffy Weber",
- "reportsTo": 2,
- "phone": "(699) 838-6121",
- "extension": 8933,
- "hireDate": new Date(2011, 7, 11),
- "fullTime": true,
- "position": "VP, Engineering",
- "timeInPosition": 2,
- "employees": [{
- "id": 11,
- "name": "Hyacinth Hood",
- "reportsTo": 32,
- "phone": "(889) 345-2438",
- "extension": 8564,
- "hireDate": new Date(2014, 2, 3),
- "fullTime": true,
- "position": "Team Lead",
- "timeInPosition": 1,
- "employees": [{
- "id": 60,
- "name": "Akeem Carr",
- "reportsTo": 11,
- "phone": "(738) 136-2814",
- "extension": 9353,
- "hireDate": new Date(2011, 4, 21),
- "fullTime": true,
- "position": "Junior Software Developer",
- "timeInPosition": 2
- }, {
- "id": 78,
- "name": "Rinah Simon",
- "reportsTo": 11,
- "phone": "(285) 912-5271",
- "extension": 7795,
- "hireDate": new Date(2012, 10, 11),
- "fullTime": true,
- "position": "Software Developer",
- "timeInPosition": 4
- }]
- }, {
- "id": 42,
- "name": "Gage Daniels",
- "reportsTo": 32,
- "phone": "(107) 290-6260",
- "extension": 896,
- "hireDate": new Date(2013, 5, 16),
- "fullTime": true,
- "position": "Software Architect",
- "timeInPosition": 5
- }, {
- "id": 43,
- "name": "Constance Vazquez",
- "reportsTo": 32,
- "phone": "(800) 301-1978",
- "extension": 5141,
- "hireDate": new Date(2011, 6, 7),
- "fullTime": true,
- "position": "Director, Engineering",
- "timeInPosition": 1,
- "employees": [{
- "id": 46,
- "name": "Darrel Solis",
- "reportsTo": 43,
- "phone": "(327) 977-0216",
- "extension": 7779,
- "hireDate": new Date(2015, 4, 25),
- "fullTime": true,
- "position": "Team Lead",
- "timeInPosition": 4,
- "employees": [{
- "id": 47,
- "name": "Brian Yang",
- "reportsTo": 46,
- "phone": "(565) 146-5435",
- "extension": 3885,
- "hireDate": new Date(2012, 9, 27),
- "fullTime": true,
- "position": "Senior Software Developer",
- "timeInPosition": 3
- }, {
- "id": 50,
- "name": "Lillian Bradshaw",
- "reportsTo": 46,
- "phone": "(323) 509-3479",
- "extension": 5426,
- "hireDate": new Date(2014, 5, 10),
- "fullTime": true,
- "position": "Software Developer",
- "timeInPosition": 2
- }, {
- "id": 51,
- "name": "Christian Palmer",
- "reportsTo": 46,
- "phone": "(490) 421-8718",
- "extension": 3706,
- "hireDate": new Date(2012, 12, 27),
- "fullTime": false,
- "position": "Technical Lead",
- "timeInPosition": 1
- }, {
- "id": 55,
- "name": "Summer Mosley",
- "reportsTo": 46,
- "phone": "(784) 962-2301",
- "extension": 5492,
- "hireDate": new Date(2010, 3, 2),
- "fullTime": true,
- "position": "QA Engineer",
- "timeInPosition": 5
- }, {
- "id": 56,
- "name": "Barry Ayers",
- "reportsTo": 46,
- "phone": "(452) 373-9227",
- "extension": 1308,
- "hireDate": new Date(2011, 10, 11),
- "fullTime": true,
- "position": "Software Developer",
- "timeInPosition": 4
- }, {
- "id": 59,
- "name": "Keiko Espinoza",
- "reportsTo": 46,
- "phone": "(226) 600-5305",
- "extension": 9363,
- "hireDate": new Date(2011, 9, 18),
- "fullTime": true,
- "position": "Junior QA Engineer",
- "timeInPosition": 4
- }, {
- "id": 61,
- "name": "Candace Pickett",
- "reportsTo": 46,
- "phone": "(120) 117-7475",
- "extension": 5178,
- "hireDate": new Date(2010, 5, 6),
- "fullTime": true,
- "position": "Support Officer",
- "timeInPosition": 0
- }]
- }, {
- "id": 63,
- "name": "Mia Caldwell",
- "reportsTo": 43,
- "phone": "(848) 636-6470",
- "extension": 6368,
- "hireDate": new Date(2012, 10, 7),
- "fullTime": true,
- "position": "Team Lead",
- "timeInPosition": 4,
- "employees": [{
- "id": 65,
- "name": "Thomas Terry",
- "reportsTo": 63,
- "phone": "(764) 831-4248",
- "extension": 3574,
- "hireDate": new Date(2015, 6, 15),
- "fullTime": false,
- "position": "Senior Enterprise Support Officer",
- "timeInPosition": 2
- }, {
- "id": 67,
- "name": "Ruth Downs",
- "reportsTo": 63,
- "phone": "(138) 991-1440",
- "extension": 8067,
- "hireDate": new Date(2013, 7, 13),
- "fullTime": true,
- "position": "Senior Software Developer",
- "timeInPosition": 5
- }, {
- "id": 70,
- "name": "Yasir Wilder",
- "reportsTo": 63,
- "phone": "(759) 701-8665",
- "extension": 8350,
- "hireDate": new Date(2010, 11, 8),
- "fullTime": true,
- "position": "Senior QA Enginner",
- "timeInPosition": 3
- }, {
- "id": 71,
- "name": "Flavia Short",
- "reportsTo": 63,
- "phone": "(370) 133-9238",
- "extension": 6390,
- "hireDate": new Date(2013, 2, 21),
- "fullTime": true,
- "position": "Support Officer",
- "timeInPosition": 0
- }, {
- "id": 74,
- "name": "Aaron Roach",
- "reportsTo": 63,
- "phone": "(958) 717-9230",
- "extension": 4899,
- "hireDate": new Date(2011, 7, 30),
- "fullTime": true,
- "position": "Junior Software Developer",
- "timeInPosition": 6
- }, {
- "id": 75,
- "name": "Eric Russell",
- "reportsTo": 63,
- "phone": "(516) 575-8505",
- "extension": 2224,
- "hireDate": new Date(2012, 10, 28),
- "fullTime": true,
- "position": "Software Developer",
- "timeInPosition": 3
- }, {
- "id": 76,
- "name": "Cheyenne Olson",
- "reportsTo": 63,
- "phone": "(241) 645-0257",
- "extension": 9181,
- "hireDate": new Date(2015, 5, 19),
- "fullTime": true,
- "position": "Software Developer",
- "timeInPosition": 5
- }, {
- "id": 77,
- "name": "Shaine Avila",
- "reportsTo": 63,
- "phone": "(844) 435-1360",
- "extension": 3374,
- "hireDate": new Date(2010, 1, 31),
- "fullTime": true,
- "position": "UI Designer",
- "timeInPosition": 5
- }, {
- "id": 81,
- "name": "Chantale Long",
- "reportsTo": 63,
- "phone": "(252) 419-6891",
- "extension": 7868,
- "hireDate": new Date(2010, 6, 17),
- "fullTime": true,
- "position": "Senior QA Enginner",
- "timeInPosition": 1
- }, {
- "id": 83,
- "name": "Dane Cruz",
- "reportsTo": 63,
- "phone": "(946) 701-6165",
- "extension": 3828,
- "hireDate": new Date(2014, 10, 8),
- "fullTime": true,
- "position": "Junior Software Developer",
- "timeInPosition": 2
- }, {
- "id": 84,
- "name": "Regan Patterson",
- "reportsTo": 63,
- "phone": "(265) 946-1765",
- "extension": 6955,
- "hireDate": new Date(2012, 3, 1),
- "fullTime": true,
- "position": "Technical Writer",
- "timeInPosition": 6
- }, {
- "id": 85,
- "name": "Drew Mckay",
- "reportsTo": 63,
- "phone": "(327) 293-0162",
- "extension": 6904,
- "hireDate": new Date(2011, 3, 25),
- "fullTime": true,
- "position": "Senior Software Developer",
- "timeInPosition": 3
- }, {
- "id": 88,
- "name": "Bevis Miller",
- "reportsTo": 63,
- "phone": "(525) 557-0169",
- "extension": 6978,
- "hireDate": new Date(2011, 4, 19),
- "fullTime": true,
- "position": "Senior Software Developer",
- "timeInPosition": 5
- }, {
- "id": 89,
- "name": "Bruce Mccarty",
- "reportsTo": 63,
- "phone": "(936) 777-8730",
- "extension": 6552,
- "hireDate": new Date(2014, 3, 28),
- "fullTime": true,
- "position": "Support Officer",
- "timeInPosition": 5
- }]
- }, {
- "id": 90,
- "name": "Ocean Blair",
- "reportsTo": 43,
- "phone": "(343) 586-6614",
- "extension": 1424,
- "hireDate": new Date(2011, 4, 27),
- "fullTime": true,
- "position": "Team Lead",
- "timeInPosition": 2,
- "employees": [{
- "id": 91,
- "name": "Guinevere Osborn",
- "reportsTo": 90,
- "phone": "(424) 741-0006",
- "extension": 3166,
- "hireDate": new Date(2014, 11, 19),
- "fullTime": true,
- "position": "Software Developer",
- "timeInPosition": 3
- }, {
- "id": 92,
- "name": "Olga Strong",
- "reportsTo": 90,
- "phone": "(949) 417-1168",
- "extension": 4568,
- "hireDate": new Date(2015, 5, 28),
- "fullTime": true,
- "position": "Graphic Designer",
- "timeInPosition": 4
- }, {
- "id": 93,
- "name": "Robert Orr",
- "reportsTo": 90,
- "phone": "(977) 341-3721",
- "extension": 9241,
- "hireDate": new Date(2012, 8, 20),
- "fullTime": false,
- "position": "Support Officer",
- "timeInPosition": 6
- }, {
- "id": 95,
- "name": "Odette Sears",
- "reportsTo": 90,
- "phone": "(264) 818-6576",
- "extension": 1914,
- "hireDate": new Date(2013, 7, 5),
- "fullTime": true,
- "position": "Senior Software Developer",
- "timeInPosition": 3
- }]
- }]
- }, {
- "id": 45,
- "name": "Zelda Medina",
- "reportsTo": 32,
- "phone": "(563) 359-6023",
- "extension": 2600,
- "hireDate": new Date(2012, 11, 6),
- "fullTime": true,
- "position": "QA Architect",
- "timeInPosition": 2
- }]
- }, {
- "id": 52,
- "name": "Skyler Cleveland",
- "reportsTo": 2,
- "phone": "(217) 280-5300",
- "extension": 9655,
- "hireDate": new Date(2014, 11, 10),
- "fullTime": true,
- "position": "VP, Engineering",
- "timeInPosition": 2,
- "employees": [{
- "id": 40,
- "name": "Karleigh Garza",
- "reportsTo": 52,
- "phone": "(370) 983-8796",
- "extension": 4044,
- "hireDate": new Date(2014, 3, 10),
- "fullTime": true,
- "position": "Team Lead",
- "timeInPosition": 1,
- "employees": [{
- "id": 49,
- "name": "Elmo Tyson",
- "reportsTo": 40,
- "phone": "(344) 496-9555",
- "extension": 6950,
- "hireDate": new Date(2014, 9, 18),
- "fullTime": true,
- "position": "Software Developer",
- "timeInPosition": 4
- }, {
- "id": 72,
- "name": "Stacey Lynn",
- "reportsTo": 40,
- "phone": "(140) 772-7509",
- "extension": 8396,
- "hireDate": new Date(2014, 7, 31),
- "fullTime": false,
- "position": "QA Engineer",
- "timeInPosition": 1,
- "employees": [{
- "id": 80,
- "name": "Meredith Parrish",
- "reportsTo": 72,
- "phone": "(714) 284-2408",
- "extension": 7675,
- "hireDate": new Date(2012, 11, 13),
- "fullTime": true,
- "position": "Junior QA Engineer",
- "timeInPosition": 6
- }]
- }, {
- "id": 96,
- "name": "Cassady Whitley",
- "reportsTo": 40,
- "phone": "(996) 587-8405",
- "extension": 780,
- "hireDate": new Date(2013, 5, 7),
- "fullTime": true,
- "position": "Software Developer",
- "timeInPosition": 5
- }, {
- "id": 97,
- "name": "Haviva Campbell",
- "reportsTo": 40,
- "phone": "(263) 887-4689",
- "extension": 2808,
- "hireDate": new Date(2013, 3, 5),
- "fullTime": true,
- "position": "Support Officer",
- "timeInPosition": 2
- }, {
- "id": 98,
- "name": "Cameron Ayers",
- "reportsTo": 40,
- "phone": "(470) 709-8030",
- "extension": 2893,
- "hireDate": new Date(2013, 8, 28),
- "fullTime": true,
- "position": "Support Officer",
- "timeInPosition": 3
- }, {
- "id": 99,
- "name": "Martha Sargent",
- "reportsTo": 40,
- "phone": "(587) 812-4418",
- "extension": 5099,
- "hireDate": new Date(2014, 2, 27),
- "fullTime": true,
- "position": "Senior Software Developer",
- "timeInPosition": 3
- }, {
- "id": 100,
- "name": "Darrel Kinney",
- "reportsTo": 40,
- "phone": "(888) 483-9606",
- "extension": 4779,
- "hireDate": new Date(2014, 3, 24),
- "fullTime": false,
- "position": "Graphic Designer",
- "timeInPosition": 1
- }]
- }, {
- "id": 54,
- "name": "Kuame Frye",
- "reportsTo": 52,
- "phone": "(360) 721-5886",
- "extension": 2730,
- "hireDate": new Date(2010, 11, 17),
- "fullTime": true,
- "position": "Software Architect",
- "timeInPosition": 1,
- "employees": [{
- "id": 64,
- "name": "Ori Wynn",
- "reportsTo": 54,
- "phone": "(366) 342-0166",
- "extension": 7252,
- "hireDate": new Date(2015, 6, 21),
- "fullTime": true,
- "position": "Team Lead",
- "timeInPosition": 0,
- "employees": [{
- "id": 6,
- "name": "Moses Duncan",
- "reportsTo": 64,
- "phone": "(421) 611-4814",
- "extension": 669,
- "hireDate": new Date(2010, 5, 24),
- "fullTime": true,
- "position": "Software Developer",
- "timeInPosition": 6
- }, {
- "id": 12,
- "name": "Jamalia Wallace",
- "reportsTo": 64,
- "phone": "(611) 391-8016",
- "extension": 1952,
- "hireDate": new Date(2011, 9, 8),
- "fullTime": true,
- "position": "Junior Designer",
- "timeInPosition": 3
- }, {
- "id": 62,
- "name": "Palmer Gregory",
- "reportsTo": 64,
- "phone": "(360) 430-2505",
- "extension": 4337,
- "hireDate": new Date(2014, 8, 30),
- "fullTime": true,
- "position": "Designer",
- "timeInPosition": 4
- }, {
- "id": 68,
- "name": "Mallory Gilliam",
- "reportsTo": 64,
- "phone": "(878) 423-2971",
- "extension": 1341,
- "hireDate": new Date(2014, 7, 24),
- "fullTime": true,
- "position": "Senior Software Developer",
- "timeInPosition": 1
- }, {
- "id": 73,
- "name": "Ima Hughes",
- "reportsTo": 64,
- "phone": "(905) 485-8001",
- "extension": 1273,
- "hireDate": new Date(2013, 6, 3),
- "fullTime": true,
- "position": "Software Developer",
- "timeInPosition": 0
- }, {
- "id": 79,
- "name": "Duncan Mathews",
- "reportsTo": 64,
- "phone": "(790) 971-9709",
- "extension": 4573,
- "hireDate": new Date(2011, 8, 21),
- "fullTime": false,
- "position": "Software Developer",
- "timeInPosition": 3
- }]
- }]
- }, {
- "id": 69,
- "name": "Sierra Beasley",
- "reportsTo": 52,
- "phone": "(271) 953-1968",
- "extension": 3324,
- "hireDate": new Date(2011, 4, 2),
- "fullTime": true,
- "position": "Team Lead",
- "timeInPosition": 3,
- "employees": [{
- "id": 38,
- "name": "Elton Tucker",
- "reportsTo": 69,
- "phone": "(988) 930-9331",
- "extension": 9216,
- "hireDate": new Date(2015, 6, 4),
- "fullTime": true,
- "position": "Support Officer",
- "timeInPosition": 1
- }, {
- "id": 39,
- "name": "Iona Brennan",
- "reportsTo": 69,
- "phone": "(356) 563-0600",
- "extension": 5634,
- "hireDate": new Date(2010, 9, 23),
- "fullTime": true,
- "position": "Junior Support Officer",
- "timeInPosition": 4
- }, {
- "id": 53,
- "name": "Paul Campos",
- "reportsTo": 69,
- "phone": "(899) 205-1689",
- "extension": 8586,
- "hireDate": new Date(2011, 3, 17),
- "fullTime": true,
- "position": "Interaction Designer",
- "timeInPosition": 4,
- "employees": [{
- "id": 66,
- "name": "Gloria Freeman",
- "reportsTo": 53,
- "phone": "(344) 950-9168",
- "extension": 4738,
- "hireDate": new Date(2013, 5, 6),
- "fullTime": true,
- "position": "Junior Interaction Designer",
- "timeInPosition": 0
- }]
- }, {
- "id": 57,
- "name": "Alyssa Hansen",
- "reportsTo": 69,
- "phone": "(548) 925-4799",
- "extension": 4716,
- "hireDate": new Date(2011, 1, 19),
- "fullTime": true,
- "position": "Junior Software Developer",
- "timeInPosition": 6
- }, {
- "id": 82,
- "name": "Yael Walters",
- "reportsTo": 69,
- "phone": "(311) 489-8191",
- "extension": 6520,
- "hireDate": new Date(2013, 7, 4),
- "fullTime": true,
- "position": "Software Developer",
- "timeInPosition": 6
- }, {
- "id": 87,
- "name": "Dahlia Hunt",
- "reportsTo": 69,
- "phone": "(720) 339-5202",
- "extension": 3690,
- "hireDate": new Date(2011, 3, 26),
- "fullTime": true,
- "position": "Senior Software Developer",
- "timeInPosition": 4
- }, {
- "id": 94,
- "name": "Adria Stanley",
- "reportsTo": 69,
- "phone": "(536) 357-6391",
- "extension": 3374,
- "hireDate": new Date(2014, 7, 26),
- "fullTime": true,
- "position": "Software Developer",
- "timeInPosition": 0
- }]
- }]
- }]
- }, {
- "id": 3,
- "name": "Priscilla Frank",
- "reportsTo": 1,
- "phone": "(278) 927-2684",
- "extension": 4183,
- "hireDate": new Date(2014, 11, 30),
- "fullTime": true,
- "position": "Chief Product Officer",
- "timeInPosition": 2,
- "employees": [{
- "id": 4,
- "name": "Ursula Holmes",
- "reportsTo": 3,
- "phone": "(302) 760-2034",
- "extension": 2226,
- "hireDate": new Date(2011, 6, 6),
- "fullTime": true,
- "position": "EVP, Product Strategy",
- "timeInPosition": 4
- }, {
- "id": 24,
- "name": "Melvin Carrillo",
- "reportsTo": 3,
- "phone": "(348) 933-5167",
- "extension": 2482,
- "hireDate": new Date(2014, 7, 21),
- "fullTime": true,
- "position": "Director, Developer Relations",
- "timeInPosition": 6,
- "employees": [{
- "id": 29,
- "name": "Martha Chavez",
- "reportsTo": 24,
- "phone": "(860) 754-3464",
- "extension": 4531,
- "hireDate": new Date(2013, 3, 12),
- "fullTime": true,
- "position": "Developer Advocate",
- "timeInPosition": 0
- }, {
- "id": 30,
- "name": "Oren Fox",
- "reportsTo": 24,
- "phone": "(572) 414-3299",
- "extension": 4849,
- "hireDate": new Date(2013, 5, 14),
- "fullTime": false,
- "position": "Developer Advocate",
- "timeInPosition": 0
- }, {
- "id": 41,
- "name": "Amos Barr",
- "reportsTo": 24,
- "phone": "(470) 381-3718",
- "extension": 7643,
- "hireDate": new Date(2010, 3, 9),
- "fullTime": true,
- "position": "Developer Advocate",
- "timeInPosition": 2
- }]
- }]
- }, {
- "id": 5,
- "name": "Anika Vega",
- "reportsTo": 1,
- "phone": "(910) 714-1802",
- "extension": 6353,
- "hireDate": new Date(2010, 2, 25),
- "fullTime": true,
- "position": "Chief Process Officer",
- "timeInPosition": 5,
- "employees": [{
- "id": 10,
- "name": "Vernon Ballard",
- "reportsTo": 5,
- "phone": "(702) 185-8890",
- "extension": 9242,
- "hireDate": new Date(2015, 6, 26),
- "fullTime": true,
- "position": "Director Facilities",
- "timeInPosition": 2,
- "employees": [{
- "id": 16,
- "name": "Ali Guy",
- "reportsTo": 10,
- "phone": "(429) 912-6578",
- "extension": 2225,
- "hireDate": new Date(2014, 6, 29),
- "fullTime": true,
- "position": "Operations Manager",
- "timeInPosition": 4,
- "employees": [{
- "id": 23,
- "name": "Bruce Reilly",
- "reportsTo": 16,
- "phone": "(995) 243-7302",
- "extension": 4815,
- "hireDate": new Date(2015, 4, 1),
- "fullTime": true,
- "position": "Head of Security",
- "timeInPosition": 1,
- "employees": [{
- "id": 26,
- "name": "Rowan Morin",
- "reportsTo": 23,
- "phone": "(792) 141-4374",
- "extension": 1844,
- "hireDate": new Date(2015, 7, 30),
- "fullTime": true,
- "position": "Building Security",
- "timeInPosition": 5
- }, {
- "id": 44,
- "name": "Benedict Soto",
- "reportsTo": 23,
- "phone": "(822) 282-5991",
- "extension": 6422,
- "hireDate": new Date(2012, 6, 1),
- "fullTime": false,
- "position": "Building Security",
- "timeInPosition": 4
- }]
- }, {
- "id": 48,
- "name": "Maryam Rios",
- "reportsTo": 16,
- "phone": "(673) 764-6720",
- "extension": 531,
- "hireDate": new Date(2014, 3, 3),
- "fullTime": true,
- "position": "Team Lead, Personal Assistants",
- "timeInPosition": 1,
- "employees": [{
- "id": 58,
- "name": "Rose Mcintyre",
- "reportsTo": 48,
- "phone": "(771) 615-4590",
- "extension": 7094,
- "hireDate": new Date(2015, 6, 30),
- "fullTime": false,
- "position": "Personal Assistant",
- "timeInPosition": 6
- }]
- }]
- }]
- }]
- }, {
- "id": 7,
- "name": "Nevada Hart",
- "reportsTo": 1,
- "phone": "(254) 220-1576",
- "extension": 6649,
- "hireDate": new Date(2015, 8, 17),
- "fullTime": true,
- "position": "Chief Financial Officer",
- "timeInPosition": 6,
- "employees": [{
- "id": 14,
- "name": "Zena Sanford",
- "reportsTo": 7,
- "phone": "(437) 568-8160",
- "extension": 4452,
- "hireDate": new Date(2010, 11, 30),
- "fullTime": true,
- "position": "VP, Finance",
- "timeInPosition": 4
- }, {
- "id": 15,
- "name": "Quinlan Howe",
- "reportsTo": 7,
- "phone": "(464) 334-9748",
- "extension": 8722,
- "hireDate": new Date(2011, 6, 9),
- "fullTime": false,
- "position": "Senior Director, Finance",
- "timeInPosition": 0,
- "employees": [{
- "id": 17,
- "name": "Indira Lopez",
- "reportsTo": 15,
- "phone": "(301) 368-0938",
- "extension": 8027,
- "hireDate": new Date(2013, 8, 18),
- "fullTime": true,
- "position": "ERP Team Lead",
- "timeInPosition": 4,
- "employees": [{
- "id": 18,
- "name": "Lareina Lara",
- "reportsTo": 17,
- "phone": "(233) 457-7482",
- "extension": 1996,
- "hireDate": new Date(2010, 4, 30),
- "fullTime": true,
- "position": "ERP Solutions Consultant",
- "timeInPosition": 6
- }, {
- "id": 19,
- "name": "Maxwell Wise",
- "reportsTo": 17,
- "phone": "(570) 494-2531",
- "extension": 9865,
- "hireDate": new Date(2012, 5, 19),
- "fullTime": true,
- "position": "Systems Engineer",
- "timeInPosition": 0
- }]
- }, {
- "id": 20,
- "name": "Hunter Mcbride",
- "reportsTo": 15,
- "phone": "(409) 442-7016",
- "extension": 4284,
- "hireDate": new Date(2012, 10, 20),
- "fullTime": true,
- "position": "Senior Director, Tax",
- "timeInPosition": 3
- }, {
- "id": 21,
- "name": "Jana Serrano",
- "reportsTo": 15,
- "phone": "(910) 718-4620",
- "extension": 6970,
- "hireDate": new Date(2010, 4, 2),
- "fullTime": true,
- "position": "Financial Planning & Analysis Manager",
- "timeInPosition": 2
- }, {
- "id": 22,
- "name": "Zachery Shelton",
- "reportsTo": 15,
- "phone": "(310) 240-8675",
- "extension": 4527,
- "hireDate": new Date(2011, 11, 23),
- "fullTime": false,
- "position": "Corporate Finance Controller",
- "timeInPosition": 6,
- "employees": [{
- "id": 28,
- "name": "Cullen Freeman",
- "reportsTo": 22,
- "phone": "(136) 554-8814",
- "extension": 9861,
- "hireDate": new Date(2014, 3, 15),
- "fullTime": true,
- "position": "Treasurer Accountant",
- "timeInPosition": 2
- }, {
- "id": 31,
- "name": "Quinn Dean",
- "reportsTo": 22,
- "phone": "(152) 613-3507",
- "extension": 6621,
- "hireDate": new Date(2015, 1, 29),
- "fullTime": true,
- "position": "Accountant",
- "timeInPosition": 6
- }, {
- "id": 34,
- "name": "Samantha Brady",
- "reportsTo": 22,
- "phone": "(206) 398-4328",
- "extension": 1157,
- "hireDate": new Date(2011, 2, 13),
- "fullTime": true,
- "position": "Accountant",
- "timeInPosition": 2,
- "employees": [{
- "id": 35,
- "name": "Tamara Green",
- "reportsTo": 34,
- "phone": "(219) 248-2789",
- "extension": 4880,
- "hireDate": new Date(2014, 2, 4),
- "fullTime": true,
- "position": "Junior Accountant",
- "timeInPosition": 6
- }]
- }, {
- "id": 36,
- "name": "Olympia Coleman",
- "reportsTo": 22,
- "phone": "(944) 853-6383",
- "extension": 2136,
- "hireDate": new Date(2013, 7, 31),
- "fullTime": true,
- "position": "Collections Manager",
- "timeInPosition": 3
- }, {
- "id": 37,
- "name": "Breanna Goodwin",
- "reportsTo": 22,
- "phone": "(379) 988-9630",
- "extension": 5898,
- "hireDate": new Date(2010, 5, 23),
- "fullTime": false,
- "position": "Payroll Specialist",
- "timeInPosition": 4
- }]
- }, {
- "id": 27,
- "name": "Curran Travis",
- "reportsTo": 15,
- "phone": "(438) 135-8033",
- "extension": 3841,
- "hireDate": new Date(2011, 6, 13),
- "fullTime": true,
- "position": "Finance Controller",
- "timeInPosition": 5
- }]
- }]
- }, {
- "id": 8,
- "name": "Hunter Fry",
- "reportsTo": 1,
- "phone": "(766) 358-9858",
- "extension": 3741,
- "hireDate": new Date(2011, 2, 12),
- "fullTime": false,
- "position": "General Counsel",
- "timeInPosition": 3,
- "employees": [{
- "id": 9,
- "name": "Kuame Carrillo",
- "reportsTo": 8,
- "phone": "(192) 383-1305",
- "extension": 9228,
- "hireDate": new Date(2011, 2, 22),
- "fullTime": true,
- "position": "Associate General Councel",
- "timeInPosition": 0
- }, {
- "id": 13,
- "name": "Stacy Todd",
- "reportsTo": 8,
- "phone": "(925) 286-3327",
- "extension": 8565,
- "hireDate": new Date(2014, 7, 5),
- "fullTime": true,
- "position": "Councel",
- "timeInPosition": 0
- }, {
- "id": 33,
- "name": "Valentine Wyatt",
- "reportsTo": 8,
- "phone": "(165) 166-6205",
- "extension": 3588,
- "hireDate": new Date(2015, 5, 21),
- "fullTime": true,
- "position": "Councel",
- "timeInPosition": 5
- }, {
- "id": 86,
- "name": "Daniel Mccarthy",
- "reportsTo": 8,
- "phone": "(624) 483-6206",
- "extension": 9112,
- "hireDate": new Date(2013, 12, 3),
- "fullTime": false,
- "position": "Staff Attorney",
- "timeInPosition": 0
- }]
- }]
- }];
- export default employees;
\ No newline at end of file
diff --git a/docs/knowledge-base/examples/treelist/treelist-custom-editor/main.jsx b/docs/knowledge-base/examples/treelist/treelist-custom-editor/main.jsx
deleted file mode 100644
index 36d8526e..00000000
--- a/docs/knowledge-base/examples/treelist/treelist-custom-editor/main.jsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import * as React from 'react';
-import { createRoot } from 'react-dom/client';
-import App from './app'
-
-const root = createRoot(document.querySelector('my-app'));
-root.render(
- save(dataItem)}>
- {dataItem.isNew ? 'Add' : 'Update'}
-
- cancel(dataItem)}>{dataItem.isNew ? 'Discard' : 'Cancel'}
-
- :
- addChild(dataItem)}>
- Add Employee
-
- enterEdit(dataItem)}>
- Edit
-
- remove(dataItem)}>
- Remove
-
- ;
- }
-
- };
-}
\ No newline at end of file
diff --git a/docs/knowledge-base/examples/treelist/treelist-custom-expand-cell/app.jsx b/docs/knowledge-base/examples/treelist/treelist-custom-expand-cell/app.jsx
deleted file mode 100644
index bfb07625..00000000
--- a/docs/knowledge-base/examples/treelist/treelist-custom-expand-cell/app.jsx
+++ /dev/null
@@ -1,111 +0,0 @@
-import * as React from 'react';
-import {
- TreeList,
- mapTree,
- extendDataItem,
-} from '@progress/kendo-react-treelist';
-import { getter } from '@progress/kendo-react-common';
-import { useTableKeyboardNavigation } from '@progress/kendo-react-data-tools';
-import employees from './data';
-const DATA_ITEM_KEY = 'id';
-const SUB_ITEMS_FIELD = 'employees';
-const EXPAND_FIELD = 'expanded';
-const idGetter = getter(DATA_ITEM_KEY);
-const extendData = (dataState, selectedState, expandedState) => {
- return mapTree(dataState, SUB_ITEMS_FIELD, (item) =>
- extendDataItem(item, SUB_ITEMS_FIELD, {
- selected: selectedState[idGetter(item)],
- expanded: expandedState[idGetter(item)],
- })
- );
-};
-
-const nameCell = (props) => {
- const navigationAttributes = useTableKeyboardNavigation(props.id);
- const onClick = (ev) => {
- props.onExpandChange(ev, props.dataItem, props.level);
- };
- let className =
- props.dataItem[SUB_ITEMS_FIELD] &&
- props.dataItem[SUB_ITEMS_FIELD].length > 0
- ? props.expanded
- ? 'k-icon k-i-caret-alt-down'
- : 'k-icon k-i-caret-alt-right'
- : 'k-icon';
-
- return (
-
- {[...Array(props.level.length - 1)].map((e, i) => (
-
- );
-};
-const App = () => {
- const [dataState, setDataState] = React.useState(employees.slice());
- const [expandedState, setExpandedState] = React.useState({
- 1: true,
- 2: true,
- 32: true,
- });
- const onExpandChange = React.useCallback(
- (e) => {
- setExpandedState({
- ...expandedState,
- [idGetter(e.dataItem)]: !e.value,
- });
- },
- [expandedState]
- );
- return (
-
-
- );
-};
-
-export default App;
diff --git a/docs/knowledge-base/examples/treelist/treelist-custom-expand-cell/data.js b/docs/knowledge-base/examples/treelist/treelist-custom-expand-cell/data.js
deleted file mode 100644
index ab659696..00000000
--- a/docs/knowledge-base/examples/treelist/treelist-custom-expand-cell/data.js
+++ /dev/null
@@ -1,1020 +0,0 @@
-const employees = [{
- "id": 1,
- "name": "Daryl Sweeney",
- "reportsTo": null,
- "phone": "(555) 924-9726",
- "extension": 8253,
- "hireDate": new Date(2012, 2, 7),
- "fullTime": true,
- "position": "CEO",
- "timeInPosition": 2,
- "employees": [{
- "id": 2,
- "name": "Guy Wooten",
- "reportsTo": 1,
- "phone": "(438) 738-4935",
- "extension": 1155,
- "hireDate": new Date(2010, 3, 3),
- "fullTime": true,
- "position": "Chief Technical Officer",
- "timeInPosition": 1,
- "employees": [{
- "id": 32,
- "name": "Buffy Weber",
- "reportsTo": 2,
- "phone": "(699) 838-6121",
- "extension": 8933,
- "hireDate": new Date(2011, 7, 11),
- "fullTime": true,
- "position": "VP, Engineering",
- "timeInPosition": 2,
- "employees": [{
- "id": 11,
- "name": "Hyacinth Hood",
- "reportsTo": 32,
- "phone": "(889) 345-2438",
- "extension": 8564,
- "hireDate": new Date(2014, 2, 3),
- "fullTime": true,
- "position": "Team Lead",
- "timeInPosition": 1,
- "employees": [{
- "id": 60,
- "name": "Akeem Carr",
- "reportsTo": 11,
- "phone": "(738) 136-2814",
- "extension": 9353,
- "hireDate": new Date(2011, 4, 21),
- "fullTime": true,
- "position": "Junior Software Developer",
- "timeInPosition": 2
- }, {
- "id": 78,
- "name": "Rinah Simon",
- "reportsTo": 11,
- "phone": "(285) 912-5271",
- "extension": 7795,
- "hireDate": new Date(2012, 10, 11),
- "fullTime": true,
- "position": "Software Developer",
- "timeInPosition": 4
- }]
- }, {
- "id": 42,
- "name": "Gage Daniels",
- "reportsTo": 32,
- "phone": "(107) 290-6260",
- "extension": 896,
- "hireDate": new Date(2013, 5, 16),
- "fullTime": true,
- "position": "Software Architect",
- "timeInPosition": 5
- }, {
- "id": 43,
- "name": "Constance Vazquez",
- "reportsTo": 32,
- "phone": "(800) 301-1978",
- "extension": 5141,
- "hireDate": new Date(2011, 6, 7),
- "fullTime": true,
- "position": "Director, Engineering",
- "timeInPosition": 1,
- "employees": [{
- "id": 46,
- "name": "Darrel Solis",
- "reportsTo": 43,
- "phone": "(327) 977-0216",
- "extension": 7779,
- "hireDate": new Date(2015, 4, 25),
- "fullTime": true,
- "position": "Team Lead",
- "timeInPosition": 4,
- "employees": [{
- "id": 47,
- "name": "Brian Yang",
- "reportsTo": 46,
- "phone": "(565) 146-5435",
- "extension": 3885,
- "hireDate": new Date(2012, 9, 27),
- "fullTime": true,
- "position": "Senior Software Developer",
- "timeInPosition": 3
- }, {
- "id": 50,
- "name": "Lillian Bradshaw",
- "reportsTo": 46,
- "phone": "(323) 509-3479",
- "extension": 5426,
- "hireDate": new Date(2014, 5, 10),
- "fullTime": true,
- "position": "Software Developer",
- "timeInPosition": 2
- }, {
- "id": 51,
- "name": "Christian Palmer",
- "reportsTo": 46,
- "phone": "(490) 421-8718",
- "extension": 3706,
- "hireDate": new Date(2012, 12, 27),
- "fullTime": false,
- "position": "Technical Lead",
- "timeInPosition": 1
- }, {
- "id": 55,
- "name": "Summer Mosley",
- "reportsTo": 46,
- "phone": "(784) 962-2301",
- "extension": 5492,
- "hireDate": new Date(2010, 3, 2),
- "fullTime": true,
- "position": "QA Engineer",
- "timeInPosition": 5
- }, {
- "id": 56,
- "name": "Barry Ayers",
- "reportsTo": 46,
- "phone": "(452) 373-9227",
- "extension": 1308,
- "hireDate": new Date(2011, 10, 11),
- "fullTime": true,
- "position": "Software Developer",
- "timeInPosition": 4
- }, {
- "id": 59,
- "name": "Keiko Espinoza",
- "reportsTo": 46,
- "phone": "(226) 600-5305",
- "extension": 9363,
- "hireDate": new Date(2011, 9, 18),
- "fullTime": true,
- "position": "Junior QA Engineer",
- "timeInPosition": 4
- }, {
- "id": 61,
- "name": "Candace Pickett",
- "reportsTo": 46,
- "phone": "(120) 117-7475",
- "extension": 5178,
- "hireDate": new Date(2010, 5, 6),
- "fullTime": true,
- "position": "Support Officer",
- "timeInPosition": 0
- }]
- }, {
- "id": 63,
- "name": "Mia Caldwell",
- "reportsTo": 43,
- "phone": "(848) 636-6470",
- "extension": 6368,
- "hireDate": new Date(2012, 10, 7),
- "fullTime": true,
- "position": "Team Lead",
- "timeInPosition": 4,
- "employees": [{
- "id": 65,
- "name": "Thomas Terry",
- "reportsTo": 63,
- "phone": "(764) 831-4248",
- "extension": 3574,
- "hireDate": new Date(2015, 6, 15),
- "fullTime": false,
- "position": "Senior Enterprise Support Officer",
- "timeInPosition": 2
- }, {
- "id": 67,
- "name": "Ruth Downs",
- "reportsTo": 63,
- "phone": "(138) 991-1440",
- "extension": 8067,
- "hireDate": new Date(2013, 7, 13),
- "fullTime": true,
- "position": "Senior Software Developer",
- "timeInPosition": 5
- }, {
- "id": 70,
- "name": "Yasir Wilder",
- "reportsTo": 63,
- "phone": "(759) 701-8665",
- "extension": 8350,
- "hireDate": new Date(2010, 11, 8),
- "fullTime": true,
- "position": "Senior QA Enginner",
- "timeInPosition": 3
- }, {
- "id": 71,
- "name": "Flavia Short",
- "reportsTo": 63,
- "phone": "(370) 133-9238",
- "extension": 6390,
- "hireDate": new Date(2013, 2, 21),
- "fullTime": true,
- "position": "Support Officer",
- "timeInPosition": 0
- }, {
- "id": 74,
- "name": "Aaron Roach",
- "reportsTo": 63,
- "phone": "(958) 717-9230",
- "extension": 4899,
- "hireDate": new Date(2011, 7, 30),
- "fullTime": true,
- "position": "Junior Software Developer",
- "timeInPosition": 6
- }, {
- "id": 75,
- "name": "Eric Russell",
- "reportsTo": 63,
- "phone": "(516) 575-8505",
- "extension": 2224,
- "hireDate": new Date(2012, 10, 28),
- "fullTime": true,
- "position": "Software Developer",
- "timeInPosition": 3
- }, {
- "id": 76,
- "name": "Cheyenne Olson",
- "reportsTo": 63,
- "phone": "(241) 645-0257",
- "extension": 9181,
- "hireDate": new Date(2015, 5, 19),
- "fullTime": true,
- "position": "Software Developer",
- "timeInPosition": 5
- }, {
- "id": 77,
- "name": "Shaine Avila",
- "reportsTo": 63,
- "phone": "(844) 435-1360",
- "extension": 3374,
- "hireDate": new Date(2010, 1, 31),
- "fullTime": true,
- "position": "UI Designer",
- "timeInPosition": 5
- }, {
- "id": 81,
- "name": "Chantale Long",
- "reportsTo": 63,
- "phone": "(252) 419-6891",
- "extension": 7868,
- "hireDate": new Date(2010, 6, 17),
- "fullTime": true,
- "position": "Senior QA Enginner",
- "timeInPosition": 1
- }, {
- "id": 83,
- "name": "Dane Cruz",
- "reportsTo": 63,
- "phone": "(946) 701-6165",
- "extension": 3828,
- "hireDate": new Date(2014, 10, 8),
- "fullTime": true,
- "position": "Junior Software Developer",
- "timeInPosition": 2
- }, {
- "id": 84,
- "name": "Regan Patterson",
- "reportsTo": 63,
- "phone": "(265) 946-1765",
- "extension": 6955,
- "hireDate": new Date(2012, 3, 1),
- "fullTime": true,
- "position": "Technical Writer",
- "timeInPosition": 6
- }, {
- "id": 85,
- "name": "Drew Mckay",
- "reportsTo": 63,
- "phone": "(327) 293-0162",
- "extension": 6904,
- "hireDate": new Date(2011, 3, 25),
- "fullTime": true,
- "position": "Senior Software Developer",
- "timeInPosition": 3
- }, {
- "id": 88,
- "name": "Bevis Miller",
- "reportsTo": 63,
- "phone": "(525) 557-0169",
- "extension": 6978,
- "hireDate": new Date(2011, 4, 19),
- "fullTime": true,
- "position": "Senior Software Developer",
- "timeInPosition": 5
- }, {
- "id": 89,
- "name": "Bruce Mccarty",
- "reportsTo": 63,
- "phone": "(936) 777-8730",
- "extension": 6552,
- "hireDate": new Date(2014, 3, 28),
- "fullTime": true,
- "position": "Support Officer",
- "timeInPosition": 5
- }]
- }, {
- "id": 90,
- "name": "Ocean Blair",
- "reportsTo": 43,
- "phone": "(343) 586-6614",
- "extension": 1424,
- "hireDate": new Date(2011, 4, 27),
- "fullTime": true,
- "position": "Team Lead",
- "timeInPosition": 2,
- "employees": [{
- "id": 91,
- "name": "Guinevere Osborn",
- "reportsTo": 90,
- "phone": "(424) 741-0006",
- "extension": 3166,
- "hireDate": new Date(2014, 11, 19),
- "fullTime": true,
- "position": "Software Developer",
- "timeInPosition": 3
- }, {
- "id": 92,
- "name": "Olga Strong",
- "reportsTo": 90,
- "phone": "(949) 417-1168",
- "extension": 4568,
- "hireDate": new Date(2015, 5, 28),
- "fullTime": true,
- "position": "Graphic Designer",
- "timeInPosition": 4
- }, {
- "id": 93,
- "name": "Robert Orr",
- "reportsTo": 90,
- "phone": "(977) 341-3721",
- "extension": 9241,
- "hireDate": new Date(2012, 8, 20),
- "fullTime": false,
- "position": "Support Officer",
- "timeInPosition": 6
- }, {
- "id": 95,
- "name": "Odette Sears",
- "reportsTo": 90,
- "phone": "(264) 818-6576",
- "extension": 1914,
- "hireDate": new Date(2013, 7, 5),
- "fullTime": true,
- "position": "Senior Software Developer",
- "timeInPosition": 3
- }]
- }]
- }, {
- "id": 45,
- "name": "Zelda Medina",
- "reportsTo": 32,
- "phone": "(563) 359-6023",
- "extension": 2600,
- "hireDate": new Date(2012, 11, 6),
- "fullTime": true,
- "position": "QA Architect",
- "timeInPosition": 2
- }]
- }, {
- "id": 52,
- "name": "Skyler Cleveland",
- "reportsTo": 2,
- "phone": "(217) 280-5300",
- "extension": 9655,
- "hireDate": new Date(2014, 11, 10),
- "fullTime": true,
- "position": "VP, Engineering",
- "timeInPosition": 2,
- "employees": [{
- "id": 40,
- "name": "Karleigh Garza",
- "reportsTo": 52,
- "phone": "(370) 983-8796",
- "extension": 4044,
- "hireDate": new Date(2014, 3, 10),
- "fullTime": true,
- "position": "Team Lead",
- "timeInPosition": 1,
- "employees": [{
- "id": 49,
- "name": "Elmo Tyson",
- "reportsTo": 40,
- "phone": "(344) 496-9555",
- "extension": 6950,
- "hireDate": new Date(2014, 9, 18),
- "fullTime": true,
- "position": "Software Developer",
- "timeInPosition": 4
- }, {
- "id": 72,
- "name": "Stacey Lynn",
- "reportsTo": 40,
- "phone": "(140) 772-7509",
- "extension": 8396,
- "hireDate": new Date(2014, 7, 31),
- "fullTime": false,
- "position": "QA Engineer",
- "timeInPosition": 1,
- "employees": [{
- "id": 80,
- "name": "Meredith Parrish",
- "reportsTo": 72,
- "phone": "(714) 284-2408",
- "extension": 7675,
- "hireDate": new Date(2012, 11, 13),
- "fullTime": true,
- "position": "Junior QA Engineer",
- "timeInPosition": 6
- }]
- }, {
- "id": 96,
- "name": "Cassady Whitley",
- "reportsTo": 40,
- "phone": "(996) 587-8405",
- "extension": 780,
- "hireDate": new Date(2013, 5, 7),
- "fullTime": true,
- "position": "Software Developer",
- "timeInPosition": 5
- }, {
- "id": 97,
- "name": "Haviva Campbell",
- "reportsTo": 40,
- "phone": "(263) 887-4689",
- "extension": 2808,
- "hireDate": new Date(2013, 3, 5),
- "fullTime": true,
- "position": "Support Officer",
- "timeInPosition": 2
- }, {
- "id": 98,
- "name": "Cameron Ayers",
- "reportsTo": 40,
- "phone": "(470) 709-8030",
- "extension": 2893,
- "hireDate": new Date(2013, 8, 28),
- "fullTime": true,
- "position": "Support Officer",
- "timeInPosition": 3
- }, {
- "id": 99,
- "name": "Martha Sargent",
- "reportsTo": 40,
- "phone": "(587) 812-4418",
- "extension": 5099,
- "hireDate": new Date(2014, 2, 27),
- "fullTime": true,
- "position": "Senior Software Developer",
- "timeInPosition": 3
- }, {
- "id": 100,
- "name": "Darrel Kinney",
- "reportsTo": 40,
- "phone": "(888) 483-9606",
- "extension": 4779,
- "hireDate": new Date(2014, 3, 24),
- "fullTime": false,
- "position": "Graphic Designer",
- "timeInPosition": 1
- }]
- }, {
- "id": 54,
- "name": "Kuame Frye",
- "reportsTo": 52,
- "phone": "(360) 721-5886",
- "extension": 2730,
- "hireDate": new Date(2010, 11, 17),
- "fullTime": true,
- "position": "Software Architect",
- "timeInPosition": 1,
- "employees": [{
- "id": 64,
- "name": "Ori Wynn",
- "reportsTo": 54,
- "phone": "(366) 342-0166",
- "extension": 7252,
- "hireDate": new Date(2015, 6, 21),
- "fullTime": true,
- "position": "Team Lead",
- "timeInPosition": 0,
- "employees": [{
- "id": 6,
- "name": "Moses Duncan",
- "reportsTo": 64,
- "phone": "(421) 611-4814",
- "extension": 669,
- "hireDate": new Date(2010, 5, 24),
- "fullTime": true,
- "position": "Software Developer",
- "timeInPosition": 6
- }, {
- "id": 12,
- "name": "Jamalia Wallace",
- "reportsTo": 64,
- "phone": "(611) 391-8016",
- "extension": 1952,
- "hireDate": new Date(2011, 9, 8),
- "fullTime": true,
- "position": "Junior Designer",
- "timeInPosition": 3
- }, {
- "id": 62,
- "name": "Palmer Gregory",
- "reportsTo": 64,
- "phone": "(360) 430-2505",
- "extension": 4337,
- "hireDate": new Date(2014, 8, 30),
- "fullTime": true,
- "position": "Designer",
- "timeInPosition": 4
- }, {
- "id": 68,
- "name": "Mallory Gilliam",
- "reportsTo": 64,
- "phone": "(878) 423-2971",
- "extension": 1341,
- "hireDate": new Date(2014, 7, 24),
- "fullTime": true,
- "position": "Senior Software Developer",
- "timeInPosition": 1
- }, {
- "id": 73,
- "name": "Ima Hughes",
- "reportsTo": 64,
- "phone": "(905) 485-8001",
- "extension": 1273,
- "hireDate": new Date(2013, 6, 3),
- "fullTime": true,
- "position": "Software Developer",
- "timeInPosition": 0
- }, {
- "id": 79,
- "name": "Duncan Mathews",
- "reportsTo": 64,
- "phone": "(790) 971-9709",
- "extension": 4573,
- "hireDate": new Date(2011, 8, 21),
- "fullTime": false,
- "position": "Software Developer",
- "timeInPosition": 3
- }]
- }]
- }, {
- "id": 69,
- "name": "Sierra Beasley",
- "reportsTo": 52,
- "phone": "(271) 953-1968",
- "extension": 3324,
- "hireDate": new Date(2011, 4, 2),
- "fullTime": true,
- "position": "Team Lead",
- "timeInPosition": 3,
- "employees": [{
- "id": 38,
- "name": "Elton Tucker",
- "reportsTo": 69,
- "phone": "(988) 930-9331",
- "extension": 9216,
- "hireDate": new Date(2015, 6, 4),
- "fullTime": true,
- "position": "Support Officer",
- "timeInPosition": 1
- }, {
- "id": 39,
- "name": "Iona Brennan",
- "reportsTo": 69,
- "phone": "(356) 563-0600",
- "extension": 5634,
- "hireDate": new Date(2010, 9, 23),
- "fullTime": true,
- "position": "Junior Support Officer",
- "timeInPosition": 4
- }, {
- "id": 53,
- "name": "Paul Campos",
- "reportsTo": 69,
- "phone": "(899) 205-1689",
- "extension": 8586,
- "hireDate": new Date(2011, 3, 17),
- "fullTime": true,
- "position": "Interaction Designer",
- "timeInPosition": 4,
- "employees": [{
- "id": 66,
- "name": "Gloria Freeman",
- "reportsTo": 53,
- "phone": "(344) 950-9168",
- "extension": 4738,
- "hireDate": new Date(2013, 5, 6),
- "fullTime": true,
- "position": "Junior Interaction Designer",
- "timeInPosition": 0
- }]
- }, {
- "id": 57,
- "name": "Alyssa Hansen",
- "reportsTo": 69,
- "phone": "(548) 925-4799",
- "extension": 4716,
- "hireDate": new Date(2011, 1, 19),
- "fullTime": true,
- "position": "Junior Software Developer",
- "timeInPosition": 6
- }, {
- "id": 82,
- "name": "Yael Walters",
- "reportsTo": 69,
- "phone": "(311) 489-8191",
- "extension": 6520,
- "hireDate": new Date(2013, 7, 4),
- "fullTime": true,
- "position": "Software Developer",
- "timeInPosition": 6
- }, {
- "id": 87,
- "name": "Dahlia Hunt",
- "reportsTo": 69,
- "phone": "(720) 339-5202",
- "extension": 3690,
- "hireDate": new Date(2011, 3, 26),
- "fullTime": true,
- "position": "Senior Software Developer",
- "timeInPosition": 4
- }, {
- "id": 94,
- "name": "Adria Stanley",
- "reportsTo": 69,
- "phone": "(536) 357-6391",
- "extension": 3374,
- "hireDate": new Date(2014, 7, 26),
- "fullTime": true,
- "position": "Software Developer",
- "timeInPosition": 0
- }]
- }]
- }]
- }, {
- "id": 3,
- "name": "Priscilla Frank",
- "reportsTo": 1,
- "phone": "(278) 927-2684",
- "extension": 4183,
- "hireDate": new Date(2014, 11, 30),
- "fullTime": true,
- "position": "Chief Product Officer",
- "timeInPosition": 2,
- "employees": [{
- "id": 4,
- "name": "Ursula Holmes",
- "reportsTo": 3,
- "phone": "(302) 760-2034",
- "extension": 2226,
- "hireDate": new Date(2011, 6, 6),
- "fullTime": true,
- "position": "EVP, Product Strategy",
- "timeInPosition": 4
- }, {
- "id": 24,
- "name": "Melvin Carrillo",
- "reportsTo": 3,
- "phone": "(348) 933-5167",
- "extension": 2482,
- "hireDate": new Date(2014, 7, 21),
- "fullTime": true,
- "position": "Director, Developer Relations",
- "timeInPosition": 6,
- "employees": [{
- "id": 29,
- "name": "Martha Chavez",
- "reportsTo": 24,
- "phone": "(860) 754-3464",
- "extension": 4531,
- "hireDate": new Date(2013, 3, 12),
- "fullTime": true,
- "position": "Developer Advocate",
- "timeInPosition": 0
- }, {
- "id": 30,
- "name": "Oren Fox",
- "reportsTo": 24,
- "phone": "(572) 414-3299",
- "extension": 4849,
- "hireDate": new Date(2013, 5, 14),
- "fullTime": false,
- "position": "Developer Advocate",
- "timeInPosition": 0
- }, {
- "id": 41,
- "name": "Amos Barr",
- "reportsTo": 24,
- "phone": "(470) 381-3718",
- "extension": 7643,
- "hireDate": new Date(2010, 3, 9),
- "fullTime": true,
- "position": "Developer Advocate",
- "timeInPosition": 2
- }]
- }]
- }, {
- "id": 5,
- "name": "Anika Vega",
- "reportsTo": 1,
- "phone": "(910) 714-1802",
- "extension": 6353,
- "hireDate": new Date(2010, 2, 25),
- "fullTime": true,
- "position": "Chief Process Officer",
- "timeInPosition": 5,
- "employees": [{
- "id": 10,
- "name": "Vernon Ballard",
- "reportsTo": 5,
- "phone": "(702) 185-8890",
- "extension": 9242,
- "hireDate": new Date(2015, 6, 26),
- "fullTime": true,
- "position": "Director Facilities",
- "timeInPosition": 2,
- "employees": [{
- "id": 16,
- "name": "Ali Guy",
- "reportsTo": 10,
- "phone": "(429) 912-6578",
- "extension": 2225,
- "hireDate": new Date(2014, 6, 29),
- "fullTime": true,
- "position": "Operations Manager",
- "timeInPosition": 4,
- "employees": [{
- "id": 23,
- "name": "Bruce Reilly",
- "reportsTo": 16,
- "phone": "(995) 243-7302",
- "extension": 4815,
- "hireDate": new Date(2015, 4, 1),
- "fullTime": true,
- "position": "Head of Security",
- "timeInPosition": 1,
- "employees": [{
- "id": 26,
- "name": "Rowan Morin",
- "reportsTo": 23,
- "phone": "(792) 141-4374",
- "extension": 1844,
- "hireDate": new Date(2015, 7, 30),
- "fullTime": true,
- "position": "Building Security",
- "timeInPosition": 5
- }, {
- "id": 44,
- "name": "Benedict Soto",
- "reportsTo": 23,
- "phone": "(822) 282-5991",
- "extension": 6422,
- "hireDate": new Date(2012, 6, 1),
- "fullTime": false,
- "position": "Building Security",
- "timeInPosition": 4
- }]
- }, {
- "id": 48,
- "name": "Maryam Rios",
- "reportsTo": 16,
- "phone": "(673) 764-6720",
- "extension": 531,
- "hireDate": new Date(2014, 3, 3),
- "fullTime": true,
- "position": "Team Lead, Personal Assistants",
- "timeInPosition": 1,
- "employees": [{
- "id": 58,
- "name": "Rose Mcintyre",
- "reportsTo": 48,
- "phone": "(771) 615-4590",
- "extension": 7094,
- "hireDate": new Date(2015, 6, 30),
- "fullTime": false,
- "position": "Personal Assistant",
- "timeInPosition": 6
- }]
- }]
- }]
- }]
- }, {
- "id": 7,
- "name": "Nevada Hart",
- "reportsTo": 1,
- "phone": "(254) 220-1576",
- "extension": 6649,
- "hireDate": new Date(2015, 8, 17),
- "fullTime": true,
- "position": "Chief Financial Officer",
- "timeInPosition": 6,
- "employees": [{
- "id": 14,
- "name": "Zena Sanford",
- "reportsTo": 7,
- "phone": "(437) 568-8160",
- "extension": 4452,
- "hireDate": new Date(2010, 11, 30),
- "fullTime": true,
- "position": "VP, Finance",
- "timeInPosition": 4
- }, {
- "id": 15,
- "name": "Quinlan Howe",
- "reportsTo": 7,
- "phone": "(464) 334-9748",
- "extension": 8722,
- "hireDate": new Date(2011, 6, 9),
- "fullTime": false,
- "position": "Senior Director, Finance",
- "timeInPosition": 0,
- "employees": [{
- "id": 17,
- "name": "Indira Lopez",
- "reportsTo": 15,
- "phone": "(301) 368-0938",
- "extension": 8027,
- "hireDate": new Date(2013, 8, 18),
- "fullTime": true,
- "position": "ERP Team Lead",
- "timeInPosition": 4,
- "employees": [{
- "id": 18,
- "name": "Lareina Lara",
- "reportsTo": 17,
- "phone": "(233) 457-7482",
- "extension": 1996,
- "hireDate": new Date(2010, 4, 30),
- "fullTime": true,
- "position": "ERP Solutions Consultant",
- "timeInPosition": 6
- }, {
- "id": 19,
- "name": "Maxwell Wise",
- "reportsTo": 17,
- "phone": "(570) 494-2531",
- "extension": 9865,
- "hireDate": new Date(2012, 5, 19),
- "fullTime": true,
- "position": "Systems Engineer",
- "timeInPosition": 0
- }]
- }, {
- "id": 20,
- "name": "Hunter Mcbride",
- "reportsTo": 15,
- "phone": "(409) 442-7016",
- "extension": 4284,
- "hireDate": new Date(2012, 10, 20),
- "fullTime": true,
- "position": "Senior Director, Tax",
- "timeInPosition": 3
- }, {
- "id": 21,
- "name": "Jana Serrano",
- "reportsTo": 15,
- "phone": "(910) 718-4620",
- "extension": 6970,
- "hireDate": new Date(2010, 4, 2),
- "fullTime": true,
- "position": "Financial Planning & Analysis Manager",
- "timeInPosition": 2
- }, {
- "id": 22,
- "name": "Zachery Shelton",
- "reportsTo": 15,
- "phone": "(310) 240-8675",
- "extension": 4527,
- "hireDate": new Date(2011, 11, 23),
- "fullTime": false,
- "position": "Corporate Finance Controller",
- "timeInPosition": 6,
- "employees": [{
- "id": 28,
- "name": "Cullen Freeman",
- "reportsTo": 22,
- "phone": "(136) 554-8814",
- "extension": 9861,
- "hireDate": new Date(2014, 3, 15),
- "fullTime": true,
- "position": "Treasurer Accountant",
- "timeInPosition": 2
- }, {
- "id": 31,
- "name": "Quinn Dean",
- "reportsTo": 22,
- "phone": "(152) 613-3507",
- "extension": 6621,
- "hireDate": new Date(2015, 1, 29),
- "fullTime": true,
- "position": "Accountant",
- "timeInPosition": 6
- }, {
- "id": 34,
- "name": "Samantha Brady",
- "reportsTo": 22,
- "phone": "(206) 398-4328",
- "extension": 1157,
- "hireDate": new Date(2011, 2, 13),
- "fullTime": true,
- "position": "Accountant",
- "timeInPosition": 2,
- "employees": [{
- "id": 35,
- "name": "Tamara Green",
- "reportsTo": 34,
- "phone": "(219) 248-2789",
- "extension": 4880,
- "hireDate": new Date(2014, 2, 4),
- "fullTime": true,
- "position": "Junior Accountant",
- "timeInPosition": 6
- }]
- }, {
- "id": 36,
- "name": "Olympia Coleman",
- "reportsTo": 22,
- "phone": "(944) 853-6383",
- "extension": 2136,
- "hireDate": new Date(2013, 7, 31),
- "fullTime": true,
- "position": "Collections Manager",
- "timeInPosition": 3
- }, {
- "id": 37,
- "name": "Breanna Goodwin",
- "reportsTo": 22,
- "phone": "(379) 988-9630",
- "extension": 5898,
- "hireDate": new Date(2010, 5, 23),
- "fullTime": false,
- "position": "Payroll Specialist",
- "timeInPosition": 4
- }]
- }, {
- "id": 27,
- "name": "Curran Travis",
- "reportsTo": 15,
- "phone": "(438) 135-8033",
- "extension": 3841,
- "hireDate": new Date(2011, 6, 13),
- "fullTime": true,
- "position": "Finance Controller",
- "timeInPosition": 5
- }]
- }]
- }, {
- "id": 8,
- "name": "Hunter Fry",
- "reportsTo": 1,
- "phone": "(766) 358-9858",
- "extension": 3741,
- "hireDate": new Date(2011, 2, 12),
- "fullTime": false,
- "position": "General Counsel",
- "timeInPosition": 3,
- "employees": [{
- "id": 9,
- "name": "Kuame Carrillo",
- "reportsTo": 8,
- "phone": "(192) 383-1305",
- "extension": 9228,
- "hireDate": new Date(2011, 2, 22),
- "fullTime": true,
- "position": "Associate General Councel",
- "timeInPosition": 0
- }, {
- "id": 13,
- "name": "Stacy Todd",
- "reportsTo": 8,
- "phone": "(925) 286-3327",
- "extension": 8565,
- "hireDate": new Date(2014, 7, 5),
- "fullTime": true,
- "position": "Councel",
- "timeInPosition": 0
- }, {
- "id": 33,
- "name": "Valentine Wyatt",
- "reportsTo": 8,
- "phone": "(165) 166-6205",
- "extension": 3588,
- "hireDate": new Date(2015, 5, 21),
- "fullTime": true,
- "position": "Councel",
- "timeInPosition": 5
- }, {
- "id": 86,
- "name": "Daniel Mccarthy",
- "reportsTo": 8,
- "phone": "(624) 483-6206",
- "extension": 9112,
- "hireDate": new Date(2013, 12, 3),
- "fullTime": false,
- "position": "Staff Attorney",
- "timeInPosition": 0
- }]
- }]
- }];
- export default employees;
\ No newline at end of file
diff --git a/docs/knowledge-base/examples/treelist/treelist-custom-expand-cell/main.jsx b/docs/knowledge-base/examples/treelist/treelist-custom-expand-cell/main.jsx
deleted file mode 100644
index 36d8526e..00000000
--- a/docs/knowledge-base/examples/treelist/treelist-custom-expand-cell/main.jsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import * as React from 'react';
-import { createRoot } from 'react-dom/client';
-import App from './app'
-
-const root = createRoot(document.querySelector('my-app'));
-root.render(
-
- extendDataItem(item, subItemsField, {
- [expandField]: expanded.includes(item.id),
- [editField]: Boolean(inEdit.find((i) => i.id === item.id)),
- })
- )}
- editField={editField}
- expandField={expandField}
- subItemsField={subItemsField}
- onItemChange={onItemChange}
- onExpandChange={onExpandChange}
- columns={columns}
- navigatable={true}
- toolbar={
-
-
- Add new
-
-
- }
- />
-
- );
-};
-
-export default App;
diff --git a/docs/knowledge-base/examples/treelist/treelist-focus-input-on-edit/data.js b/docs/knowledge-base/examples/treelist/treelist-focus-input-on-edit/data.js
deleted file mode 100644
index ab659696..00000000
--- a/docs/knowledge-base/examples/treelist/treelist-focus-input-on-edit/data.js
+++ /dev/null
@@ -1,1020 +0,0 @@
-const employees = [{
- "id": 1,
- "name": "Daryl Sweeney",
- "reportsTo": null,
- "phone": "(555) 924-9726",
- "extension": 8253,
- "hireDate": new Date(2012, 2, 7),
- "fullTime": true,
- "position": "CEO",
- "timeInPosition": 2,
- "employees": [{
- "id": 2,
- "name": "Guy Wooten",
- "reportsTo": 1,
- "phone": "(438) 738-4935",
- "extension": 1155,
- "hireDate": new Date(2010, 3, 3),
- "fullTime": true,
- "position": "Chief Technical Officer",
- "timeInPosition": 1,
- "employees": [{
- "id": 32,
- "name": "Buffy Weber",
- "reportsTo": 2,
- "phone": "(699) 838-6121",
- "extension": 8933,
- "hireDate": new Date(2011, 7, 11),
- "fullTime": true,
- "position": "VP, Engineering",
- "timeInPosition": 2,
- "employees": [{
- "id": 11,
- "name": "Hyacinth Hood",
- "reportsTo": 32,
- "phone": "(889) 345-2438",
- "extension": 8564,
- "hireDate": new Date(2014, 2, 3),
- "fullTime": true,
- "position": "Team Lead",
- "timeInPosition": 1,
- "employees": [{
- "id": 60,
- "name": "Akeem Carr",
- "reportsTo": 11,
- "phone": "(738) 136-2814",
- "extension": 9353,
- "hireDate": new Date(2011, 4, 21),
- "fullTime": true,
- "position": "Junior Software Developer",
- "timeInPosition": 2
- }, {
- "id": 78,
- "name": "Rinah Simon",
- "reportsTo": 11,
- "phone": "(285) 912-5271",
- "extension": 7795,
- "hireDate": new Date(2012, 10, 11),
- "fullTime": true,
- "position": "Software Developer",
- "timeInPosition": 4
- }]
- }, {
- "id": 42,
- "name": "Gage Daniels",
- "reportsTo": 32,
- "phone": "(107) 290-6260",
- "extension": 896,
- "hireDate": new Date(2013, 5, 16),
- "fullTime": true,
- "position": "Software Architect",
- "timeInPosition": 5
- }, {
- "id": 43,
- "name": "Constance Vazquez",
- "reportsTo": 32,
- "phone": "(800) 301-1978",
- "extension": 5141,
- "hireDate": new Date(2011, 6, 7),
- "fullTime": true,
- "position": "Director, Engineering",
- "timeInPosition": 1,
- "employees": [{
- "id": 46,
- "name": "Darrel Solis",
- "reportsTo": 43,
- "phone": "(327) 977-0216",
- "extension": 7779,
- "hireDate": new Date(2015, 4, 25),
- "fullTime": true,
- "position": "Team Lead",
- "timeInPosition": 4,
- "employees": [{
- "id": 47,
- "name": "Brian Yang",
- "reportsTo": 46,
- "phone": "(565) 146-5435",
- "extension": 3885,
- "hireDate": new Date(2012, 9, 27),
- "fullTime": true,
- "position": "Senior Software Developer",
- "timeInPosition": 3
- }, {
- "id": 50,
- "name": "Lillian Bradshaw",
- "reportsTo": 46,
- "phone": "(323) 509-3479",
- "extension": 5426,
- "hireDate": new Date(2014, 5, 10),
- "fullTime": true,
- "position": "Software Developer",
- "timeInPosition": 2
- }, {
- "id": 51,
- "name": "Christian Palmer",
- "reportsTo": 46,
- "phone": "(490) 421-8718",
- "extension": 3706,
- "hireDate": new Date(2012, 12, 27),
- "fullTime": false,
- "position": "Technical Lead",
- "timeInPosition": 1
- }, {
- "id": 55,
- "name": "Summer Mosley",
- "reportsTo": 46,
- "phone": "(784) 962-2301",
- "extension": 5492,
- "hireDate": new Date(2010, 3, 2),
- "fullTime": true,
- "position": "QA Engineer",
- "timeInPosition": 5
- }, {
- "id": 56,
- "name": "Barry Ayers",
- "reportsTo": 46,
- "phone": "(452) 373-9227",
- "extension": 1308,
- "hireDate": new Date(2011, 10, 11),
- "fullTime": true,
- "position": "Software Developer",
- "timeInPosition": 4
- }, {
- "id": 59,
- "name": "Keiko Espinoza",
- "reportsTo": 46,
- "phone": "(226) 600-5305",
- "extension": 9363,
- "hireDate": new Date(2011, 9, 18),
- "fullTime": true,
- "position": "Junior QA Engineer",
- "timeInPosition": 4
- }, {
- "id": 61,
- "name": "Candace Pickett",
- "reportsTo": 46,
- "phone": "(120) 117-7475",
- "extension": 5178,
- "hireDate": new Date(2010, 5, 6),
- "fullTime": true,
- "position": "Support Officer",
- "timeInPosition": 0
- }]
- }, {
- "id": 63,
- "name": "Mia Caldwell",
- "reportsTo": 43,
- "phone": "(848) 636-6470",
- "extension": 6368,
- "hireDate": new Date(2012, 10, 7),
- "fullTime": true,
- "position": "Team Lead",
- "timeInPosition": 4,
- "employees": [{
- "id": 65,
- "name": "Thomas Terry",
- "reportsTo": 63,
- "phone": "(764) 831-4248",
- "extension": 3574,
- "hireDate": new Date(2015, 6, 15),
- "fullTime": false,
- "position": "Senior Enterprise Support Officer",
- "timeInPosition": 2
- }, {
- "id": 67,
- "name": "Ruth Downs",
- "reportsTo": 63,
- "phone": "(138) 991-1440",
- "extension": 8067,
- "hireDate": new Date(2013, 7, 13),
- "fullTime": true,
- "position": "Senior Software Developer",
- "timeInPosition": 5
- }, {
- "id": 70,
- "name": "Yasir Wilder",
- "reportsTo": 63,
- "phone": "(759) 701-8665",
- "extension": 8350,
- "hireDate": new Date(2010, 11, 8),
- "fullTime": true,
- "position": "Senior QA Enginner",
- "timeInPosition": 3
- }, {
- "id": 71,
- "name": "Flavia Short",
- "reportsTo": 63,
- "phone": "(370) 133-9238",
- "extension": 6390,
- "hireDate": new Date(2013, 2, 21),
- "fullTime": true,
- "position": "Support Officer",
- "timeInPosition": 0
- }, {
- "id": 74,
- "name": "Aaron Roach",
- "reportsTo": 63,
- "phone": "(958) 717-9230",
- "extension": 4899,
- "hireDate": new Date(2011, 7, 30),
- "fullTime": true,
- "position": "Junior Software Developer",
- "timeInPosition": 6
- }, {
- "id": 75,
- "name": "Eric Russell",
- "reportsTo": 63,
- "phone": "(516) 575-8505",
- "extension": 2224,
- "hireDate": new Date(2012, 10, 28),
- "fullTime": true,
- "position": "Software Developer",
- "timeInPosition": 3
- }, {
- "id": 76,
- "name": "Cheyenne Olson",
- "reportsTo": 63,
- "phone": "(241) 645-0257",
- "extension": 9181,
- "hireDate": new Date(2015, 5, 19),
- "fullTime": true,
- "position": "Software Developer",
- "timeInPosition": 5
- }, {
- "id": 77,
- "name": "Shaine Avila",
- "reportsTo": 63,
- "phone": "(844) 435-1360",
- "extension": 3374,
- "hireDate": new Date(2010, 1, 31),
- "fullTime": true,
- "position": "UI Designer",
- "timeInPosition": 5
- }, {
- "id": 81,
- "name": "Chantale Long",
- "reportsTo": 63,
- "phone": "(252) 419-6891",
- "extension": 7868,
- "hireDate": new Date(2010, 6, 17),
- "fullTime": true,
- "position": "Senior QA Enginner",
- "timeInPosition": 1
- }, {
- "id": 83,
- "name": "Dane Cruz",
- "reportsTo": 63,
- "phone": "(946) 701-6165",
- "extension": 3828,
- "hireDate": new Date(2014, 10, 8),
- "fullTime": true,
- "position": "Junior Software Developer",
- "timeInPosition": 2
- }, {
- "id": 84,
- "name": "Regan Patterson",
- "reportsTo": 63,
- "phone": "(265) 946-1765",
- "extension": 6955,
- "hireDate": new Date(2012, 3, 1),
- "fullTime": true,
- "position": "Technical Writer",
- "timeInPosition": 6
- }, {
- "id": 85,
- "name": "Drew Mckay",
- "reportsTo": 63,
- "phone": "(327) 293-0162",
- "extension": 6904,
- "hireDate": new Date(2011, 3, 25),
- "fullTime": true,
- "position": "Senior Software Developer",
- "timeInPosition": 3
- }, {
- "id": 88,
- "name": "Bevis Miller",
- "reportsTo": 63,
- "phone": "(525) 557-0169",
- "extension": 6978,
- "hireDate": new Date(2011, 4, 19),
- "fullTime": true,
- "position": "Senior Software Developer",
- "timeInPosition": 5
- }, {
- "id": 89,
- "name": "Bruce Mccarty",
- "reportsTo": 63,
- "phone": "(936) 777-8730",
- "extension": 6552,
- "hireDate": new Date(2014, 3, 28),
- "fullTime": true,
- "position": "Support Officer",
- "timeInPosition": 5
- }]
- }, {
- "id": 90,
- "name": "Ocean Blair",
- "reportsTo": 43,
- "phone": "(343) 586-6614",
- "extension": 1424,
- "hireDate": new Date(2011, 4, 27),
- "fullTime": true,
- "position": "Team Lead",
- "timeInPosition": 2,
- "employees": [{
- "id": 91,
- "name": "Guinevere Osborn",
- "reportsTo": 90,
- "phone": "(424) 741-0006",
- "extension": 3166,
- "hireDate": new Date(2014, 11, 19),
- "fullTime": true,
- "position": "Software Developer",
- "timeInPosition": 3
- }, {
- "id": 92,
- "name": "Olga Strong",
- "reportsTo": 90,
- "phone": "(949) 417-1168",
- "extension": 4568,
- "hireDate": new Date(2015, 5, 28),
- "fullTime": true,
- "position": "Graphic Designer",
- "timeInPosition": 4
- }, {
- "id": 93,
- "name": "Robert Orr",
- "reportsTo": 90,
- "phone": "(977) 341-3721",
- "extension": 9241,
- "hireDate": new Date(2012, 8, 20),
- "fullTime": false,
- "position": "Support Officer",
- "timeInPosition": 6
- }, {
- "id": 95,
- "name": "Odette Sears",
- "reportsTo": 90,
- "phone": "(264) 818-6576",
- "extension": 1914,
- "hireDate": new Date(2013, 7, 5),
- "fullTime": true,
- "position": "Senior Software Developer",
- "timeInPosition": 3
- }]
- }]
- }, {
- "id": 45,
- "name": "Zelda Medina",
- "reportsTo": 32,
- "phone": "(563) 359-6023",
- "extension": 2600,
- "hireDate": new Date(2012, 11, 6),
- "fullTime": true,
- "position": "QA Architect",
- "timeInPosition": 2
- }]
- }, {
- "id": 52,
- "name": "Skyler Cleveland",
- "reportsTo": 2,
- "phone": "(217) 280-5300",
- "extension": 9655,
- "hireDate": new Date(2014, 11, 10),
- "fullTime": true,
- "position": "VP, Engineering",
- "timeInPosition": 2,
- "employees": [{
- "id": 40,
- "name": "Karleigh Garza",
- "reportsTo": 52,
- "phone": "(370) 983-8796",
- "extension": 4044,
- "hireDate": new Date(2014, 3, 10),
- "fullTime": true,
- "position": "Team Lead",
- "timeInPosition": 1,
- "employees": [{
- "id": 49,
- "name": "Elmo Tyson",
- "reportsTo": 40,
- "phone": "(344) 496-9555",
- "extension": 6950,
- "hireDate": new Date(2014, 9, 18),
- "fullTime": true,
- "position": "Software Developer",
- "timeInPosition": 4
- }, {
- "id": 72,
- "name": "Stacey Lynn",
- "reportsTo": 40,
- "phone": "(140) 772-7509",
- "extension": 8396,
- "hireDate": new Date(2014, 7, 31),
- "fullTime": false,
- "position": "QA Engineer",
- "timeInPosition": 1,
- "employees": [{
- "id": 80,
- "name": "Meredith Parrish",
- "reportsTo": 72,
- "phone": "(714) 284-2408",
- "extension": 7675,
- "hireDate": new Date(2012, 11, 13),
- "fullTime": true,
- "position": "Junior QA Engineer",
- "timeInPosition": 6
- }]
- }, {
- "id": 96,
- "name": "Cassady Whitley",
- "reportsTo": 40,
- "phone": "(996) 587-8405",
- "extension": 780,
- "hireDate": new Date(2013, 5, 7),
- "fullTime": true,
- "position": "Software Developer",
- "timeInPosition": 5
- }, {
- "id": 97,
- "name": "Haviva Campbell",
- "reportsTo": 40,
- "phone": "(263) 887-4689",
- "extension": 2808,
- "hireDate": new Date(2013, 3, 5),
- "fullTime": true,
- "position": "Support Officer",
- "timeInPosition": 2
- }, {
- "id": 98,
- "name": "Cameron Ayers",
- "reportsTo": 40,
- "phone": "(470) 709-8030",
- "extension": 2893,
- "hireDate": new Date(2013, 8, 28),
- "fullTime": true,
- "position": "Support Officer",
- "timeInPosition": 3
- }, {
- "id": 99,
- "name": "Martha Sargent",
- "reportsTo": 40,
- "phone": "(587) 812-4418",
- "extension": 5099,
- "hireDate": new Date(2014, 2, 27),
- "fullTime": true,
- "position": "Senior Software Developer",
- "timeInPosition": 3
- }, {
- "id": 100,
- "name": "Darrel Kinney",
- "reportsTo": 40,
- "phone": "(888) 483-9606",
- "extension": 4779,
- "hireDate": new Date(2014, 3, 24),
- "fullTime": false,
- "position": "Graphic Designer",
- "timeInPosition": 1
- }]
- }, {
- "id": 54,
- "name": "Kuame Frye",
- "reportsTo": 52,
- "phone": "(360) 721-5886",
- "extension": 2730,
- "hireDate": new Date(2010, 11, 17),
- "fullTime": true,
- "position": "Software Architect",
- "timeInPosition": 1,
- "employees": [{
- "id": 64,
- "name": "Ori Wynn",
- "reportsTo": 54,
- "phone": "(366) 342-0166",
- "extension": 7252,
- "hireDate": new Date(2015, 6, 21),
- "fullTime": true,
- "position": "Team Lead",
- "timeInPosition": 0,
- "employees": [{
- "id": 6,
- "name": "Moses Duncan",
- "reportsTo": 64,
- "phone": "(421) 611-4814",
- "extension": 669,
- "hireDate": new Date(2010, 5, 24),
- "fullTime": true,
- "position": "Software Developer",
- "timeInPosition": 6
- }, {
- "id": 12,
- "name": "Jamalia Wallace",
- "reportsTo": 64,
- "phone": "(611) 391-8016",
- "extension": 1952,
- "hireDate": new Date(2011, 9, 8),
- "fullTime": true,
- "position": "Junior Designer",
- "timeInPosition": 3
- }, {
- "id": 62,
- "name": "Palmer Gregory",
- "reportsTo": 64,
- "phone": "(360) 430-2505",
- "extension": 4337,
- "hireDate": new Date(2014, 8, 30),
- "fullTime": true,
- "position": "Designer",
- "timeInPosition": 4
- }, {
- "id": 68,
- "name": "Mallory Gilliam",
- "reportsTo": 64,
- "phone": "(878) 423-2971",
- "extension": 1341,
- "hireDate": new Date(2014, 7, 24),
- "fullTime": true,
- "position": "Senior Software Developer",
- "timeInPosition": 1
- }, {
- "id": 73,
- "name": "Ima Hughes",
- "reportsTo": 64,
- "phone": "(905) 485-8001",
- "extension": 1273,
- "hireDate": new Date(2013, 6, 3),
- "fullTime": true,
- "position": "Software Developer",
- "timeInPosition": 0
- }, {
- "id": 79,
- "name": "Duncan Mathews",
- "reportsTo": 64,
- "phone": "(790) 971-9709",
- "extension": 4573,
- "hireDate": new Date(2011, 8, 21),
- "fullTime": false,
- "position": "Software Developer",
- "timeInPosition": 3
- }]
- }]
- }, {
- "id": 69,
- "name": "Sierra Beasley",
- "reportsTo": 52,
- "phone": "(271) 953-1968",
- "extension": 3324,
- "hireDate": new Date(2011, 4, 2),
- "fullTime": true,
- "position": "Team Lead",
- "timeInPosition": 3,
- "employees": [{
- "id": 38,
- "name": "Elton Tucker",
- "reportsTo": 69,
- "phone": "(988) 930-9331",
- "extension": 9216,
- "hireDate": new Date(2015, 6, 4),
- "fullTime": true,
- "position": "Support Officer",
- "timeInPosition": 1
- }, {
- "id": 39,
- "name": "Iona Brennan",
- "reportsTo": 69,
- "phone": "(356) 563-0600",
- "extension": 5634,
- "hireDate": new Date(2010, 9, 23),
- "fullTime": true,
- "position": "Junior Support Officer",
- "timeInPosition": 4
- }, {
- "id": 53,
- "name": "Paul Campos",
- "reportsTo": 69,
- "phone": "(899) 205-1689",
- "extension": 8586,
- "hireDate": new Date(2011, 3, 17),
- "fullTime": true,
- "position": "Interaction Designer",
- "timeInPosition": 4,
- "employees": [{
- "id": 66,
- "name": "Gloria Freeman",
- "reportsTo": 53,
- "phone": "(344) 950-9168",
- "extension": 4738,
- "hireDate": new Date(2013, 5, 6),
- "fullTime": true,
- "position": "Junior Interaction Designer",
- "timeInPosition": 0
- }]
- }, {
- "id": 57,
- "name": "Alyssa Hansen",
- "reportsTo": 69,
- "phone": "(548) 925-4799",
- "extension": 4716,
- "hireDate": new Date(2011, 1, 19),
- "fullTime": true,
- "position": "Junior Software Developer",
- "timeInPosition": 6
- }, {
- "id": 82,
- "name": "Yael Walters",
- "reportsTo": 69,
- "phone": "(311) 489-8191",
- "extension": 6520,
- "hireDate": new Date(2013, 7, 4),
- "fullTime": true,
- "position": "Software Developer",
- "timeInPosition": 6
- }, {
- "id": 87,
- "name": "Dahlia Hunt",
- "reportsTo": 69,
- "phone": "(720) 339-5202",
- "extension": 3690,
- "hireDate": new Date(2011, 3, 26),
- "fullTime": true,
- "position": "Senior Software Developer",
- "timeInPosition": 4
- }, {
- "id": 94,
- "name": "Adria Stanley",
- "reportsTo": 69,
- "phone": "(536) 357-6391",
- "extension": 3374,
- "hireDate": new Date(2014, 7, 26),
- "fullTime": true,
- "position": "Software Developer",
- "timeInPosition": 0
- }]
- }]
- }]
- }, {
- "id": 3,
- "name": "Priscilla Frank",
- "reportsTo": 1,
- "phone": "(278) 927-2684",
- "extension": 4183,
- "hireDate": new Date(2014, 11, 30),
- "fullTime": true,
- "position": "Chief Product Officer",
- "timeInPosition": 2,
- "employees": [{
- "id": 4,
- "name": "Ursula Holmes",
- "reportsTo": 3,
- "phone": "(302) 760-2034",
- "extension": 2226,
- "hireDate": new Date(2011, 6, 6),
- "fullTime": true,
- "position": "EVP, Product Strategy",
- "timeInPosition": 4
- }, {
- "id": 24,
- "name": "Melvin Carrillo",
- "reportsTo": 3,
- "phone": "(348) 933-5167",
- "extension": 2482,
- "hireDate": new Date(2014, 7, 21),
- "fullTime": true,
- "position": "Director, Developer Relations",
- "timeInPosition": 6,
- "employees": [{
- "id": 29,
- "name": "Martha Chavez",
- "reportsTo": 24,
- "phone": "(860) 754-3464",
- "extension": 4531,
- "hireDate": new Date(2013, 3, 12),
- "fullTime": true,
- "position": "Developer Advocate",
- "timeInPosition": 0
- }, {
- "id": 30,
- "name": "Oren Fox",
- "reportsTo": 24,
- "phone": "(572) 414-3299",
- "extension": 4849,
- "hireDate": new Date(2013, 5, 14),
- "fullTime": false,
- "position": "Developer Advocate",
- "timeInPosition": 0
- }, {
- "id": 41,
- "name": "Amos Barr",
- "reportsTo": 24,
- "phone": "(470) 381-3718",
- "extension": 7643,
- "hireDate": new Date(2010, 3, 9),
- "fullTime": true,
- "position": "Developer Advocate",
- "timeInPosition": 2
- }]
- }]
- }, {
- "id": 5,
- "name": "Anika Vega",
- "reportsTo": 1,
- "phone": "(910) 714-1802",
- "extension": 6353,
- "hireDate": new Date(2010, 2, 25),
- "fullTime": true,
- "position": "Chief Process Officer",
- "timeInPosition": 5,
- "employees": [{
- "id": 10,
- "name": "Vernon Ballard",
- "reportsTo": 5,
- "phone": "(702) 185-8890",
- "extension": 9242,
- "hireDate": new Date(2015, 6, 26),
- "fullTime": true,
- "position": "Director Facilities",
- "timeInPosition": 2,
- "employees": [{
- "id": 16,
- "name": "Ali Guy",
- "reportsTo": 10,
- "phone": "(429) 912-6578",
- "extension": 2225,
- "hireDate": new Date(2014, 6, 29),
- "fullTime": true,
- "position": "Operations Manager",
- "timeInPosition": 4,
- "employees": [{
- "id": 23,
- "name": "Bruce Reilly",
- "reportsTo": 16,
- "phone": "(995) 243-7302",
- "extension": 4815,
- "hireDate": new Date(2015, 4, 1),
- "fullTime": true,
- "position": "Head of Security",
- "timeInPosition": 1,
- "employees": [{
- "id": 26,
- "name": "Rowan Morin",
- "reportsTo": 23,
- "phone": "(792) 141-4374",
- "extension": 1844,
- "hireDate": new Date(2015, 7, 30),
- "fullTime": true,
- "position": "Building Security",
- "timeInPosition": 5
- }, {
- "id": 44,
- "name": "Benedict Soto",
- "reportsTo": 23,
- "phone": "(822) 282-5991",
- "extension": 6422,
- "hireDate": new Date(2012, 6, 1),
- "fullTime": false,
- "position": "Building Security",
- "timeInPosition": 4
- }]
- }, {
- "id": 48,
- "name": "Maryam Rios",
- "reportsTo": 16,
- "phone": "(673) 764-6720",
- "extension": 531,
- "hireDate": new Date(2014, 3, 3),
- "fullTime": true,
- "position": "Team Lead, Personal Assistants",
- "timeInPosition": 1,
- "employees": [{
- "id": 58,
- "name": "Rose Mcintyre",
- "reportsTo": 48,
- "phone": "(771) 615-4590",
- "extension": 7094,
- "hireDate": new Date(2015, 6, 30),
- "fullTime": false,
- "position": "Personal Assistant",
- "timeInPosition": 6
- }]
- }]
- }]
- }]
- }, {
- "id": 7,
- "name": "Nevada Hart",
- "reportsTo": 1,
- "phone": "(254) 220-1576",
- "extension": 6649,
- "hireDate": new Date(2015, 8, 17),
- "fullTime": true,
- "position": "Chief Financial Officer",
- "timeInPosition": 6,
- "employees": [{
- "id": 14,
- "name": "Zena Sanford",
- "reportsTo": 7,
- "phone": "(437) 568-8160",
- "extension": 4452,
- "hireDate": new Date(2010, 11, 30),
- "fullTime": true,
- "position": "VP, Finance",
- "timeInPosition": 4
- }, {
- "id": 15,
- "name": "Quinlan Howe",
- "reportsTo": 7,
- "phone": "(464) 334-9748",
- "extension": 8722,
- "hireDate": new Date(2011, 6, 9),
- "fullTime": false,
- "position": "Senior Director, Finance",
- "timeInPosition": 0,
- "employees": [{
- "id": 17,
- "name": "Indira Lopez",
- "reportsTo": 15,
- "phone": "(301) 368-0938",
- "extension": 8027,
- "hireDate": new Date(2013, 8, 18),
- "fullTime": true,
- "position": "ERP Team Lead",
- "timeInPosition": 4,
- "employees": [{
- "id": 18,
- "name": "Lareina Lara",
- "reportsTo": 17,
- "phone": "(233) 457-7482",
- "extension": 1996,
- "hireDate": new Date(2010, 4, 30),
- "fullTime": true,
- "position": "ERP Solutions Consultant",
- "timeInPosition": 6
- }, {
- "id": 19,
- "name": "Maxwell Wise",
- "reportsTo": 17,
- "phone": "(570) 494-2531",
- "extension": 9865,
- "hireDate": new Date(2012, 5, 19),
- "fullTime": true,
- "position": "Systems Engineer",
- "timeInPosition": 0
- }]
- }, {
- "id": 20,
- "name": "Hunter Mcbride",
- "reportsTo": 15,
- "phone": "(409) 442-7016",
- "extension": 4284,
- "hireDate": new Date(2012, 10, 20),
- "fullTime": true,
- "position": "Senior Director, Tax",
- "timeInPosition": 3
- }, {
- "id": 21,
- "name": "Jana Serrano",
- "reportsTo": 15,
- "phone": "(910) 718-4620",
- "extension": 6970,
- "hireDate": new Date(2010, 4, 2),
- "fullTime": true,
- "position": "Financial Planning & Analysis Manager",
- "timeInPosition": 2
- }, {
- "id": 22,
- "name": "Zachery Shelton",
- "reportsTo": 15,
- "phone": "(310) 240-8675",
- "extension": 4527,
- "hireDate": new Date(2011, 11, 23),
- "fullTime": false,
- "position": "Corporate Finance Controller",
- "timeInPosition": 6,
- "employees": [{
- "id": 28,
- "name": "Cullen Freeman",
- "reportsTo": 22,
- "phone": "(136) 554-8814",
- "extension": 9861,
- "hireDate": new Date(2014, 3, 15),
- "fullTime": true,
- "position": "Treasurer Accountant",
- "timeInPosition": 2
- }, {
- "id": 31,
- "name": "Quinn Dean",
- "reportsTo": 22,
- "phone": "(152) 613-3507",
- "extension": 6621,
- "hireDate": new Date(2015, 1, 29),
- "fullTime": true,
- "position": "Accountant",
- "timeInPosition": 6
- }, {
- "id": 34,
- "name": "Samantha Brady",
- "reportsTo": 22,
- "phone": "(206) 398-4328",
- "extension": 1157,
- "hireDate": new Date(2011, 2, 13),
- "fullTime": true,
- "position": "Accountant",
- "timeInPosition": 2,
- "employees": [{
- "id": 35,
- "name": "Tamara Green",
- "reportsTo": 34,
- "phone": "(219) 248-2789",
- "extension": 4880,
- "hireDate": new Date(2014, 2, 4),
- "fullTime": true,
- "position": "Junior Accountant",
- "timeInPosition": 6
- }]
- }, {
- "id": 36,
- "name": "Olympia Coleman",
- "reportsTo": 22,
- "phone": "(944) 853-6383",
- "extension": 2136,
- "hireDate": new Date(2013, 7, 31),
- "fullTime": true,
- "position": "Collections Manager",
- "timeInPosition": 3
- }, {
- "id": 37,
- "name": "Breanna Goodwin",
- "reportsTo": 22,
- "phone": "(379) 988-9630",
- "extension": 5898,
- "hireDate": new Date(2010, 5, 23),
- "fullTime": false,
- "position": "Payroll Specialist",
- "timeInPosition": 4
- }]
- }, {
- "id": 27,
- "name": "Curran Travis",
- "reportsTo": 15,
- "phone": "(438) 135-8033",
- "extension": 3841,
- "hireDate": new Date(2011, 6, 13),
- "fullTime": true,
- "position": "Finance Controller",
- "timeInPosition": 5
- }]
- }]
- }, {
- "id": 8,
- "name": "Hunter Fry",
- "reportsTo": 1,
- "phone": "(766) 358-9858",
- "extension": 3741,
- "hireDate": new Date(2011, 2, 12),
- "fullTime": false,
- "position": "General Counsel",
- "timeInPosition": 3,
- "employees": [{
- "id": 9,
- "name": "Kuame Carrillo",
- "reportsTo": 8,
- "phone": "(192) 383-1305",
- "extension": 9228,
- "hireDate": new Date(2011, 2, 22),
- "fullTime": true,
- "position": "Associate General Councel",
- "timeInPosition": 0
- }, {
- "id": 13,
- "name": "Stacy Todd",
- "reportsTo": 8,
- "phone": "(925) 286-3327",
- "extension": 8565,
- "hireDate": new Date(2014, 7, 5),
- "fullTime": true,
- "position": "Councel",
- "timeInPosition": 0
- }, {
- "id": 33,
- "name": "Valentine Wyatt",
- "reportsTo": 8,
- "phone": "(165) 166-6205",
- "extension": 3588,
- "hireDate": new Date(2015, 5, 21),
- "fullTime": true,
- "position": "Councel",
- "timeInPosition": 5
- }, {
- "id": 86,
- "name": "Daniel Mccarthy",
- "reportsTo": 8,
- "phone": "(624) 483-6206",
- "extension": 9112,
- "hireDate": new Date(2013, 12, 3),
- "fullTime": false,
- "position": "Staff Attorney",
- "timeInPosition": 0
- }]
- }]
- }];
- export default employees;
\ No newline at end of file
diff --git a/docs/knowledge-base/examples/treelist/treelist-focus-input-on-edit/main.jsx b/docs/knowledge-base/examples/treelist/treelist-focus-input-on-edit/main.jsx
deleted file mode 100644
index 36d8526e..00000000
--- a/docs/knowledge-base/examples/treelist/treelist-focus-input-on-edit/main.jsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import * as React from 'react';
-import { createRoot } from 'react-dom/client';
-import App from './app'
-
-const root = createRoot(document.querySelector('my-app'));
-root.render(
- save(dataItem)}>
- {dataItem.isNew ? 'Add' : 'Update'}
-
- cancel(dataItem)}>{dataItem.isNew ? 'Discard' : 'Cancel'}
-
- :
- addChild(dataItem)}>
- Add Employee
-
- enterEdit(dataItem)}>
- Edit
-
- remove(dataItem)}>
- Remove
-
- ;
- }
-
- };
-}
\ No newline at end of file
diff --git a/docs/knowledge-base/examples/treelist/treelist-inline-editing-validation/app.jsx b/docs/knowledge-base/examples/treelist/treelist-inline-editing-validation/app.jsx
deleted file mode 100644
index c2db9d78..00000000
--- a/docs/knowledge-base/examples/treelist/treelist-inline-editing-validation/app.jsx
+++ /dev/null
@@ -1,212 +0,0 @@
-import * as React from 'react';
-import {
- TreeList,
- TreeListToolbar,
- mapTree,
- extendDataItem,
- removeItems,
- modifySubItems,
- TreeListTextEditor,
- //TreeListBooleanEditor,
-} from '@progress/kendo-react-treelist';
-import { Input } from '@progress/kendo-react-inputs';
-import { Error } from '@progress/kendo-react-labels';
-import MyCommandCell from './my-command-cell';
-import employees from './data';
-const subItemsField = 'employees';
-const expandField = 'expanded';
-const editField = 'inEdit';
-
-const App = () => {
- const [state, setState] = React.useState({
- data: employees.slice(),
- expanded: [1, 2, 32],
- inEdit: [],
- });
-
- const [isValid, setIsValid] = React.useState(true);
-
- const MyCell = React.useCallback((props) => {
- console.log(props);
- let isValid = true;
- if (props.dataItem[props.field]) {
- if (props.dataItem[props.field].length <= 4) {
- isValid = false;
- setIsValid(false);
- } else {
- setIsValid(true);
- }
- } else {
- isValid = false;
- setIsValid(false);
- }
-
- const handleOnChange = (e) => {
- props.onChange({
- dataItem: props.dataItem,
- field: props.field,
- syntheticEvent: e.syntheticEvent,
- value: e.value,
- });
- };
- return (
-
- This is not valid }
-
- );
- }, []);
-
- const addChild = (dataItem) => {
- const newRecord = createNewItem();
- setState({
- ...state,
- inEdit: [...state.inEdit, newRecord],
- expanded: [...state.expanded, dataItem.id],
- data: modifySubItems(
- state.data,
- subItemsField,
- (item) => item.id === dataItem.id,
- (subItems) => [newRecord, ...subItems]
- ),
- });
- };
- const enterEdit = (dataItem) => {
- setState({
- ...state,
- inEdit: [...state.inEdit, extendDataItem(dataItem, subItemsField)],
- });
- };
- const save = (dataItem) => {
- const { isNew, inEdit, ...itemToSave } = dataItem;
- isValid &&
- setState({
- ...state,
- data: mapTree(state.data, subItemsField, (item) =>
- item.id === itemToSave.id ? itemToSave : item
- ),
- inEdit: state.inEdit.filter((i) => i.id !== itemToSave.id),
- });
- };
- const cancel = (editedItem) => {
- const { inEdit, data } = state;
- if (editedItem.isNew) {
- return remove(editedItem);
- }
- setState({
- ...state,
- data: mapTree(data, subItemsField, (item) =>
- item.id === editedItem.id ? inEdit.find((i) => i.id === item.id) : item
- ),
- inEdit: inEdit.filter((i) => i.id !== editedItem.id),
- });
- };
- const remove = (dataItem) => {
- setState({
- ...state,
- data: removeItems(state.data, subItemsField, (i) => i.id === dataItem.id),
- inEdit: state.inEdit.filter((i) => i.id !== dataItem.id),
- });
- };
- const onExpandChange = (e) => {
- setState({
- ...state,
- expanded: e.value
- ? state.expanded.filter((id) => id !== e.dataItem.id)
- : [...state.expanded, e.dataItem.id],
- });
- };
- const onItemChange = (event) => {
- const field = event.field;
- setState({
- ...state,
- data: mapTree(state.data, subItemsField, (item) =>
- item.id === event.dataItem.id
- ? extendDataItem(item, subItemsField, {
- [field]: event.value,
- })
- : item
- ),
- });
- };
- const addRecord = () => {
- const newRecord = createNewItem();
- setState({
- ...state,
- data: [newRecord, ...state.data],
- inEdit: [
- ...state.inEdit,
- {
- ...newRecord,
- },
- ],
- });
- };
- const createNewItem = () => {
- const timestamp = new Date().getTime();
- return {
- id: timestamp,
- isNew: true,
- };
- };
- const CommandCell = MyCommandCell(
- enterEdit,
- remove,
- save,
- cancel,
- addChild,
- editField
- );
- const columns = [
- {
- field: 'name',
- title: 'Name',
- width: '280px',
- editCell: MyCell,
- expandable: true,
- },
- {
- cell: CommandCell,
- width: '360px',
- },
- ];
- const { data, expanded, inEdit } = state;
- return (
-
- extendDataItem(item, subItemsField, {
- [expandField]: expanded.includes(item.id),
- [editField]: Boolean(inEdit.find((i) => i.id === item.id)),
- })
- )}
- editField={editField}
- expandField={expandField}
- subItemsField={subItemsField}
- onItemChange={onItemChange}
- onExpandChange={onExpandChange}
- columns={columns}
- toolbar={
-
-
- Add new
-
-
- }
- />
- );
-};
-
-export default App;
diff --git a/docs/knowledge-base/examples/treelist/treelist-inline-editing-validation/data.js b/docs/knowledge-base/examples/treelist/treelist-inline-editing-validation/data.js
deleted file mode 100644
index 2c97886e..00000000
--- a/docs/knowledge-base/examples/treelist/treelist-inline-editing-validation/data.js
+++ /dev/null
@@ -1,1149 +0,0 @@
-const employees = [
- {
- id: 1,
- name: 'Daryl Sweeney',
- reportsTo: null,
- phone: '(555) 924-9726',
- extension: 8253,
- hireDate: new Date(2012, 2, 7),
- fullTime: true,
- position: 'CEO',
- timeInPosition: 2,
- employees: [
- {
- id: 2,
- name: 'Guy Wooten',
- reportsTo: 1,
- phone: '(438) 738-4935',
- extension: 1155,
- hireDate: new Date(2010, 3, 3),
- fullTime: true,
- position: 'Chief Technical Officer',
- timeInPosition: 1,
- employees: [
- {
- id: 32,
- name: 'Buffy Weber',
- reportsTo: 2,
- phone: '(699) 838-6121',
- extension: 8933,
- hireDate: new Date(2011, 7, 11),
- fullTime: true,
- position: 'VP, Engineering',
- timeInPosition: 2,
- employees: [
- {
- id: 11,
- name: 'Hyacinth Hood',
- reportsTo: 32,
- phone: '(889) 345-2438',
- extension: 8564,
- hireDate: new Date(2014, 2, 3),
- fullTime: true,
- position: 'Team Lead',
- timeInPosition: 1,
- employees: [
- {
- id: 60,
- name: 'Akeem Carr',
- reportsTo: 11,
- phone: '(738) 136-2814',
- extension: 9353,
- hireDate: new Date(2011, 4, 21),
- fullTime: true,
- position: 'Junior Software Developer',
- timeInPosition: 2,
- },
- {
- id: 78,
- name: 'Rinah Simon',
- reportsTo: 11,
- phone: '(285) 912-5271',
- extension: 7795,
- hireDate: new Date(2012, 10, 11),
- fullTime: true,
- position: 'Software Developer',
- timeInPosition: 4,
- },
- ],
- },
- {
- id: 42,
- name: 'Gage Daniels',
- reportsTo: 32,
- phone: '(107) 290-6260',
- extension: 896,
- hireDate: new Date(2013, 5, 16),
- fullTime: true,
- position: 'Software Architect',
- timeInPosition: 5,
- },
- {
- id: 43,
- name: 'Constance Vazquez',
- reportsTo: 32,
- phone: '(800) 301-1978',
- extension: 5141,
- hireDate: new Date(2011, 6, 7),
- fullTime: true,
- position: 'Director, Engineering',
- timeInPosition: 1,
- employees: [
- {
- id: 46,
- name: 'Darrel Solis',
- reportsTo: 43,
- phone: '(327) 977-0216',
- extension: 7779,
- hireDate: new Date(2015, 4, 25),
- fullTime: true,
- position: 'Team Lead',
- timeInPosition: 4,
- employees: [
- {
- id: 47,
- name: 'Brian Yang',
- reportsTo: 46,
- phone: '(565) 146-5435',
- extension: 3885,
- hireDate: new Date(2012, 9, 27),
- fullTime: true,
- position: 'Senior Software Developer',
- timeInPosition: 3,
- },
- {
- id: 50,
- name: 'Lillian Bradshaw',
- reportsTo: 46,
- phone: '(323) 509-3479',
- extension: 5426,
- hireDate: new Date(2014, 5, 10),
- fullTime: true,
- position: 'Software Developer',
- timeInPosition: 2,
- },
- {
- id: 51,
- name: 'Christian Palmer',
- reportsTo: 46,
- phone: '(490) 421-8718',
- extension: 3706,
- hireDate: new Date(2012, 12, 27),
- fullTime: false,
- position: 'Technical Lead',
- timeInPosition: 1,
- },
- {
- id: 55,
- name: 'Summer Mosley',
- reportsTo: 46,
- phone: '(784) 962-2301',
- extension: 5492,
- hireDate: new Date(2010, 3, 2),
- fullTime: true,
- position: 'QA Engineer',
- timeInPosition: 5,
- },
- {
- id: 56,
- name: 'Barry Ayers',
- reportsTo: 46,
- phone: '(452) 373-9227',
- extension: 1308,
- hireDate: new Date(2011, 10, 11),
- fullTime: true,
- position: 'Software Developer',
- timeInPosition: 4,
- },
- {
- id: 59,
- name: 'Keiko Espinoza',
- reportsTo: 46,
- phone: '(226) 600-5305',
- extension: 9363,
- hireDate: new Date(2011, 9, 18),
- fullTime: true,
- position: 'Junior QA Engineer',
- timeInPosition: 4,
- },
- {
- id: 61,
- name: 'Candace Pickett',
- reportsTo: 46,
- phone: '(120) 117-7475',
- extension: 5178,
- hireDate: new Date(2010, 5, 6),
- fullTime: true,
- position: 'Support Officer',
- timeInPosition: 0,
- },
- ],
- },
- {
- id: 63,
- name: 'Mia Caldwell',
- reportsTo: 43,
- phone: '(848) 636-6470',
- extension: 6368,
- hireDate: new Date(2012, 10, 7),
- fullTime: true,
- position: 'Team Lead',
- timeInPosition: 4,
- employees: [
- {
- id: 65,
- name: 'Thomas Terry',
- reportsTo: 63,
- phone: '(764) 831-4248',
- extension: 3574,
- hireDate: new Date(2015, 6, 15),
- fullTime: false,
- position: 'Senior Enterprise Support Officer',
- timeInPosition: 2,
- },
- {
- id: 67,
- name: 'Ruth Downs',
- reportsTo: 63,
- phone: '(138) 991-1440',
- extension: 8067,
- hireDate: new Date(2013, 7, 13),
- fullTime: true,
- position: 'Senior Software Developer',
- timeInPosition: 5,
- },
- {
- id: 70,
- name: 'Yasir Wilder',
- reportsTo: 63,
- phone: '(759) 701-8665',
- extension: 8350,
- hireDate: new Date(2010, 11, 8),
- fullTime: true,
- position: 'Senior QA Enginner',
- timeInPosition: 3,
- },
- {
- id: 71,
- name: 'Flavia Short',
- reportsTo: 63,
- phone: '(370) 133-9238',
- extension: 6390,
- hireDate: new Date(2013, 2, 21),
- fullTime: true,
- position: 'Support Officer',
- timeInPosition: 0,
- },
- {
- id: 74,
- name: 'Aaron Roach',
- reportsTo: 63,
- phone: '(958) 717-9230',
- extension: 4899,
- hireDate: new Date(2011, 7, 30),
- fullTime: true,
- position: 'Junior Software Developer',
- timeInPosition: 6,
- },
- {
- id: 75,
- name: 'Eric Russell',
- reportsTo: 63,
- phone: '(516) 575-8505',
- extension: 2224,
- hireDate: new Date(2012, 10, 28),
- fullTime: true,
- position: 'Software Developer',
- timeInPosition: 3,
- },
- {
- id: 76,
- name: 'Cheyenne Olson',
- reportsTo: 63,
- phone: '(241) 645-0257',
- extension: 9181,
- hireDate: new Date(2015, 5, 19),
- fullTime: true,
- position: 'Software Developer',
- timeInPosition: 5,
- },
- {
- id: 77,
- name: 'Shaine Avila',
- reportsTo: 63,
- phone: '(844) 435-1360',
- extension: 3374,
- hireDate: new Date(2010, 1, 31),
- fullTime: true,
- position: 'UI Designer',
- timeInPosition: 5,
- },
- {
- id: 81,
- name: 'Chantale Long',
- reportsTo: 63,
- phone: '(252) 419-6891',
- extension: 7868,
- hireDate: new Date(2010, 6, 17),
- fullTime: true,
- position: 'Senior QA Enginner',
- timeInPosition: 1,
- },
- {
- id: 83,
- name: 'Dane Cruz',
- reportsTo: 63,
- phone: '(946) 701-6165',
- extension: 3828,
- hireDate: new Date(2014, 10, 8),
- fullTime: true,
- position: 'Junior Software Developer',
- timeInPosition: 2,
- },
- {
- id: 84,
- name: 'Regan Patterson',
- reportsTo: 63,
- phone: '(265) 946-1765',
- extension: 6955,
- hireDate: new Date(2012, 3, 1),
- fullTime: true,
- position: 'Technical Writer',
- timeInPosition: 6,
- },
- {
- id: 85,
- name: 'Drew Mckay',
- reportsTo: 63,
- phone: '(327) 293-0162',
- extension: 6904,
- hireDate: new Date(2011, 3, 25),
- fullTime: true,
- position: 'Senior Software Developer',
- timeInPosition: 3,
- },
- {
- id: 88,
- name: 'Bevis Miller',
- reportsTo: 63,
- phone: '(525) 557-0169',
- extension: 6978,
- hireDate: new Date(2011, 4, 19),
- fullTime: true,
- position: 'Senior Software Developer',
- timeInPosition: 5,
- },
- {
- id: 89,
- name: 'Bruce Mccarty',
- reportsTo: 63,
- phone: '(936) 777-8730',
- extension: 6552,
- hireDate: new Date(2014, 3, 28),
- fullTime: true,
- position: 'Support Officer',
- timeInPosition: 5,
- },
- ],
- },
- {
- id: 90,
- name: 'Ocean Blair',
- reportsTo: 43,
- phone: '(343) 586-6614',
- extension: 1424,
- hireDate: new Date(2011, 4, 27),
- fullTime: true,
- position: 'Team Lead',
- timeInPosition: 2,
- employees: [
- {
- id: 91,
- name: 'Guinevere Osborn',
- reportsTo: 90,
- phone: '(424) 741-0006',
- extension: 3166,
- hireDate: new Date(2014, 11, 19),
- fullTime: true,
- position: 'Software Developer',
- timeInPosition: 3,
- },
- {
- id: 92,
- name: 'Olga Strong',
- reportsTo: 90,
- phone: '(949) 417-1168',
- extension: 4568,
- hireDate: new Date(2015, 5, 28),
- fullTime: true,
- position: 'Graphic Designer',
- timeInPosition: 4,
- },
- {
- id: 93,
- name: 'Robert Orr',
- reportsTo: 90,
- phone: '(977) 341-3721',
- extension: 9241,
- hireDate: new Date(2012, 8, 20),
- fullTime: false,
- position: 'Support Officer',
- timeInPosition: 6,
- },
- {
- id: 95,
- name: 'Odette Sears',
- reportsTo: 90,
- phone: '(264) 818-6576',
- extension: 1914,
- hireDate: new Date(2013, 7, 5),
- fullTime: true,
- position: 'Senior Software Developer',
- timeInPosition: 3,
- },
- ],
- },
- ],
- },
- {
- id: 45,
- name: 'Zelda Medina',
- reportsTo: 32,
- phone: '(563) 359-6023',
- extension: 2600,
- hireDate: new Date(2012, 11, 6),
- fullTime: true,
- position: 'QA Architect',
- timeInPosition: 2,
- },
- ],
- },
- {
- id: 52,
- name: 'Skyler Cleveland',
- reportsTo: 2,
- phone: '(217) 280-5300',
- extension: 9655,
- hireDate: new Date(2014, 11, 10),
- fullTime: true,
- position: 'VP, Engineering',
- timeInPosition: 2,
- employees: [
- {
- id: 40,
- name: 'Karleigh Garza',
- reportsTo: 52,
- phone: '(370) 983-8796',
- extension: 4044,
- hireDate: new Date(2014, 3, 10),
- fullTime: true,
- position: 'Team Lead',
- timeInPosition: 1,
- employees: [
- {
- id: 49,
- name: 'Elmo Tyson',
- reportsTo: 40,
- phone: '(344) 496-9555',
- extension: 6950,
- hireDate: new Date(2014, 9, 18),
- fullTime: true,
- position: 'Software Developer',
- timeInPosition: 4,
- },
- {
- id: 72,
- name: 'Stacey Lynn',
- reportsTo: 40,
- phone: '(140) 772-7509',
- extension: 8396,
- hireDate: new Date(2014, 7, 31),
- fullTime: false,
- position: 'QA Engineer',
- timeInPosition: 1,
- employees: [
- {
- id: 80,
- name: 'Meredith Parrish',
- reportsTo: 72,
- phone: '(714) 284-2408',
- extension: 7675,
- hireDate: new Date(2012, 11, 13),
- fullTime: true,
- position: 'Junior QA Engineer',
- timeInPosition: 6,
- },
- ],
- },
- {
- id: 96,
- name: 'Cassady Whitley',
- reportsTo: 40,
- phone: '(996) 587-8405',
- extension: 780,
- hireDate: new Date(2013, 5, 7),
- fullTime: true,
- position: 'Software Developer',
- timeInPosition: 5,
- },
- {
- id: 97,
- name: 'Haviva Campbell',
- reportsTo: 40,
- phone: '(263) 887-4689',
- extension: 2808,
- hireDate: new Date(2013, 3, 5),
- fullTime: true,
- position: 'Support Officer',
- timeInPosition: 2,
- },
- {
- id: 98,
- name: 'Cameron Ayers',
- reportsTo: 40,
- phone: '(470) 709-8030',
- extension: 2893,
- hireDate: new Date(2013, 8, 28),
- fullTime: true,
- position: 'Support Officer',
- timeInPosition: 3,
- },
- {
- id: 99,
- name: 'Martha Sargent',
- reportsTo: 40,
- phone: '(587) 812-4418',
- extension: 5099,
- hireDate: new Date(2014, 2, 27),
- fullTime: true,
- position: 'Senior Software Developer',
- timeInPosition: 3,
- },
- {
- id: 100,
- name: 'Darrel Kinney',
- reportsTo: 40,
- phone: '(888) 483-9606',
- extension: 4779,
- hireDate: new Date(2014, 3, 24),
- fullTime: false,
- position: 'Graphic Designer',
- timeInPosition: 1,
- },
- ],
- },
- {
- id: 54,
- name: 'Kuame Frye',
- reportsTo: 52,
- phone: '(360) 721-5886',
- extension: 2730,
- hireDate: new Date(2010, 11, 17),
- fullTime: true,
- position: 'Software Architect',
- timeInPosition: 1,
- employees: [
- {
- id: 64,
- name: 'Ori Wynn',
- reportsTo: 54,
- phone: '(366) 342-0166',
- extension: 7252,
- hireDate: new Date(2015, 6, 21),
- fullTime: true,
- position: 'Team Lead',
- timeInPosition: 0,
- employees: [
- {
- id: 6,
- name: 'Moses Duncan',
- reportsTo: 64,
- phone: '(421) 611-4814',
- extension: 669,
- hireDate: new Date(2010, 5, 24),
- fullTime: true,
- position: 'Software Developer',
- timeInPosition: 6,
- },
- {
- id: 12,
- name: 'Jamalia Wallace',
- reportsTo: 64,
- phone: '(611) 391-8016',
- extension: 1952,
- hireDate: new Date(2011, 9, 8),
- fullTime: true,
- position: 'Junior Designer',
- timeInPosition: 3,
- },
- {
- id: 62,
- name: 'Palmer Gregory',
- reportsTo: 64,
- phone: '(360) 430-2505',
- extension: 4337,
- hireDate: new Date(2014, 8, 30),
- fullTime: true,
- position: 'Designer',
- timeInPosition: 4,
- },
- {
- id: 68,
- name: 'Mallory Gilliam',
- reportsTo: 64,
- phone: '(878) 423-2971',
- extension: 1341,
- hireDate: new Date(2014, 7, 24),
- fullTime: true,
- position: 'Senior Software Developer',
- timeInPosition: 1,
- },
- {
- id: 73,
- name: 'Ima Hughes',
- reportsTo: 64,
- phone: '(905) 485-8001',
- extension: 1273,
- hireDate: new Date(2013, 6, 3),
- fullTime: true,
- position: 'Software Developer',
- timeInPosition: 0,
- },
- {
- id: 79,
- name: 'Duncan Mathews',
- reportsTo: 64,
- phone: '(790) 971-9709',
- extension: 4573,
- hireDate: new Date(2011, 8, 21),
- fullTime: false,
- position: 'Software Developer',
- timeInPosition: 3,
- },
- ],
- },
- ],
- },
- {
- id: 69,
- name: 'Sierra Beasley',
- reportsTo: 52,
- phone: '(271) 953-1968',
- extension: 3324,
- hireDate: new Date(2011, 4, 2),
- fullTime: true,
- position: 'Team Lead',
- timeInPosition: 3,
- employees: [
- {
- id: 38,
- name: 'Elton Tucker',
- reportsTo: 69,
- phone: '(988) 930-9331',
- extension: 9216,
- hireDate: new Date(2015, 6, 4),
- fullTime: true,
- position: 'Support Officer',
- timeInPosition: 1,
- },
- {
- id: 39,
- name: 'Iona Brennan',
- reportsTo: 69,
- phone: '(356) 563-0600',
- extension: 5634,
- hireDate: new Date(2010, 9, 23),
- fullTime: true,
- position: 'Junior Support Officer',
- timeInPosition: 4,
- },
- {
- id: 53,
- name: 'Paul Campos',
- reportsTo: 69,
- phone: '(899) 205-1689',
- extension: 8586,
- hireDate: new Date(2011, 3, 17),
- fullTime: true,
- position: 'Interaction Designer',
- timeInPosition: 4,
- employees: [
- {
- id: 66,
- name: 'Gloria Freeman',
- reportsTo: 53,
- phone: '(344) 950-9168',
- extension: 4738,
- hireDate: new Date(2013, 5, 6),
- fullTime: true,
- position: 'Junior Interaction Designer',
- timeInPosition: 0,
- },
- ],
- },
- {
- id: 57,
- name: 'Alyssa Hansen',
- reportsTo: 69,
- phone: '(548) 925-4799',
- extension: 4716,
- hireDate: new Date(2011, 1, 19),
- fullTime: true,
- position: 'Junior Software Developer',
- timeInPosition: 6,
- },
- {
- id: 82,
- name: 'Yael Walters',
- reportsTo: 69,
- phone: '(311) 489-8191',
- extension: 6520,
- hireDate: new Date(2013, 7, 4),
- fullTime: true,
- position: 'Software Developer',
- timeInPosition: 6,
- },
- {
- id: 87,
- name: 'Dahlia Hunt',
- reportsTo: 69,
- phone: '(720) 339-5202',
- extension: 3690,
- hireDate: new Date(2011, 3, 26),
- fullTime: true,
- position: 'Senior Software Developer',
- timeInPosition: 4,
- },
- {
- id: 94,
- name: 'Adria Stanley',
- reportsTo: 69,
- phone: '(536) 357-6391',
- extension: 3374,
- hireDate: new Date(2014, 7, 26),
- fullTime: true,
- position: 'Software Developer',
- timeInPosition: 0,
- },
- ],
- },
- ],
- },
- ],
- },
- {
- id: 3,
- name: 'Priscilla Frank',
- reportsTo: 1,
- phone: '(278) 927-2684',
- extension: 4183,
- hireDate: new Date(2014, 11, 30),
- fullTime: true,
- position: 'Chief Product Officer',
- timeInPosition: 2,
- employees: [
- {
- id: 4,
- name: 'Ursula Holmes',
- reportsTo: 3,
- phone: '(302) 760-2034',
- extension: 2226,
- hireDate: new Date(2011, 6, 6),
- fullTime: true,
- position: 'EVP, Product Strategy',
- timeInPosition: 4,
- },
- {
- id: 24,
- name: 'Melvin Carrillo',
- reportsTo: 3,
- phone: '(348) 933-5167',
- extension: 2482,
- hireDate: new Date(2014, 7, 21),
- fullTime: true,
- position: 'Director, Developer Relations',
- timeInPosition: 6,
- employees: [
- {
- id: 29,
- name: 'Martha Chavez',
- reportsTo: 24,
- phone: '(860) 754-3464',
- extension: 4531,
- hireDate: new Date(2013, 3, 12),
- fullTime: true,
- position: 'Developer Advocate',
- timeInPosition: 0,
- },
- {
- id: 30,
- name: 'Oren Fox',
- reportsTo: 24,
- phone: '(572) 414-3299',
- extension: 4849,
- hireDate: new Date(2013, 5, 14),
- fullTime: false,
- position: 'Developer Advocate',
- timeInPosition: 0,
- },
- {
- id: 41,
- name: 'Amos Barr',
- reportsTo: 24,
- phone: '(470) 381-3718',
- extension: 7643,
- hireDate: new Date(2010, 3, 9),
- fullTime: true,
- position: 'Developer Advocate',
- timeInPosition: 2,
- },
- ],
- },
- ],
- },
- {
- id: 5,
- name: 'Anika Vega',
- reportsTo: 1,
- phone: '(910) 714-1802',
- extension: 6353,
- hireDate: new Date(2010, 2, 25),
- fullTime: true,
- position: 'Chief Process Officer',
- timeInPosition: 5,
- employees: [
- {
- id: 10,
- name: 'Vernon Ballard',
- reportsTo: 5,
- phone: '(702) 185-8890',
- extension: 9242,
- hireDate: new Date(2015, 6, 26),
- fullTime: true,
- position: 'Director Facilities',
- timeInPosition: 2,
- employees: [
- {
- id: 16,
- name: 'Ali Guy',
- reportsTo: 10,
- phone: '(429) 912-6578',
- extension: 2225,
- hireDate: new Date(2014, 6, 29),
- fullTime: true,
- position: 'Operations Manager',
- timeInPosition: 4,
- employees: [
- {
- id: 23,
- name: 'Bruce Reilly',
- reportsTo: 16,
- phone: '(995) 243-7302',
- extension: 4815,
- hireDate: new Date(2015, 4, 1),
- fullTime: true,
- position: 'Head of Security',
- timeInPosition: 1,
- employees: [
- {
- id: 26,
- name: 'Rowan Morin',
- reportsTo: 23,
- phone: '(792) 141-4374',
- extension: 1844,
- hireDate: new Date(2015, 7, 30),
- fullTime: true,
- position: 'Building Security',
- timeInPosition: 5,
- },
- {
- id: 44,
- name: 'Benedict Soto',
- reportsTo: 23,
- phone: '(822) 282-5991',
- extension: 6422,
- hireDate: new Date(2012, 6, 1),
- fullTime: false,
- position: 'Building Security',
- timeInPosition: 4,
- },
- ],
- },
- {
- id: 48,
- name: 'Maryam Rios',
- reportsTo: 16,
- phone: '(673) 764-6720',
- extension: 531,
- hireDate: new Date(2014, 3, 3),
- fullTime: true,
- position: 'Team Lead, Personal Assistants',
- timeInPosition: 1,
- employees: [
- {
- id: 58,
- name: 'Rose Mcintyre',
- reportsTo: 48,
- phone: '(771) 615-4590',
- extension: 7094,
- hireDate: new Date(2015, 6, 30),
- fullTime: false,
- position: 'Personal Assistant',
- timeInPosition: 6,
- },
- ],
- },
- ],
- },
- ],
- },
- ],
- },
- {
- id: 7,
- name: 'Nevada Hart',
- reportsTo: 1,
- phone: '(254) 220-1576',
- extension: 6649,
- hireDate: new Date(2015, 8, 17),
- fullTime: true,
- position: 'Chief Financial Officer',
- timeInPosition: 6,
- employees: [
- {
- id: 14,
- name: 'Zena Sanford',
- reportsTo: 7,
- phone: '(437) 568-8160',
- extension: 4452,
- hireDate: new Date(2010, 11, 30),
- fullTime: true,
- position: 'VP, Finance',
- timeInPosition: 4,
- },
- {
- id: 15,
- name: 'Quinlan Howe',
- reportsTo: 7,
- phone: '(464) 334-9748',
- extension: 8722,
- hireDate: new Date(2011, 6, 9),
- fullTime: false,
- position: 'Senior Director, Finance',
- timeInPosition: 0,
- employees: [
- {
- id: 17,
- name: 'Indira Lopez',
- reportsTo: 15,
- phone: '(301) 368-0938',
- extension: 8027,
- hireDate: new Date(2013, 8, 18),
- fullTime: true,
- position: 'ERP Team Lead',
- timeInPosition: 4,
- employees: [
- {
- id: 18,
- name: 'Lareina Lara',
- reportsTo: 17,
- phone: '(233) 457-7482',
- extension: 1996,
- hireDate: new Date(2010, 4, 30),
- fullTime: true,
- position: 'ERP Solutions Consultant',
- timeInPosition: 6,
- },
- {
- id: 19,
- name: 'Maxwell Wise',
- reportsTo: 17,
- phone: '(570) 494-2531',
- extension: 9865,
- hireDate: new Date(2012, 5, 19),
- fullTime: true,
- position: 'Systems Engineer',
- timeInPosition: 0,
- },
- ],
- },
- {
- id: 20,
- name: 'Hunter Mcbride',
- reportsTo: 15,
- phone: '(409) 442-7016',
- extension: 4284,
- hireDate: new Date(2012, 10, 20),
- fullTime: true,
- position: 'Senior Director, Tax',
- timeInPosition: 3,
- },
- {
- id: 21,
- name: 'Jana Serrano',
- reportsTo: 15,
- phone: '(910) 718-4620',
- extension: 6970,
- hireDate: new Date(2010, 4, 2),
- fullTime: true,
- position: 'Financial Planning & Analysis Manager',
- timeInPosition: 2,
- },
- {
- id: 22,
- name: 'Zachery Shelton',
- reportsTo: 15,
- phone: '(310) 240-8675',
- extension: 4527,
- hireDate: new Date(2011, 11, 23),
- fullTime: false,
- position: 'Corporate Finance Controller',
- timeInPosition: 6,
- employees: [
- {
- id: 28,
- name: 'Cullen Freeman',
- reportsTo: 22,
- phone: '(136) 554-8814',
- extension: 9861,
- hireDate: new Date(2014, 3, 15),
- fullTime: true,
- position: 'Treasurer Accountant',
- timeInPosition: 2,
- },
- {
- id: 31,
- name: 'Quinn Dean',
- reportsTo: 22,
- phone: '(152) 613-3507',
- extension: 6621,
- hireDate: new Date(2015, 1, 29),
- fullTime: true,
- position: 'Accountant',
- timeInPosition: 6,
- },
- {
- id: 34,
- name: 'Samantha Brady',
- reportsTo: 22,
- phone: '(206) 398-4328',
- extension: 1157,
- hireDate: new Date(2011, 2, 13),
- fullTime: true,
- position: 'Accountant',
- timeInPosition: 2,
- employees: [
- {
- id: 35,
- name: 'Tamara Green',
- reportsTo: 34,
- phone: '(219) 248-2789',
- extension: 4880,
- hireDate: new Date(2014, 2, 4),
- fullTime: true,
- position: 'Junior Accountant',
- timeInPosition: 6,
- },
- ],
- },
- {
- id: 36,
- name: 'Olympia Coleman',
- reportsTo: 22,
- phone: '(944) 853-6383',
- extension: 2136,
- hireDate: new Date(2013, 7, 31),
- fullTime: true,
- position: 'Collections Manager',
- timeInPosition: 3,
- },
- {
- id: 37,
- name: 'Breanna Goodwin',
- reportsTo: 22,
- phone: '(379) 988-9630',
- extension: 5898,
- hireDate: new Date(2010, 5, 23),
- fullTime: false,
- position: 'Payroll Specialist',
- timeInPosition: 4,
- },
- ],
- },
- {
- id: 27,
- name: 'Curran Travis',
- reportsTo: 15,
- phone: '(438) 135-8033',
- extension: 3841,
- hireDate: new Date(2011, 6, 13),
- fullTime: true,
- position: 'Finance Controller',
- timeInPosition: 5,
- },
- ],
- },
- ],
- },
- {
- id: 8,
- name: 'Hunter Fry',
- reportsTo: 1,
- phone: '(766) 358-9858',
- extension: 3741,
- hireDate: new Date(2011, 2, 12),
- fullTime: false,
- position: 'General Counsel',
- timeInPosition: 3,
- employees: [
- {
- id: 9,
- name: 'Kuame Carrillo',
- reportsTo: 8,
- phone: '(192) 383-1305',
- extension: 9228,
- hireDate: new Date(2011, 2, 22),
- fullTime: true,
- position: 'Associate General Councel',
- timeInPosition: 0,
- },
- {
- id: 13,
- name: 'Stacy Todd',
- reportsTo: 8,
- phone: '(925) 286-3327',
- extension: 8565,
- hireDate: new Date(2014, 7, 5),
- fullTime: true,
- position: 'Councel',
- timeInPosition: 0,
- },
- {
- id: 33,
- name: 'Valentine Wyatt',
- reportsTo: 8,
- phone: '(165) 166-6205',
- extension: 3588,
- hireDate: new Date(2015, 5, 21),
- fullTime: true,
- position: 'Councel',
- timeInPosition: 5,
- },
- {
- id: 86,
- name: 'Daniel Mccarthy',
- reportsTo: 8,
- phone: '(624) 483-6206',
- extension: 9112,
- hireDate: new Date(2013, 12, 3),
- fullTime: false,
- position: 'Staff Attorney',
- timeInPosition: 0,
- },
- ],
- },
- ],
- },
- ];
- export default employees;
-
\ No newline at end of file
diff --git a/docs/knowledge-base/examples/treelist/treelist-inline-editing-validation/main.jsx b/docs/knowledge-base/examples/treelist/treelist-inline-editing-validation/main.jsx
deleted file mode 100644
index 36d8526e..00000000
--- a/docs/knowledge-base/examples/treelist/treelist-inline-editing-validation/main.jsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import * as React from 'react';
-import { createRoot } from 'react-dom/client';
-import App from './app'
-
-const root = createRoot(document.querySelector('my-app'));
-root.render(
- save(dataItem)}
- >
- {dataItem.isNew ? 'Add' : 'Update'}
-
- cancel(dataItem)}
- >
- {dataItem.isNew ? 'Discard' : 'Cancel'}
-
-
- ) : (
-
- addChild(dataItem)}
- >
- Add Employee
-
- enterEdit(dataItem)}
- >
- Edit
-
- remove(dataItem)}
- >
- Remove
-
-
- );
- }
- };
-}
diff --git a/docs/knowledge-base/examples/treelist/treelist-locked-columns-resizing/app.jsx b/docs/knowledge-base/examples/treelist/treelist-locked-columns-resizing/app.jsx
deleted file mode 100644
index 80cb362c..00000000
--- a/docs/knowledge-base/examples/treelist/treelist-locked-columns-resizing/app.jsx
+++ /dev/null
@@ -1,108 +0,0 @@
-import * as React from 'react';
-import {
- TreeList,
- mapTree,
- extendDataItem,
-} from '@progress/kendo-react-treelist';
-import employees from './data';
-const subItemsField = 'employees';
-const expandField = 'expanded';
-const columns = [
- {
- field: 'name',
- title: 'Name',
- width: '310px',
- expandable: true,
- key: 1,
- },
- {
- field: 'position',
- title: 'Position',
- width: '260px',
- locked: true,
- key: 2,
- },
- {
- field: 'hireDate',
- title: 'Hire Date',
- width: '160px',
- format: '{0:d}',
- key: 3,
- },
- {
- field: 'timeInPosition',
- title: 'Year(s) in Position',
- width: '160px',
- key: 4,
- },
- {
- field: 'fullTime',
- title: 'Full Time',
- width: '150px',
- key: 5,
- },
-];
-
-const App = () => {
- const [state, setState] = React.useState({
- expanded: [1, 2, 32],
- columns,
- });
- const table = React.useRef();
-
- const onColumnResize = (event) => {
- //setting the sum of all columns width to the table element
- if (table) {
- table.current.element.children[0].style.width = `${event.totalWidth}px`;
- setState({ ...state, columns: event.columns });
- }
-
- if (event.end) {
- setState({ ...state, columns: event.columns });
- }
- };
-
- const onExpandChange = (e) => {
- setState({
- ...state,
- expanded: e.value
- ? state.expanded.filter((id) => id !== e.dataItem.id)
- : [...state.expanded, e.dataItem.id],
- });
- };
-
- const addExpandField = (dataTree) => {
- const expanded = state.expanded;
- return mapTree(dataTree, subItemsField, (item) =>
- extendDataItem(item, subItemsField, {
- [expandField]: expanded.includes(item.id),
- })
- );
- };
-
- return (
-
- {showButton && Add {parentName} }
- {visible && (
-
- {
- handleSubmit(e, parentName);
- }}
- >
- Submit
-
-
- )}
-
-
- );
-};
-
-export default App;
diff --git a/docs/knowledge-base/examples/treeview/treeview-adding-nodes/main.jsx b/docs/knowledge-base/examples/treeview/treeview-adding-nodes/main.jsx
deleted file mode 100644
index 36d8526e..00000000
--- a/docs/knowledge-base/examples/treeview/treeview-adding-nodes/main.jsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import * as React from 'react';
-import { createRoot } from 'react-dom/client';
-import App from './app'
-
-const root = createRoot(document.querySelector('my-app'));
-root.render({props.item.text}
- currentContext.deleteItem(props)}
- >
-
- );
-};
-
-const App = () => {
- const [treeData, setTreeData] = React.useState(tree);
- const searchRecursivly = (id, items) => {
- let newItems = [];
-
- items.forEach((item) => {
- if (item.id != id) {
- if (item.items && item.items.length > 0) {
- item.items = searchRecursivly(id, item.items);
- }
- newItems.push(item);
- }
- });
- return newItems;
- };
-
- const deleteItem = (props) => {
- let newItems = [];
-
- treeData.forEach((item) => {
- if (item.id != props.item.id) {
- if (item.items && item.items.length > 0) {
- item.items = searchRecursivly(props.item.id, item.items);
- }
- newItems.push(item);
- }
- });
-
- console.log(newItems);
- setTreeData(newItems);
- };
- return (
-
- {' '}
-
- );
-};
-
-export default App;
diff --git a/docs/knowledge-base/examples/treeview/treeview-deleting/main.jsx b/docs/knowledge-base/examples/treeview/treeview-deleting/main.jsx
deleted file mode 100644
index 36d8526e..00000000
--- a/docs/knowledge-base/examples/treeview/treeview-deleting/main.jsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import * as React from 'react';
-import { createRoot } from 'react-dom/client';
-import App from './app'
-
-const root = createRoot(document.querySelector('my-app'));
-root.render(
-
- );
- }
- return {props.item.text} ;
- };
- onItemClick = (event) => {
- event.item.edit = true;
- this.forceUpdate();
- };
- onExpandChange = (event) => {
- event.item.expanded = !event.item.expanded;
- this.forceUpdate();
- };
-}
-
-export default App;
diff --git a/docs/knowledge-base/examples/treeview/treeview-editing/main.jsx b/docs/knowledge-base/examples/treeview/treeview-editing/main.jsx
deleted file mode 100644
index 36d8526e..00000000
--- a/docs/knowledge-base/examples/treeview/treeview-editing/main.jsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import * as React from 'react';
-import { createRoot } from 'react-dom/client';
-import App from './app'
-
-const root = createRoot(document.querySelector('my-app'));
-root.render(
-
-
- );
-};
-
-export default App;
diff --git a/docs/knowledge-base/examples/upload/upload-change-messages/main.jsx b/docs/knowledge-base/examples/upload/upload-change-messages/main.jsx
deleted file mode 100644
index 36d8526e..00000000
--- a/docs/knowledge-base/examples/upload/upload-change-messages/main.jsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import * as React from 'react';
-import { createRoot } from 'react-dom/client';
-import App from './app'
-
-const root = createRoot(document.querySelector('my-app'));
-root.render(
- Upload }
- multiple={true}
- defaultFiles={[]}
- withCredentials={false}
- saveUrl={'https://demos.telerik.com/kendo-ui/service-v4/upload/save'}
- removeUrl={
- 'https://demos.telerik.com/kendo-ui/service-v4/upload/remove'
- }
- />
-
- );
-};
-
-export default App;
diff --git a/docs/knowledge-base/examples/upload/upload-icon-for-upload-button/main.jsx b/docs/knowledge-base/examples/upload/upload-icon-for-upload-button/main.jsx
deleted file mode 100644
index 36d8526e..00000000
--- a/docs/knowledge-base/examples/upload/upload-icon-for-upload-button/main.jsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import * as React from 'react';
-import { createRoot } from 'react-dom/client';
-import App from './app'
-
-const root = createRoot(document.querySelector('my-app'));
-root.render(
-
-
- Product Version
- 7.0.2
-
-
- Product
- Progress® KendoReact
-
-
-
-
-## Description
-
-I want to apply conditional cell styling in the ExcelExport component within my application. Specifically, I need to format cells as bold based on the presence of a `is_total` flag in the row data. However, the `is_total` flag should not be included in the exported Excel data.
-
-## Solution
-
-To achieve conditional cell styling in the ExcelExport, set a flag variable to the exported data and apply the required styles if the flag is set to `true`
-
-{% meta id:index height:330 %}
-{% embed_file excel/excel-conditional-styling.jsx preview %}
-{% endmeta %}
diff --git a/docs/knowledge-base/excel-export-of-both-parent-and-child-grid-data.md b/docs/knowledge-base/excel-export-of-both-parent-and-child-grid-data.md
deleted file mode 100644
index 4c6f27aa..00000000
--- a/docs/knowledge-base/excel-export-of-both-parent-and-child-grid-data.md
+++ /dev/null
@@ -1,40 +0,0 @@
----
-title: Export to Excel Both Parent and Child Grid Data
-description: An example on how to export to Excel both parent and child KendoReact Grids.
-type: how-to
-page_title: Excel Export of Both Parent and Child Grid Data - KendoReact Grid
-slug: excel-export-of-both-parent-and-child-grid-data
-position:
-tags: grid, export, excel
-ticketid: 1424691
-res_type: kb
-category: knowledge-base
----
-
-## Environment
-
-
-
- Product Version
- 3.0.0
-
-
- Product
- Progress® KendoReact
-
-
-
-
-
-## Description
-I have a parent Grid with child Grids as details, how to export all to Excel.
-
-## Solution
-This requires using a chain of Promises to request the data for all child Grids and append it to the exported document after each parent row item.
-
-This is an example showcasing this. The example contains comments for the most specific parts:
-
-{% meta id:index height:760 %}
-{% embed_file grid/excel-export-parent-child/app.jsx preview %}
-{% embed_file grid/excel-export-parent-child/main.jsx %}
-{% endmeta %}
diff --git a/docs/knowledge-base/excel-export-with-column-reorder.md b/docs/knowledge-base/excel-export-with-column-reorder.md
deleted file mode 100644
index 985091f8..00000000
--- a/docs/knowledge-base/excel-export-with-column-reorder.md
+++ /dev/null
@@ -1,41 +0,0 @@
----
-title: Export to Excel Grid Reordered Columns
-description: An example on how to export to Excel the Grid columns after they have been reordered.
-type: how-to
-page_title: Export to Excel Grid Reordered Columns - KendoReact Grid
-slug: excel-export-of-both-parent-and-child-grid-data
-position:
-tags: grid, export, excel
-ticketid: 1580886
-res_type: kb
-category: knowledge-base
----
-
-## Environment
-
-
-
- Product Version
- 5.5.0
-
-
- Product
- Progress® KendoReact
-
-
-
-
-## Description
-I want to maintain the column orders when I export the Grid to Excel, how can I achieve this?
-
-## Solution
-This requires setting the columns inside the ExcelExport, then sorting and updating the gridColumns inside the onColumnReorder event.
-
-This is an example showcasing this approach:
-
-{% meta id:index height:600 %}
-{% embed_file grid/excel-export-with-column-reorder/app.jsx preview %}
-{% embed_file grid/excel-export-with-column-reorder/main.jsx %}
-{% embed_file grid/excel-export-with-column-reorder/products.json %}
-{% endmeta %}
-
diff --git a/docs/knowledge-base/excel-export-with-custom-header-footer.md b/docs/knowledge-base/excel-export-with-custom-header-footer.md
deleted file mode 100644
index a8d9ee16..00000000
--- a/docs/knowledge-base/excel-export-with-custom-header-footer.md
+++ /dev/null
@@ -1,49 +0,0 @@
----
-title: Export Data to Excel with Custom Header and Footer
-description: An example on how to export data to Excel with a custom header and footer when working with the KendoReact Grid.
-type: how-to
-page_title: Export Data to Excel with Custom Headers and Footers - KendoReact Grid
-slug: excel-export-with-custom-header-footer
-tags: grid, kendoreact, export, excel, header, footer
-ticketid: 1463826
-res_type: kb
-category: knowledge-base
----
-
-## Environment
-
-
-
-
- Product Version
- 3.15.0
-
-
- Product
- Progress® KendoReact
-
-
-
-
-
-## Description
-
-How can I add a custom header and footer to the exported data to Excel?
-
-## Solution
-
-This can be done by customizing the [Workbook](https://www.telerik.com/kendo-react-ui/components/excelexport/customization/) that will be exported. In this case, we have to add new rows to the current rows collection.
-
-The following example shows how to:
-
-1. Add a new row at the beginning and at the end of the workbook.
-2. Apply [additional settings](https://www.telerik.com/kendo-react-ui/components/excelexport/api/KendoOoxml/) to the cells.
-3. Freeze the first two rows in order to have the header and the column titles to be visible when scrolling.
-
-{% meta id:index height:640 %}
-{% embed_file grid/excel-export-header-footer/app.jsx preview %}
-{% embed_file grid/excel-export-header-footer/main.jsx %}
-{% embed_file shared/shared-products.json %}
-{% endmeta %}
-
-
diff --git a/docs/knowledge-base/export-to-excel-multiple-grids.md b/docs/knowledge-base/export-to-excel-multiple-grids.md
deleted file mode 100644
index bb922c8a..00000000
--- a/docs/knowledge-base/export-to-excel-multiple-grids.md
+++ /dev/null
@@ -1,37 +0,0 @@
----
-title: Export Multiple Grids to Excel
-description: An example on how to export multiple KendoReact Grids to a single Excel file.
-type: how-to
-page_title: Export Multiple Grids to Excel - KendoReact Grid
-slug: export-to-excel-multiple-grids
-tags: kendoreact, export, multiple, grids, excel
-ticketid: 1408161
-res_type: kb
-category: knowledge-base
----
-
-## Environment
-
-
-
-
- Product
- Progress® KendoReact
-
-
-
-
-
-## Description
-
-How can I export multiple KendoReact Grids (tables) upon a single click action?
-
-## Solution
-
-Set the second Grid sheet as the second sheet of the first document and export only the first Grid.
-
-{% meta id:index height:760 %}
-{% embed_file grid/multiple-grid-export-excel/app.jsx preview %}
-{% embed_file grid/multiple-grid-export-excel/main.jsx %}
-{% embed_file shared/shared-products.json %}
-{% endmeta %}
\ No newline at end of file
diff --git a/docs/knowledge-base/file-upload-in-form.md b/docs/knowledge-base/file-upload-in-form.md
deleted file mode 100644
index 9e51e052..00000000
--- a/docs/knowledge-base/file-upload-in-form.md
+++ /dev/null
@@ -1,41 +0,0 @@
----
-title: Use the KendoReact Upload in the KendoReact Form
-description: An example on how to use the KendoReact Upload component in the KendoReact Form.
-type: how-to
-page_title: Use the KendoReact Upload Component in the KendoReact Form - KendoReact Form
-slug: file-upload-in-form
-tags: form, kendoreact, upload
-ticketid: 1517340
-res_type: kb
-category: knowledge-base
----
-
-## Environment
-
-
-
-
- Product Version
- 4.5.0
-
-
- Product
- Progress® KendoReact
-
-
-
-
-
-## Description
-
-How can I use the Upload component inside a Form?
-
-## Solution
-
-In order to achieve this, the Upload files data has to be added to the Form data and then submitted programmatically to the server.
-
-
-{% meta id height:460 %}
-{% embed_file form/file-upload/app.jsx preview %}
-{% embed_file form/file-upload/main.jsx %}
-{% endmeta %}
diff --git a/docs/knowledge-base/filter-the-grid-with-checkboxes.md b/docs/knowledge-base/filter-the-grid-with-checkboxes.md
deleted file mode 100644
index 10750c97..00000000
--- a/docs/knowledge-base/filter-the-grid-with-checkboxes.md
+++ /dev/null
@@ -1,46 +0,0 @@
----
-title: Filter the Grid with Checkboxes
-description: An example on how to filter the KendoReact Grid by using checkboxes.
-type: how-to
-page_title: Filter the Grid by Using Checkboxes - KendoReact Grid
-slug: filter-the-grid-with-checkboxes
-tags: kendoreact, grid, filter, checkbox
-ticketid: 1410595
-res_type: kb
-category: knowledge-base
----
-
-## Environment
-
-
-
-
- Product Version
- 3.0.0
-
-
- Product
- Progress® KendoReact
-
-
-
-
-
-## Description
-
-How can I filter the KendoReact Grid data with checkboxes similar to the Kendo UI for jQuery Grid?
-
-## Solution
-
-This is already a built-in option of the Grid and the example can be observed [here.]({% slug column_menu_grid %}#toc-checkbox-filter)
-
-### Older Solution
-
-In KendoReact, you can programmatically implement the data filtering with checkboxes for the Grid by using the [ColumnMenu]({% slug column_menu_grid %}) component.
-
-{% meta id:index height:580 %}
-{% embed_file grid/grid-filter-checkbox/app.jsx preview %}
-{% embed_file grid/grid-filter-checkbox/main.jsx %}
-{% embed_file grid/grid-filter-checkbox/customColumnMenu.jsx %}
-{% embed_file shared/shared-products.json %}
-{% endmeta %}
\ No newline at end of file
diff --git a/docs/knowledge-base/form-getting-editor-ref-and-keydown.md b/docs/knowledge-base/form-getting-editor-ref-and-keydown.md
deleted file mode 100644
index 94df3bac..00000000
--- a/docs/knowledge-base/form-getting-editor-ref-and-keydown.md
+++ /dev/null
@@ -1,43 +0,0 @@
----
-title: Get ref of an editor within the Form and handle onKeyDown event
-description: An example on how to get reference to a Form editor and handle editor events.
-type: how-to
-page_title: Get reference to a Form editor and events - KendoReact Form
-slug: form-getting-editor-ref-and-keydown
-tags: form, kendoreact, input, ref
-ticketid:
-res_type: kb
-category: knowledge-base
----
-
-## Environment
-
-
-
-
- Product Version
- 5.13.1
-
-
- Product
- Progress® KendoReact
-
-
-
-
-
-## Description
-
-How can I get ref of a Form editor and its events in the context of the Form component.
-
-## Solution
-
-Pass custom properties to the Field component and access them within the custom component set to the "component" property of the Field. Within the custom component set the "ref" and the event handler.
-
-Following is an example demonstrating this approach:
-
-
-{% meta id height:360 %}
-{% embed_file form/getting-editor-ref-and-keydown/app.jsx preview %}
-{% embed_file form/getting-editor-ref-and-keydown/main.jsx %}
-{% endmeta %}
diff --git a/docs/knowledge-base/form-reset-and-change-initial-values.md b/docs/knowledge-base/form-reset-and-change-initial-values.md
deleted file mode 100644
index ade96240..00000000
--- a/docs/knowledge-base/form-reset-and-change-initial-values.md
+++ /dev/null
@@ -1,45 +0,0 @@
----
-title: Change the initial values and reset the Form
-description: An example on how to change the initial values and reset the KendoReact Form
-type: how-to
-page_title: Reset The Form To Changed Initial Values - KendoReact Form
-slug: form-reset-and-change-initial-values
-tags: form, kendoreact, reset, initial
-ticketid:
-res_type: kb
-category: knowledge-base
----
-
-## Environment
-
-
-
-
- Product Version
- 5.14.1
-
-
- Product
- Progress® KendoReact
-
-
-
-
-
-## Description
-
-How can I reset the Form multiple times to the initial values? Also, can I change the initial values dynamically?
-
-## Solution
-
-To reset the Form to the initial values the component must re-mount. This can be achieved by changing the "key" property of the Form to unique value.
-
-The same technique can be used for changing the initial value by first changing the variable in the state and then changing the "key" property.
-
-Following is an example demonstrating this approach:
-
-
-{% meta id height:460 %}
-{% embed_file form/form-reset-and-change-initial-values/app.jsx preview %}
-{% embed_file form/form-reset-and-change-initial-values/main.jsx %}
-{% endmeta %}
diff --git a/docs/knowledge-base/gantt-scroll-to-today.md b/docs/knowledge-base/gantt-scroll-to-today.md
deleted file mode 100644
index 3f72cd46..00000000
--- a/docs/knowledge-base/gantt-scroll-to-today.md
+++ /dev/null
@@ -1,44 +0,0 @@
----
-title: Scroll to today's date in the GanttWeekView
-description: An example on how scroll the GanttWeekView to today's date.
-type: how-to
-page_title: Scroll to today's date in the WeekView on load - KendoReact Gantt
-slug: gantt-scroll-to-today
-tags: gantt, scroll, today
-ticketid:
-res_type: kb
-category: knowledge-base
----
-
-## Environment
-
-
-
-
- Product Version
- 5.13.1
-
-
- Product
- Progress® KendoReact
-
-
-
-
-
-## Description
-
-I want the scroll position of the GanttWeekView to be at the today's date on load
-
-## Solution
-
-For achieving the desired result, define a timelineHeaderCell for the GanttWeekView where a custom class name will be added to the header cell for today's date. Then, within React.useEffect, after the Gantt is rendered, get reference to the scroll and move the scroll to the cell with the custom class name that was added.
-
-Following is an example demonstrating this approach:
-
-
-{% meta id height:660 %}
-{% embed_file gantt/scroll-to-today/app.jsx preview %}
-{% embed_file gantt/scroll-to-today/main.jsx %}
-{% embed_file gantt/scroll-to-today/data.js %}
-{% endmeta %}
diff --git a/docs/knowledge-base/grid-add-clear-filters-button.md b/docs/knowledge-base/grid-add-clear-filters-button.md
deleted file mode 100644
index 2558bb1e..00000000
--- a/docs/knowledge-base/grid-add-clear-filters-button.md
+++ /dev/null
@@ -1,39 +0,0 @@
----
-title: Add button in the Grid's toolbar for clearing all filters
-description: An example on how to add button in the toolbar of the Grid for clearing all filters.
-type: how-to
-page_title: Add button for clearing all filters in the Grid - KendoReact Grid
-slug: grid-add-clear-filters-button
-tags: grid, filter, filtering
-ticketid:
-res_type: kb
-category: knowledge-base
----
-
-## Environment
-
-
-
- Product Version
- 5.12.0
-
-
- Product
- Progress® KendoReact
-
-
-
-
-
-## Description
-I want to add button in the Grid's toolbar for clearing all filters
-
-## Solution
-For achieving the desired result a Button component can be placed within the GridToolbar and within its click event the filter object of the DataState stored in the state can be set to null
-
-This is an example showcasing how to limit the value:
-
-{% meta height:360 %}
-{% embed_file grid/grid-add-clear-filters-button/app.jsx preview %}
-{% embed_file grid/grid-add-clear-filters-button/main.jsx %}
-{% endmeta %}
diff --git a/docs/knowledge-base/grid-add-dirty-indicator.md b/docs/knowledge-base/grid-add-dirty-indicator.md
deleted file mode 100644
index a6c7155a..00000000
--- a/docs/knowledge-base/grid-add-dirty-indicator.md
+++ /dev/null
@@ -1,46 +0,0 @@
----
-title: Add dirty indicator in Grid cells with in-cell editing
-description: An example on how to render dirty indicator for edited cells in Grid with in-cell editing
-type: how-to
-page_title: Adding dirty indicator for edited cells in Grid with in-cell editing - KendoReact Grid
-slug: grid-add-dirty-indicator
-position:
-tags: grid, editing, dirty, indicator, incell
-ticketid:
-res_type: kb
-category: knowledge-base
----
-
-## Environment
-
-
-
- Product Version
- 5.12.0
-
-
- Product
- Progress® KendoReact
-
-
-
-
-## Description
-I want to show dirty indicator for edited cells in Grid with enabled in-cell editing.
-
-## Solution
-This can be achieved by tracking the changes and compare them with the original data. With the stored information about the modified cell values we then can add a class name within the cellRender event of the Grid that we can use for displaying a dirty indicator.
-
-The changes are tracked within the onItemChange event. The dirty collection is cleared after saving or canceling the changes (within saveChanges and cancelChanges).
-
-The custom style for the dirty cells is within the "styles.css" file targeting the TD elements with class "dirty".
-
-This is an example showcasing this approach:
-
-{% meta id:index height:480 %}
-{% embed_file grid/grid-add-dirty-indicator/app.jsx preview %}
-{% embed_file grid/grid-add-dirty-indicator/main.jsx %}
-{% embed_file grid/grid-add-dirty-indicator/sample-products.json %}
-{% embed_file grid/grid-add-dirty-indicator/renderers.jsx %}
-{% embed_file grid/grid-add-dirty-indicator/styles.css %}
-{% endmeta %}
\ No newline at end of file
diff --git a/docs/knowledge-base/grid-add-empty-rows.md b/docs/knowledge-base/grid-add-empty-rows.md
deleted file mode 100644
index 6841e572..00000000
--- a/docs/knowledge-base/grid-add-empty-rows.md
+++ /dev/null
@@ -1,42 +0,0 @@
----
-title: Add empty rows to fill the empty space in the data container
-description: An example of how to add empty rows if the number of rows does not fill the data container of the Grid
-type: how-to
-page_title: Add Empty Rows To Fill The Data Container - KendoReact Grid
-slug: grid-add-empty-rows
-tags: grid, kendoreact, rows, empty
-ticketid:
-res_type: kb
-category: knowledge-base
----
-
-## Environment
-
-
-
-
- Product Version
- 5.14.1
-
-
- Product
- Progress® KendoReact
-
-
-
-
-
-## Description
-
-I have Grid with enabled virtual scrolling and when I have fewer items I need to fill the empty space with empty rows.
-
-## Solution
-
-Find the last TR element within the "rowRender" of the Grid and return React.Fragment with the last row and the empty rows that will fill the empty space.
-
-Following is an example demonstrating this approach:
-
-{% meta id height:540 %}
-{% embed_file grid/grid-add-empty-rows/app.jsx preview %}
-{% embed_file grid/grid-add-empty-rows/main.jsx %}
-{% endmeta %}
diff --git a/docs/knowledge-base/grid-add-new-column.md b/docs/knowledge-base/grid-add-new-column.md
deleted file mode 100644
index e51321c3..00000000
--- a/docs/knowledge-base/grid-add-new-column.md
+++ /dev/null
@@ -1,45 +0,0 @@
----
-title: Add New Columns to the Grid
-description: An example of how to add new columns to the KendoReact Grid.
-type: how-to
-page_title: Add New Columns to the Grid - KendoReact Grid
-slug: grid-add-new-column
-tags: grid, kendoreact, column, columns, add, new
-ticketid: 1516858
-res_type: kb
-category: knowledge-base
----
-
-## Environment
-
-
-
-
- Product Version
- 4.5.0
-
-
- Product
- Progress® KendoReact
-
-
-
-
-
-## Description
-
-How can I dynamically add new columns to the grid?
-
-## Solution
-
-This can be achieved with logic similar to the one in [`this demo`]({% slug editing_grid %}#toc-getting-started) of our documentation which showcases how to dynamically add new records (rows).
-
-The idea here is to have a button that opens up a Form, which when submitted updates the database that contains all records and adds a new element to all objects in the data. The columns should be rendered dynamically by mapping through the database, which will allow the Grid to visualize any changes made in the database.
-
-
-{% meta id height:760 %}
-{% embed_file grid/add-new-column/app.jsx preview %}
-{% embed_file grid/add-new-column/main.jsx %}
-{% embed_file grid/add-new-column/ColumnForm.jsx %}
-{% embed_file shared/shared-products.json %}
-{% endmeta %}
diff --git a/docs/knowledge-base/grid-add-operators-dropdown-for-custom-filtercell.md b/docs/knowledge-base/grid-add-operators-dropdown-for-custom-filtercell.md
deleted file mode 100644
index 12ea8511..00000000
--- a/docs/knowledge-base/grid-add-operators-dropdown-for-custom-filtercell.md
+++ /dev/null
@@ -1,44 +0,0 @@
----
-title: Add DropDownList for the operators in a custom filterCell of the Grid
-description: An example on how to implement DropDownList operator in a custom filterCell of the Grid.
-type: how-to
-page_title: Add DropDownList for operators in a custom filterCell - KendoReact Grid
-slug: grid-add-operators-dropdown-for-custom-filtercell
-tags: grid, custom, filtering, operators
-ticketid:
-res_type: kb
-category: knowledge-base
----
-
-## Environment
-
-
-
-
- Product Version
- 5.13.1
-
-
- Product
- Progress® KendoReact
-
-
-
-
-
-## Description
-
-How can I add a DropDownList for the operators in a custom filterCell?
-
-## Solution
-
-The GridFilterCellProps passed to the filterCell contain a collection with all operators (props.operators) that can be added to the "data" of the DropDownList. If there is a filter expression for the column, the selected operator is available within props.operator.
-
-Following is an example demonstrating how to add a DropDownList for the operators in a filterCell:
-
-{% meta id:index height:520 %}
-{% embed_file grid/add-operators-dropdown-for-custom-filtercell/app.jsx preview %}
-{% embed_file grid/add-operators-dropdown-for-custom-filtercell/main.jsx %}
-{% embed_file grid/add-operators-dropdown-for-custom-filtercell/InputFilterCell.jsx %}
-{% embed_file grid/add-operators-dropdown-for-custom-filtercell/sample-products.jsx %}
-{% endmeta %}
diff --git a/docs/knowledge-base/grid-alternate-row-colors.md b/docs/knowledge-base/grid-alternate-row-colors.md
deleted file mode 100644
index 3a17af2d..00000000
--- a/docs/knowledge-base/grid-alternate-row-colors.md
+++ /dev/null
@@ -1,89 +0,0 @@
----
-title: Alternate the KendoReact Data Grid row colors with CSS
-description: An example on how to alternate the row colors of the KendoReact Data Grid.
-type: how-to
-page_title: Alternate row colors - KendoReact Grid
-slug: grid-alternate-row-colors
-tags: grid, locked, row color, row, locked column color
-ticketid: 1622261
-res_type: kb
-category: knowledge-base
----
-
-## Environment
-
-
-
-
- Product Version
- 7.3.0
-
-
- Product
- Progress® KendoReact
-
-
-
-
-## Description
-
-I want to alternate the Grid row colors. In addition, I also want to apply this color to the rows that belong to [locked]({% slug api_grid-gridcolumnprops %}#toc-locked) columns.
-
-## Solution
-
-For changing the row, you can use the `.k-grid .k-table-row` class, and `.k-grid .k-table-row.k-table-alt-row` for the alt rows. As for the rows that are in locked columns, use the `.k-grid .k-table .k-grid-content-sticky` and `.k-master-row.k-table-alt-row .k-grid-content-sticky` classes.
-
-As an example, the following will set the background of the alt rows to `red` and the normal rows to `lightblue`. This will also be applied to the rows of the `ProductID` column that is locked because .
-
-```jsx
-
-
-
-
-
-```
-
-{% meta id:index height:480 %}
-{% embed_file grid-row-colors/alternate-colors/app.jsx preview %}
-{% embed_file grid-row-colors/alternate-colors/main.jsx %}
-{% embed_file shared/shared-products.json %}
-{% endmeta %}
-
-You can also set the background color to specific rows using the [nth-child](https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child) pseudo class.
-
-```css
-.k-grid .k-table-row:nth-child(2) {
- background: lightblue;
-}
-```
-
-{% meta id:index height:480 %}
-{% embed_file grid-row-colors/single-row-color/app.jsx preview %}
-{% embed_file grid-row-colors/single-row-color/main.jsx %}
-{% embed_file shared/shared-products.json %}
-{% endmeta %}
diff --git a/docs/knowledge-base/grid-autocomplete-gridcolumnmenufilter.md b/docs/knowledge-base/grid-autocomplete-gridcolumnmenufilter.md
deleted file mode 100644
index 8d64fedd..00000000
--- a/docs/knowledge-base/grid-autocomplete-gridcolumnmenufilter.md
+++ /dev/null
@@ -1,49 +0,0 @@
----
-title: Use AutoComplete in the ColumnMenuFilter of the Grid
-description: An example on how to use the AutoComplete component in the ColumnMenuFilter of KendoReact Grid.
-type: how-to
-page_title: Use AutoComplete in the ColumnMenuFilter of the Grid - KendoReact Grid
-slug: grid-autocomplete-gridcolumnmenufilter
-tags: grid, kendoreact, filter, columnmenu, autocomplete, columnmenufilter
-ticketid: 1516740
-res_type: kb
-category: knowledge-base
----
-
-## Environment
-
-
-
-
- Product Version
- 4.5.0
-
-
- Product
- Progress® KendoReact
-
-
-
-
-
-## Description
-
-How can I use the AutoComplete components instead of the default input field in the ColumnMenuFilter of the Grid?
-
-## Solution
-
-This can be achieved using the [`filterUI`]({% slug api_grid_gridcolumnmenufilterprops %}#toc-filterui) property of the Grid ColumnMenuFilter to customize the interface of the ColumnMenuFilter.
-
-The three DropDownLists which contain the logic and filters that will be applied to the Grid should be rendered and the logic and filter operators are available in the props passed to the filterUI handler. The input fields should be replaced with AutoComplete components.
-
-The values of the DropDownLists that contain the filter operators should be kept in the state, because those values need to be passed to the corresponding onChange events from the props (onFirstFilterChange - part of [`firstFilterProps`]({% slug api_grid_gridcolumnmenufilteruiprops %}#toc-firstfilterprops), onSecondFilterChange - part of [`secondFilterProps`]({% slug api_grid_gridcolumnmenufilteruiprops %}#toc-secondfilterprops)). The DropDownList that contains the logic operator ("And" or "Or") should call the [`onLogicChange`]({% slug api_grid_gridcolumnmenufilteruiprops %}#toc-onlogicchange) event from the props. The onChange events from the props will filter the content in the Grid accordingly.
-
-The onChange event handlers of the AutoComplete components will be the ones that call the firstFilterProps.onChange and secondFilterProps.onChange events and will pass the operators from the state and the value from the event.
-
-
-{% meta id height:520 %}
-{% embed_file grid/columnmenufilter-with-autocomplete/app.jsx preview %}
-{% embed_file grid/columnmenufilter-with-autocomplete/main.jsx %}
-{% embed_file grid/columnmenufilter-with-autocomplete/customFilterUI.jsx %}
-{% embed_file shared/shared-products.json %}
-{% endmeta %}
diff --git a/docs/knowledge-base/grid-cell-edit-on-enter-press.md b/docs/knowledge-base/grid-cell-edit-on-enter-press.md
deleted file mode 100644
index 58573770..00000000
--- a/docs/knowledge-base/grid-cell-edit-on-enter-press.md
+++ /dev/null
@@ -1,44 +0,0 @@
----
-title: Enter the Edit Mode in a Grid Cell by Pressing Enter
-description: An example on how to edit a KendoReact Grid cell by pressing the Enter key.
-type: how-to
-page_title: Enter the Edit Mode in a Grid Cell by Pressing Enter - KendoReact Grid
-slug: grid-cell-edit-on-enter-press
-tags: grid, edit, cell
-ticketid: 1558287
-res_type: kb
-category: knowledge-base
----
-
-## Environment
-
-
-
-
- Product Version
- 5.1.0
-
-
- Product
- Progress® KendoReact
-
-
-
-
-
-## Description
-
-How can I edit a selected grid cell by pressing the Enter key?
-
-## Solution
-
-First we need to make the Grid navigatable by setting the [navigatable](https://www.telerik.com/kendo-react-ui/components/grid/api/GridProps/#toc-navigatable) prop to true.
-
-Create a custom cell component, attach the onKeyDown event and pass it to the [cellRender](https://www.telerik.com/kendo-react-ui/components/grid/api/GridProps/#toc-cellrender) prop:
-
-{% meta id:index height:520 %}
-{% embed_file grid/cell-edit-on-enter-press/app.jsx preview %}
-{% embed_file grid/cell-edit-on-enter-press/main.jsx %}
-{% embed_file grid/cell-edit-on-enter-press/renderers.jsx %}
-{% embed_file grid/cell-edit-on-enter-press/sample-products.jsx %}
-{% endmeta %}
diff --git a/docs/knowledge-base/grid-cell-state-editing.md b/docs/knowledge-base/grid-cell-state-editing.md
deleted file mode 100644
index a4181755..00000000
--- a/docs/knowledge-base/grid-cell-state-editing.md
+++ /dev/null
@@ -1,40 +0,0 @@
----
-title: Grid Editing with Stateful Cells
-description: An example on how to edit the Grid with cells that manage their own state
-type: how-to
-page_title: Grid Editing with Stateful Cells - KendoReact Grid
-slug: grid-editing-stateful-cells
-tags: grid, edit, cell, performance, state, stateful cells, stateful grid
-ticketid: 1518255
-res_type: kb
-category: knowledge-base
----
-
-## Environment
-
-
-
-
- Product Version
- 5.16.1
-
-
- Product
- Progress® KendoReact
-
-
-
-
-## Description
-
-How to update the entire Grid when the user stops editing instead of on each keypress in order to improve performance?
-
-## Solution
-
-This can be achieved by making the cells managing their own state via a custom [cell](https://www.telerik.com/kendo-react-ui/components/grid/api/GridColumnProps/#toc-cell) .
-
-{% meta id:index height:500 %}
-{% embed_file grid/grid-cell-state-editing/app.jsx preview %}
-{% embed_file grid/grid-cell-state-editing/main.jsx %}
-{% embed_file grid/grid-cell-state-editing/products.jsx %}
-{% endmeta %}
diff --git a/docs/knowledge-base/grid-cell-whitespace-textoverflow.md b/docs/knowledge-base/grid-cell-whitespace-textoverflow.md
deleted file mode 100644
index 9c51c301..00000000
--- a/docs/knowledge-base/grid-cell-whitespace-textoverflow.md
+++ /dev/null
@@ -1,64 +0,0 @@
----
-title: Set the white-space and text-overflow CSS properties of the KendoReact Grid cells
-description: An example on how to set the white-space and text-overflow CSS properties of the Grid cells
-type: how-to
-page_title: Grid cell white-space and text-overflow - KendoReact Data Grid
-slug: grid-cell-white-space-text-overflow
-tags: grid, data grid, white-space, text-overflow, nowrap, break line, ellipsis
-res_type: kb
-category: knowledge-base
----
-
-## Environment
-
-
-
-
-Product Version
-v5.13.1
-
-
-Product
-Progress® KendoReact
-
-
-
-
-
-## Description
-
-By default, the Grid cells have their CSS property `white-space` unset therefore defaulting to `normal`, while the `text-overflow` property is set to `ellipsis`. You can change the the white-space property to `nowrap` to keep the data on the same line, and text-overflow to `clip` to remove the ellipsis.
-
-## Solution
-
-You can achieve this by using either the Grid `cellRender` prop, or the GridCell `cell` prop, or using CSS.
-
-# Using CSS
-
-Setting className property to the Grid and using that class name as a selector to target only that instance.
-
-{% meta height:500 %}
-{% embed_file grid/grid-whitespace-textoverflow/CSS/app.jsx preview %}
-{% embed_file grid/grid-whitespace-textoverflow/CSS/main.jsx %}
-{% embed_file shared/shared-products.json %}
-{% endmeta %}
-
-# Using cell
-
-Setting custom cell for a column and adding the styles directly to the TD element
-
-{% meta height:500 %}
-{% embed_file grid/grid-whitespace-textoverflow/cell/app.jsx preview %}
-{% embed_file grid/grid-whitespace-textoverflow/cell/main.jsx %}
-{% embed_file shared/shared-products.json %}
-{% endmeta %}
-
-# Using cellRender
-
-Using the Grid's cellRender for adding the custom styles to all cells
-
-{% meta height:500 %}
-{% embed_file grid/grid-whitespace-textoverflow/cellRender/app.jsx preview %}
-{% embed_file grid/grid-whitespace-textoverflow/cellRender/main.jsx %}
-{% embed_file shared/shared-products.json %}
-{% endmeta %}
\ No newline at end of file
diff --git a/docs/knowledge-base/grid-change-boolean-filter-to-yesno.md b/docs/knowledge-base/grid-change-boolean-filter-to-yesno.md
deleted file mode 100644
index e86b8dcb..00000000
--- a/docs/knowledge-base/grid-change-boolean-filter-to-yesno.md
+++ /dev/null
@@ -1,43 +0,0 @@
----
-title: Change the boolean operators text in the Grid filtering and the cell value of the column.
-description: An example on how to change the default boolean operators text for the Grid and configuring custom cell.
-type: how-to
-page_title: Set custom text for the boolean operators in the Grid - KendoReact Grid
-slug: grid-change-boolean-filter-to-yesno
-tags: grid, kendoreact, filter, filtering, boolean
-ticketid:
-res_type: kb
-category: knowledge-base
----
-
-## Environment
-
-
-
-
- Product Version
- 5.9.0
-
-
- Product
- Progress® KendoReact
-
-
-
-
-
-## Description
-
-I want to change the boolean filter "Is True" and "Is False" with "Yes" and "No". The value in the cells should also show "Yes" and "No" instead of "true" and "false".
-
-## Solution
-
-For changing the text for the boolean operators in the Grid, a LocalizationProvider with custom messages can be used. As for the values in the cells, the "cell" property of the column must be set to a custom cell.
-
-Following is an example demonstrating this approach:
-
-{% meta id:index height:560 %}
-{% embed_file grid/grid-change-boolean-filter-to-yesno/app.jsx preview %}
-{% embed_file grid/grid-change-boolean-filter-to-yesno/main.jsx %}
-{% embed_file grid/grid-change-boolean-filter-to-yesno/sample-products.jsx %}
-{% endmeta %}
\ No newline at end of file
diff --git a/docs/knowledge-base/grid-checkbox-in-view-mode-for-boolean.md b/docs/knowledge-base/grid-checkbox-in-view-mode-for-boolean.md
deleted file mode 100644
index fcbeea4c..00000000
--- a/docs/knowledge-base/grid-checkbox-in-view-mode-for-boolean.md
+++ /dev/null
@@ -1,42 +0,0 @@
----
-title: Custom cell with CheckBox for editing and view
-description: An example on how to create a custom cell for boolean field with CheckBox for editing and viewing in KendoReact Grid.
-type: how-to
-page_title: Render Disabled CheckBox In View Mode Of A Cell - KendoReact Grid
-slug: grid-checkbox-in-view-mode-for-boolean
-tags: custom, editing, cell, kendoreact, grid
-ticketid:
-res_type: kb
-category: knowledge-base
----
-
-## Environment
-
-
-
-
- Product
- Progress® KendoReact
-
-
-
-
-
-## Description
-
-How can I display a boolean value in CheckBox in view mode and editable CheckBox when the row is in edit mode.
-
-## Solution
-
-Add custom cell for the boolean column and render disabled CheckBox for view mode of the cell and enabled CheckBox when the dataItem is in edit mode.
-
-Here is an example demonstrating this approach:
-
-{% meta id height:760 %}
-{% embed_file grid/checkbox-in-view-mode-for-boolean/app.jsx preview %}
-{% embed_file grid/checkbox-in-view-mode-for-boolean/main.jsx %}
-{% embed_file grid/checkbox-in-view-mode-for-boolean/ExternalGridCell.jsx %}
-{% embed_file grid/checkbox-in-view-mode-for-boolean/sample-products.jsx %}
-{% endmeta %}
-
-The example is using an extended Grid cell (ExternalGridCell) which adds all class names and attributes to the TD elements and allows changing only the content of the cell. This extended Grid cell is useful for every scenario with custom cells.
diff --git a/docs/knowledge-base/grid-checkbox-selection-with-grouping.md b/docs/knowledge-base/grid-checkbox-selection-with-grouping.md
deleted file mode 100644
index 068817fa..00000000
--- a/docs/knowledge-base/grid-checkbox-selection-with-grouping.md
+++ /dev/null
@@ -1,43 +0,0 @@
----
-title: How to use checkbox selection in the Grid with enabled grouping
-description: An example on how to use checkbox selection with grouping - KendoReact Grid
-type: how-to
-page_title: Use checkbox selection with grouping - KendoReact Grid
-slug: grid-checkbox-selection-with-grouping
-tags: grid, kendoreact, selection, grouping
-ticketid:
-res_type: kb
-category: knowledge-base
----
-
-## Environment
-
-
-
-
- Product Version
- 5.9.0
-
-
- Product
- Progress® KendoReact
-
-
-
-
-
-## Description
-
-I want to use the checkbox selection in a Grid with enabled grouping.
-
-## Solution
-
-When a group expression is applied to the Grid's data, the parent items in the data will be group items, so the logic for setting the select field value and the logic for determining the state of the "Select all" checkbox in the header must be different than the logic used without grouping.
-
-Following is an example demonstrating this approach:
-
-{% meta id:index height:560 %}
-{% embed_file grid/checkbox-selection-with-grouping/app.jsx preview %}
-{% embed_file grid/checkbox-selection-with-grouping/main.jsx %}
-{% embed_file grid/checkbox-selection-with-grouping/products.json %}
-{% endmeta %}
\ No newline at end of file
diff --git a/docs/knowledge-base/grid-collapse-header-column.md b/docs/knowledge-base/grid-collapse-header-column.md
deleted file mode 100644
index d3ffba10..00000000
--- a/docs/knowledge-base/grid-collapse-header-column.md
+++ /dev/null
@@ -1,43 +0,0 @@
----
-title: Collapse Header Column in Grid
-description: An example on how to collapse the columns inside the Grid header.
-type: how-to
-page_title: Collapse Header Column in Grid | KendoReact Chart
-slug: collapse-header-column-in-grid
-tags: grid, header, collapse, column
-ticketid: 1573785
-res_type: kb
-category: knowledge-base
----
-
-## Environment
-
-
-
-
- Product Version
- 5.5.0
-
-
- Product
- Progress® KendoReact
-
-
-
-
-
-## Description
-
-How can I collapse the columns inside the Grid header?
-
-
-
-## Solution
-
-This can be achieved by toggling a flag variable in the state that will determine whether or not the nested columns will render.
-
-{% meta id height:560 %}
-{% embed_file grid/collapse-header-column/app.jsx preview %}
-{% embed_file grid/collapse-header-column/main.jsx %}
-{% embed_file grid/collapse-header-column/products.json %}
-{% endmeta %}
diff --git a/docs/knowledge-base/grid-column-auto-width.md b/docs/knowledge-base/grid-column-auto-width.md
deleted file mode 100644
index 60c7d2e4..00000000
--- a/docs/knowledge-base/grid-column-auto-width.md
+++ /dev/null
@@ -1,53 +0,0 @@
----
-title: Set the Width of the Column Based on the Content
-description: An example on how to set the width of the KendoReact Grid column based on the content.
-type: how-to
-page_title: Set the Width of the Column Based on the Content - KendoReact Grid
-slug: grid-column-auto-width
-tags: grid, kendoreact, width, column, auto
-ticketid: 1469294
-res_type: kb
-category: knowledge-base
----
-
-## Environment
-
-
-
-
- Product Version
- 3.0.0
-
-
- Product
- Progress® KendoReact
-
-
-
-
-
-## Description
-
-How can I set the width of the Grid column based on the content. I want the column width to be set based on the longest value in the column.
-
-## Solution
-
-### Using HTML canvas measureText()
-
-In order to automatically calculate the column width, we can suggest using the Canvas API [measureText](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/measureText) function that can calculate the text width based on the font weight, size, and family. Then we can use that information to dynamically set the width of the column.
-
-{% meta id:index height:560 %}
-{% embed_file grid/auto-width/canvas/app.jsx preview %}
-{% embed_file grid/auto-width/canvas/main.jsx %}
-{% embed_file shared/shared-products.json %}
-{% endmeta %}
-
-### Using calculate-size
-
-Another approach would be to use a package called [calculate-size](https://www.npmjs.com/package/calculate-size) or similar which will calculate the size of the text based on the font.
-
-{% meta id:index height:560 %}
-{% embed_file grid/auto-width/calculate-size/app.jsx preview %}
-{% embed_file grid/auto-width/calculate-size/main.jsx %}
-{% embed_file shared/shared-products.json %}
-{% endmeta %}
\ No newline at end of file
diff --git a/docs/knowledge-base/grid-columnmenu-filter-without-operators.md b/docs/knowledge-base/grid-columnmenu-filter-without-operators.md
deleted file mode 100644
index 5bd558ef..00000000
--- a/docs/knowledge-base/grid-columnmenu-filter-without-operators.md
+++ /dev/null
@@ -1,44 +0,0 @@
----
-title: Hide the DropDownList with the operators in the columnMenu of the Grid
-description: An example on how to show only the filter in the column menu of the Grid without the filter operators.
-type: how-to
-page_title: Hide The Operators DropDownList From GridColumnMenuFilter In The Column Menu - KendoReact Grid
-slug: grid-columnmenu-filter-without-operators
-tags: grid, kendoreact, columnmenu, filtering, operators
-ticketid:
-res_type: kb
-category: knowledge-base
----
-
-## Environment
-
-
-
-
- Product Version
- 5.14.1
-
-
- Product
- Progress® KendoReact
-
-
-
-
-
-## Description
-
-I want to display columnMenu in the Grid columns without the DropDown for changing the operators. Can I achieve this without a custom filter and re-use the filter input?
-
-## Solution
-
-Wrap the GridColumnMenuFilter in a DIV element with specific className and use that class name as a selector to hide all elements within the DIV with ".k-dropdownlist" class.
-
-Following is an example demonstrating this approach
-
-{% meta id:index height:360 %}
-{% embed_file grid/grid-columnmenu-filter-without-operators/app.jsx preview %}
-{% embed_file grid/grid-columnmenu-filter-without-operators/main.jsx %}
-{% embed_file grid/grid-columnmenu-filter-without-operators/columnMenu.jsx %}
-{% embed_file grid/grid-columnmenu-filter-without-operators/styles.css.jsx %}
-{% endmeta %}
\ No newline at end of file
diff --git a/docs/knowledge-base/grid-columnmenu-pass-data-with-context.md b/docs/knowledge-base/grid-columnmenu-pass-data-with-context.md
deleted file mode 100644
index 88e7611f..00000000
--- a/docs/knowledge-base/grid-columnmenu-pass-data-with-context.md
+++ /dev/null
@@ -1,44 +0,0 @@
----
-title: Pass data to GridColumnMenuCheckboxFilter from Grid context
-description: An example on how to pass data to GridColumnMenuCheckboxFilter using React Context.
-type: how-to
-page_title: Pass data to the column menu GridColumnMenuCheckboxFilter - KendoReact Grid
-slug: grid-columnmenu-pass-data-with-context
-tags: grid, kendoreact, columnmenu, filtering
-ticketid:
-res_type: kb
-category: knowledge-base
----
-
-## Environment
-
-
-
-
- Product Version
- 5.12.0
-
-
- Product
- Progress® KendoReact
-
-
-
-
-
-## Description
-
-I have the data for the GridColumnMenuCheckboxFilter within the context of the Grid and I want to pass it to the column menu. How can I re-use the data.
-
-## Solution
-
-For achieving the desired result the React Context can be used by wrapping it around the Grid component and then accessing the references to the data within the column menu.
-
-Following is an example demonstrating this approach
-
-{% meta id:index height:520 %}
-{% embed_file grid/grid-columnmenu-pass-data-with-context/app.jsx preview %}
-{% embed_file grid/grid-columnmenu-pass-data-with-context/main.jsx %}
-{% embed_file grid/grid-columnmenu-pass-data-with-context/columnMenu.jsx %}
-{% embed_file grid/grid-columnmenu-pass-data-with-context/products.json %}
-{% endmeta %}
\ No newline at end of file
diff --git a/docs/knowledge-base/grid-columnmenucheckboxfilter-with-contains.md b/docs/knowledge-base/grid-columnmenucheckboxfilter-with-contains.md
deleted file mode 100644
index 0024e2cc..00000000
--- a/docs/knowledge-base/grid-columnmenucheckboxfilter-with-contains.md
+++ /dev/null
@@ -1,46 +0,0 @@
----
-title: Change the GridColumnMenuCheckboxFilter operator to contains
-description: An example on how to use the GridColumnMenuCheckboxFilter with contains operator
-type: how-to
-page_title: Change GridColumnMenuCheckboxFilter Operator To Contains - KendoReact Grid
-slug: grid-columnmenucheckboxfilter-with-contains
-tags: grid, kendoreact, columnmenu, checkboxfilter, contains
-ticketid:
-res_type: kb
-category: knowledge-base
----
-
-## Environment
-
-
-
-
- Product Version
- 5.14.1
-
-
- Product
- Progress® KendoReact
-
-
-
-
-
-## Description
-
-Can I change the filter operator for the GridColumnMenuCheckboxFilter to contains?
-
-## Solution
-
-### Using HTML canvas measureText()
-
-By default the GridColumnMenuCheckboxFilter will use "eq" operator. To change the operator locate the filter descriptor within the onDataStateChange event by using the field name of the column and replace the added operator to "contains"
-
-Following is an example demonstrating this approach:
-
-{% meta id:index height:520 %}
-{% embed_file grid/grid-columnmenucheckboxfilter-with-contains/app.jsx preview %}
-{% embed_file grid/grid-columnmenucheckboxfilter-with-contains/main.jsx %}
-{% embed_file grid/grid-columnmenucheckboxfilter-with-contains/columnMenu.jsx %}
-{% embed_file shared/shared-products.json %}
-{% endmeta %}
diff --git a/docs/knowledge-base/grid-conditional-scrollbar.md b/docs/knowledge-base/grid-conditional-scrollbar.md
deleted file mode 100644
index de029afb..00000000
--- a/docs/knowledge-base/grid-conditional-scrollbar.md
+++ /dev/null
@@ -1,40 +0,0 @@
----
-title: Enable Grid scrollbar conditionally based on page size
-description: An example on how to conditionally enable Grid's scrollbar
-type: how-to
-page_title: Conditionally enable Grid's scrollable based on page size - KendoReact Grid
-slug: grid-conditional-scrollbar
-position:
-tags: grid, scrollable, scrollbar, scrolling
-ticketid:
-res_type: kb
-category: knowledge-base
----
-
-## Environment
-
-
-
- Product Version
- 5.12.0
-
-
- Product
- Progress® KendoReact
-
-
-
-
-## Description
-I want to enable the scrollable functionality of the Grid if page size is higher than 10
-
-## Solution
-This can be achieved by setting the scrollable property of the Grid from a state variable and update its value based on the current page size (either within the onPageChange or within the onDataStateChange event)
-
-This is an example showcasing this approach:
-
-{% meta id:index height:540 %}
-{% embed_file grid/grid-conditional-scrollbar/app.jsx preview %}
-{% embed_file grid/grid-conditional-scrollbar/main.jsx %}
-{% embed_file grid/grid-conditional-scrollbar/products.json %}
-{% endmeta %}
\ No newline at end of file
diff --git a/docs/knowledge-base/grid-context-menu.md b/docs/knowledge-base/grid-context-menu.md
deleted file mode 100644
index f2ae1502..00000000
--- a/docs/knowledge-base/grid-context-menu.md
+++ /dev/null
@@ -1,74 +0,0 @@
----
-title: Implement a Context Menu in the Grid
-description: "Learn how to add a context menu to a KendoReact Grid."
-type: how-to
-page_title: Add a Context Menu - KendoReact Grid
-slug: grid-context-menu
-tags: grid, kendoreact, contextmenu
-ticketid: 1422874
-res_type: kb
-category: knowledge-base
----
-
-## Environment
-
-
-
-
- Product Version
- 3.15.0
-
-
- Product
- Progress® KendoReact
-
-
-
-
-
-## Description
-
-How to add a context menu to the Grid?
-
-## Solution
-
-You can implement a context menu in the Grid by using the [KendoReact Popup component]({% slug overview_popup %}) and then and display it on a right click.
-
-1. Attach the `onContextMenu` to the Grid rows and pass the row data to the context menu by utilizing the [`rowRender`]({% slug api_grid_gridprops %}#toc-rowRender) property.
-
- ```tsx-no-run
- rowRender = (trElement, dataItem) => {
- const trProps = {
- ...trElement.props,
- onContextMenu: (e) => {
- e.preventDefault()
- this.handleContextMenuOpen(e, dataItem.dataItem)
- }
- };
- return React.cloneElement(trElement, { ...trProps }, trElement.props.children);
- }
- ```
-
-2. Define the desired content of the context menu in the Popup. As the elements inside the Popup are custom, they execute different actions depending on the desired functionality.
-
- ```tsx-no-run
-
-
-
-
- ```
-
-The following example demonstrates the full implementation of the suggested approach. The context menu provides options for moving the rows up and down, and for deleting an item.
-
-{% meta height:480 %}
-{% embed_file grid/context-menu/app.jsx preview %}
-{% embed_file grid/context-menu/main.jsx %}
-{% embed_file shared/shared-products.json %}
-{% endmeta %}
diff --git a/docs/knowledge-base/grid-custom-cell-with-selection.md b/docs/knowledge-base/grid-custom-cell-with-selection.md
deleted file mode 100644
index cabdcdfa..00000000
--- a/docs/knowledge-base/grid-custom-cell-with-selection.md
+++ /dev/null
@@ -1,40 +0,0 @@
----
-title: Use custom cell for a column with enabled selection in the Grid.
-description: An example on how to define custom column cell and keep the selection functionality
-type: how-to
-page_title: Custom Column Cell With Grid Selection - KendoReact Grid
-slug: grid-custom-cell-with-selection
-tags: grid, kendoreact, custom, cell, selection
-ticketid:
-res_type: kb
-category: knowledge-base
----
-
-## Environment
-
-
-
-
- Product Version
- 5.14.1
-
-
- Product
- Progress® KendoReact
-
-
-
-
-
-## Description
-The row and cell selection stops to work If I define custom cell for a column.
-
-## Solution
-Add the selected class name to the custom cell conditionally based on the "props.isSelected" value. The custom cell should also include the necessary attributes.
-
-Following is an example demonstrating how to keep the Grid selection functionality with custom cell:
-
-{% meta height:480 %}
-{% embed_file grid/grid-custom-cell-with-selection/app.jsx preview %}
-{% embed_file grid/grid-custom-cell-with-selection/main.jsx %}
-{% endmeta %}
diff --git a/docs/knowledge-base/grid-custom-header-cell-with-sorting-and-columnmenu.md b/docs/knowledge-base/grid-custom-header-cell-with-sorting-and-columnmenu.md
deleted file mode 100644
index 205630c2..00000000
--- a/docs/knowledge-base/grid-custom-header-cell-with-sorting-and-columnmenu.md
+++ /dev/null
@@ -1,38 +0,0 @@
----
-title: Implement custom headerCell in Grid with enabled sorting and columnMenu.
-description: How to define custom headerCell in the Grid with enabled sorting and columnMenu
-type: how-to
-page_title: Use custom headerCell with enabled sorting and columnMenu - KendoReact Grid
-slug: grid-custom-header-cell-with-sorting-and-columnmenu
-tags: grid, kendoreact, columnmenu, sorting, headercell
-ticketid:
-res_type: kb
-category: knowledge-base
----
-
-## Environment
-
-
-
-
- Product Version
- 5.13.1
-
-
- Product
- Progress® KendoReact
-
-
-
-
-
-## Description
-I use custom headerCell for one of the Grid columns, but the sorting icon and the column menu are not visible.
-
-## Solution
-Following is an example demonstrating the correct headerCell structure for rendering the sort and the columnMenu icons:
-
-{% meta height:420 %}
-{% embed_file grid/custom-header-cell-with-sorting-and-columnmenu/app.jsx preview %}
-{% embed_file grid/custom-header-cell-with-sorting-and-columnmenu/main.jsx %}
-{% endmeta %}
diff --git a/docs/knowledge-base/grid-date-format.md b/docs/knowledge-base/grid-date-format.md
deleted file mode 100644
index f2bce14b..00000000
--- a/docs/knowledge-base/grid-date-format.md
+++ /dev/null
@@ -1,35 +0,0 @@
----
-title: Modify the Date Format in the Grid
-description: An example on how to format ISO string dates in the KendoReact Grid.
-type: how-to
-page_title: Change the Date Format - KendoReact Grid
-slug: grid-date-format
-tags: grid, kendoreact, dates, format
-ticketid: 1402874
-res_type: kb
-category: knowledge-base
----
-
-## Environment
-
-
-
-
- Product Version
- 2.9.1
-
-
- Product
- Progress® KendoReact
-
-
-
-
-
-## Description
-
-How can I change an ISO date string which I have in my KendoReact Grid? Setting a `format` property does not affect the current date format.
-
-## Solution
-
-The KendoReact Grid formats only valid JavaScript `date` objects. To achieve the desired scenario, parse the ISO strings to JavaScript dates as soon as they are received from the server and work with the parsed data. This approach will also ensure that even if the filtering is done on the client, it will work.
diff --git a/docs/knowledge-base/grid-date-ragne-filter.md b/docs/knowledge-base/grid-date-ragne-filter.md
deleted file mode 100644
index 8582d60d..00000000
--- a/docs/knowledge-base/grid-date-ragne-filter.md
+++ /dev/null
@@ -1,43 +0,0 @@
----
-title: Create a Date-Range Filter in the Grid
-description: An example on how to create a date-range filter in the KendoReact Grid.
-type: how-to
-page_title: Make a Date-Range Filter in the KendoReact Grid - KendoReact Grid
-slug: grid-date-range-filter
-tags: grid, kendoreact, dates, filter
-ticketid: 1402875
-res_type: kb
-category: knowledge-base
----
-
-## Environment
-
-
-
-
- Product Version
- 4.5.0
-
-
- Product
- Progress® KendoReact
-
-
-
-
-
-## Description
-
-How can I filter date ranges in the Grid.
-
-Also, how to make Grid custom range filter working with Odata and show default value and a different format?
-
-## Solution
-
-This requires using the [filterCell]({% slug api_grid_gridcolumnprops %}#toc-filterCell) property of the Grid column to add two DatePickers/DateInputs that will allow the user to select a start and an end date. The format can be changed by configuring the [format]({% slug api_dateinputs_datepickerprops %}#toc-format). Use the [defaultValue]({% slug api_dateinputs_datepickerprops %}#toc-defaultValue) to pass a default value for the custom DatePicker component.
-
-{% meta height:450 %}
-{% embed_file grid/date-range-filter/app.jsx preview %}
-{% embed_file grid/date-range-filter/main.jsx %}
-{% embed_file shared/shared-sample-products.js %}
-{% endmeta %}
\ No newline at end of file
diff --git a/docs/knowledge-base/grid-disable-duplicate-grouping.md b/docs/knowledge-base/grid-disable-duplicate-grouping.md
deleted file mode 100644
index 8371613f..00000000
--- a/docs/knowledge-base/grid-disable-duplicate-grouping.md
+++ /dev/null
@@ -1,43 +0,0 @@
----
-title: Only allow unique grouping in the Grid
-description: An example on how to only allow unique grouping for the KendoReact Grid.
-type: how-to
-page_title: Unique grouping - KendoReact Grid
-slug: grid-unique-grouping
-tags: group, grid, unique, duplicate
-ticketid: 1617400
-res_type: kb
-category: knowledge-base
----
-
-## Environment
-
-
-
-
- Product Version
- 5.16.1
-
-
- Product
- Progress® KendoReact
-
-
-
-
-
-## Description
-
-How can I disable duplicate grouping for the Data Grid?
-
-## Solution
-
-In the `onGroupChange` event handler, you can check if the newly added group exists in the `group` state variable. In addition, when the group is added, `event.nativeEvent` is undefined. Since the `onGroupChange` event is also responsible to remove groups (in that case `event.nativeEvent` is defined), therefore, set the `group` and `resultState` only when `event.nativeEvent` is defined and `groupExists` equals false.
-
-This is an example demonstrating the implementation:
-
-{% meta id:index height:680 %}
-{% embed_file grid/unique-groups/app.jsx preview %}
-{% embed_file grid/unique-groups/main.jsx %}
-{% embed_file shared/shared-products.json %}
-{% endmeta %}
diff --git a/docs/knowledge-base/grid-disable-reordering.md b/docs/knowledge-base/grid-disable-reordering.md
deleted file mode 100644
index 2e1f118b..00000000
--- a/docs/knowledge-base/grid-disable-reordering.md
+++ /dev/null
@@ -1,41 +0,0 @@
----
-title: Disable reordering of a specific column of the KendoReact Grid
-description: An example on how to disable the reordering of a column of the KendoReact Grid.
-type: how-to
-page_title: Grid disable reordering - KendoReact DateRangePicker
-slug: grid-disable-reordering
-tags: grid, reodering, column, disable, reorder
-ticketid: 1588131
-res_type: kb
-category: knowledge-base
----
-
-## Environment
-
-
-
- Product Version
- 6.2.0
-
-
- Product
- Progress® KendoReact
-
-
-
-
-
-## Description
-I want to disable the reordering of one or more columns of the KendoReact Grid.
-
-
-## Solution
-The [orderIndex]({% slug api_grid_gridcolumnprops %}#toc-orderIndex) property to the GridColumn component allows you to restrict the column position at a specific place. For example, if you set the `orderIndex` prop of the first column to `0`, it will not be possible to neither drag it to another position, or drag another column to it.
-
-The following example demonstrates the above approach:
-
-{% meta id:index height:560 %}
-{% embed_file grid/grid-disable-reordering/app.jsx preview %}
-{% embed_file grid/grid-disable-reordering/main.jsx %}
-{% embed_file shared/shared-products.json %}
-{% endmeta %}
diff --git a/docs/knowledge-base/grid-disable-selection-for-rows-conditionally.md b/docs/knowledge-base/grid-disable-selection-for-rows-conditionally.md
deleted file mode 100644
index 817ea8a1..00000000
--- a/docs/knowledge-base/grid-disable-selection-for-rows-conditionally.md
+++ /dev/null
@@ -1,43 +0,0 @@
----
-title: Disable checkbox selection for Grid rows conditionally.
-description: An example on how to disable the checkbox selection for particular rows in the Grid.
-type: how-to
-page_title: Disable checkbox selection for specific rows - KendoReact Grid
-slug: grid-disable-selection-for-rows-conditionally
-tags: grid, kendoreact, selection, checkboxes
-ticketid:
-res_type: kb
-category: knowledge-base
----
-
-## Environment
-
-
-
-
- Product Version
- 5.13.1
-
-
- Product
- Progress® KendoReact
-
-
-
-
-
-## Description
-
-I want to disable the checkbox selection for specific rows based on a value in the data item
-
-## Solution
-
-Use the cellRender of the Grid to modify the TD element for the select column when the condition for disabling the checkbox is met. Add additional logic for the "Select all" checkbox in the header to exclude the disabled items.
-
-Following is an example with the described approach:
-
-{% meta height:450 %}
-{% embed_file grid/disable-selection-for-rows-conditionally/app.jsx preview %}
-{% embed_file grid/disable-selection-for-rows-conditionally/main.jsx %}
-{% embed_file grid/disable-selection-for-rows-conditionally/products.json %}
-{% endmeta %}
\ No newline at end of file
diff --git a/docs/knowledge-base/grid-dropdown-filter-for-array-field.md b/docs/knowledge-base/grid-dropdown-filter-for-array-field.md
deleted file mode 100644
index d516e97c..00000000
--- a/docs/knowledge-base/grid-dropdown-filter-for-array-field.md
+++ /dev/null
@@ -1,43 +0,0 @@
----
-title: Using DropDownList filter for a field in the Grid containing an array.
-description: An example on how to filter array field with a DropDownList custom filter.
-type: how-to
-page_title: Create custom DropDownList filter for array field - KendoReact Grid
-slug: grid-dropdown-filter-for-array-field
-tags: grid, kendoreact, filter, array
-ticketid:
-res_type: kb
-category: knowledge-base
----
-
-## Environment
-
-
-
-
- Product Version
- 5.13.1
-
-
- Product
- Progress® KendoReact
-
-
-
-
-
-## Description
-
-I have a field in the Grid that contains an array. I want to add a DropDownList filter for that column that will filter the array values.
-
-## Solution
-
-The first step is to create a custom filter with a DropDownList for the array column through the "filterCell" property of the column. The selected value from the DropDownList will be added to the filter expressions, but since there is no built-in operator that will search within an array field, a custom operator must be defined. Within the onDataStateChange event of the Grid, find and replace the filter operator for the array field.
-
-Following is an example with the described approach:
-
-{% meta height:450 %}
-{% embed_file grid/dropdown-filter-for-array-field/app.jsx preview %}
-{% embed_file grid/dropdown-filter-for-array-field/main.jsx %}
-{% embed_file grid/dropdown-filter-for-array-field/dropdownFilterCell.jsx %}
-{% endmeta %}
\ No newline at end of file
diff --git a/docs/knowledge-base/grid-edit-one-item-at-a-time.md b/docs/knowledge-base/grid-edit-one-item-at-a-time.md
deleted file mode 100644
index 26820878..00000000
--- a/docs/knowledge-base/grid-edit-one-item-at-a-time.md
+++ /dev/null
@@ -1,44 +0,0 @@
----
-title: Edit one item in the Grid at a time with inline editing
-description: An example on how to disable the edit/add of items while an item is edited
-type: how-to
-page_title: Prevent editing or adding new items while an item is opened for editing - KendoReact Grid
-slug: grid-edit-one-item-at-a-time
-tags: grid, editing, inline
-ticketid:
-res_type: kb
-category: knowledge-base
----
-
-## Environment
-
-
-
- Product Version
- 5.12.0
-
-
- Product
- Progress® KendoReact
-
-
-
-
-
-## Description
-I want to prevent multiple items to be opened for editing when inline edit mode is used for the Grid. The Add button should also be disabled if there is an item opened for editing.
-
-## Solution
-This could be achieved by setting the disabled property of the command buttons in the CommandCell for the inline editing. The Add button for new items can be controlled through the disabled property as well.
-
-For tracking which item will have enabled buttons we add disableEdit property to all items that are not being edited at the time and we use that value within the CommandCell for disabling the buttons.
-
-This is an example showcasing how to limit the value:
-
-{% meta height:580 %}
-{% embed_file grid/grid-edit-one-item-at-a-time/app.jsx preview %}
-{% embed_file grid/grid-edit-one-item-at-a-time/main.jsx %}
-{% embed_file grid/grid-edit-one-item-at-a-time/myCommandCell.jsx %}
-{% embed_file grid/grid-edit-one-item-at-a-time/sample-products.jsx %}
-{% embed_file grid/grid-edit-one-item-at-a-time/services.js %}
-{% endmeta %}
diff --git a/docs/knowledge-base/grid-ellipsis-data-cell.md b/docs/knowledge-base/grid-ellipsis-data-cell.md
deleted file mode 100644
index 5b2a4315..00000000
--- a/docs/knowledge-base/grid-ellipsis-data-cell.md
+++ /dev/null
@@ -1,40 +0,0 @@
----
-title: Add ellipsis to data cells in Grid after specific number of lines
-description: An example on how to show ellipsis in data cells for long text.
-type: how-to
-page_title: Show ellipsis in data cells for long text after specific number of lines - KendoReact Grid
-slug: grid-ellipsis-data-cell
-tags: grid, appearance, cell, ellipsis
-ticketid:
-res_type: kb
-category: knowledge-base
----
-
-## Environment
-
-
-
- Product Version
- 5.12.0
-
-
- Product
- Progress® KendoReact
-
-
-
-
-
-## Description
-How to limit the text in data cells to 2 lines and show ellipsis for longer text
-
-## Solution
-This can be achieved by wrapping the content of the data cells in a DIV element with specific class name that can then be customized to show only two lines and ellipsis for longer text. Adding the DIV element can be achieved within the cellRender of the Grid.
-
-This is an example showcasing how to limit the value:
-
-{% meta height:600 %}
-{% embed_file grid/grid-ellipsis-data-cell/app.jsx preview %}
-{% embed_file grid/grid-ellipsis-data-cell/main.jsx %}
-{% embed_file grid/grid-ellipsis-data-cell/styles.css %}
-{% endmeta %}
diff --git a/docs/knowledge-base/grid-expand-with-flat-data.md b/docs/knowledge-base/grid-expand-with-flat-data.md
deleted file mode 100644
index 11d6004b..00000000
--- a/docs/knowledge-base/grid-expand-with-flat-data.md
+++ /dev/null
@@ -1,39 +0,0 @@
----
-title: Implement expand/collapse in Grid with flat data without grouping
-description: An example on how to create custom expand/collapse with flat data.
-type: how-to
-page_title: Implement custom expand/collapse logic for flat data - KendoReact Grid
-slug: grid-expand-with-flat-data
-tags: grid, expand, hierarchy
-ticketid:
-res_type: kb
-category: knowledge-base
----
-
-## Environment
-
-
-
- Product Version
- 5.12.0
-
-
- Product
- Progress® KendoReact
-
-
-
-
-
-## Description
-I have flat data and I want to add expand/collapse functionality for hiding a given set of items by some custom condition.
-
-## Solution
-Add a column with custom "cell" for rendering the expand/collapse icons. Within the Grid's rowRender the 'child' items visibility can be determined by the custom logic in which the items are 'grouped'.
-
-Following is an example demonstrating how to simulate hierarchy with flat data where the order of the items in the 'data' are in the correct order and the parent items have ParentID equal to 0.
-
-{% meta height:480 %}
-{% embed_file grid/expand-with-flat-data/app.jsx preview %}
-{% embed_file grid/expand-with-flat-data/main.jsx %}
-{% endmeta %}
diff --git a/docs/knowledge-base/grid-export-csv.md b/docs/knowledge-base/grid-export-csv.md
deleted file mode 100644
index f71d3fb8..00000000
--- a/docs/knowledge-base/grid-export-csv.md
+++ /dev/null
@@ -1,38 +0,0 @@
----
-title: Export Grid data to a CSV format
-description: An example on how to export the Grid data to a CSV format
-type: how-to
-page_title: Grid CSV Export - KendoReact Grid
-slug: grid-csv-export
-tags: grid, csv, export
-res_type: kb
-category: knowledge-base
----
-
-## Environment
-
-
-
- Product Version
- 6.1.1
-
-
- Product
- Progress® KendoReact
-
-
-
-
-## Description
-I want to export the Grid data to a CSV format. Currently, the Grid does not have built-in functionality to achieve this.
-
-## Solution
-You can export the Grid data to a CSV format using the [react-csv](https://www.npmjs.com/package/react-csv) library or a similar one which downloads the json data to CSV.
-
-This is an example showcasing this approach:
-
-{% meta id:index height:700 %}
-{% embed_file grid/grid-csv-export/app.jsx preview %}
-{% embed_file grid/grid-csv-export/main.jsx %}
-{% embed_file shared/shared-products.json %}
-{% endmeta %}
\ No newline at end of file
diff --git a/docs/knowledge-base/grid-external-dropdownlist-filter.md b/docs/knowledge-base/grid-external-dropdownlist-filter.md
deleted file mode 100644
index b05576d5..00000000
--- a/docs/knowledge-base/grid-external-dropdownlist-filter.md
+++ /dev/null
@@ -1,40 +0,0 @@
----
-title: Filter KendoReact Grid with external DropDownList
-description: An example on how to use external component for filtering Grid's data
-type: how-to
-page_title: Using external DropDownList for filtering data - KendoReact Grid
-slug: grid-external-dropdownlist-filter
-position:
-tags: grid, filtering
-ticketid:
-res_type: kb
-category: knowledge-base
----
-
-## Environment
-
-
-
- Product Version
- 5.12.0
-
-
- Product
- Progress® KendoReact
-
-
-
-
-## Description
-I want to filter the Grid from an external DropDownList bound to one of the fields.
-
-## Solution
-All data operations in the Grid are handled manually, so including a filter expression in the Grid's DataState within the onChange event of an external DropDownList can be used for filtering the data.
-
-This is an example showcasing this approach:
-
-{% meta id:index height:700 %}
-{% embed_file grid/grid-external-dropdownlist-filter/app.jsx preview %}
-{% embed_file grid/grid-external-dropdownlist-filter/main.jsx %}
-{% embed_file grid/grid-external-dropdownlist-filter/products.json %}
-{% endmeta %}
\ No newline at end of file
diff --git a/docs/knowledge-base/grid-filtering-api.md b/docs/knowledge-base/grid-filtering-api.md
deleted file mode 100644
index ce50afe7..00000000
--- a/docs/knowledge-base/grid-filtering-api.md
+++ /dev/null
@@ -1,38 +0,0 @@
----
-title: Filter KendoReact Grid with data from an API
-description: An example on how to filter the Grid data that is passed from an API
-type: how-to
-page_title: Filtering the Grid with data from an API - KendoReact Grid
-slug: grid-filtering-api
-tags: grid, filtering, api
-res_type: kb
-category: knowledge-base
----
-
-## Environment
-
-
-
-
- Product Version
- 7.3.0
-
-
- Product
- Progress® KendoReact
-
-
-
-
-## Description
-
-How do I filter the Grid using `useEffect` with dummy API endpoint using JSON place holder?
-
-## Solution
-
-This can be achieved by fetching the data inside the `useEffect` hook and then filtering it using the `filterBy` helper function and passing the filtered collection to the [`data`]({% slug api_grid_gridprops %}#toc-data) prop.
-
-{% meta id:index height:700 %}
-{% embed_file grid-filtering-api/app.tsx preview %}
-{% embed_file grid-filtering-api/main.tsx %}
-{% endmeta %}
\ No newline at end of file
diff --git a/docs/knowledge-base/grid-filtering-disable-diacritics.md b/docs/knowledge-base/grid-filtering-disable-diacritics.md
deleted file mode 100644
index 5b1692ea..00000000
--- a/docs/knowledge-base/grid-filtering-disable-diacritics.md
+++ /dev/null
@@ -1,44 +0,0 @@
----
-title: Ignore diacritics in the Grid filtering
-description: An example on how to ignore diacritics when filtering the KendoReact Grid.
-type: how-to
-page_title: Ignore diacritics - KendoReact Grid
-slug: grid-ignore-diacritics
-tags: diacritics, grid, ignore
-ticketid: 1617433
-res_type: kb
-category: knowledge-base
----
-
-## Environment
-
-
-
-
- Product Version
- 5.16.1
-
-
- Product
- Progress® KendoReact
-
-
-
-
-
-## Description
-
-How can I ignore the diacritics in the Grid filtering?
-
-## Solution
-
-You can achieve this by rendering a custom filter cell and normalizing the passed value. First, pass a custom filter cell to the `filterCell` prop of a GridColumn. In the custom filter cell, render the needed component which will apply the filtering, and in `props.onChange` which controls the input value, remove the diacritics from `event.target.value` using [normalize](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/normalize).
-
-This is an example demonstrating this implementation:
-
-{% meta id:index height:560 %}
-{% embed_file grid/ignore-diacritics/app.jsx preview %}
-{% embed_file grid/ignore-diacritics/main.jsx %}
-{% embed_file grid/ignore-diacritics/inputFilterCell.jsx %}
-{% embed_file shared/shared-sample-products.js %}
-{% endmeta %}
diff --git a/docs/knowledge-base/grid-fix-editors-popup-position-issue.md b/docs/knowledge-base/grid-fix-editors-popup-position-issue.md
deleted file mode 100644
index 83739d79..00000000
--- a/docs/knowledge-base/grid-fix-editors-popup-position-issue.md
+++ /dev/null
@@ -1,43 +0,0 @@
----
-title: Fix Grid editors Popup position issue on scrolling
-description: An example on how to fix the Popup position issue on scrolling in Grid editors
-type: how-to
-page_title: Fix Editors Popup Position Issue On Scrolling - KendoReact Grid
-slug: grid-fix-editors-popup-position-issue
-position:
-tags: grid, editors, scrolling, issue
-ticketid:
-res_type: kb
-category: knowledge-base
----
-
-## Environment
-
-
-
- Product Version
- 5.13.1
-
-
- Product
- Progress® KendoReact
-
-
-
-
-## Description
-Opening a popup of any editor in the Grid and scrolling it causes the popup to be shown outside of the scrollable container.
-
-## Solution
-The issue in question is caused by the fact that all Popup components are rendered in the "body" element, which causes them to be displayed outside of the scrollable container of the Grid on scrolling. To avoid this, wrap the Grid in PopupPropsContext and change the "appendTo" property to all Popup components within the data container of the Grid to the scrollable container.
-
-This is an example showcasing this approach:
-
-{% meta id:index height:760 %}
-{% embed_file grid/fix-editors-popup-position-issue/app.jsx preview %}
-{% embed_file grid/fix-editors-popup-position-issue/main.jsx %}
-{% embed_file grid/fix-editors-popup-position-issue/myCommandCell.jsx %}
-{% embed_file grid/fix-editors-popup-position-issue/myDropDownCell.jsx %}
-{% embed_file grid/fix-editors-popup-position-issue/services.js %}
-{% embed_file shared/shared-sample-products.js %}
-{% endmeta %}
\ No newline at end of file
diff --git a/docs/knowledge-base/grid-hide-expand-icon-conditionally.md b/docs/knowledge-base/grid-hide-expand-icon-conditionally.md
deleted file mode 100644
index a49d72b4..00000000
--- a/docs/knowledge-base/grid-hide-expand-icon-conditionally.md
+++ /dev/null
@@ -1,39 +0,0 @@
----
-title: Hide conditionally the expand icon for some items
-description: An example on how to conditionally hide the expand icon for some items
-type: how-to
-page_title: Hide The Expand Button For DataItems Conditionally - KendoReact Grid
-slug: grid-hide-expand-icon-conditionally
-position:
-tags: grid, details, expand, hide
-ticketid:
-res_type: kb
-category: knowledge-base
----
-
-## Environment
-
-
-
- Product Version
- 5.14.1
-
-
- Product
- Progress® KendoReact
-
-
-
-
-## Description
-I want to hide the expand icon for some rows based on a condition from the dataItems values.
-
-## Solution
-Within the cellRender of the Grid check if the field for the cell is the expand field and use the props.dataItem to return an empty TD element if the condition for the expand icon is not met.
-
-This is an example showcasing this approach:
-
-{% meta id:index height:660 %}
-{% embed_file grid/grid-hide-expand-icon-conditionally/app.jsx preview %}
-{% embed_file grid/grid-hide-expand-icon-conditionally/main.jsx %}
-{% endmeta %}
\ No newline at end of file
diff --git a/docs/knowledge-base/grid-hide-grouped-columns.md b/docs/knowledge-base/grid-hide-grouped-columns.md
deleted file mode 100644
index a480ff23..00000000
--- a/docs/knowledge-base/grid-hide-grouped-columns.md
+++ /dev/null
@@ -1,40 +0,0 @@
----
-title: Hide grouped columns from the Grid
-description: An example on how hide grouped columns
-type: how-to
-page_title: Hiding grouped columns - KendoReact Grid
-slug: grid-hide-grouped-columns
-position:
-tags: grid, grouping
-ticketid:
-res_type: kb
-category: knowledge-base
----
-
-## Environment
-
-
-
- Product Version
- 5.12.0
-
-
- Product
- Progress® KendoReact
-
-
-
-
-## Description
-I want to hide the columns that I have added to the grouping of the Grid
-
-## Solution
-Columns in the Grid can be dynamically removed if we have the columns collection stored in the state and we have a way for determining which columns should be added to the columns collection of the Grid. In this example we are adding "show" property to the columns and its value is set to false if within the onDataStateChange event of the Grid there is a group expression with the field of the column.
-
-This is an example showcasing this approach:
-
-{% meta id:index height:760 %}
-{% embed_file grid/grid-hide-grouped-columns/app.jsx preview %}
-{% embed_file grid/grid-hide-grouped-columns/main.jsx %}
-{% embed_file grid/grid-hide-grouped-columns/products.json %}
-{% endmeta %}
\ No newline at end of file
diff --git a/docs/knowledge-base/grid-horizontal.md b/docs/knowledge-base/grid-horizontal.md
deleted file mode 100644
index dcb44963..00000000
--- a/docs/knowledge-base/grid-horizontal.md
+++ /dev/null
@@ -1,41 +0,0 @@
----
-title: How to create a horizontal Grid.
-description: An example on how to display a horizontal KendoReact Grid.
-type: how-to
-page_title: Horizontal Grid - KendoReact Grid
-slug: grid-horizontal
-tags: grid, horizontal, transpose, vertical
-ticketid: 1608513
-res_type: kb
-category: knowledge-base
----
-
-## Environment
-
-
-
- Product Version
- 5.17.0
-
-
- Product
- Progress® KendoReact
-
-
-
-
-
-## Description
-
-I want to create a horizontal Grid where the column headers are displayed in the first column on separate rows. In addition, the corresponding cell data of each column header should be displayed on the same row of the header.
-
-## Solution
-
-The Grid is designed to display the data in a vertical way but you can still achieve this by transforming the data (by transposing it) in a format expected by the Grid.
-
-The following example showcases this approach:
-
-{% meta height:760 %}
-{% embed_file grid/transpose-data/app.jsx preview %}
-{% embed_file grid/transpose-data/main.jsx %}
-{% endmeta %}
diff --git a/docs/knowledge-base/grid-limit-numeric-filter-value.md b/docs/knowledge-base/grid-limit-numeric-filter-value.md
deleted file mode 100644
index 5f31567f..00000000
--- a/docs/knowledge-base/grid-limit-numeric-filter-value.md
+++ /dev/null
@@ -1,40 +0,0 @@
----
-title: Limit Value in a Numeric Filter
-description: An example on how to limit the value in the numeric filter of the KendoReact NumericTextBox.
-type: how-to
-page_title: Limit the Value in a Numeric Filter - KendoReact NumericTextBox
-slug: limit-numeric-filter-value
-tags: grid, NumericTextBox, filter, limit value
-ticketid: 1547408
-res_type: kb
-category: knowledge-base
----
-
-## Environment
-
-
-
- Product Version
- 4.13.0
-
-
- Product
- Progress® KendoReact
-
-
-
-
-
-## Description
-How to limit the value in a numeric filter cell in order to prevent negative values?
-
-## Solution
-Creating a custom component that uses NumericTextBox as a filter and setting the min prop to zero.
-
-This is an example showcasing how to limit the value:
-
-{% meta height:480 %}
-{% embed_file grid/limit-numeric-filter-value/app.jsx preview %}
-{% embed_file grid/limit-numeric-filter-value/main.jsx %}
-{% embed_file shared/shared-products.json %}
-{% endmeta %}
diff --git a/docs/knowledge-base/grid-loading-indicator.md b/docs/knowledge-base/grid-loading-indicator.md
deleted file mode 100644
index 710a301f..00000000
--- a/docs/knowledge-base/grid-loading-indicator.md
+++ /dev/null
@@ -1,113 +0,0 @@
----
-title: Render a Loading Indicator
-description: "Learn how to implement a loading indicator panel for showing the loading state of the KendoReact Grid."
-type: how-to
-page_title: Render a Loading Indicator - KendoReact Grid
-slug: grid-loading-indicator
-tags: grid, kendoreact, loading
-ticketid: 1402875
-res_type: kb
-category: knowledge-base
----
-
-## Environment
-
-
-
-
- Product Version
- 4.5.0
-
-
- Product
- Progress® KendoReact
-
-
-
-
-
-## Description
-
-How to show a loading indication when loading data.
-
-## Solution
-
-### Rendering Loading Indicator
-
-When the KendoReact Data Grid contains a huge amount of records and depending on the browser, the component might take longer to load its data.
-
-In such cases, a loading indicator is suitable to indicate that the Grid is properly functioning and that its data will soon be displayed.
-
-The following example demonstrates how to render a loading indicator once a request is made and hide it when the request is finished successfully.
-
-{% meta id:loading-indicator height:650 %}
-{% embed_file grid/odata-server-operations/app.jsx preview %}
-{% embed_file grid/odata-server-operations/main.jsx %}
-{% embed_file shared/shared-products-loader.jsx %}
-{% endmeta %}
-
-#### Setup
-
-1. Create a component that will manage the data operations and the requests. This component will separate the data request and response logic from the declaration of the Grid.
-
- ```jsx-no-run
-
-
-
- Product Version
- 4.10.0
-
-
- Product
- Progress® KendoReact
-
-
-
-
-
-## Description
-
-How can I add a locked section header that changes when I scroll through the data similar to the ComboBox grouping headers.
-
-## Solution
-
-This will required the following:
-
-1. The section/header rows have to be part of the data.
-1. We can add a field in those data items and lock the rows based on that. The locked row of the current section/group will be locked at the top.
-
-> This approach is working with flat data and grouping on only one level. As the section/group data is part of the flat data we have to filter it based on that section value in order to collapse/expand the sections.
-
-The following example showcase this in action:
-
-{% meta id height:760 %}
-{% embed_file grid/lock-row-headers/app.jsx preview %}
-{% embed_file grid/lock-row-headers/main.jsx %}
-{% embed_file shared/shared-products-with-sections.json %}
-{% endmeta %}
-
diff --git a/docs/knowledge-base/grid-merge-cells-and-rows-data.md b/docs/knowledge-base/grid-merge-cells-and-rows-data.md
deleted file mode 100644
index 99ac57a7..00000000
--- a/docs/knowledge-base/grid-merge-cells-and-rows-data.md
+++ /dev/null
@@ -1,43 +0,0 @@
----
-title: Merge Rows in the Grid
-description: An example on how to merge cells and rows data in the KendoReact Grid.
-type: how-to
-page_title: Merge Rows and Cells Data in the Grid - KendoReact Grid
-slug: merge-row-and-cell-in-the-grid
-tags: grid, rows, merge, cells
-res_type: kb
-category: knowledge-base
----
-
-## Environment
-
-
-
-
- Product Version
- 7.0.2
-
-
- Product
- Progress® KendoReact
-
-
-
-
-
-## Description
-
-How can I merge or group duplicate cells and rows data in the KendoReact Data Grid?
-
-## Solution
-
-For simple scenarios where the data needs to be merged for single column, rowSpan can be set to the TD elements within the cellRender of the Grid. However, due to limitations in how HTML table can rowSpan/colSpan, it is not possible to have different colSpan for rows that already have set rowSpan, so using colSpan and rowSpan for merging duplicate rows and cells data will not be possible and different approach must be used.
-
-For this scenario, use a [`cellRender`]({% slug api_grid_gridprops %}#toc-cellrender) and compare the previous cell and previous row data to remove the content of the cell if it duplicate. You can also add different colors of the cell based on the values (suitable for boolean values for example), so they can be distinguished visually.
-
-{% meta id:index height:760 %}
-{% embed_file grid/merge-rows-and-cells/app.jsx preview %}
-{% embed_file grid/merge-rows-and-cells/main.jsx %}
-{% embed_file grid/merge-rows-and-cells/products.json %}
-{% endmeta %}
-
\ No newline at end of file
diff --git a/docs/knowledge-base/grid-multiple-functionalities.md b/docs/knowledge-base/grid-multiple-functionalities.md
deleted file mode 100644
index b75e9bae..00000000
--- a/docs/knowledge-base/grid-multiple-functionalities.md
+++ /dev/null
@@ -1,46 +0,0 @@
----
-title: Add Paging, Sorting, and Filtering to a Grid with Form-Editing Features
-description: An example of how to have the pagination, sorting, and filtering functionalities of a KendoReact Grid with form-editing features.
-type: how-to
-page_title: Have Paging, Sorting, and Filtering Functionalities in a Grid with Form-Editing Features - KendoReact Grid
-slug: grid-multiple-functionalities
-tags: grid, kendoreact, paging, sorting, filtering, page, sort, filter, form, edit
-ticketid: 1512657
-res_type: kb
-category: knowledge-base
----
-
-## Environment
-
-
-
-
- Product Version
- 4.6.0
-
-
- Product
- Progress® KendoReact
-
-
-
-
-
-## Description
-
-How can I have paging, sorting and filtering functionality of a Grid with form editing features?
-
-## Solution
-
-This can be achieved by building upon [`this demo`]({% slug external_editing_grid %}) of our documentation which showcases how to achieve a Grid with form editing features.
-
-By following the steps in the articles in our documentation regarding how to apply [`sorting`]({% slug sorting_grid %}#toc-getting-started), [`filtering`]({% slug filtering_grid %}#toc-getting-started) and [`paging`]({% slug paging_grid %}#toc-getting-started), those functionalities are then included to result in the following scenario shown in the demo below.
-
-
-
-{% meta id height:650 %}
-{% embed_file grid/multiple-functionalities/app.jsx preview %}
-{% embed_file grid/multiple-functionalities/main.jsx %}
-{% embed_file grid/multiple-functionalities/editForm.jsx %}
-{% embed_file shared/shared-products.json %}
-{% endmeta %}
diff --git a/docs/knowledge-base/grid-multiselect-filter-cell.md b/docs/knowledge-base/grid-multiselect-filter-cell.md
deleted file mode 100644
index b14bf683..00000000
--- a/docs/knowledge-base/grid-multiselect-filter-cell.md
+++ /dev/null
@@ -1,41 +0,0 @@
----
-title: Add custom filterCell with MultiSelect filter in Grid
-description: An example on how to create MultiSelect filter with filterCell for a column in KendoReact Grid.
-type: how-to
-page_title: Add MultiSelect Filter By Customizing The FilterCell Of A Column - KendoReact Grid
-slug: grid-multiselect-filter-cell
-tags: custom, filtering, filtercell, kendoreact, grid
-ticketid:
-res_type: kb
-category: knowledge-base
----
-
-## Environment
-
-
-
-
- Product
- Progress® KendoReact
-
-
-
-
-
-## Description
-
-How can I use MultiSelect for filtering a column?
-
-## Solution
-
-Configure custom filterCell for the column where you want to use the MultiSelect. Either pass the data that will populate the MultiSelect from the main component or load it within the custom filterCell. Since there is no built-in filter operator for handling the array with multiple value that the MultiSelect will return, a custom operator must be defined.
-
-Here is an example demonstrating this approach:
-
-{% meta id height:650 %}
-{% embed_file grid/multiselect-filter-cell/app.jsx preview %}
-{% embed_file grid/multiselect-filter-cell/main.jsx %}
-{% embed_file grid/multiselect-filter-cell/multiSelectFilterCell.jsx %}
-{% embed_file grid/multiselect-filter-cell/products.json %}
-{% endmeta %}
-
diff --git a/docs/knowledge-base/grid-paste-from-excel.md b/docs/knowledge-base/grid-paste-from-excel.md
deleted file mode 100644
index c18f4a4a..00000000
--- a/docs/knowledge-base/grid-paste-from-excel.md
+++ /dev/null
@@ -1,45 +0,0 @@
----
-title: Paste Data From Excel
-description: An example on how to paste data from Excel in the KendoReact Grid.
-type: how-to
-page_title: Paste Data From Excel - KendoReact Grid
-slug: grid-paste-from-excel
-tags: grid, kendoreact, excel, paste
-ticketid: 1481168
-res_type: kb
-category: knowledge-base
----
-
-## Environment
-
-
-
-
- Product Version
- 3.15.0
-
-
- Product
- Progress® KendoReact
-
-
-
-
-
-## Description
-
-I need to provide mechanism for pasting data into my KendoReact Grid, from Excel sheets.
-
-## Solution
-
-This will require wrapping the Grid in a div element and attaching an `onPaste` event. Then on that event:
-1. Take the data.
-1. Transform it into JSON based on the Grid fields.
-1. Set that JSON array as Grid data.
-
-This can be seen in the following example:
-
-{% meta id:index height:700 %}
-{% embed_file grid/paste-from-excel/app.jsx preview %}
-{% embed_file grid/paste-from-excel/main.jsx %}
-{% endmeta %}
diff --git a/docs/knowledge-base/grid-pdf-export-watermark.md b/docs/knowledge-base/grid-pdf-export-watermark.md
deleted file mode 100644
index 8647410f..00000000
--- a/docs/knowledge-base/grid-pdf-export-watermark.md
+++ /dev/null
@@ -1,40 +0,0 @@
----
-title: Export Grid Data With Watermark
-description: An example on how to export to PDF the Grid data with a watermark
-type: how-to
-page_title: Export Grid Data With Watermark - KendoReact Grid
-slug: grid-pdf-export-watermark
-position:
-tags: grid, export, PDF, watermark
-ticketid: 1580886
-res_type: kb
-category: knowledge-base
----
-
-## Environment
-
-
-
- Product Version
- 5.5.0
-
-
- Product
- Progress® KendoReact
-
-
-
-
-## Description
-I want my exported PDF document to have a watermark.
-
-## Solution
-This can be achieved by using the drawDom and exportPDF from the @progress/kendo-drawing package and then passing a template.
-
-This is an example showcasing this approach:
-
-{% meta id:index height:500 %}
-{% embed_file grid/grid-pdf-export-with-watermark/app.jsx preview %}
-{% embed_file grid/grid-pdf-export-with-watermark/main.jsx %}
-{% embed_file grid/grid-pdf-export-with-watermark/products.json %}
-{% endmeta %}
\ No newline at end of file
diff --git a/docs/knowledge-base/grid-progressbar-cell.md b/docs/knowledge-base/grid-progressbar-cell.md
deleted file mode 100644
index 998e5d45..00000000
--- a/docs/knowledge-base/grid-progressbar-cell.md
+++ /dev/null
@@ -1,40 +0,0 @@
----
-title: Add ProgressBar to Grid cell
-description: An example on how to display a progress bar in KendoReact Grid cell
-type: how-to
-page_title: Add ProgressBar cell to the Grid - KendoReact Grid
-slug: grid-progressbar-cell
-position:
-tags: grid, cell, progressbar, customization
-ticketid:
-res_type: kb
-category: knowledge-base
----
-
-## Environment
-
-
-
- Product Version
- 5.12.0
-
-
- Product
- Progress® KendoReact
-
-
-
-
-## Description
-I want to add ProgressBar component as a custom cell in the Grid.
-
-## Solution
-This can be achieved by defining custom cell for the column and rendering a ProgressBar component with the value from the data item for that column. For using the ProgressBar the @progress/kendo-react-progressbars package must be included.
-
-This is an example showcasing this approach:
-
-{% meta id:index height:500 %}
-{% embed_file grid/grid-progressbar-cell/app.jsx preview %}
-{% embed_file grid/grid-progressbar-cell/main.jsx %}
-{% embed_file grid/grid-progressbar-cell/products.json %}
-{% endmeta %}
\ No newline at end of file
diff --git a/docs/knowledge-base/grid-remove-select-all.md b/docs/knowledge-base/grid-remove-select-all.md
deleted file mode 100644
index 12f4ff05..00000000
--- a/docs/knowledge-base/grid-remove-select-all.md
+++ /dev/null
@@ -1,40 +0,0 @@
----
-title: Remove the "Select all" checkbox in the Grid's header for checkbox selection
-description: An example on how to remove the "Select all" checkbox in the header
-type: how-to
-page_title: Remove the "Select all" checkbox in the header - KendoReact Grid
-slug: grid-remove-select-all
-position:
-tags: grid, selection, checkbox
-ticketid:
-res_type: kb
-category: knowledge-base
----
-
-## Environment
-
-
-
- Product Version
- 5.13.1
-
-
- Product
- Progress® KendoReact
-
-
-
-
-## Description
-I want to remote the "Select all" checkbox in the Grid's header when using checkbox selection
-
-## Solution
-Handle the "headerCellRender" of the Grid to customize the header cells and if the "props.field" is the select field, return an empty TD element with the default properties only. For all of the other fields, return the default TD element.
-
-This is an example showcasing this approach:
-
-{% meta id:index height:500 %}
-{% embed_file grid/remove-select-all/app.jsx preview %}
-{% embed_file grid/remove-select-all/main.jsx %}
-{% embed_file grid/remove-select-all/products.json %}
-{% endmeta %}
\ No newline at end of file
diff --git a/docs/knowledge-base/grid-save-scroll-position-in-tabstrip.md b/docs/knowledge-base/grid-save-scroll-position-in-tabstrip.md
deleted file mode 100644
index 3f99e66d..00000000
--- a/docs/knowledge-base/grid-save-scroll-position-in-tabstrip.md
+++ /dev/null
@@ -1,40 +0,0 @@
----
-title: Save the scroll position of the Grid placed within a TabStrip
-description: An example on how to store and restore the scroll position of a Grid placed inside a TabStrip
-type: how-to
-page_title: Save And Restore The Scroll Position - KendoReact Grid
-slug: grid-save-scroll-position-in-tabstrip
-position:
-tags: grid, scroll, tabstrip, scrolling
-ticketid:
-res_type: kb
-category: knowledge-base
----
-
-## Environment
-
-
-
- Product Version
- 5.13.1
-
-
- Product
- Progress® KendoReact
-
-
-
-
-## Description
-I have a Grid placed in TabStrip, but after changing the tabs, the scroll position of the Grid is lost. How can I save and restore it?
-
-## Solution
-For saving the scroll position, handle the onScroll event of the Grid and save the scrollTop value of the scrollable container (ev.nativeEvent.target.scrollTop). Then, within React.useEffect, every time when the selected tab of the TabStrip is changed, either set the scrollTop position of the scrollable container (to restore the exact same position) or use the scrollIntoView method of the Grid's API to restore the scroll position to the same item. For the second approach, set the rowHeight of the Grid and using the scrollTop value and the rowHeight value you will be able to determine which row index must be passed to the scrollIntoView method.
-
-This is an example showcasing this approach:
-
-{% meta id:index height:500 %}
-{% embed_file grid/save-scroll-position-in-tabstrip/app.jsx preview %}
-{% embed_file grid/save-scroll-position-in-tabstrip/main.jsx %}
-{% embed_file grid/save-scroll-position-in-tabstrip/products.json %}
-{% endmeta %}
\ No newline at end of file
diff --git a/docs/knowledge-base/grid-scheduler-drag-and-drop-mobile.md b/docs/knowledge-base/grid-scheduler-drag-and-drop-mobile.md
deleted file mode 100644
index 189bf4ea..00000000
--- a/docs/knowledge-base/grid-scheduler-drag-and-drop-mobile.md
+++ /dev/null
@@ -1,67 +0,0 @@
----
-title: Drag and Drop Items From the KendoReact Grid to the KendoReact Scheduler
-description: An example on how to drag and drop items from the KendoReact Grid to the KendoReact Scheduler.
-type: how-to
-page_title: Drag and Drop Items From the KendoReact Grid to the KendoReact Scheduler - KendoReact Grid KendoReact Scheduler
-slug: grid-scheduler-drag-and-drop
-tags: grid, kendoreact, scheduler, drag, drop
-ticketid: 1478702
-res_type: kb
-category: knowledge-base
----
-
-## Environment
-
-
-
-
- Product Version
- 6.0.2
-
-
- Product
- Progress® KendoReact
-
-
-
-
-
-## Description
-
-Looking for a drag and drop between KendoReact Grid and KendoReact Scheduler. I want to transfer items from the Grid to the Scheduler.
-
-## Solution
-
-This will required the following setup:
-
-1. Use the [rowRender](https://www.telerik.com/kendo-react-ui/components/grid/api/GridProps/#toc-rowrender) prop of the Grid to make the row draggable and to get the currently dragged item.
-1. Then we need add a onDropEvent to the Scheduler container using the [component ref](https://reactjs.org/docs/refs-and-the-dom.html#creating-refs).
-1. When the user drops an item we add it to the Scheduler data updating the state.
-
-{% meta id:index height:900 %}
-{% embed_file scheduler/dnd-from-grid/app.jsx preview %}
-{% embed_file scheduler/dnd-from-grid/main.jsx %}
-{% embed_file shared/shared-data.js %}
-{% endmeta %}
-
-## Enabling the drag and drop on mobile devices
-
-This can be achieved by using the KendoReact [Drag&Drop](https://www.telerik.com/kendo-react-ui/components/utils/drag-and-drop/) utility with a custom `DragHandleCell` with touchAction set to `none`:
-
-{% meta id:index height:900 %}
-{% embed_file scheduler/dnd-from-grid-mobile/draggable/app.jsx preview %}
-{% embed_file scheduler/dnd-from-grid-mobile/draggable/main.jsx %}
-{% embed_file scheduler/dnd-from-grid-mobile/draggable/drag-handle-cell.jsx %}
-{% embed_file scheduler/dnd-from-grid-mobile/draggable/draggable-row.jsx %}
-{% embed_file shared/shared-data.js %}
-{% embed_file shared/shared-products.json %}
-{% endmeta %}
-
-
-The native Drag & Drop API does not support touch events by default. It is possible to enable the drag and drop functionality on mobile devices by using a polyfill as well:
-
-{% meta id:index height:900 %}
-{% embed_file scheduler/dnd-from-grid-mobile/polyfill/app.jsx preview %}
-{% embed_file scheduler/dnd-from-grid-mobile/polyfill/main.jsx %}
-{% embed_file shared/shared-data.js %}
-{% endmeta %}
\ No newline at end of file
diff --git a/docs/knowledge-base/grid-scheduler-drag-and-drop.md b/docs/knowledge-base/grid-scheduler-drag-and-drop.md
deleted file mode 100644
index 382dbb56..00000000
--- a/docs/knowledge-base/grid-scheduler-drag-and-drop.md
+++ /dev/null
@@ -1,45 +0,0 @@
----
-title: Drag and Drop Items From the KendoReact Grid to the KendoReact Scheduler
-description: An example on how to drag and drop items from the KendoReact Grid to the KendoReact Scheduler.
-type: how-to
-page_title: Drag and Drop Items From the KendoReact Grid to the KendoReact Scheduler - KendoReact Grid KendoReact Scheduler
-slug: grid-scheduler-drag-and-drop
-tags: grid, kendoreact, scheduler, drag, drop
-ticketid: 1478702
-res_type: kb
-category: knowledge-base
----
-
-## Environment
-
-
-
-
- Product Version
- 3.15.0
-
-
- Product
- Progress® KendoReact
-
-
-
-
-
-## Description
-
-Looking for a drag and drop between KendoReact Grid and KendoReact Scheduler. I want to transfer items from the Grid to the Scheduler.
-
-## Solution
-
-This will required the following setup:
-
-1. Use the [rowRender](https://www.telerik.com/kendo-react-ui/components/grid/api/GridProps/#toc-rowrender) prop of the Grid to make the row draggable and to get the currently dragged item.
-1. Then we need add a onDropEvent to the Scheduler container using the [component ref](https://reactjs.org/docs/refs-and-the-dom.html#creating-refs).
-1. When the user drops an item we add it to the Scheduler data updating the state.
-
-{% meta id:index height:900 %}
-{% embed_file scheduler/dnd-from-grid/app.jsx preview %}
-{% embed_file scheduler/dnd-from-grid/main.jsx %}
-{% embed_file shared/shared-data.js %}
-{% endmeta %}
diff --git a/docs/knowledge-base/grid-search.md b/docs/knowledge-base/grid-search.md
deleted file mode 100644
index 7941c303..00000000
--- a/docs/knowledge-base/grid-search.md
+++ /dev/null
@@ -1,40 +0,0 @@
----
-title: Grid Search Bar
-description: An example on how to implement a search bar in the Grid.
-type: how-to
-page_title: Grid Search Bar | KendoReact Chart
-slug: grid-search-bar
-tags: grid, search, bar
-ticketid: 1573969
-res_type: kb
-category: knowledge-base
----
-
-## Environment
-
-
-
-
- Product Version
- 5.5.0
-
-
- Product
- Progress® KendoReact
-
-
-
-
-## Description
-
-How can I implement a search bar in the Grid?
-
-## Solution
-
-This can be achieved by creating a custom input.
-
-{% meta id height:500 %}
-{% embed_file grid/grid-search-bar/app.tsx preview %}
-{% embed_file grid/grid-search-bar/main.tsx %}
-{% embed_file grid/grid-search-bar/sample-products.tsx %}
-{% endmeta %}
diff --git a/docs/knowledge-base/grid-selection-mobile-scrolling.md b/docs/knowledge-base/grid-selection-mobile-scrolling.md
deleted file mode 100644
index c285f26d..00000000
--- a/docs/knowledge-base/grid-selection-mobile-scrolling.md
+++ /dev/null
@@ -1,45 +0,0 @@
----
-title: Grid with selection that supports scrolling on mobile
-description: An example on how to allow mobile scrolling for a selectable Grid
-type: how-to
-page_title: Grid with selection that supports mobile scrolling - KendoReact Grid
-slug: grid-selectable-mobile-scrolling
-tags: grid, select, checkbox, mobile scrolling, grid selectable
-res_type: kb
-category: knowledge-base
----
-
-## Environment
-
-
-
- Product Version
- 7.0.2
-
-
- Product
- Progress® KendoReact
-
-
-
-
-
-## Description
-When enabling selection for the Grid using the [selectable](https://www.telerik.com/kendo-react-ui/components/grid/api/GridProps/#toc-selectable/) prop, scrolling does not work using mobile. This is because screen scrolling will trigger the selection.
-
-
-## Solution
-Use checkbox selection instead. You can enable checkbox selection only when the Grid is used in a mobile machine. This will allow using the built-in `selectable` property when using a desktop or laptop, and only checkbox selection with a mobile machine.
-
-Here is an example with the described approach, where we are importing the `useDeviceType` method from the `isMobile.jsx` file. This method is used when setting the `selectable` property of the Grid such that it is set to `null` when the device type is either a mobile or tablet. This leaves us with only the checkbox selection:
-
-{% meta id height:550 %}
-{% embed_file grid/grid-selection-mobile-scrolling/app.jsx preview %}
-{% embed_file grid/grid-selection-mobile-scrolling/main.jsx %}
-{% embed_file grid/grid-selection-mobile-scrolling/isMobile.jsx %}
-{% embed_file shared/shared-products.json %}
-{% endmeta %}
-
-For more information about enabling checkbox selection, check the following example from the Grid Selection article:
-- https://www.telerik.com/kendo-react-ui/components/grid/selection/#toc-customizing-the-selection
-
diff --git a/docs/knowledge-base/grid-show-details-in-popover.md b/docs/knowledge-base/grid-show-details-in-popover.md
deleted file mode 100644
index 7ce72f07..00000000
--- a/docs/knowledge-base/grid-show-details-in-popover.md
+++ /dev/null
@@ -1,40 +0,0 @@
----
-title: Show details info from data item in Popover on button click
-description: An example on how to show Popover with details on button click
-type: how-to
-page_title: Add command button to show additional information for the row - KendoReact Grid
-slug: grid-show-details-in-popover
-position:
-tags: grid, command, details
-ticketid:
-res_type: kb
-category: knowledge-base
----
-
-## Environment
-
-
-
- Product Version
- 5.12.0
-
-
- Product
- Progress® KendoReact
-
-
-
-
-## Description
-I want to add command button for each row to show additional information from the data item.
-
-## Solution
-For achieving the desired result, the dataItem for which the button is clicked must be passed to a state variable, so it can then be accessible within the Popover template. React Context is used for passing reference to the function showing the Popover to the command button.
-
-This is an example showcasing this approach:
-
-{% meta id:index height:480 %}
-{% embed_file grid/grid-show-details-in-popover/app.jsx preview %}
-{% embed_file grid/grid-show-details-in-popover/main.jsx %}
-{% embed_file grid/grid-show-details-in-popover/myCommandCell.jsx %}
-{% endmeta %}
\ No newline at end of file
diff --git a/docs/knowledge-base/grid-show-different-field-in-group.md b/docs/knowledge-base/grid-show-different-field-in-group.md
deleted file mode 100644
index f7f97586..00000000
--- a/docs/knowledge-base/grid-show-different-field-in-group.md
+++ /dev/null
@@ -1,40 +0,0 @@
----
-title: Show different field in group headers
-description: An example on how to show different field within the group header
-type: how-to
-page_title: Showing different field value within the group headers - KendoReact Grid
-slug: grid-show-different-field-in-group
-position:
-tags: grid, grouping
-ticketid:
-res_type: kb
-category: knowledge-base
----
-
-## Environment
-
-
-
- Product Version
- 5.12.0
-
-
- Product
- Progress® KendoReact
-
-
-
-
-## Description
-I want to show different than the group field value within the group headers
-
-## Solution
-For achieving the desired result we need to ensure that all items grouped by field A will have equal field B (the field that we want to display in the group header). As for the actual implementation, we need to handle the cellRender of the Grid and change the rendering of the group header cell for the group field that we want to change. The next step is to find the first data item in that group and get the value of the other field.
-
-This is an example showcasing this approach:
-
-{% meta id:index height:520 %}
-{% embed_file grid/grid-show-different-field-in-group/app.jsx preview %}
-{% embed_file grid/grid-show-different-field-in-group/main.jsx %}
-{% embed_file grid/grid-show-different-field-in-group/products.json %}
-{% endmeta %}
\ No newline at end of file
diff --git a/docs/knowledge-base/grid-show-hide-columns.md b/docs/knowledge-base/grid-show-hide-columns.md
deleted file mode 100644
index 45a395ea..00000000
--- a/docs/knowledge-base/grid-show-hide-columns.md
+++ /dev/null
@@ -1,42 +0,0 @@
----
-title: Dynamically Show/Hide Columns in the Grid
-description: An example on how to dynamically show or hide the columns in the KendoReact Grid.
-type: how-to
-page_title: Show/Hide Columns Dynamically in the Grid - KendoReact Grid
-slug: grid-show-hide-columns
-tags: grid, kendoreact, show, hide, columns, column
-ticketid: 1514629
-res_type: kb
-category: knowledge-base
----
-
-## Environment
-
-
-
-
- Product Version
- 4.5.0
-
-
- Product
- Progress® KendoReact
-
-
-
-
-
-## Description
-
-How can I dynamically show or hide the columns in the grid?
-
-## Solution
-
-In order to achieve this, the Columns of the Grid should be rendered dynamically and the data for the Columns should be kept in the state, so that the changes in the Grid can be visualized. In the example below, each Column has a show property which determines whether that Column is shown. There are checkboxes above the Grid whose onChange event handlers cause the state change and thus cause the re-rendering of the Grid with the corresponding columns missing/added.
-
-
-{% meta id height:650 %}
-{% embed_file grid/show-hide-columns/app.jsx preview %}
-{% embed_file grid/show-hide-columns/main.jsx %}
-{% embed_file shared/shared-products.json %}
-{% endmeta %}
diff --git a/docs/knowledge-base/grid-show-placeholder-for-filters.md b/docs/knowledge-base/grid-show-placeholder-for-filters.md
deleted file mode 100644
index 2ecbb05c..00000000
--- a/docs/knowledge-base/grid-show-placeholder-for-filters.md
+++ /dev/null
@@ -1,45 +0,0 @@
----
-title: Show placeholder in the KendoReact Grid filter components
-description: An example on how to show placeholder for the filters - KendoReact Grid.
-type: how-to
-page_title: Set placeholders for the filters - KendoReact Grid
-slug: grid-show-placeholder-for-filters
-tags: grid, kendoreact, filtering, placeholder
-ticketid:
-res_type: kb
-category: knowledge-base
----
-
-## Environment
-
-
-
-
- Product Version
- 5.12.0
-
-
- Product
- Progress® KendoReact
-
-
-
-
-
-## Description
-
-How can I add "Search" text in the Grid filters when they are empty?
-
-## Solution
-
-For setting a placeholder text for the built-in Grid filters a combination of using PropsContext (for the DatePicker and the NumericTextBox) for changing the "placeholder" property and pure JavaScript for setting the "placeholder" attribute for simple inputs can be used.
-
-Following is an example demonstrating how to set a placeholder for NumericTextBox, DatePicker and simple inputs for the filter components in the Grid:
-
-
-{% meta id height:480 %}
-{% embed_file grid/grid-show-placeholder-for-filters/app.jsx preview %}
-{% embed_file grid/grid-show-placeholder-for-filters/main.jsx %}
-{% embed_file grid/grid-show-placeholder-for-filters/grid-with-filtering.jsx %}
-{% embed_file grid/grid-show-placeholder-for-filters/sample-products.js %}
-{% endmeta %}
diff --git a/docs/knowledge-base/grid-stateful.md b/docs/knowledge-base/grid-stateful.md
deleted file mode 100644
index cc96cf7c..00000000
--- a/docs/knowledge-base/grid-stateful.md
+++ /dev/null
@@ -1,121 +0,0 @@
----
-title: Configure Stateful Grids
-description: "Learn how to configure a stateful KendoReact Grid allowing you to perform paging, sorting, filtering, grouping, and editing, and to reuse it across apps."
-type: how-to
-page_title: Configure Stateful Grids - KendoReact Grid
-slug: grid-stateful
-tags: grid, kendoreact, stateful
-ticketid: 1403874
-res_type: kb
-category: knowledge-base
----
-
-## Environment
-
-
-
-
- Product Version
- 3.15.0
-
-
- Product
- Progress® KendoReact
-
-
-
-
-
-## Description
-
-How to make a stateful and reusable Grid?
-
-## Solution
-
-#### Configuring Stateful Grids
-
-[Stateful components](https://code.tutsplus.com/tutorials/stateful-vs-stateless-functional-components-in-react--cms-29541) are class components that have a state which gets initialized in the constructor.
-
-You can configure a stateful KendoReact Data Grid to perform paging, sorting, filtering, grouping, and editing, and also reuse it in multiple applications and pages by setting its columns and desired data operations.
-
-#### Data Operations
-
-The stateful Grid performs its data operations by using the `process` method of the [`DataQuery`]({% slug overview_dataquery %}) library. To apply the changes and to save the current state of the grid data when a data operation is performed, handle the [`onDataStateChange`]({% slug api_grid_gridprops %}#toc-ondatachange) event.
-
-```jsx-no-run
- const onDataStateChange = (event) => {
- const updatedState = {
- ...gridState,
- skip: event.dataState?.skip,
- take: event.dataState?.take,
- sort: event.dataState?.sort,
- filter: event.dataState?.filter,
- };
- setGridState(updatedState);
- };
-```
-
-#### Editing
-
-To configure the stateful Grid for editing:
-
-1. Set two different data collections. The first data collection will be displayed in the Grid after the data operations are applied. The second data collection will be used to edit and add items to the collection.
-
- > If the stateful Grid is not intended to be groupable, you can use only one data collection.
-
- ```jsx-no-run
- const [state, setState] = useState({
- result: process(props.data, {skip: 0}),
- dataState: { skip: 0 },
- unprocessedData: props.data
- });
- ```
-
-1. Handle the [`onItemChange`]({% slug api_grid_gridprops %}#toc-onitemchange) event which will fire each time the user updates any of the editors.
-
- ```jsx-no-run
- const onItemChange = (event) => {
- let data = [...state.unprocessedData]; // Clone to avoid direct mutation
- let currentDataState = { ...state.dataState };
-
- if (event.field === props.editField && event.value === 'delete') {
- data.splice(data.findIndex(d => d === event.dataItem), 1);
- } else {
- const index = data.findIndex(d => d === event.dataItem);
- data[index] = { ...data[index], [event.field]: event.value };
- }
-
- setState({
- ...state,
- result: process(data, currentDataState),
- unprocessedData: data
- });
- };
- ```
-
-1. Add items to the collection by using a function which you can call from a button click either inside the Grid toolbar or outside the Grid.
-
- ```jsx-no-run
- const addNew = () => {
- let data = [...state.unprocessedData];
- data.unshift({ [props.editField]: true, Discontinued: false, ProductID: 0 });
- setState({
- ...state,
- result: process(data, state.dataState),
- unprocessedData: data
- });
- };
- ```
-
-#### Local Data Operations with HOC
-
-You can sort, filter, or page the local data to which the KendoReact Data Grid is bound by using the Kendo UI Data Query component.
-
-The following example demonstrates how to create a [higher-order component (HOC)](https://reactjs.org/docs/higher-order-components.html) which uses the `process()` Data Query method to manage the local data operations. The HOC has its own state and adds the `filter`, `sort`, `total`, and `skip` props to the Grid to handle its [`onDataStateChange`]({% slug api_grid_gridprops %}#toc-ondatastatechange) event. The HOC function is then applied for binding two Grids to different sets of data without the need for you to write any logic for the filtering, sorting, and paging operations.
-
-{% meta id:stateful height:700 %}
-{% embed_file grid/stateful/app.jsx preview %}
-{% embed_file grid/stateful/main.jsx %}
-{% embed_file grid/stateful/with-state.jsx %}
-{% embed_file shared/shared-products.json %}
-{% endmeta %}
diff --git a/docs/knowledge-base/grid-store-columns-width-and-order.md b/docs/knowledge-base/grid-store-columns-width-and-order.md
deleted file mode 100644
index c6601399..00000000
--- a/docs/knowledge-base/grid-store-columns-width-and-order.md
+++ /dev/null
@@ -1,43 +0,0 @@
----
-title: Store Grid columns width and order in the localStorage
-description: An example on how to store the width and the order of the Grid columns.
-type: how-to
-page_title: Store the width and the order of the columns - KendoReact Grid
-slug: grid-store-columns-width-and-order
-tags: grid, kendoreact, store, columns, width
-ticketid:
-res_type: kb
-category: knowledge-base
----
-
-## Environment
-
-
-
-
- Product Version
- 5.9.0
-
-
- Product
- Progress® KendoReact
-
-
-
-
-
-## Description
-
-I want to store the order and the width of the Grid columns on resizing and reordering.
-
-## Solution
-
-Handle the onColumnResize and onColumnReorder to get reference to the updated columns collection and store it in a localStorage variable. The columns definition of the Grid can then be loaded from that collection.
-
-Following is an example demonstrating this approach:
-
-
-{% meta id height:500 %}
-{% embed_file grid/store-columns-width-and-order/app.jsx preview %}
-{% embed_file grid/store-columns-width-and-order/main.jsx %}
-{% endmeta %}
diff --git a/docs/knowledge-base/grid-store-state-in-localstorage.md b/docs/knowledge-base/grid-store-state-in-localstorage.md
deleted file mode 100644
index 787af49f..00000000
--- a/docs/knowledge-base/grid-store-state-in-localstorage.md
+++ /dev/null
@@ -1,40 +0,0 @@
----
-title: Persisting The KendoReact Grid's DataState Between Page Reloads
-description: An example on how to preserve the state of the KendoReact Grid.
-type: how-to
-page_title: Save State - KendoReact Grid
-slug: grid-save-state-to-localstorage
-tags: grid, kendoreact, state, localstorage, refresh
-res_type: kb
-category: knowledge-base
----
-
-## Environment
-
-
-
-
-Product Version
-v5.12.1
-
-
-Product
-Progress® KendoReact
-
-
-
-
-
-## Description
-
-I want to preserve the Grid state between page reloads.
-
-## Solution
-
-You can achieve this by saving the DataState to the localStorage. When the dataState changes, store it in the localStore, and when the component loads, set the previously saved dataState from the localStorage.
-
-{% meta id:index height:480 %}
-{% embed_file grid/grid-save-datastate-to-localstorage/app.jsx preview %}
-{% embed_file grid/grid-save-datastate-to-localstorage/main.jsx %}
-{% embed_file shared/shared-products.json %}
-{% endmeta %}
diff --git a/docs/knowledge-base/grid-using-fitColumns-method.md b/docs/knowledge-base/grid-using-fitColumns-method.md
deleted file mode 100644
index 660c975a..00000000
--- a/docs/knowledge-base/grid-using-fitColumns-method.md
+++ /dev/null
@@ -1,43 +0,0 @@
----
-title: Using fitColumns method to change the width of a column to fit its content
-description: An example on how to use the fitColumns method for fitting content in a column - KendoReact Grid.
-type: how-to
-page_title: Use fitColumns method for changing the width of a column to fit its content - KendoReact Grid
-slug: grid-using-fitColumns-method
-tags: grid, kendoreact, fitColumns, width
-ticketid:
-res_type: kb
-category: knowledge-base
----
-
-## Environment
-
-
-
-
- Product Version
- 5.9.0
-
-
- Product
- Progress® KendoReact
-
-
-
-
-
-## Description
-
-I want to change the width of the columns to fit the content.
-
-## Solution
-
-The Grid's API has fitColumns method that will change the width of a given column to fit its content.
-
-Following is an example demonstrating this approach:
-
-
-{% meta id height:450 %}
-{% embed_file grid/using-fitColumns-method/app.jsx preview %}
-{% embed_file grid/using-fitColumns-method/main.jsx %}
-{% endmeta %}
diff --git a/docs/knowledge-base/grid-virtual-scrolling-pagechange-event.md b/docs/knowledge-base/grid-virtual-scrolling-pagechange-event.md
deleted file mode 100644
index 5be0b8d6..00000000
--- a/docs/knowledge-base/grid-virtual-scrolling-pagechange-event.md
+++ /dev/null
@@ -1,43 +0,0 @@
----
-title: Determine which scrollbar have triggered the onPageChange event with virtual scrolling in the Grid
-description: An example on how to determine which scrollbar was moved to fire onPageChange - KendoReact Grid.
-type: how-to
-page_title: Find which scrollbar have trigged the onPageChange event when virtual scrolling is enabled - KendoReact Grid
-slug: grid-virtual-scrolling-pagechange-event
-tags: grid, kendoreact, virtualization, scrolling
-ticketid:
-res_type: kb
-category: knowledge-base
----
-
-## Environment
-
-
-
-
- Product Version
- 5.9.0
-
-
- Product
- Progress® KendoReact
-
-
-
-
-
-## Description
-
-When virtual scrolling is enabled for the Grid, the onPageChange event fires even if the horizontal scrollbar is moved. How can I determine if the onPageChange is triggered from the vertical scrollbar?
-
-## Solution
-
-The onPageChange event contains the nativeEvent and storing its target scrollTop and scrollLeft values can be used for determining which scrollbar have triggered the event.
-
-Following is an example demonstrating this approach:
-
-
-{% meta id height:500 %}
-{% embed_file grid/virtual-scrolling-pagechange-event/app.jsx preview %}
-{% embed_file grid/virtual-scrolling-pagechange-event/main.jsx %}
-{% endmeta %}
diff --git a/docs/knowledge-base/gridcolumnmenucheckboxfilter-outside-grid.md b/docs/knowledge-base/gridcolumnmenucheckboxfilter-outside-grid.md
deleted file mode 100644
index 9935bb33..00000000
--- a/docs/knowledge-base/gridcolumnmenucheckboxfilter-outside-grid.md
+++ /dev/null
@@ -1,39 +0,0 @@
----
-title: Render the GridColumnMenuCheckBoxFilter component outside the Grid
-description: An example on how to render the GridColumnMenuCheckBoxFilter component outside the Grid
-type: how-to
-page_title: GridColumnMenuCheckBoxFilter outside the Grid - KendoReact Grid
-slug: grid-columnmenucheckboxfilter-outside-grid
-tags: grid, columnmenu, checkboxfilter, outside grid
-res_type: kb
-category: knowledge-base
----
-
-## Environment
-
-
-
- Product Version
- 6.1.1
-
-
- Product
- Progress® KendoReact
-
-
-
-
-## Description
-I want to render the GridColumnMenuCheckBoxFilter component as a standalone component without integrating it inside the KendoReact Grid.
-
-## Solution
-You can use the GridColumnMenuCheckboxFilter as a separate component for returning filter expressions. For using the GridColumnMenuCheckboxFilter, you will have to pass a "column" object with a "field" and the "data".
-
-This is an example showcasing this approach where the filter expression is logged to the console:
-
-{% meta id:index height:700 %}
-{% embed_file grid/checkboxfilter-outside-grid/app.jsx preview %}
-{% embed_file grid/checkboxfilter-outside-grid/main.jsx %}
-{% embed_file grid/checkboxfilter-outside-grid/columnMenu.jsx %}
-{% embed_file shared/shared-products.json %}
-{% endmeta %}
\ No newline at end of file
diff --git a/docs/knowledge-base/grouping-with-custom-cell.md b/docs/knowledge-base/grouping-with-custom-cell.md
deleted file mode 100644
index 48237cf0..00000000
--- a/docs/knowledge-base/grouping-with-custom-cell.md
+++ /dev/null
@@ -1,41 +0,0 @@
----
-title: Create a Grid with Grouping and a Custom Cell
-description: An example on how to use the KendoReact Grid with grouping and custom cells.
-type: how-to
-page_title: Create a Grid with Grouping and a Custom Cell - KendoReact Grid
-slug: kendoreact-grid-with-grouping-and-a-custom-cell
-tags: grid, rows, cell, grouping,
-ticketid: 1385369
-res_type: kb
-category: knowledge-base
----
-
-## Environment
-
-
-
-
- Product Version
- 3.0.0
-
-
- Product
- Progress® KendoReact
-
-
-
-
-
-## Description
-
-KendoReact Grid looses cell alignment when using the cell prop with grouping.
-
-## Solution
-
-In this case, the issue occurs because when the `rowType` is `groupHeader` the cell has to return null.
-
-{% meta id:index height:600 %}
-{% embed_file grid/grouping-with-custom-cell/app.jsx preview %}
-{% embed_file grid/grouping-with-custom-cell/main.jsx %}
-{% embed_file shared/shared-products.json %}
-{% endmeta %}
diff --git a/docs/knowledge-base/hide-kendoreact-notification-after-a-timeout.md b/docs/knowledge-base/hide-kendoreact-notification-after-a-timeout.md
deleted file mode 100644
index 84116d51..00000000
--- a/docs/knowledge-base/hide-kendoreact-notification-after-a-timeout.md
+++ /dev/null
@@ -1,42 +0,0 @@
----
-title: Hide KendoReact Notifications after a Timeout
-description: An example on how to hide the KendoReact Notification after a timeout.
-type: how-to
-page_title: Hide KendoReact Notifications after a Timeout - KendoReact Notification
-slug: hide-kendoreact-notification-after-a-timeout
-position:
-tags: notification
-ticketid: 1422282
-res_type: kb
-category: knowledge-base
----
-
-## Environment
-
-
-
- Product Version
- 3.0.0
-
-
- Product
- Progress® KendoReact
-
-
-
-
-
-## Description
-How to hide the Notification component automatically after a specific timeout.
-
-## Solution
-Currently, this can be done using the setTimeout function as shown in the example below.
-
-{% meta id:index height:300 %}
-{% embed_file notification/hide-after/app.jsx preview %}
-{% embed_file notification/hide-after/main.jsx %}
-{% endmeta %}
-
-Also, there is a feature request for this in our portal and I can suggest voting for it as it will increase its chances to be implemented as a built-in feature:
-
-https://feedback.telerik.com/kendo-react-ui/1413293-add-hideafter-prop-to-the-notification-component
diff --git a/docs/knowledge-base/how-to-retain-checkbox-selection-with-server-paging.md b/docs/knowledge-base/how-to-retain-checkbox-selection-with-server-paging.md
deleted file mode 100644
index e0719b01..00000000
--- a/docs/knowledge-base/how-to-retain-checkbox-selection-with-server-paging.md
+++ /dev/null
@@ -1,41 +0,0 @@
----
-title: Retain Checkbox Selection with Server Paging
-description: An example on how to retain checkbox selection in the KendoReact Grid with server paging.
-type: how-to
-page_title: Retain Checkbox Selection with Server Paging - KendoReact Grid
-slug: how-to-retain-checkbox-selection-with-server-paging
-tags: grid, checkbox, selection, sever-paging
-ticketid: 1413958
-res_type: kb
-category: knowledge-base
----
-
-## Environment
-
-
-
-
- Product Version
- 3.0.0.
-
-
- Product
- Progress® KendoReact
-
-
-
-
-
-## Description
-
-How can I retain the selection of checkbox in the KendoReact Grid when I navigate across different pages when the data comes from API server-side paging and sorting are configured?
-
-## Solution
-
-Keep the selected items by their ids inside the state.
-
-{% meta id:index height:500 %}
-{% embed_file grid/checkbox-selection-server-side/app.jsx preview %}
-{% embed_file grid/checkbox-selection-server-side/main.jsx %}
-{% embed_file grid/checkbox-selection-server-side/products-loader.jsx %}
-{% endmeta %}
diff --git a/docs/knowledge-base/inputs-delayed-value-change.md b/docs/knowledge-base/inputs-delayed-value-change.md
deleted file mode 100644
index 96a7d4d4..00000000
--- a/docs/knowledge-base/inputs-delayed-value-change.md
+++ /dev/null
@@ -1,39 +0,0 @@
----
-title: Add delayed value for the Input component that will change after a period of time of no typing
-description: An example on how to have delayed value after a period of no typing
-type: how-to
-page_title: Adding an option for a delayed value that will change only after a period of time without typing - KendoReact Input
-slug: inputs-delayed-value-change
-tags: input, inputs, pickers
-ticketid:
-res_type: kb
-category: knowledge-base
----
-
-## Environment
-
-
-
- Product Version
- 5.12.0
-
-
- Product
- Progress® KendoReact
-
-
-
-
-
-## Description
-I want the value of the Input to change only after the user stops typing for some time.
-
-## Solution
-Having a delayed value is possible by introducing a second state variable and tracking the time for the last change. Such implementation might be suitable for filtering, where triggering the filtering can be initiated only when the user stops typing.
-
-This is an example showcasing how to limit the value:
-
-{% meta height:300 %}
-{% embed_file inputs/inputs-delayed-value-change/app.jsx preview %}
-{% embed_file inputs/inputs-delayed-value-change/main.jsx %}
-{% endmeta %}
diff --git a/docs/knowledge-base/listbox-keyboard-navigation.md b/docs/knowledge-base/listbox-keyboard-navigation.md
deleted file mode 100644
index d15884b1..00000000
--- a/docs/knowledge-base/listbox-keyboard-navigation.md
+++ /dev/null
@@ -1,40 +0,0 @@
----
-title: Implement Keyboard Navigation for the KendoReact ListBox
-description: An example on how to achieve keyboard navigation for the KendoReact ListBox
-type: how-to
-page_title: KeyBoard Navigation - KendoReact ListBox
-slug: listbox-keyboard-navigation
-tags: listbox, keyboard, navigation, keyboard navigation, key, list
-ticketid: 1608113
-res_type: kb
-category: knowledge-base
----
-
-## Environment
-
-
-
-
-Product Version
-v5.13.1
-
-
-Product
-Progress® KendoReact
-
-
-
-
-
-## Description
-
-I want to implement keyboard navigation for the ListBox component.
-
-## Solution
-
-In order to implement the keyboard navigation functionality for the ListBox, wrap it with a `div` element and handle the `onKeyDown` event of the `div`. Inside the `onKeyDown` event handler, move the items and change their selection based on the pressed keys.
-
-{% meta height:500 %}
-{% embed_file listbox/listbox-keyboard-navigation/app.jsx preview %}
-{% embed_file listbox/listbox-keyboard-navigation/main.jsx %}
-{% endmeta %}
\ No newline at end of file
diff --git a/docs/knowledge-base/listbox-show-drag-clue.md b/docs/knowledge-base/listbox-show-drag-clue.md
deleted file mode 100644
index 3e3cf2de..00000000
--- a/docs/knowledge-base/listbox-show-drag-clue.md
+++ /dev/null
@@ -1,41 +0,0 @@
----
-title: Show clue indicator when dragging an item in the ListBox
-description: An example on how to show clue indicator when an item is dragged in the ListBox
-type: how-to
-page_title: Show indicator for the drop position of an item while dragging - KendoReact ListBox
-slug: listbox-show-drag-clue
-tags: listbox, grouping, customization, appearance
-ticketid:
-res_type: kb
-category: knowledge-base
----
-
-## Environment
-
-
-
- Product Version
- 5.12.0
-
-
- Product
- Progress® KendoReact
-
-
-
-
-
-## Description
-I want to show an indicator for the drop position of an item in the ListBox while dragging.
-
-## Solution
-For displaying a clue indicator for the drop position the onDragOver event should be used for adding a class name to the item where the dragged item will be dropped. Based on the position on the target item and the target ListBox, a top or a bottom border can be displayed to show the correct position where the item will be inserted.
-
-Within the onDrop and on each onDragOver we are clearing the class name that was previously added.
-
-{% meta height:500 %}
-{% embed_file listbox/show-drag-clue/app.jsx preview %}
-{% embed_file listbox/show-drag-clue/main.jsx %}
-{% embed_file listbox/show-drag-clue/products.json %}
-{% embed_file listbox/show-drag-clue/styles.css %}
-{% endmeta %}
diff --git a/docs/knowledge-base/listview-grouping.md b/docs/knowledge-base/listview-grouping.md
deleted file mode 100644
index a82d0876..00000000
--- a/docs/knowledge-base/listview-grouping.md
+++ /dev/null
@@ -1,44 +0,0 @@
----
-title: Add grouping functionality for the ListView
-description: An example on how to render grouped items in ListView
-type: how-to
-page_title: Grouping functionality - KendoReact ListView
-slug: listview-grouping
-tags: listview, grouping, customization, appearance
-ticketid:
-res_type: kb
-category: knowledge-base
----
-
-## Environment
-
-
-
- Product Version
- 5.12.0
-
-
- Product
- Progress® KendoReact
-
-
-
-
-
-## Description
-I want to have grouping functionality in KendoReact ListView
-
-## Solution
-The ListView is a template component and it allows complex rendering of the items.
-
-The first step for achieving the desired result will be to group the items by using the groupBy helper method. This will create an array where the parent items will be group items holding the group value and an items collection with the data items of that group.
-
-The second step will be to create a template that will take advantage of the new data structure and render the parent items (group items) as the main containers and the child items (the data items for each group) within that container.
-
-This is an example showcasing how to limit the value:
-
-{% meta height:760 %}
-{% embed_file listview/listview-grouping/app.jsx preview %}
-{% embed_file listview/listview-grouping/main.jsx %}
-{% embed_file listview/listview-grouping/products.json %}
-{% endmeta %}
diff --git a/docs/knowledge-base/listview-scheduler-drag-and-drop.md b/docs/knowledge-base/listview-scheduler-drag-and-drop.md
deleted file mode 100644
index 5ff05a8c..00000000
--- a/docs/knowledge-base/listview-scheduler-drag-and-drop.md
+++ /dev/null
@@ -1,45 +0,0 @@
----
-title: Drag and Drop Items from KendoReact ListView to KendoReact Scheduler
-description: Learn how to enable drag and drop functionality between KendoReact ListView and Scheduler components.
-type: how-to
-page_title: How to Enable Drag and Drop between KendoReact ListView and Scheduler
-slug: drag-drop-kendoreact-listview-scheduler
-tags: react, kendoReact, drag and drop, ListView, Scheduler
-res_type: kb
----
-
-## Environment
-
-| Property | Value |
-| --- | --- |
-| Product | KendoReact |
-| Version | 7.0.2|
-
-## Description
-
-Looking for a drag and drop between KendoReact ListView and KendoReact Scheduler. I want to transfer items from the ListView to the Scheduler.
-
-## Solution
-
-To enable drag and drop functionality between a KendoReact ListView and a KendoReact Scheduler, follow these steps:
-
-1. Render a custom ListView item by using the [`item`](https://www.telerik.com/kendo-react-ui/components/listview/api/ListViewProps/#toc-item) prop. This allows you to make the row draggable and obtain the currently dragged item.
-1. Add an `onDropEvent` to the Scheduler container using the [component ref](https://react.dev/reference/react/useRef).
-1. When the user drops an item, add it to the Scheduler data by updating the state.
-
-{% meta id:index height:900 %}
-{% embed_file scheduler/dnd-from-listview/app.jsx preview %}
-{% embed_file scheduler/dnd-from-listview/main.jsx %}
-{% embed_file shared/shared-data.js %}
-{% endmeta %}
-
-## Notes
-
-- Make sure to install the required dependencies, such as `react-dnd`, `@progress/kendo-react-listview`, and `@progress/kendo-react-scheduler`.
-- Refer to the official documentation for more information on the `DragSource` and `useRef` APIs.
-- Adjust the code according to your specific use case and requirements.
-
-## See Also
-
-- [KendoReact ListView Documentation](https://www.telerik.com/kendo-react-ui/components/listview/)
-- [KendoReact Scheduler Documentation](https://www.telerik.com/kendo-react-ui/components/scheduler/)
diff --git a/docs/knowledge-base/localization-use-variable-in-messages.md b/docs/knowledge-base/localization-use-variable-in-messages.md
deleted file mode 100644
index ce591611..00000000
--- a/docs/knowledge-base/localization-use-variable-in-messages.md
+++ /dev/null
@@ -1,43 +0,0 @@
----
-title: Add support for variable in localization messages
-description: An example on how to use variable with LocalizationProvider
-type: how-to
-page_title: Extending LocalizationProvider To Support Variables - KendoReact ListView
-slug: localization-use-variable-in-messages
-tags: localization, messages, variable, custom
-ticketid:
-res_type: kb
-category: knowledge-base
----
-
-## Environment
-
-
-
- Product Version
- 5.14.1
-
-
- Product
- Progress® KendoReact
-
-
-
-
-
-## Description
-I want to display state variable in the messages from the LocalizationProvider.
-
-## Solution
-Extend the LocalizationProvider by providing an option for executing a ${variable} syntax within the messages.
-
-This is an example showcasing this approach:
-
-{% meta height:320 %}
-{% embed_file localization/use-variable-in-messages/app.jsx preview %}
-{% embed_file localization/use-variable-in-messages/main.jsx %}
-{% embed_file localization/use-variable-in-messages/Chooser.jsx %}
-{% embed_file localization/use-variable-in-messages/Message.jsx %}
-{% embed_file localization/use-variable-in-messages/messages.js %}
-{% embed_file localization/use-variable-in-messages/MyLocalizationProvider.jsx %}
-{% endmeta %}
diff --git a/docs/knowledge-base/map-add-shape-titles.md b/docs/knowledge-base/map-add-shape-titles.md
deleted file mode 100644
index 020c783b..00000000
--- a/docs/knowledge-base/map-add-shape-titles.md
+++ /dev/null
@@ -1,45 +0,0 @@
----
-title: Add Titles to Map Shapes
-description: Learn how to add titles to shapes in the KendoReact Map.
-type: how-to
-page_title: Add Titles to Map Shapes - KendoReact Map
-slug: map_add_shape_titles
-tags: telerik, kendoreact, map, shapes, draw, title
-res_type: kb
-category: knowledge-base
----
-
-## Environment
-
-
-
-
- Product Version
- 5.5.1
-
-
- Product
- Progress® KendoReact
-
-
-
-
-## Description
-
-How can I add some title text for the shapes in the Map?
-
-## Solution
-
-1. Add a [shape layer]({% slug shape_layers_map %}) to the Map configuration.
-1. Attach a handler to the [`shapeCreated` event]({% slug events_map %}) of the Map.
-1. Create a method that will create a label for a given shape.
-1. Inside the method, retrieve the shape center using the [element bounding box]({% slug api_kendo-drawing_element %}#toc-bbox).
-1. Get a reference to the shape layer so you can draw on its surface.
-1. Draw the label by using the [Text element]({% slug api_kendo-drawing_text %}).
-
-The following example demonstrates how to add title text for Map shapes that are loaded from GeoJSON.
-
-{% meta height:700 %}
-{% embed_file map/add-shape-titles/app.jsx preview %}
-{% embed_file map/add-shape-titles/main.jsx %}
-{% endmeta %}
diff --git a/docs/knowledge-base/map-custom-bubble-symbols.md b/docs/knowledge-base/map-custom-bubble-symbols.md
deleted file mode 100644
index 39a5349b..00000000
--- a/docs/knowledge-base/map-custom-bubble-symbols.md
+++ /dev/null
@@ -1,44 +0,0 @@
----
-title: Render Custom Symbols for Map Bubble Layers
-description: "Learn how to render custom symbols on a Bubble layer in the KendoReact Map."
-type: how-to
-page_title: Render Custom Symbols for Map Bubble Layers - KendoReact Map
-slug: map_add_shape_titles
-tags: telerik, kendoreact, map, shapes, bubble
-res_type: kb
-category: knowledge-base
----
-
-## Environment
-
-
-
-
- Product Version
- 5.5.1
-
-
- Product
- Progress® KendoReact
-
-
-
-
-## Description
-
-How can I add some custom symbols to the Bubble layer of the Map?
-
-## Solution
-
-The [Bubble Layer]({% slug bubble_layers_map %}) allows you to define the way symbols are rendered.
-This approach works by defining a symbol function that uses the [Drawing API]({% slug overview_drawing %}) to define the shape. The symbol is typically a Group of shapes.
-
-The following example demonstrates how to render 200-kilometer lines in West-East direction as a symbol.
-
-> The lines get longer the farther you go North, which is due to that fact that the example uses the [Mercator Projection](https://en.wikipedia.org/wiki/Mercator_projection).
-
-{% meta height:700 %}
-{% embed_file map/custom-bubble-symbols/app.tsx preview %}
-{% embed_file map/custom-bubble-symbols/main.tsx %}
-{% embed_file map/custom-bubble-symbols/urban-areas.json %}
-{% endmeta %}
diff --git a/docs/knowledge-base/map-link-markers.md b/docs/knowledge-base/map-link-markers.md
deleted file mode 100644
index 809a7f74..00000000
--- a/docs/knowledge-base/map-link-markers.md
+++ /dev/null
@@ -1,44 +0,0 @@
----
-title: Link Map Markers to Locations
-description: "Learn how to draw location pointers for markers in the KendoReact Map."
-type: how-to
-page_title: Link Map Markers to Locations - KendoReact Map
-slug: map_link_markers
-tags: telerik, kendoreact, map, markers, draw, link, line
-category: knowledge-base
----
-
-## Environment
-
-
-
-
- Product Version
- 5.5.1
-
-
- Product
- Progress® KendoReact
-
-
-
-
-## Description
-
-How can I draw a straight line between a marker and a location?
-
-## Solution
-
-1. Add [shape and marker layers]({% slug overview_layers_map %}) to the Map configuration.
-1. Attach a handler to the [reset event]({% slug events_map %}) of the Map.
-1. Create a method that will draw a line between a marker and a specified position.
-1. Inside the method, retrieve the from and to coordinates for the line by using the [locationToView method]({% slug api_map_map %}#toc-locationtoview).
-1. Get a reference to the shape layer so you can draw on its surface.
-1. Draw the line by using the [Path element]({% slug api_kendo-drawing_path %}).
-
-The following example demonstrates how to draw a straight line between a marker and a location.
-
-{% meta height:700 %}
-{% embed_file map/link-markers/app.tsx preview %}
-{% embed_file map/link-markers/main.tsx %}
-{% endmeta %}
diff --git a/docs/knowledge-base/merge-row-in-the-grid.md b/docs/knowledge-base/merge-row-in-the-grid.md
deleted file mode 100644
index a5a203bb..00000000
--- a/docs/knowledge-base/merge-row-in-the-grid.md
+++ /dev/null
@@ -1,41 +0,0 @@
----
-title: Merge Rows in the Grid
-description: An example on how to merge rows in the KendoReact Grid.
-type: how-to
-page_title: Merge Rows in the Grid - KendoReact Grid
-slug: merge-row-in-the-grid
-tags: grid, rows, merge
-ticketid: 1414492
-res_type: kb
-category: knowledge-base
----
-
-## Environment
-
-
-
-
- Product Version
- 3.0.0
-
-
- Product
- Progress® KendoReact
-
-
-
-
-
-## Description
-
-How can I merge rows in the KendoReact Data Grid?
-
-## Solution
-
-Use a [`cellRender`]({% slug api_grid_gridprops %}#toc-cellrender) and add `rowSpan` to the cells that need it.
-
-{% meta id:index height:760 %}
-{% embed_file grid/merge-rows/app.jsx preview %}
-{% embed_file grid/merge-rows/main.jsx %}
-{% embed_file shared/shared-products.json %}
-{% endmeta %}
diff --git a/docs/knowledge-base/multiselect-color-tags.md b/docs/knowledge-base/multiselect-color-tags.md
deleted file mode 100644
index 5832c974..00000000
--- a/docs/knowledge-base/multiselect-color-tags.md
+++ /dev/null
@@ -1,39 +0,0 @@
----
-title: Change the colors of the selected MultiSelect tags based on a condition
-description: Learn how to set the colors of the selected MultiSelect tags based on a condition
-type: how-to
-page_title: Change the colors of the selected MultiSelect tags based on a condition - KendoReact MultiSelect
-slug: multiselect-color-tags
-tags: multiselect, kendoreact, tags, colors, conditionally
-ticketid: 1611089
-res_type: kb
-category: knowledge-base
----
-
-## Environment
-
-
-
-
- Product Version
- 5.14.1
-
-
- Product
- Progress® KendoReact
-
-
-
-
-## Description
-
-How to color the selected tags of the MultiSelect based on a condition?
-
-## Solution
-
-This can be achieved by using the [`tagRender`]({% slug api_dropdowns_multiselectprops %}#toc-tagrender) property and setting the background color based on the required condition.
-
-{% meta id:index height:320 %}
-{% embed_file multiselect/multiselect-color-tags/app.jsx preview %}
-{% embed_file multiselect/multiselect-color-tags/main.jsx %}
-{% endmeta %}
diff --git a/docs/knowledge-base/multiselect-disable-items.md b/docs/knowledge-base/multiselect-disable-items.md
deleted file mode 100644
index 12acc34c..00000000
--- a/docs/knowledge-base/multiselect-disable-items.md
+++ /dev/null
@@ -1,46 +0,0 @@
----
-title: Disable list items in the MultiSelect component.
-description: An example on how to disable list items in the KendoReact MultiSelect.
-type: how-to
-page_title: Disable items - KendoReact MultiSelect
-slug: multiselect-disable-items
-tags: disable, list, multiselect
-ticketid: 1620902
-res_type: kb
-category: knowledge-base
----
-
-## Environment
-
-
-
-
- Product Version
- 5.17.0
-
-
- Product
- Progress® KendoReact
-
-
-
-
-
-## Description
-
-I want disable specific items based on a certain condition? For example, I want to disable the items which their text starts with the letter A, disable a specific item based on its whole text value, or disabled an item based on its id value.
-
-## Solution
-
-> This is an alternative solution for the approach used in the [documentation](https://www.telerik.com/kendo-react-ui/components/dropdowns/multiselect/disabled-item/). The following implementation also shows how to keep the Popup open when the disabled item is clicked.
-
-You can achieve this using the `itemRender` property where you can set the CSS styles `pointer-events: none` and `opacity: 0.7` for certain items.
-In addition, when clicking on a disabled item, the click event will happen on the 
-