chore: bump the kendo-dependencies group across 1 directory with 24 updates

examples/kendo-react-homepage-demo/package.json

@@ -7,14 +7,14 @@
     "@apollo/client": "^3.8.10",
     "@progress/kendo-data-query": "^1.7.1",
     "@progress/kendo-drawing": "^1.21.2",
-    "@progress/kendo-react-charts": "^10.0.0",
-    "@progress/kendo-react-dateinputs": "^10.0.0",
-    "@progress/kendo-react-dropdowns": "^10.0.0",
-    "@progress/kendo-react-grid": "^10.0.0",
-    "@progress/kendo-react-inputs": "^10.0.0",
-    "@progress/kendo-react-intl": "^10.0.0",
-    "@progress/kendo-react-layout": "^10.0.0",
-    "@progress/kendo-theme-material": "^10.3.1",
+    "@progress/kendo-react-charts": "^11.1.0",
+    "@progress/kendo-react-dateinputs": "^11.1.0",
+    "@progress/kendo-react-dropdowns": "^11.1.0",
+    "@progress/kendo-react-grid": "^11.1.0",
+    "@progress/kendo-react-inputs": "^11.1.0",
+    "@progress/kendo-react-intl": "^11.1.0",
+    "@progress/kendo-react-layout": "^11.1.0",
+    "@progress/kendo-theme-material": "^11.0.2",
     "bootstrap": "5.2.1",
     "dotenv": "^16.3.2",
     "graphql": "^16.8.1",

examples/kendo-react-homepage-demo/src/components/Author.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+export const Author = (props) => {
+    return (
+        <td>
+            <p className="author-container">
+                <span>
+                    <img
+                        className="img-circle"
+                        alt="User Avatar"
+                        src={props.dataItem.node.author.avatarUrl} style={{ width: 30, height: 30 }}
+                    />
+                </span>
+                {props.dataItem.node.author.login}
+            </p>
+        </td>
+    )
+}

examples/kendo-react-homepage-demo/src/components/DetailComponent.jsx

@@ -16,7 +16,6 @@ export class DetailComponent extends React.Component {
     render() {
         const dataItem = this.props.dataItem;
         const data = this.props.makeChartData(dataItem.node.labels.edges);
-
         const defaultTooltipRender = (item) => {
             if (item.point) {
                 return (`${item.point.category} : ${item.point.value}`)
@@ -25,7 +24,7 @@ export class DetailComponent extends React.Component {
         };
 
         return (
-            <div style={{ padding: 0 }}>
+            <div key={dataItem.node.number} style={{ padding: 0 }}>
                 <div className="row" style={{ height: 300 }}>
                     <div className="col-2" >
                         <strong>Author: {dataItem.node.author.login}</strong>

examples/kendo-react-homepage-demo/src/components/KendoGridContainer.jsx

@@ -1,11 +1,10 @@
 import React from "react";
 import { Query } from '@apollo/client/react/components';
 import { Grid, GridColumn } from '@progress/kendo-react-grid';
-import { process } from '@progress/kendo-data-query';
 import { ColumnMenu } from './ColumnMenu';
 import { DetailComponent } from './DetailComponent';
 import { StateCell } from './StateCell';
-import { АssignedTo } from './АssignedTo';
+import { Author } from './Author';
 import { LoadingPanel } from './LoadingPanel';
 
 import { getQuery } from '../queries/github';
@@ -15,17 +14,9 @@ import reactIssues from '../data/fallBackDataReact.json';
 
 
 export class KendoGridContainer extends React.Component {
-    state = {
-        skip: 0,
-        take: 10
-    }
     allLabels = [];
     uniqueLabels = [];
     initialLoad = true;
-    expandChange = (event) => {
-        event.dataItem.expanded = !event.dataItem.expanded;
-        this.forceUpdate();
-    }
 
     getOccurrence = (array, value) => {
         var count = 0;
@@ -84,10 +75,6 @@ export class KendoGridContainer extends React.Component {
                         this.allLabels = [];
 
                         gridData.map((item, index) => {
-                            if (this.initialLoad) {
-                                index === 0 ? item.expanded = true : item.expanded = false
-                                this.initialLoad = false
-                            }
                             item.node.createdAt = new Date(item.node.createdAt)
                             item.node.labels.edges.forEach(item => {
                                 this.allLabels.push({
@@ -106,20 +93,22 @@ export class KendoGridContainer extends React.Component {
                         return (
                             <React.Fragment>
                                 <Grid
-                                    data={process(gridData, this.state)}
+                                    data={gridData}
+                                    autoProcessData={true}
+                                    dataItemKey='id'
                                     sortable
                                     pageable
-                                    {...this.state}
-                                    onDataStateChange={(e) => { this.setState(e.dataState); }}
-                                    expandField="expanded"
-                                    onExpandChange={this.expandChange}
+                                    defaultSkip={0}
+                                    defaultTake={10}
                                     style={{ height: '100%', overflow: 'auto', borderInline: 0 }}
+                                    scrollable={'scrollable'}
+                                    onDetailExpandChange={(e) => { console.log(e) }}
                                     detail={(props) => <DetailComponent {...props} makeChartData={this.makeChartData} />}
                                 >
                                     <GridColumn field="node.number" title="ID" width={100} />
-                                    <GridColumn field="node.state" title="State" cell={StateCell} width={100} />
+                                    <GridColumn field="node.state" title="State" cells={{ data: StateCell }} width={100} />
                                     <GridColumn field="node.title" title="Issue" columnMenu={ColumnMenu} />
-                                    <GridColumn field="node.assignees.node" title="Assigned to" width={200} cell={АssignedTo} sortable={false} />
+                                    <GridColumn field="node.author.label" title="Author" width={200} cells={{ data: Author }} sortable={false} />
                                     <GridColumn field="node.createdAt" title="Created on" width={200} format='{0:yyyy/MM/dd hh:mm a}' filter="date" columnMenu={ColumnMenu} />
                                 </Grid>
                                 {loading && <LoadingPanel />}