Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import React from 'react';
- import ReactDOM from 'react-dom';
- import $ from 'jquery';
- import kendo from '@progress/kendo-ui';
- import { Grid, GridColumn } from '@progress/kendo-grid-react-wrapper';
- import { DropDownList } from '@progress/kendo-react-dropdowns';
- import { GridCell } from '@progress/kendo-react-grid';
- class DropDownCell extends GridCell {
- handleChange(e) {
- this.props.onChange({
- dataItem: this.props.dataItem,
- field: this.props.field,
- syntheticEvent: e.syntheticEvent,
- value: e.target.value
- });
- }
- render() {
- const value = this.props.dataItem[this.props.field];
- if (!this.props.dataItem.inEdit) {
- return (
- <td> {
- (value === null) ? '' : this.props.dataItem[this.props.field].toString()}
- </td>
- );
- }
- return (
- <td>
- <DropDownList
- style={{ width: "100px" }}
- onChange={this.handleChange.bind(this)}
- value={value}
- data={[
- { text: 'yes', value: true },
- { text: 'no', value: false },
- { text: '(empty)', value: null }
- ]}
- valueField="value"
- textField="text"
- />
- </td>
- );
- }
- }
- class AppComponent extends React.Component{
- constructor(props){
- super(props);
- this.onDataBound = function(){
- $(".toolbar").html(
- `<tr>
- <td>
- </tr>`
- );
- }
- this.state = {
- products :[
- { 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: 35,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, 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, 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, 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"}}
- ]
- };
- this.dataSource = new kendo.data.DataSource({
- data: this.state.products,
- pageSize: 5,
- schema:{
- model:{
- field:{
- ProductID: {type:"number"},
- ProductName:{type:"string"},
- Discontinued:{type:"boolean"}
- }
- }
- }
- });
- }
- render(){
- return(
- <div>
- <Grid
- dataSource={this.dataSource}
- filterable={true}
- editable={true }
- sortable={true}
- pageable={true}
- groupable={true}
- editable={"inline"}
- dataBound={this.onDataBound}>
- <GridColumn field="Discontinued" title="Discontinued" cell={DropDownCell} />
- <GridColumn field="SupplierID" title="Supperlie Id"/>
- <GridColumn field="CategoryID" title="Category Id"/>
- <GridColumn field="QuantityPerUnit" title="Quantity Per Unit"/>
- <GridColumn command={["edit", "destroy"]} title=" " width="200px" />
- </Grid>
- </div>
- )
- }
- }
- export default AppComponent;
Add Comment
Please, Sign In to add comment