External Form
The Grid provides options for editing its data by external popup editing form.
import React from 'react';
import ReactDOM from 'react-dom';
import { Grid, GridColumn as Column, GridToolbar } from '@progress/kendo-react-grid';
import { Input, NumericTextBox } from '@progress/kendo-react-inputs';
import Dialog from './dialog.jsx';
import { sampleProducts } from './sample-products.jsx';
import cellWithEditing from './cellWithEditing.jsx';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
products: sampleProducts.slice(0, 7),
productInEdit: undefined
};
this.edit = this.edit.bind(this);
this.save = this.save.bind(this);
this.remove = this.remove.bind(this);
this.cancel = this.cancel.bind(this);
this.insert = this.insert.bind(this);
this.onDialogInputChange = this.onDialogInputChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleSubmit(event) {
event.preventDefault();
}
edit(dataItem) {
this.setState({ productInEdit: this.cloneProduct(dataItem) });
}
remove(dataItem) {
const products = this.state.products.slice();
const index = products.findIndex(p => p.ProductID === dataItem.ProductID);
if (index !== -1) {
products.splice(index, 1);
this.setState({
products: products
});
}
}
save() {
const dataItem = this.state.productInEdit;
const products = this.state.products.slice();
if (dataItem.ProductID === undefined) {
products.unshift(this.newProduct(dataItem));
} else {
const index = products.findIndex(p => p.ProductID === dataItem.ProductID);
products.splice(index, 1, dataItem);
}
this.setState({
products: products,
productInEdit: undefined
});
}
cancel() {
this.setState({ productInEdit: undefined });
}
insert() {
this.setState({ productInEdit: { } });
}
onDialogInputChange(event) {
const target = event.target;
const value = target.type === 'checkbox' ? target.checked : target.value;
const name = target.props ? target.props.name : target.name;
const edited = this.cloneProduct(this.state.productInEdit);
edited[name] = value;
this.setState({
productInEdit: edited
});
}
render() {
return (
<div >
<Grid
data={this.state.products}
style={{ height: '420px' }}
>
<GridToolbar>
<button
onClick={this.insert}
className="k-button"
>
Add New
</button>
</GridToolbar>
<Column field="ProductID" title="Id" width="50px" />
<Column field="ProductName" title="Product Name" />
<Column field="UnitsInStock" title="Units In Stock" />
<Column field="Discontinued" />
<Column
title="Edit"
cell={cellWithEditing(this.edit, this.remove)}
/>
</Grid>
{this.state.productInEdit &&
<Dialog
title={this.dialogTitle()}
close={this.cancel}
ok={this.save}
cancel={this.cancel}
>
<form onSubmit={this.handleSubmit}>
<div style={{ marginBottom: '1rem' }}>
<label>
Product Name<br />
<Input
type="text"
name="ProductName"
value={this.state.productInEdit.ProductName || ''}
onChange={this.onDialogInputChange}
/>
</label>
</div>
<div style={{ marginBottom: '1rem' }}>
<label>
Units In Stock<br />
<NumericTextBox
name="UnitsInStock"
value={this.state.productInEdit.UnitsInStock || 0}
onChange={this.onDialogInputChange}
/>
</label>
</div>
<div>
<label>
<input
type="checkbox"
name="Discontinued"
checked={this.state.productInEdit.Discontinued || false}
onChange={this.onDialogInputChange}
/>
Discontinued product
</label>
</div>
</form>
</Dialog>}
</div>
);
}
dialogTitle() {
return `${this.state.productInEdit.ProductID === undefined ? 'Add' : 'Edit'} product`;
}
cloneProduct(product) {
return Object.assign({}, product);
}
newProduct(source) {
const newProduct = {
ProductID: this.generateId(),
ProductName: '',
UnitsInStock: 0,
Discontinued: false
};
return Object.assign(newProduct, source);
}
generateId() {
let id = 1;
this.state.products.forEach(p => { id = Math.max((p.ProductID || 0) + 1, id); });
return id;
}
}
ReactDOM.render(
<App />,
document.querySelector('my-app')
);
import React from 'react';
export default class Dialog extends React.Component {
render() {
return (
<div className="k-dialog-wrapper">
<div className="k-overlay" />
<div className="k-widget k-window k-dialog">
<div className="k-window-titlebar k-dialog-titlebar k-header">
<div className="k-window-title k-dialog-title">
{this.props.title}
</div>
<div className="k-window-actions k-dialog-actions">
<a
aria-label="Close"
className="k-button k-bare k-button-icon ' +
'k-window-action k-dialog-action k-dialog-close"
href="#"
onClick={() => this.props.close()}
role="button"
>
<span className="k-icon k-i-x" />
</a>
</div>
</div>
<div className="k-content k-window-content k-dialog-content">
{this.props.children}
</div>
<div
className="k-button-group k-dialog-buttongroup k-dialog-button-layout-stretched"
>
<button
className="k-button"
onClick={() => this.props.cancel()}
>
Cancel
</button>
<button
className="k-button k-primary"
onClick={() => this.props.ok()}
>
Save
</button>
</div>
</div>
</div>
);
}
}
import React from 'react';
import { GridCell } from '@progress/kendo-react-grid';
export default function cellWithEditing(edit, remove) {
return class extends GridCell {
render() {
return (
<td>
<button
className="k-primary k-button k-grid-edit-command"
onClick={() => { edit(this.props.dataItem); }}
>
Edit
</button>
<button
className="k-button k-grid-remove-command"
onClick={() => {
confirm('Confirm deleting: ' + this.props.dataItem.ProductName) &&
remove(this.props.dataItem);
}}
>
Remove
</button>
</td>
);
}
};
}
export const sampleProducts = [
{
"ProductID": 1,
"ProductName": "Chai",
"SupplierID": 1,
"CategoryID": 1,
"QuantityPerUnit": "10 boxes x 20 bags",
"UnitPrice": 18,
"UnitsInStock": 39,
"UnitsOnOrder": 0,
"ReorderLevel": 10,
"Discontinued": false,
"Category": {
"CategoryID": 1,
"CategoryName": "Beverages",
"Description": "Soft drinks, coffees, teas, beers, and ales"
},
"FirstOrderedOn": new Date(1996, 8, 20)
},
{
"ProductID": 2,
"ProductName": "Chang",
"SupplierID": 1,
"CategoryID": 1,
"QuantityPerUnit": "24 - 12 oz bottles",
"UnitPrice": 19,
"UnitsInStock": 17,
"UnitsOnOrder": 40,
"ReorderLevel": 25,
"Discontinued": false,
"Category": {
"CategoryID": 1,
"CategoryName": "Beverages",
"Description": "Soft drinks, coffees, teas, beers, and ales"
},
"FirstOrderedOn": new Date(1996, 7, 12)
},
{
"ProductID": 3,
"ProductName": "Aniseed Syrup",
"SupplierID": 1,
"CategoryID": 2,
"QuantityPerUnit": "12 - 550 ml bottles",
"UnitPrice": 10,
"UnitsInStock": 13,
"UnitsOnOrder": 70,
"ReorderLevel": 25,
"Discontinued": false,
"Category": {
"CategoryID": 2,
"CategoryName": "Condiments",
"Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
},
"FirstOrderedOn": new Date(1996, 8, 26)
},
{
"ProductID": 4,
"ProductName": "Chef Anton's Cajun Seasoning",
"SupplierID": 2,
"CategoryID": 2,
"QuantityPerUnit": "48 - 6 oz jars",
"UnitPrice": 22,
"UnitsInStock": 53,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": false,
"Category": {
"CategoryID": 2,
"CategoryName": "Condiments",
"Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
},
"FirstOrderedOn": new Date(1996, 9, 19)
},
{
"ProductID": 5,
"ProductName": "Chef Anton's Gumbo Mix",
"SupplierID": 2,
"CategoryID": 2,
"QuantityPerUnit": "36 boxes",
"UnitPrice": 21.35,
"UnitsInStock": 0,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": true,
"Category": {
"CategoryID": 2,
"CategoryName": "Condiments",
"Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
},
"FirstOrderedOn": new Date(1996, 7, 17)
},
{
"ProductID": 6,
"ProductName": "Grandma's Boysenberry Spread",
"SupplierID": 3,
"CategoryID": 2,
"QuantityPerUnit": "12 - 8 oz jars",
"UnitPrice": 25,
"UnitsInStock": 120,
"UnitsOnOrder": 0,
"ReorderLevel": 25,
"Discontinued": false,
"Category": {
"CategoryID": 2,
"CategoryName": "Condiments",
"Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
},
"FirstOrderedOn": new Date(1996, 9, 19)
},
{
"ProductID": 7,
"ProductName": "Uncle Bob's Organic Dried Pears",
"SupplierID": 3,
"CategoryID": 7,
"QuantityPerUnit": "12 - 1 lb pkgs.",
"UnitPrice": 30,
"UnitsInStock": 15,
"UnitsOnOrder": 0,
"ReorderLevel": 10,
"Discontinued": false,
"Category": {
"CategoryID": 7,
"CategoryName": "Produce",
"Description": "Dried fruit and bean curd"
},
"FirstOrderedOn": new Date(1996, 7, 22)
},
{
"ProductID": 8,
"ProductName": "Northwoods Cranberry Sauce",
"SupplierID": 3,
"CategoryID": 2,
"QuantityPerUnit": "12 - 12 oz jars",
"UnitPrice": 40,
"UnitsInStock": 6,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": false,
"Category": {
"CategoryID": 2,
"CategoryName": "Condiments",
"Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
},
"FirstOrderedOn": new Date(1996, 11, 1)
},
{
"ProductID": 9,
"ProductName": "Mishi Kobe Niku",
"SupplierID": 4,
"CategoryID": 6,
"QuantityPerUnit": "18 - 500 g pkgs.",
"UnitPrice": 97,
"UnitsInStock": 29,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": true,
"Category": {
"CategoryID": 6,
"CategoryName": "Meat/Poultry",
"Description": "Prepared meats"
},
"FirstOrderedOn": new Date(1997, 1, 21)
},
{
"ProductID": 10,
"ProductName": "Ikura",
"SupplierID": 4,
"CategoryID": 8,
"QuantityPerUnit": "12 - 200 ml jars",
"UnitPrice": 31,
"UnitsInStock": 31,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": false,
"Category": {
"CategoryID": 8,
"CategoryName": "Seafood",
"Description": "Seaweed and fish"
},
"FirstOrderedOn": new Date(1996, 8, 5)
}
];