import '@progress/kendo-theme-default/dist/all.css';
import { Editor, EditorTools } from "@progress/kendo-react-editor";
const {
  Bold,
  Italic,
  Underline,
  AlignLeft,
  AlignRight,
  AlignCenter,
  Indent,
  Outdent,
  OrderedList,
  UnorderedList,
  Undo,
  Redo,
  Link,
  Unlink,
} = EditorTools;

const content = `<p>The KendoReact Editor allows your users to edit HTML in a familiar, user-friendly way.<br />The Editor provides the core HTML editing engine, which includes text formatting, hyperlinks, and lists. The component <strong>outputs identical HTML</strong> across all major browsers, follows accessibility standards, and provides API for content manipulation.</p><p>Features include:</p><ul><li><p>Text formatting</p></li><li><p>Bulleted and numbered lists</p></li><li><p>Hyperlinks</p></li><li><p>Cross-browser support</p></li><li><p>Identical HTML output across browsers</p></li></ul>`;

const App = () => {
  return (
    <Editor
      tools={[
        [Bold, Italic, Underline],
        [Undo, Redo],
        [Link, Unlink],
        [AlignLeft, AlignCenter, AlignRight],
        [OrderedList, UnorderedList, Indent, Outdent],
      ]}
      contentStyle={{
        height: 320,
      }}
      defaultContent={content}
    />
  );
};

export default App;

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Grid, GridColumn } from '@progress/kendo-react-grid';
import { NumericTextBox } from '@progress/kendo-react-inputs';

const products = [
  {
    ProductID: 1,
    ProductName: 'Chai',
    Price: 18.0,
    Discount: 0,
  },
  {
    ProductID: 2,
    ProductName: 'Chang',
    Price: 19.0,
    Discount: 0,
  },
];

const CustomCell = (props) => {
  React.useEffect(() => {
    console.log('componet mount');
  }, []);

  return (
    <td style={{ padding: '1rem', textAlign: 'center' }}>
      <NumericTextBox
        onChange={(e) => props.onChange(e, props)}
        style={{ width: '100px' }}
        value={props.dataItem[props.field]}
      />
    </td>
  );
};

const App = () => {
  const [data, setData] = React.useState(products);

  const handleDiscountChange = (e, cellProps) => {
    setData((_data) => {
      return _data.map((item) => {
        if (item.ProductName === cellProps.dataItem.ProductName) {
          item.Discount = e.value || 0;
          item.Price -= item.Discount;
        }
        return item;
      });
    });
  };

  return (
    <>
      <Grid data={data} title={'title'} editField="inEdit">
        <GridColumn field="ProductName" title="Product Name" />
        <GridColumn
          field="Discount"
          cell={(props) => {
            return <CustomCell {...props} onChange={handleDiscountChange} />;
          }}
        />
        <GridColumn field="Price" title="Price" editor="numeric" />
      </Grid>
    </>
  );
};

ReactDOM.render(<App />, document.querySelector('my-app'));