chore: update grid props

Author: silviyaboteva

examples/kendo-react-build-a-sales-dashboard/package.json

@@ -3,13 +3,13 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@progress/kendo-data-query": "^1.7.0",
+    "@progress/kendo-data-query": "^1.7.1",
     "@progress/kendo-date-math": "^1.5.14",
-    "@progress/kendo-drawing": "^1.21.1",
+    "@progress/kendo-drawing": "^1.21.2",
     "@progress/kendo-file-saver": "^1.1.2",
     "@progress/kendo-inputs-common": "^3.1.1",
     "@progress/kendo-intl": "^3.1.2",
-    "@progress/kendo-licensing": "^1.3.3",
+    "@progress/kendo-licensing": "^1.6.0",
     "@progress/kendo-popup-common": "^1.9.2",
     "@progress/kendo-react-animation": "^11.0.0",
     "@progress/kendo-react-buttons": "^11.0.0",

examples/kendo-react-build-a-sales-dashboard/src/components/GridContainer.js

@@ -2,8 +2,11 @@ import React from 'react';
 import { Grid, GridColumn as Column } from '@progress/kendo-react-grid';
 import { gridData } from '../data/appData';
 import { Sparkline } from '@progress/kendo-react-charts';
+import { Checkbox } from '@progress/kendo-react-inputs';
+
+const SparkLineChartCell = (props) => <td><Sparkline data={props.dataItem.PriceHistory} /></td>
+const ActiveCell = (props) => <td><Checkbox disabled defaultChecked={props.dataItem[props.field]} /></td>
 
-const SparkLineChartCell = (props) => <td><Sparkline data={props.dataItem.PriceHistory}/></td>
 const processData = (data) => {
   data.forEach((item) => {
     item.PriceHistory = Array.from({ length: 20 }, () => Math.floor(Math.random() * 100));
@@ -15,20 +18,21 @@ const processData = (data) => {
 export const GridContainer = () => (
 
   <div>
-    <Grid style={{ height: '300px' }} data={processData(gridData)}>
-      <Column field="ProductID" title="ID" width="40px" />
-      <Column field="ProductName" title="Name" width="160px" />
-      <Column field="Category.CategoryName" title="Category Name" width="80px" />
+    <Grid
+      style={{ height: '300px' }}
+      data={processData(gridData)}
+      defaultSort={[{
+        field: "UnitPrice",
+        dir:"asc"
+      }]}
+      sortable
+    >
+      <Column field="ProductID" title="ID" width="40px" sortable={false} />
+      <Column field="ProductName" title="Name" />
       <Column field="UnitPrice" title="Price" width="80px" />
-      <Column field="UnitsInStock" title="Stock" width="90px" />
-      <Column field="PriceHistory" width="130px" cell={SparkLineChartCell} title="Price history" />
-      <Column field="Discontinued" width="130px"
-        cell={(props) => (
-          <td>
-            <input className="k-checkbox" type="checkbox" disabled defaultChecked={props.dataItem[props.field]} />
-            <label className="k-checkbox-label"></label>
-          </td>
-        )} />
+      <Column field="UnitsInStock" title="In stock" width="100px" sortable={false} />
+      <Column field="PriceHistory"title="Price history" width="200px" cells={{ data: SparkLineChartCell }} sortable={false} />
+      <Column field="Discontinued"  title="Active" width="70px" cells={{ data: ActiveCell }} sortable={false} />
     </Grid>
   </div>
 );

examples/kendo-react-sales-dashboard/src/components/GridContainer.jsx

@@ -13,7 +13,6 @@ class SparkLineChartCell extends React.Component {
 
 class ActiveCell extends React.Component {
     render() {
-        console.log(this.props.dataItem);
         return (
             <td><Checkbox disabled defaultChecked={this.props.dataItem[this.props.field]} /></td>
         )