chore: update grid props in kendo-react-sales-dashboard app

Author: silviyaboteva

examples/kendo-react-sales-dashboard/src/App.js

@@ -82,15 +82,15 @@ class App extends Component {
         let headerText = this.state.value.replace('Sales','');
         return (
           <Ripple>
-            <div className="buttons-right mt-1">
-              <Button themeColor={'primary'} onClick={this.handleShare} className='mr-2'>Share</Button>
-              <Button onClick={this.handlePDFExport}>Export to PDF</Button>
-            </div>
             <div className="app-container" ref={(app) => this.app = app}>
                 <div className="row">
                   <div className="col-xs-9 col-sm-9 col-md-9 col-lg-9 col-xl-9">
                     <h1>Sales | {headerText}</h1>
-                  </div>
+                </div>
+                <div className="buttons-right mt-1">
+                  <Button themeColor={'primary'} onClick={this.handleShare} className='mr-2'>Share</Button>
+                  <Button onClick={this.handlePDFExport}>Export to PDF</Button>
+                </div>
                 </div>
                 <div className="row">
                   <div className="col-xs-3 col-sm-3 col-md-3 col-lg-3 col-xl-3">

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

@@ -2,6 +2,7 @@ import React from 'react';
 import { Grid, GridColumn as Column } from '@progress/kendo-react-grid';
 import { Sparkline } from '@progress/kendo-react-charts';
 import { process } from '@progress/kendo-data-query';
+import { Checkbox } from '@progress/kendo-react-inputs';
 
 class SparkLineChartCell extends React.Component {
     render (){
@@ -11,52 +12,44 @@ 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>
+        )
+    }
+}
+
 export default class GridContainer extends React.Component {
 
-    state = {
-        dataState:{
-            sort:[{
-                field: "UnitPrice",
-                dir:"asc"
-            }]
-        }
-    }
     processData = (data) => {
         data.forEach(item => {
             item.PriceHistory = Array.from({length: 40}, () => Math.floor(Math.random() * 100));
             return item
         })
-        return process(data,this.state.dataState);
+        return data;
     }
 
-    handleDataStateChange = (e) => {
-        this.setState({
-            dataState: e.dataState
-        })
-    }
 
     render() {
         return (
             <div>
                 <Grid
                     style={{ height: '300px' }}
                     data={this.processData(this.props.data)}
-                    {...this.state.dataState}
-                    onDataStateChange={this.handleDataStateChange}
+                    defaultSort={[{
+                        field: "UnitPrice",
+                        dir:"asc"
+                    }]}
                     sortable
                 >
                     <Column field="ProductID" title="ID" sortable={false} width="40px"/>
-                    <Column field="ProductName" title="Name" />
+                    <Column field="ProductName" title="Name"  />
                     <Column field="UnitPrice" title="Price" width="100px" />
                     <Column field="UnitsInStock" title="In stock"  sortable={false} width="100px"/>
-                    <Column field="PriceHistory" title="Price history" cell={SparkLineChartCell}sortable={false} width="200px"/>
-                    <Column field="Discontinued" title="Active" sortable={false} width="100px"
-                        cell={(props) => (
-                            <td>
-                                <input type="checkbox" disabled className="k-checkbox" defaultChecked={props.dataItem[props.field]} />
-                                <label className="k-checkbox-label"></label>
-                            </td>
-                        )} />
+                    <Column field="PriceHistory" title="Price history" cells={{ data: SparkLineChartCell }} sortable={false} width="200px"/>
+                    <Column field="Discontinued" title="Active" sortable={false} width="70px" cells={{ data: ActiveCell }} />
                 </Grid>
             </div>
         );