Telerik DevCraft

import React from "react";

import {
    Chart,
    ChartSeries,
    ChartSeriesItem,
    ChartCategoryAxis,
    ChartCategoryAxisItem,
    ChartTitle,
    ChartLegend,
    ChartValueAxis,
    ChartValueAxisItem
} from "@progress/kendo-react-charts";

const categories = [2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011];
const series = [{
    name: "India",
    data: [3.907, 7.943, 7.848, 9.284, 9.263, 9.801, 3.890, 8.238, 9.552, 6.855]
}, {
    name: "World",
    data: [1.988, 2.733, 3.994, 3.464, 4.001, 3.939, 1.333, -2.245, 4.339, 2.727]
}, {
    name: "Haiti",
    data: [-0.253, 0.362, -3.519, 1.799, 2.252, 3.343, 0.843, 2.877, -5.416, 5.590]
}];


const ChartContainer = () => (
    <Chart>
        <ChartTitle text="Gross domestic product growth /GDP annual %/" />
        <ChartLegend position="bottom" orientation="horizontal" />
        <ChartCategoryAxis>
            <ChartCategoryAxisItem categories={categories} startAngle={45} majorGridLines={{ visible: false }} />
        </ChartCategoryAxis>
        <ChartSeries>
            {series.map((item, idx) => (
                <ChartSeriesItem
                    key={idx}
                    type="area"
                    line={{ style: 'smooth' }}
                    tooltip={{ visible: true }}
                    data={item.data}
                    name={item.name}
                />
            ))}
        </ChartSeries>
        <ChartValueAxis>
            <ChartValueAxisItem labels={{ format: "{0}%" }} line={{ visible: false }} axisCrossingValue={-10} />
        </ChartValueAxis>
    </Chart>
);

export default ChartContainer;

<TelerikGrid Data=@GridData EditMode="@GridEditMode.Inline" Height="500px"
             Pageable="true" PageSize=@PageSize
             OnCreate="@CreateHandler" OnDelete="@DeleteHandler" OnUpdate="@UpdateHandler">
  <GridToolBar>
    <GridCommandButton Command="Add" Icon="add">Add Product</GridCommandButton>
  </GridToolBar>
  <GridColumns>
    <GridColumn Field=@nameof(Product.ProductName) Title="Product Name" />
    <GridColumn Field=@nameof(Product.UnitPrice) Title="Unit Price">
      <Template>
        @(String.Format("{0:C2}", (context as Product).UnitPrice))
      </Template>
    </GridColumn>
    <GridColumn Field=@nameof(Product.UnitsInStock) Title="Units In Stock" />
    <GridCommandColumn>
      <GridCommandButton Command="Edit" Icon="edit">Edit</GridCommandButton>
      <GridCommandButton Command="Delete" Icon="delete">Delete</GridCommandButton>
      <GridCommandButton Command="Save" Icon="save" ShowInEdit="true">Update</GridCommandButton>
      <GridCommandButton Command="Cancel" Icon="cancel" ShowInEdit="true">Cancel</GridCommandButton>
    </GridCommandColumn>
  </GridColumns>
</TelerikGrid>

@code {
    public List<Product> GridData { get; set; }
    public Product ProductToEdit { get; set; }
    int PageSize = 15;
    int lastId = 0;

    protected override void OnInitialized()
    {
      GridData = new List<Product>();

      for (int i = 1; i <= 100; i++)
      {
        GridData.Add(new Product()
        {
          ProductId = i,
          ProductName = "Product" + i.ToString(),
          SupplierId = i,
          UnitPrice = (decimal)(i * 3.14),
          UnitsInStock = (short)(i * 1),
        });

        lastId = i;
      }
    }

    private void CreateHandler(GridCommandEventArgs args)
    {
      Product product = (Product)args.Item;

      product.ProductId = ++lastId;
      GridData.Insert(0, product);
    }

    private void DeleteHandler(GridCommandEventArgs args)
    {
      GridData.Remove((Product)args.Item);
    }

    private void UpdateHandler(GridCommandEventArgs args)
    {
      Product product = (Product)args.Item;

      var existing = GridData.FirstOrDefault(p => p.ProductId == product.ProductId);

      if (existing != null)
      {
        existing.ProductName = product.ProductName;
        existing.UnitPrice = product.UnitPrice;
        existing.UnitsInStock = product.UnitsInStock;
      }
    }
}