Get enterprise performance, features, and accessibility – and enjoy implementing it!
Flexible data visualization and manipulation thanks to 100+ features from sorting and filtering to hierarchy and export. Each feature is meticulously documented and easy to implement. Below are some of the most popular ones.
@using System.ComponentModel.DataAnnotations
<TelerikGrid Data=@GridData EditMode="@GridEditMode.Inline" Height="450px"
ShowColumnMenu="true" Width="100%" FilterMode="@GridFilterMode.FilterMenu"
Pageable="true" PageSize="10" Resizable="true" Reorderable="true"
OnCreate="@CreateHandler" OnDelete="@DeleteHandler" OnUpdate="@UpdateHandler">
<GridToolBar>
<GridCommandButton Command="Add" Icon="add">Add Product</GridCommandButton>
</GridToolBar>
<GridColumns>
<GridColumn Field="@nameof(Product.ProductId)" Locked="true" Title="ID" Width="90px" ShowColumnMenu="false" ShowColumnChooser="false" />
<GridColumn Field=@nameof(Product.ProductName) Width="260px" Title="Product Name" />
<GridColumn Field=@nameof(Product.Cost) Title="Price" Width="140px" DisplayFormat="{0:C2}" />
<GridColumn Field=@nameof(Product.Quantity) Width="150px" />
<GridColumn Field=@nameof(Product.Available) Title="In Stock" Width="150px">
<Template>
@{
bool isInStock = (context as Product).Available;
if (isInStock)
{
<span class="k-badge k-badge-md k-badge-solid k-badge-success k-badge-rounded">Available</span>
}
else
{
<span class="k-badge k-badge-md k-badge-solid k-badge-error k-badge-rounded">Not Available</span>
}
}
</Template>
</GridColumn>
<GridCommandColumn Width="250px" Locked="true" Lockable="false" Resizable="false">
<GridCommandButton Command="Edit" Icon="edit">Edit</GridCommandButton>
<GridCommandButton Command="Delete" Icon="delete">Delete</GridCommandButton>
<GridCommandButton Command="Save" Icon="save" ShowInEdit="true">Save</GridCommandButton>
<GridCommandButton Command="Cancel" Icon="cancel" ShowInEdit="true">Cancel</GridCommandButton>
</GridCommandColumn>
</GridColumns>
</TelerikGrid>
@code {
public List<Product> GridData { get; set; }
int lastId = 0;
protected override Task OnInitializedAsync()
{
GridData = GetProducts();
return base.OnInitializedAsync();
}
public List<Product> GetProducts()
{
List<Product> data = new List<Product>();
data.Add(new Product() { ProductId = 1, ProductName = "Chai", CategoryId = 1, CategoryName = CategoryName.Beverages, Cost = 18m, Quantity = "10 boxes x 20 bags" });
data.Add(new Product() { ProductId = 2, ProductName = "Chang", CategoryId = 1, CategoryName = CategoryName.Beverages, Cost = 19m, Quantity = "24 - 12 oz bottles", Available = false });
data.Add(new Product() { ProductId = 3, ProductName = "Guaraná Fantástica", CategoryId = 1, CategoryName = CategoryName.Beverages, Cost = 4.5m, Quantity = "12 - 355 ml cans" });
data.Add(new Product() { ProductId = 4, ProductName = "Sasquatch Ale", CategoryId = 1, CategoryName = CategoryName.Beverages, Cost = 14m, Quantity = "24 - 12 oz bottles" });
data.Add(new Product() { ProductId = 5, ProductName = "Steeleye Stout", CategoryId = 1, CategoryName = CategoryName.Beverages, Cost = 18.99m, Quantity = "24 - 12 oz bottles", Available = false });
data.Add(new Product() { ProductId = 6, ProductName = "Côte de Blaye", CategoryId = 1, CategoryName = CategoryName.Beverages, Cost = 263.5m, Quantity = "12 - 75 cl bottles" });
data.Add(new Product() { ProductId = 7, ProductName = "Chartreuse verte", CategoryId = 1, CategoryName = CategoryName.Beverages, Cost = 18m, Quantity = "750 cc per bottle" });
data.Add(new Product() { ProductId = 8, ProductName = "Ipoh Coffee", CategoryId = 1, CategoryName = CategoryName.Beverages, Cost = 46m, Quantity = "16 - 500 g tins" });
data.Add(new Product() { ProductId = 9, ProductName = "Aniseed Syrup", CategoryId = 2, CategoryName = CategoryName.Condiments, Cost = 10m, Quantity = "12 - 550 ml bottles" });
data.Add(new Product() { ProductId = 10, ProductName = "Chef Anton's Cajun Seasoning", CategoryId = 2, CategoryName = CategoryName.Condiments, Cost = 22.80m, Quantity = "48 - 6 oz jars", Available = false });
data.Add(new Product() { ProductId = 11, ProductName = "Chef Anton's Gumbo Mix", CategoryId = 2, CategoryName = CategoryName.Condiments, Cost = 21.35m, Quantity = "36 boxes" });
data.Add(new Product() { ProductId = 12, ProductName = "Grandma's Boysenberry Spread", CategoryId = 2, CategoryName = CategoryName.Condiments, Cost = 25m, Quantity = "12 - 8 oz jars" });
data.Add(new Product() { ProductId = 13, ProductName = "Northwoods Cranberry Sauce", CategoryId = 2, CategoryName = CategoryName.Condiments, Cost = 40m, Quantity = "12 - 12 oz jars" });
data.Add(new Product() { ProductId = 14, ProductName = "Genen Shouyu", CategoryId = 2, CategoryName = CategoryName.Condiments, Cost = 15.50m, Quantity = "24 - 250 ml bottles" });
data.Add(new Product() { ProductId = 15, ProductName = "Gula Malacca", CategoryId = 2, CategoryName = CategoryName.Condiments, Cost = 19.45m, Quantity = "20 - 2 kg bags", Available = false });
data.Add(new Product() { ProductId = 16, ProductName = "Vegie-spread", CategoryId = 2, CategoryName = CategoryName.Condiments, Cost = 43.90m, Quantity = "15 - 625 g jars" });
data.Add(new Product() { ProductId = 17, ProductName = "Pavlova", CategoryId = 3, CategoryName = CategoryName.Confections, Cost = 17.45m, Quantity = "100 - 250 g bags", Available = false });
data.Add(new Product() { ProductId = 18, ProductName = "Teatime Chocolate Biscuits", CategoryId = 3, CategoryName = CategoryName.Confections, Cost = 9.20m, Quantity = "20 - 450 g glasses" });
data.Add(new Product() { ProductId = 19, ProductName = "Sir Rodney's Marmalade", CategoryId = 3, CategoryName = CategoryName.Confections, Cost = 81.00m, Quantity = "24 pkgs. x 4 pieces" });
data.Add(new Product() { ProductId = 20, ProductName = "Sir Rodney's Scones", CategoryId = 3, CategoryName = CategoryName.Confections, Cost = 10.00m, Quantity = "30 gift boxes", Available = false });
data.Add(new Product() { ProductId = 21, ProductName = "NuNuCa Nuß-Nougat-Creme", CategoryId = 3, CategoryName = CategoryName.Confections, Cost = 14.00m, Quantity = "10 boxes x 12 pieces" });
data.Add(new Product() { ProductId = 22, ProductName = "Gumbär Gummibärchen", CategoryId = 3, CategoryName = CategoryName.Confections, Cost = 31.23m, Quantity = "32 - 500 g boxes" });
data.Add(new Product() { ProductId = 23, ProductName = "Schoggi Schokolade", CategoryId = 3, CategoryName = CategoryName.Confections, Cost = 43.9m, Quantity = "100 - 100 g pieces" });
data.Add(new Product() { ProductId = 24, ProductName = "Zaanse koeken", CategoryId = 3, CategoryName = CategoryName.Confections, Cost = 9.5m, Quantity = "10 - 4 oz boxes", Available = false });
data.Add(new Product() { ProductId = 25, ProductName = "Queso Cabrales", CategoryId = 4, CategoryName = CategoryName.DairyProducts, Cost = 21m, Quantity = "1 kg pkg" });
data.Add(new Product() { ProductId = 26, ProductName = "Mascarpone Fabioli", CategoryId = 4, CategoryName = CategoryName.DairyProducts, Cost = 32m, Quantity = "24 - 200 g pkgs", Available = false });
data.Add(new Product() { ProductId = 27, ProductName = "Geitost", CategoryId = 4, CategoryName = CategoryName.DairyProducts, Cost = 2.5m, Quantity = "500 g" });
data.Add(new Product() { ProductId = 28, ProductName = "Raclette Courdavault", CategoryId = 4, CategoryName = CategoryName.DairyProducts, Cost = 55m, Quantity = "5 kg pkg" });
data.Add(new Product() { ProductId = 29, ProductName = "Camembert Pierrot", CategoryId = 4, CategoryName = CategoryName.DairyProducts, Cost = 34m, Quantity = "15 - 300 g rounds", Available = false });
data.Add(new Product() { ProductId = 30, ProductName = "Gudbrandsdalsost", CategoryId = 4, CategoryName = CategoryName.DairyProducts, Cost = 36m, Quantity = "10 kg pkg" });
data.Add(new Product() { ProductId = 31, ProductName = "Flotemysost", CategoryId = 4, CategoryName = CategoryName.DairyProducts, Cost = 21.5m, Quantity = "10 - 500 g pkgs" });
data.Add(new Product() { ProductId = 32, ProductName = "Mozzarella di Giovanni", CategoryId = 4, CategoryName = CategoryName.DairyProducts, Cost = 34.8m, Quantity = "24 - 200 g pkgs" });
data.Add(new Product() { ProductId = 33, ProductName = "Gustaf's Knäckebröd", CategoryId = 5, CategoryName = CategoryName.Grains, Cost = 21m, Quantity = "24 - 500 g pkgs" });
data.Add(new Product() { ProductId = 34, ProductName = "Tunnbröd", CategoryId = 5, CategoryName = CategoryName.Grains, Cost = 9m, Quantity = "12 - 250 g pkgs", Available = false });
data.Add(new Product() { ProductId = 35, ProductName = "Singaporean Hokkien Fried Mee", CategoryId = 5, CategoryName = CategoryName.Grains, Cost = 14m, Quantity = "32 - 1 kg pkgs" });
data.Add(new Product() { ProductId = 36, ProductName = "Filo Mix", CategoryId = 5, CategoryName = CategoryName.Grains, Cost = 7m, Quantity = "16 - 2 kg boxes" });
data.Add(new Product() { ProductId = 37, ProductName = "Gnocchi di nonna Alice", CategoryId = 5, CategoryName = CategoryName.Grains, Cost = 38m, Quantity = "24 - 250 g pkgs" });
data.Add(new Product() { ProductId = 38, ProductName = "Ravioli Angelo", CategoryId = 5, CategoryName = CategoryName.Grains, Cost = 19.5m, Quantity = "24 - 250 g pkgs" });
data.Add(new Product() { ProductId = 39, ProductName = "Wimmers gute Semmelknödel", CategoryId = 5, CategoryName = CategoryName.Grains, Cost = 33.25m, Quantity = "20 bags x 4 pieces" });
data.Add(new Product() { ProductId = 40, ProductName = "Mishi Kobe Niku", CategoryId = 6, CategoryName = CategoryName.Meat, Cost = 97m, Quantity = "24 boxes x 2 pies" });
data.Add(new Product() { ProductId = 41, ProductName = "Alice Mutton", CategoryId = 6, CategoryName = CategoryName.Meat, Cost = 39m, Quantity = "16 pies" });
data.Add(new Product() { ProductId = 42, ProductName = "Thüringer Rostbratwurst", CategoryId = 6, CategoryName = CategoryName.Meat, Cost = 123.99m, Quantity = "48 pieces" });
data.Add(new Product() { ProductId = 43, ProductName = "Perth Pasties", CategoryId = 6, CategoryName = CategoryName.Meat, Cost = 32.8m, Quantity = "50 bags x 30 sausgs", Available = false });
data.Add(new Product() { ProductId = 44, ProductName = "Tourtière", CategoryId = 6, CategoryName = CategoryName.Meat, Cost = 7.45m, Quantity = "20 - 1 kg tins" });
data.Add(new Product() { ProductId = 45, ProductName = "Pâté chinois", CategoryId = 6, CategoryName = CategoryName.Meat, Cost = 24.00m, Quantity = "18 - 500 g pkgs" });
data.Add(new Product() { ProductId = 46, ProductName = "Uncle Bob's Organic Dried Pears", CategoryId = 6, CategoryName = CategoryName.Meat, Cost = 30m, Quantity = "12 - 1 lb pkgs" });
data.Add(new Product() { ProductId = 47, ProductName = "Tofu", CategoryId = 6, CategoryName = CategoryName.Meat, Cost = 23.25m, Quantity = "40 - 100 g pkgs", Available = false });
data.Add(new Product() { ProductId = 48, ProductName = "Ikura", CategoryId = 7, CategoryName = CategoryName.Seafood, Cost = 31m, Quantity = "12 - 200 ml jars" });
data.Add(new Product() { ProductId = 49, ProductName = "Konbu", CategoryId = 7, CategoryName = CategoryName.Seafood, Cost = 6m, Quantity = "2 kg box" });
data.Add(new Product() { ProductId = 50, ProductName = "Carnarvon Tigers", CategoryId = 7, CategoryName = CategoryName.Seafood, Cost = 62.5m, Quantity = "16 kg pkg", Available = false });
data.Add(new Product() { ProductId = 51, ProductName = "Nord-Ost Matjeshering", CategoryId = 7, CategoryName = CategoryName.Seafood, Cost = 25.89m, Quantity = "10 - 200 g glasses", Available = false });
data.Add(new Product() { ProductId = 52, ProductName = "Inlagd Sill", CategoryId = 7, CategoryName = CategoryName.Seafood, Cost = 19m, Quantity = "24 - 250 g jars" });
data.Add(new Product() { ProductId = 53, ProductName = "Gravad lax", CategoryId = 7, CategoryName = CategoryName.Seafood, Cost = 97m, Quantity = "12 - 500 g pkgs" });
data.Add(new Product() { ProductId = 54, ProductName = "Jack's New England Clam Chowder", CategoryId = 7, CategoryName = CategoryName.Seafood, Cost = 9.65m, Quantity = "12 - 12 oz cans" });
data.Add(new Product() { ProductId = 55, ProductName = "Spegesild", CategoryId = 7, CategoryName = CategoryName.Seafood, Cost = 26m, Quantity = "4 - 450 g glasses" });
return data;
}
public class Product
{
public int ProductId { get; set; }
public string ProductName { get; set; }
public int CategoryId { get; set; }
public CategoryName CategoryName { get; set; }
public decimal Cost { get; set; }
public string Quantity { get; set; }
public bool Available { get; set; }
public Product()
{
Available = true;
}
}
public enum CategoryName
{
Beverages,
Condiments,
Confections,
[Display(Name = "Dairy Products")]
DairyProducts,
[Display(Name = "Grains/Cereals")]
Grains,
[Display(Name = "Meat/Poultry")]
Meat,
Seafood
}
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.Cost = product.Cost;
existing.CategoryName = product.CategoryName;
existing.Quantity = product.Quantity;
existing.Available = product.Available;
}
}
}
@using System.ComponentModel.DataAnnotations
<TelerikGrid Data=@GridData EditMode="@GridEditMode.Inline" Height="450px"
Pageable="true" PageSize="10" Width="100%" Resizable="true" Reorderable="true"
FilterMode="@GridFilterMode.FilterMenu" Groupable="true"
Sortable="true" SortMode="@SortMode.Multiple">
<GridToolBar>
<GridCommandButton Command="ExcelExport" Icon="file-excel">Export to Excel</GridCommandButton>
<GridCommandButton Command="CsvExport" Icon="file-csv">Export to Csv</GridCommandButton>
<label class="k-checkbox-label"><TelerikCheckBox @bind-Value="@ExportAllPages" />Export All Pages</label>
</GridToolBar>
<GridExport>
<GridExcelExport FileName="telerik-grid-export" AllPages="@ExportAllPages" />
<GridCsvExport FileName="telerik-grid-export-csv" AllPages="@ExportAllPages" />
</GridExport>
<GridColumns>
<GridColumn Field=@nameof(Product.ProductName) Width="250px" Title="Product Name" />
<GridColumn Field=@nameof(Product.Cost) Title="Price" Width="150px" DisplayFormat="{0:C2}" />
<GridColumn Field=@nameof(Product.CategoryName) Title="Category Name" Width="160px" />
<GridColumn Field=@nameof(Product.Quantity) Title="Quantity" Width="160px" />
</GridColumns>
</TelerikGrid>
@code {
public List<Product> GridData { get; set; }
bool ExportAllPages { get; set; }
protected override Task OnInitializedAsync()
{
GridData = GetProducts();
return base.OnInitializedAsync();
}
public List<Product> GetProducts()
{
List<Product> data = new List<Product>();
data.Add(new Product() { ProductId = 1, ProductName = "Chai", CategoryId = 1, CategoryName = CategoryName.Beverages, Cost = 18m, Quantity = "10 boxes x 20 bags" });
data.Add(new Product() { ProductId = 2, ProductName = "Chang", CategoryId = 1, CategoryName = CategoryName.Beverages, Cost = 19m, Quantity = "24 - 12 oz bottles", Available = false });
data.Add(new Product() { ProductId = 3, ProductName = "Guaraná Fantástica", CategoryId = 1, CategoryName = CategoryName.Beverages, Cost = 4.5m, Quantity = "12 - 355 ml cans" });
data.Add(new Product() { ProductId = 4, ProductName = "Sasquatch Ale", CategoryId = 1, CategoryName = CategoryName.Beverages, Cost = 14m, Quantity = "24 - 12 oz bottles" });
data.Add(new Product() { ProductId = 5, ProductName = "Steeleye Stout", CategoryId = 1, CategoryName = CategoryName.Beverages, Cost = 18.99m, Quantity = "24 - 12 oz bottles", Available = false });
data.Add(new Product() { ProductId = 6, ProductName = "Côte de Blaye", CategoryId = 1, CategoryName = CategoryName.Beverages, Cost = 263.5m, Quantity = "12 - 75 cl bottles" });
data.Add(new Product() { ProductId = 7, ProductName = "Chartreuse verte", CategoryId = 1, CategoryName = CategoryName.Beverages, Cost = 18m, Quantity = "750 cc per bottle" });
data.Add(new Product() { ProductId = 8, ProductName = "Ipoh Coffee", CategoryId = 1, CategoryName = CategoryName.Beverages, Cost = 46m, Quantity = "16 - 500 g tins" });
data.Add(new Product() { ProductId = 9, ProductName = "Aniseed Syrup", CategoryId = 2, CategoryName = CategoryName.Condiments, Cost = 10m, Quantity = "12 - 550 ml bottles" });
data.Add(new Product() { ProductId = 10, ProductName = "Chef Anton's Cajun Seasoning", CategoryId = 2, CategoryName = CategoryName.Condiments, Cost = 22.80m, Quantity = "48 - 6 oz jars", Available = false });
data.Add(new Product() { ProductId = 11, ProductName = "Chef Anton's Gumbo Mix", CategoryId = 2, CategoryName = CategoryName.Condiments, Cost = 21.35m, Quantity = "36 boxes" });
data.Add(new Product() { ProductId = 12, ProductName = "Grandma's Boysenberry Spread", CategoryId = 2, CategoryName = CategoryName.Condiments, Cost = 25m, Quantity = "12 - 8 oz jars" });
data.Add(new Product() { ProductId = 13, ProductName = "Northwoods Cranberry Sauce", CategoryId = 2, CategoryName = CategoryName.Condiments, Cost = 40m, Quantity = "12 - 12 oz jars" });
data.Add(new Product() { ProductId = 14, ProductName = "Genen Shouyu", CategoryId = 2, CategoryName = CategoryName.Condiments, Cost = 15.50m, Quantity = "24 - 250 ml bottles" });
data.Add(new Product() { ProductId = 15, ProductName = "Gula Malacca", CategoryId = 2, CategoryName = CategoryName.Condiments, Cost = 19.45m, Quantity = "20 - 2 kg bags", Available = false });
data.Add(new Product() { ProductId = 16, ProductName = "Vegie-spread", CategoryId = 2, CategoryName = CategoryName.Condiments, Cost = 43.90m, Quantity = "15 - 625 g jars" });
data.Add(new Product() { ProductId = 17, ProductName = "Pavlova", CategoryId = 3, CategoryName = CategoryName.Confections, Cost = 17.45m, Quantity = "100 - 250 g bags", Available = false });
data.Add(new Product() { ProductId = 18, ProductName = "Teatime Chocolate Biscuits", CategoryId = 3, CategoryName = CategoryName.Confections, Cost = 9.20m, Quantity = "20 - 450 g glasses" });
data.Add(new Product() { ProductId = 19, ProductName = "Sir Rodney's Marmalade", CategoryId = 3, CategoryName = CategoryName.Confections, Cost = 81.00m, Quantity = "24 pkgs. x 4 pieces" });
data.Add(new Product() { ProductId = 20, ProductName = "Sir Rodney's Scones", CategoryId = 3, CategoryName = CategoryName.Confections, Cost = 10.00m, Quantity = "30 gift boxes", Available = false });
data.Add(new Product() { ProductId = 21, ProductName = "NuNuCa Nuß-Nougat-Creme", CategoryId = 3, CategoryName = CategoryName.Confections, Cost = 14.00m, Quantity = "10 boxes x 12 pieces" });
data.Add(new Product() { ProductId = 22, ProductName = "Gumbär Gummibärchen", CategoryId = 3, CategoryName = CategoryName.Confections, Cost = 31.23m, Quantity = "32 - 500 g boxes" });
data.Add(new Product() { ProductId = 23, ProductName = "Schoggi Schokolade", CategoryId = 3, CategoryName = CategoryName.Confections, Cost = 43.9m, Quantity = "100 - 100 g pieces" });
data.Add(new Product() { ProductId = 24, ProductName = "Zaanse koeken", CategoryId = 3, CategoryName = CategoryName.Confections, Cost = 9.5m, Quantity = "10 - 4 oz boxes", Available = false });
data.Add(new Product() { ProductId = 25, ProductName = "Queso Cabrales", CategoryId = 4, CategoryName = CategoryName.DairyProducts, Cost = 21m, Quantity = "1 kg pkg" });
data.Add(new Product() { ProductId = 26, ProductName = "Mascarpone Fabioli", CategoryId = 4, CategoryName = CategoryName.DairyProducts, Cost = 32m, Quantity = "24 - 200 g pkgs", Available = false });
data.Add(new Product() { ProductId = 27, ProductName = "Geitost", CategoryId = 4, CategoryName = CategoryName.DairyProducts, Cost = 2.5m, Quantity = "500 g" });
data.Add(new Product() { ProductId = 28, ProductName = "Raclette Courdavault", CategoryId = 4, CategoryName = CategoryName.DairyProducts, Cost = 55m, Quantity = "5 kg pkg" });
data.Add(new Product() { ProductId = 29, ProductName = "Camembert Pierrot", CategoryId = 4, CategoryName = CategoryName.DairyProducts, Cost = 34m, Quantity = "15 - 300 g rounds", Available = false });
data.Add(new Product() { ProductId = 30, ProductName = "Gudbrandsdalsost", CategoryId = 4, CategoryName = CategoryName.DairyProducts, Cost = 36m, Quantity = "10 kg pkg" });
data.Add(new Product() { ProductId = 31, ProductName = "Flotemysost", CategoryId = 4, CategoryName = CategoryName.DairyProducts, Cost = 21.5m, Quantity = "10 - 500 g pkgs" });
data.Add(new Product() { ProductId = 32, ProductName = "Mozzarella di Giovanni", CategoryId = 4, CategoryName = CategoryName.DairyProducts, Cost = 34.8m, Quantity = "24 - 200 g pkgs" });
data.Add(new Product() { ProductId = 33, ProductName = "Gustaf's Knäckebröd", CategoryId = 5, CategoryName = CategoryName.Grains, Cost = 21m, Quantity = "24 - 500 g pkgs" });
data.Add(new Product() { ProductId = 34, ProductName = "Tunnbröd", CategoryId = 5, CategoryName = CategoryName.Grains, Cost = 9m, Quantity = "12 - 250 g pkgs", Available = false });
data.Add(new Product() { ProductId = 35, ProductName = "Singaporean Hokkien Fried Mee", CategoryId = 5, CategoryName = CategoryName.Grains, Cost = 14m, Quantity = "32 - 1 kg pkgs" });
data.Add(new Product() { ProductId = 36, ProductName = "Filo Mix", CategoryId = 5, CategoryName = CategoryName.Grains, Cost = 7m, Quantity = "16 - 2 kg boxes" });
data.Add(new Product() { ProductId = 37, ProductName = "Gnocchi di nonna Alice", CategoryId = 5, CategoryName = CategoryName.Grains, Cost = 38m, Quantity = "24 - 250 g pkgs" });
data.Add(new Product() { ProductId = 38, ProductName = "Ravioli Angelo", CategoryId = 5, CategoryName = CategoryName.Grains, Cost = 19.5m, Quantity = "24 - 250 g pkgs" });
data.Add(new Product() { ProductId = 39, ProductName = "Wimmers gute Semmelknödel", CategoryId = 5, CategoryName = CategoryName.Grains, Cost = 33.25m, Quantity = "20 bags x 4 pieces" });
data.Add(new Product() { ProductId = 40, ProductName = "Mishi Kobe Niku", CategoryId = 6, CategoryName = CategoryName.Meat, Cost = 97m, Quantity = "24 boxes x 2 pies" });
data.Add(new Product() { ProductId = 41, ProductName = "Alice Mutton", CategoryId = 6, CategoryName = CategoryName.Meat, Cost = 39m, Quantity = "16 pies" });
data.Add(new Product() { ProductId = 42, ProductName = "Thüringer Rostbratwurst", CategoryId = 6, CategoryName = CategoryName.Meat, Cost = 123.99m, Quantity = "48 pieces" });
data.Add(new Product() { ProductId = 43, ProductName = "Perth Pasties", CategoryId = 6, CategoryName = CategoryName.Meat, Cost = 32.8m, Quantity = "50 bags x 30 sausgs", Available = false });
data.Add(new Product() { ProductId = 44, ProductName = "Tourtière", CategoryId = 6, CategoryName = CategoryName.Meat, Cost = 7.45m, Quantity = "20 - 1 kg tins" });
data.Add(new Product() { ProductId = 45, ProductName = "Pâté chinois", CategoryId = 6, CategoryName = CategoryName.Meat, Cost = 24.00m, Quantity = "18 - 500 g pkgs" });
data.Add(new Product() { ProductId = 46, ProductName = "Uncle Bob's Organic Dried Pears", CategoryId = 6, CategoryName = CategoryName.Meat, Cost = 30m, Quantity = "12 - 1 lb pkgs" });
data.Add(new Product() { ProductId = 47, ProductName = "Tofu", CategoryId = 6, CategoryName = CategoryName.Meat, Cost = 23.25m, Quantity = "40 - 100 g pkgs", Available = false });
data.Add(new Product() { ProductId = 48, ProductName = "Ikura", CategoryId = 7, CategoryName = CategoryName.Seafood, Cost = 31m, Quantity = "12 - 200 ml jars" });
data.Add(new Product() { ProductId = 49, ProductName = "Konbu", CategoryId = 7, CategoryName = CategoryName.Seafood, Cost = 6m, Quantity = "2 kg box" });
data.Add(new Product() { ProductId = 50, ProductName = "Carnarvon Tigers", CategoryId = 7, CategoryName = CategoryName.Seafood, Cost = 62.5m, Quantity = "16 kg pkg", Available = false });
data.Add(new Product() { ProductId = 51, ProductName = "Nord-Ost Matjeshering", CategoryId = 7, CategoryName = CategoryName.Seafood, Cost = 25.89m, Quantity = "10 - 200 g glasses", Available = false });
data.Add(new Product() { ProductId = 52, ProductName = "Inlagd Sill", CategoryId = 7, CategoryName = CategoryName.Seafood, Cost = 19m, Quantity = "24 - 250 g jars" });
data.Add(new Product() { ProductId = 53, ProductName = "Gravad lax", CategoryId = 7, CategoryName = CategoryName.Seafood, Cost = 97m, Quantity = "12 - 500 g pkgs" });
data.Add(new Product() { ProductId = 54, ProductName = "Jack's New England Clam Chowder", CategoryId = 7, CategoryName = CategoryName.Seafood, Cost = 9.65m, Quantity = "12 - 12 oz cans" });
data.Add(new Product() { ProductId = 55, ProductName = "Spegesild", CategoryId = 7, CategoryName = CategoryName.Seafood, Cost = 26m, Quantity = "4 - 450 g glasses" });
return data;
}
public class Product
{
public int ProductId { get; set; }
public string ProductName { get; set; }
public int CategoryId { get; set; }
public CategoryName CategoryName { get; set; }
public decimal Cost { get; set; }
public string Quantity { get; set; }
public bool Available { get; set; }
public Product()
{
Available = true;
}
}
public enum CategoryName
{
Beverages,
Condiments,
Confections,
[Display(Name = "Dairy Products")]
DairyProducts,
[Display(Name = "Grains/Cereals")]
Grains,
[Display(Name = "Meat/Poultry")]
Meat,
Seafood
}
}
@using System.ComponentModel.DataAnnotations
@using Telerik.DataSource
<TelerikGrid Data=@GridData
Height="450px"
Width="100%"
EditMode="@GridEditMode.Incell"
Pageable="true"
PageSize="10"
Resizable="true"
Reorderable="true"
FilterMode="@GridFilterMode.FilterMenu"
Groupable="true"
Sortable="true"
SortMode="@SortMode.Multiple"
OnCreate="@CreateHandler"
OnUpdate="@UpdateHandler">
<GridToolBar>
<GridCommandButton Command="Add" Icon="add">Add Product</GridCommandButton>
</GridToolBar>
<GridColumns>
<GridColumn Field=@nameof(Product.ProductName) Width="250px" Title="Product Name" />
<GridColumn Field=@nameof(Product.Cost) Title="Price" Width="150px" DisplayFormat="{0:C2}" />
<GridColumn Field=@nameof(Product.CategoryName) Title="Category Name" Width="160px" />
<GridColumn Field=@nameof(Product.Quantity) Title="Quantity" Width="160px" />
</GridColumns>
</TelerikGrid>
@code {
public List<Product> GridData { get; set; }
public List<Product> SourceData { get; set; }
public List<Product> Categories { get; set; }
int lastId = 0;
protected override Task OnInitializedAsync()
{
InitSourceData();
LoadData();
return base.OnInitializedAsync();
}
private void CreateHandler(GridCommandEventArgs args)
{
CreateItem((Product)args.Item);
LoadData();
}
private void CreateItem(Product item)
{
Product product = item;
product.ProductId = ++lastId;
SourceData.Insert(0, product);
}
private void DeleteHandler(GridCommandEventArgs args)
{
DeleteItem((Product)args.Item);
LoadData();
}
private void DeleteItem(Product item)
{
SourceData.Remove(item);
}
private void UpdateHandler(GridCommandEventArgs args)
{
UpdateItem((Product)args.Item);
LoadData();
}
private void UpdateItem(Product item)
{
var existing = SourceData.FirstOrDefault(p => p.ProductId == item.ProductId);
if (existing != null)
{
existing.ProductName = item.ProductName;
existing.Cost = item.Cost;
existing.CategoryName = item.CategoryName;
existing.Quantity = item.Quantity;
existing.Available = item.Available;
}
}
public class Product
{
public int ProductId { get; set; }
public string ProductName { get; set; }
public int CategoryId { get; set; }
public CategoryName CategoryName { get; set; }
public decimal Cost { get; set; }
public string Quantity { get; set; }
public bool Available { get; set; }
public Product()
{
Available = true;
}
}
public enum CategoryName
{
Beverages,
Condiments,
Confections,
[Display(Name = "Dairy Products")]
DairyProducts,
[Display(Name = "Grains/Cereals")]
Grains,
[Display(Name = "Meat/Poultry")]
Meat,
Seafood
}
public void LoadData()
{
GridData = new List<Product>(SourceData);
}
public void InitSourceData()
{
List<Product> data = new List<Product>();
data.Add(new Product() { ProductId = 1, ProductName = "Chai", CategoryId = 1, CategoryName = CategoryName.Beverages, Cost = 18m, Quantity = "10 boxes x 20 bags" });
data.Add(new Product() { ProductId = 2, ProductName = "Chang", CategoryId = 1, CategoryName = CategoryName.Beverages, Cost = 19m, Quantity = "24 - 12 oz bottles", Available = false });
data.Add(new Product() { ProductId = 3, ProductName = "Guaraná Fantástica", CategoryId = 1, CategoryName = CategoryName.Beverages, Cost = 4.5m, Quantity = "12 - 355 ml cans" });
data.Add(new Product() { ProductId = 4, ProductName = "Sasquatch Ale", CategoryId = 1, CategoryName = CategoryName.Beverages, Cost = 14m, Quantity = "24 - 12 oz bottles" });
data.Add(new Product() { ProductId = 5, ProductName = "Steeleye Stout", CategoryId = 1, CategoryName = CategoryName.Beverages, Cost = 18.99m, Quantity = "24 - 12 oz bottles", Available = false });
data.Add(new Product() { ProductId = 6, ProductName = "Côte de Blaye", CategoryId = 1, CategoryName = CategoryName.Beverages, Cost = 263.5m, Quantity = "12 - 75 cl bottles" });
data.Add(new Product() { ProductId = 7, ProductName = "Chartreuse verte", CategoryId = 1, CategoryName = CategoryName.Beverages, Cost = 18m, Quantity = "750 cc per bottle" });
data.Add(new Product() { ProductId = 8, ProductName = "Ipoh Coffee", CategoryId = 1, CategoryName = CategoryName.Beverages, Cost = 46m, Quantity = "16 - 500 g tins" });
data.Add(new Product() { ProductId = 9, ProductName = "Aniseed Syrup", CategoryId = 2, CategoryName = CategoryName.Condiments, Cost = 10m, Quantity = "12 - 550 ml bottles" });
data.Add(new Product() { ProductId = 10, ProductName = "Chef Anton's Cajun Seasoning", CategoryId = 2, CategoryName = CategoryName.Condiments, Cost = 22.80m, Quantity = "48 - 6 oz jars", Available = false });
data.Add(new Product() { ProductId = 11, ProductName = "Chef Anton's Gumbo Mix", CategoryId = 2, CategoryName = CategoryName.Condiments, Cost = 21.35m, Quantity = "36 boxes" });
data.Add(new Product() { ProductId = 12, ProductName = "Grandma's Boysenberry Spread", CategoryId = 2, CategoryName = CategoryName.Condiments, Cost = 25m, Quantity = "12 - 8 oz jars" });
data.Add(new Product() { ProductId = 13, ProductName = "Northwoods Cranberry Sauce", CategoryId = 2, CategoryName = CategoryName.Condiments, Cost = 40m, Quantity = "12 - 12 oz jars" });
data.Add(new Product() { ProductId = 14, ProductName = "Genen Shouyu", CategoryId = 2, CategoryName = CategoryName.Condiments, Cost = 15.50m, Quantity = "24 - 250 ml bottles" });
data.Add(new Product() { ProductId = 15, ProductName = "Gula Malacca", CategoryId = 2, CategoryName = CategoryName.Condiments, Cost = 19.45m, Quantity = "20 - 2 kg bags", Available = false });
data.Add(new Product() { ProductId = 16, ProductName = "Vegie-spread", CategoryId = 2, CategoryName = CategoryName.Condiments, Cost = 43.90m, Quantity = "15 - 625 g jars" });
data.Add(new Product() { ProductId = 17, ProductName = "Pavlova", CategoryId = 3, CategoryName = CategoryName.Confections, Cost = 17.45m, Quantity = "100 - 250 g bags", Available = false });
data.Add(new Product() { ProductId = 18, ProductName = "Teatime Chocolate Biscuits", CategoryId = 3, CategoryName = CategoryName.Confections, Cost = 9.20m, Quantity = "20 - 450 g glasses" });
data.Add(new Product() { ProductId = 19, ProductName = "Sir Rodney's Marmalade", CategoryId = 3, CategoryName = CategoryName.Confections, Cost = 81.00m, Quantity = "24 pkgs. x 4 pieces" });
data.Add(new Product() { ProductId = 20, ProductName = "Sir Rodney's Scones", CategoryId = 3, CategoryName = CategoryName.Confections, Cost = 10.00m, Quantity = "30 gift boxes", Available = false });
data.Add(new Product() { ProductId = 21, ProductName = "NuNuCa Nuß-Nougat-Creme", CategoryId = 3, CategoryName = CategoryName.Confections, Cost = 14.00m, Quantity = "10 boxes x 12 pieces" });
data.Add(new Product() { ProductId = 22, ProductName = "Gumbär Gummibärchen", CategoryId = 3, CategoryName = CategoryName.Confections, Cost = 31.23m, Quantity = "32 - 500 g boxes" });
data.Add(new Product() { ProductId = 23, ProductName = "Schoggi Schokolade", CategoryId = 3, CategoryName = CategoryName.Confections, Cost = 43.9m, Quantity = "100 - 100 g pieces" });
data.Add(new Product() { ProductId = 24, ProductName = "Zaanse koeken", CategoryId = 3, CategoryName = CategoryName.Confections, Cost = 9.5m, Quantity = "10 - 4 oz boxes", Available = false });
data.Add(new Product() { ProductId = 25, ProductName = "Queso Cabrales", CategoryId = 4, CategoryName = CategoryName.DairyProducts, Cost = 21m, Quantity = "1 kg pkg" });
data.Add(new Product() { ProductId = 26, ProductName = "Mascarpone Fabioli", CategoryId = 4, CategoryName = CategoryName.DairyProducts, Cost = 32m, Quantity = "24 - 200 g pkgs", Available = false });
data.Add(new Product() { ProductId = 27, ProductName = "Geitost", CategoryId = 4, CategoryName = CategoryName.DairyProducts, Cost = 2.5m, Quantity = "500 g" });
data.Add(new Product() { ProductId = 28, ProductName = "Raclette Courdavault", CategoryId = 4, CategoryName = CategoryName.DairyProducts, Cost = 55m, Quantity = "5 kg pkg" });
data.Add(new Product() { ProductId = 29, ProductName = "Camembert Pierrot", CategoryId = 4, CategoryName = CategoryName.DairyProducts, Cost = 34m, Quantity = "15 - 300 g rounds", Available = false });
data.Add(new Product() { ProductId = 30, ProductName = "Gudbrandsdalsost", CategoryId = 4, CategoryName = CategoryName.DairyProducts, Cost = 36m, Quantity = "10 kg pkg" });
data.Add(new Product() { ProductId = 31, ProductName = "Flotemysost", CategoryId = 4, CategoryName = CategoryName.DairyProducts, Cost = 21.5m, Quantity = "10 - 500 g pkgs" });
data.Add(new Product() { ProductId = 32, ProductName = "Mozzarella di Giovanni", CategoryId = 4, CategoryName = CategoryName.DairyProducts, Cost = 34.8m, Quantity = "24 - 200 g pkgs" });
data.Add(new Product() { ProductId = 33, ProductName = "Gustaf's Knäckebröd", CategoryId = 5, CategoryName = CategoryName.Grains, Cost = 21m, Quantity = "24 - 500 g pkgs" });
data.Add(new Product() { ProductId = 34, ProductName = "Tunnbröd", CategoryId = 5, CategoryName = CategoryName.Grains, Cost = 9m, Quantity = "12 - 250 g pkgs", Available = false });
data.Add(new Product() { ProductId = 35, ProductName = "Singaporean Hokkien Fried Mee", CategoryId = 5, CategoryName = CategoryName.Grains, Cost = 14m, Quantity = "32 - 1 kg pkgs" });
data.Add(new Product() { ProductId = 36, ProductName = "Filo Mix", CategoryId = 5, CategoryName = CategoryName.Grains, Cost = 7m, Quantity = "16 - 2 kg boxes" });
data.Add(new Product() { ProductId = 37, ProductName = "Gnocchi di nonna Alice", CategoryId = 5, CategoryName = CategoryName.Grains, Cost = 38m, Quantity = "24 - 250 g pkgs" });
data.Add(new Product() { ProductId = 38, ProductName = "Ravioli Angelo", CategoryId = 5, CategoryName = CategoryName.Grains, Cost = 19.5m, Quantity = "24 - 250 g pkgs" });
data.Add(new Product() { ProductId = 39, ProductName = "Wimmers gute Semmelknödel", CategoryId = 5, CategoryName = CategoryName.Grains, Cost = 33.25m, Quantity = "20 bags x 4 pieces" });
data.Add(new Product() { ProductId = 40, ProductName = "Mishi Kobe Niku", CategoryId = 6, CategoryName = CategoryName.Meat, Cost = 97m, Quantity = "24 boxes x 2 pies" });
data.Add(new Product() { ProductId = 41, ProductName = "Alice Mutton", CategoryId = 6, CategoryName = CategoryName.Meat, Cost = 39m, Quantity = "16 pies" });
data.Add(new Product() { ProductId = 42, ProductName = "Thüringer Rostbratwurst", CategoryId = 6, CategoryName = CategoryName.Meat, Cost = 123.99m, Quantity = "48 pieces" });
data.Add(new Product() { ProductId = 43, ProductName = "Perth Pasties", CategoryId = 6, CategoryName = CategoryName.Meat, Cost = 32.8m, Quantity = "50 bags x 30 sausgs", Available = false });
data.Add(new Product() { ProductId = 44, ProductName = "Tourtière", CategoryId = 6, CategoryName = CategoryName.Meat, Cost = 7.45m, Quantity = "20 - 1 kg tins" });
data.Add(new Product() { ProductId = 45, ProductName = "Pâté chinois", CategoryId = 6, CategoryName = CategoryName.Meat, Cost = 24.00m, Quantity = "18 - 500 g pkgs" });
data.Add(new Product() { ProductId = 46, ProductName = "Uncle Bob's Organic Dried Pears", CategoryId = 6, CategoryName = CategoryName.Meat, Cost = 30m, Quantity = "12 - 1 lb pkgs" });
data.Add(new Product() { ProductId = 47, ProductName = "Tofu", CategoryId = 6, CategoryName = CategoryName.Meat, Cost = 23.25m, Quantity = "40 - 100 g pkgs", Available = false });
data.Add(new Product() { ProductId = 48, ProductName = "Ikura", CategoryId = 7, CategoryName = CategoryName.Seafood, Cost = 31m, Quantity = "12 - 200 ml jars" });
data.Add(new Product() { ProductId = 49, ProductName = "Konbu", CategoryId = 7, CategoryName = CategoryName.Seafood, Cost = 6m, Quantity = "2 kg box" });
data.Add(new Product() { ProductId = 50, ProductName = "Carnarvon Tigers", CategoryId = 7, CategoryName = CategoryName.Seafood, Cost = 62.5m, Quantity = "16 kg pkg", Available = false });
data.Add(new Product() { ProductId = 51, ProductName = "Nord-Ost Matjeshering", CategoryId = 7, CategoryName = CategoryName.Seafood, Cost = 25.89m, Quantity = "10 - 200 g glasses", Available = false });
data.Add(new Product() { ProductId = 52, ProductName = "Inlagd Sill", CategoryId = 7, CategoryName = CategoryName.Seafood, Cost = 19m, Quantity = "24 - 250 g jars" });
data.Add(new Product() { ProductId = 53, ProductName = "Gravad lax", CategoryId = 7, CategoryName = CategoryName.Seafood, Cost = 97m, Quantity = "12 - 500 g pkgs" });
data.Add(new Product() { ProductId = 54, ProductName = "Jack's New England Clam Chowder", CategoryId = 7, CategoryName = CategoryName.Seafood, Cost = 9.65m, Quantity = "12 - 12 oz cans" });
data.Add(new Product() { ProductId = 55, ProductName = "Spegesild", CategoryId = 7, CategoryName = CategoryName.Seafood, Cost = 26m, Quantity = "4 - 450 g glasses" });
SourceData = data;
}
}
@using System.ComponentModel.DataAnnotations @* Used for the model annotations only *@
<TelerikGrid Data=@MyData EditMode="@GridEditMode.Popup" Pageable="true" Height="450px" Width="100%"
Sortable="true" Groupable="true" Resizable="true"
OnStateInit="@((GridStateEventArgs<Employee> args) => OnStateInitHandler(args))"
OnUpdate="@UpdateHandler" OnDelete="@DeleteHandler" OnCreate="@InsertHandler">
<GridAggregates>
<GridAggregate Field=@nameof(Employee.Team) Aggregate="@GridAggregateType.Count" />
<GridAggregate Field=@nameof(Employee.Name) Aggregate="@GridAggregateType.Count" />
<GridAggregate Field=@nameof(Employee.Salary) Aggregate="@GridAggregateType.Max" />
<GridAggregate Field=@nameof(Employee.Salary) Aggregate="@GridAggregateType.Sum" />
</GridAggregates>
<GridColumns>
<GridColumn Field=@nameof(Employee.ID) Editable="false" Title="ID" Width="80px" />
<GridColumn Field=@nameof(Employee.Name) Width="120px">
<HeaderTemplate>
<span class="k-display-flex k-align-items-center">
<TelerikIcon Icon="user" />
Name
</span>
</HeaderTemplate>
<Template>
<TelerikIcon Icon="user" />
@{
Employee currEmpl = context as Employee;
@currEmpl.Name
}
</Template>
<FooterTemplate>
Total: @context.Count
</FooterTemplate>
</GridColumn>
<GridColumn Field=@nameof(Employee.RoleId) Title="Position" Width="160px">
<EditorTemplate>
@{
CurrentlyEditedEmployee = context as Employee;
<TelerikDropDownList Data="@Roles" DefaultText="Select Role"
@bind-Value="@CurrentlyEditedEmployee.RoleId"
TextField="@nameof(Role.RoleName)" ValueField="@nameof(Role.RoleId)"
Width="100%" PopupHeight="auto">
</TelerikDropDownList>
}
</EditorTemplate>
<Template>
@{
int? roleId = (context as Employee).RoleId;
Role matchingPos = Roles.FirstOrDefault(r => r.RoleId == roleId);
string textToRender = matchingPos != null ? matchingPos.RoleName : "Unknown";
<text>@textToRender</text>
}
</Template>
</GridColumn>
<GridColumn Field=@nameof(Employee.Team) Title="Team" Width="150px">
<GroupHeaderTemplate>
@{
<span>Team: @context.Value has @context.Count members</span>
}
</GroupHeaderTemplate>
<GroupFooterTemplate>
Total: <strong>@context.Count</strong>
</GroupFooterTemplate>
</GridColumn>
<GridColumn Field=@nameof(Employee.Salary) Title="Salary" Width="150px" DisplayFormat="{0:C0}">
<GroupFooterTemplate>
Total: @context.Sum?.ToString("C0")
<br />
<span style="color: red;">Top paid employee: @context.Max?.ToString("C0")</span>
</GroupFooterTemplate>
<FooterTemplate>
Total: @context.Sum?.ToString("C0")
</FooterTemplate>
</GridColumn>
<GridColumn Field=@nameof(Employee.ActiveProjects) Title="Projects" Width="120px">
<GroupHeaderTemplate>
@{
<span>Currently active projects: @context.Value </span>
if ((int)context.Value > 3)
{
<strong style="color: red;">These people work on too many projects</strong>
}
}
</GroupHeaderTemplate>
</GridColumn>
<GridCommandColumn Width="140px">
<GridCommandButton Command="Edit" Icon="edit"></GridCommandButton>
<GridCommandButton Command="Delete" Icon="delete"></GridCommandButton>
</GridCommandColumn>
</GridColumns>
<GridToolBar>
<GridCommandButton Command="Add" Icon="add">Add Product</GridCommandButton>
</GridToolBar>
</TelerikGrid>
@code {
List<Employee> MyData { get; set; }
List<Role> Roles { get; set; }
Employee CurrentlyEditedEmployee { get; set; }
async Task UpdateHandler(GridCommandEventArgs args)
{
Employee item = (Employee)args.Item;
MyService.Update(item);
await GetGridData();
}
async Task DeleteHandler(GridCommandEventArgs args)
{
Employee item = (Employee)args.Item;
MyService.Delete(item);
await GetGridData();
}
async Task InsertHandler(GridCommandEventArgs args)
{
Employee item = (Employee)args.Item;
MyService.Insert(item);
await GetGridData();
}
public class Employee
{
public int ID { get; set; }
[Required(ErrorMessage = "The employee must have a name")]
public string Name { get; set; }
[Required(ErrorMessage = "The employee must have a role")]
public int? RoleId { get; set; }
public string Team { get; set; }
[Required(ErrorMessage = "The employee must have a salary")]
[Range(1000, 5000)]
public decimal Salary { get; set; }
public int ActiveProjects { get; set; }
}
public class Role
{
public int? RoleId { get; set; }
public string RoleName { get; set; }
}
async Task GetGridData()
{
MyData = await MyService.Read();
Roles = await MyService.GetRoles();
}
protected override async Task OnInitializedAsync()
{
await GetGridData();
}
void OnStateInitHandler(GridStateEventArgs<Employee> args)
{
var state = new GridState<Employee>
{
GroupDescriptors = new List<Telerik.DataSource.GroupDescriptor>()
{
new Telerik.DataSource.GroupDescriptor()
{
Member = "Team",
MemberType = typeof(string)
}
}
};
args.GridState = state;
}
// the following static class mimics an actual data service that handles the actual data source
// replace it with your actual service through the DI, this only mimics how the API can look like and works for this standalone page
public static class MyService
{
private static List<Employee> _data { get; set; } = new List<Employee>();
private static List<string> Roles = new List<string> { "Manager", "Employee", "Contractor" };
private static List<string> Names = new List<string> { "Anthony", "Robert", "John", "Natasha", "Steven", "Victoria", "Elizabeth", "Alexander", "Benjamin", "Daryl", "Jefferson", "George", "Summer" };
private static int lastId { get; set; }
public static async Task<List<Employee>> Read()
{
if (_data.Count < 1)
{
var rnd = new Random();
for (int i = 0; i < 50; i++)
{
int? roleId;
if (i % 4 == 0) roleId = null;
else roleId = i % 4;
_data.Add(new Employee()
{
ID = ++lastId,
Name = Names[rnd.Next(0, 12)],
RoleId = roleId,
Team = "Team " + ( i % 3 + 1 ),
Salary = rnd.Next(1000, 5000),
ActiveProjects = i % 4 == 0 ? 2 : 5
});
}
}
return await Task.FromResult(_data);
}
public static async Task<List<Role>> GetRoles()
{
var data = new List<Role>
{
new Role { RoleId = 1, RoleName = "Manager" },
new Role { RoleId = 2, RoleName = "Employee" },
new Role { RoleId = 3, RoleName = "Contractor" },
};
return await Task.FromResult(data);
}
public static void Update(Employee itemToUpdate)
{
var index = _data.FindIndex(i => i.ID == itemToUpdate.ID);
if (index != -1)
{
_data[index] = itemToUpdate;
}
}
public static void Delete(Employee itemToUpdate)
{
_data.Remove(itemToUpdate);
}
public static void Insert(Employee itemToUpdate)
{
itemToUpdate.ID = ++lastId;
_data.Insert(0, itemToUpdate);
}
}
}
<TelerikGrid Data=@GridData Width="100%"
ScrollMode="@GridScrollMode.Virtual"
Height="450px" RowHeight="60" PageSize="20"
Sortable="true" FilterMode="@GridFilterMode.FilterMenu"
EditMode="@GridEditMode.Inline" Reorderable="true"
OnDelete="@DeleteHandler" OnUpdate="@UpdateHandler">
<GridColumns>
<GridColumn Field="@nameof(Employee.Id)" Editable="false" Width="60px" />
<GridColumn Field="@nameof(Employee.Name)" Title="First Name" Width="180px" />
<GridColumn Field="@nameof(Employee.LastName)" Title="Last Name" Width="180px" />
<GridColumn Field="@nameof(Employee.HireDate)" Width="220px" DisplayFormat="{0:MMMM dd, yyyy}" />
<GridCommandColumn Width="100px" Resizable="false">
<GridCommandButton Command="Edit" Icon="edit"></GridCommandButton>
<GridCommandButton Command="Delete" Icon="delete"></GridCommandButton>
<GridCommandButton Command="Save" Icon="save" ShowInEdit="true"></GridCommandButton>
<GridCommandButton Command="Cancel" Icon="cancel" ShowInEdit="true"></GridCommandButton>
</GridCommandColumn>
</GridColumns>
</TelerikGrid>
@code {
public List<Employee> GridData { get; set; }
int lastId;
protected override async Task OnInitializedAsync()
{
GridData = GetData();
await base.OnInitializedAsync();
}
private void DeleteHandler(GridCommandEventArgs args)
{
GridData.Remove((Employee)args.Item);
}
private void UpdateHandler(GridCommandEventArgs args)
{
Employee employee = (Employee)args.Item;
var existing = GridData.FirstOrDefault(empl => empl.Id == employee.Id);
if (existing != null)
{
existing.Name = employee.Name;
existing.LastName = employee.LastName;
existing.HireDate = employee.HireDate;
}
}
private List<Employee> GetData()
{
string[] firstNames = new[] { "Darryl", "Guy", "Buffy", "Hyacinth", "Akeem", "Rinah", "Gage", "Constance", "Darrel", "Brian", "Lillian", "Keiko" };
string[] lastNames = new[] { "Sweeney", "Wooten", "Weber", "Hood", "Carr", "Simon", "Daniels", "Vazquez", "Solis", "Yang", "Bradshaw", "Espinoza" };
Random rnd = new Random();
return Enumerable.Range(1, 1000).Select(x => new Employee
{
Id = ++lastId,
Name = firstNames[rnd.Next(0, firstNames.Length)],
LastName = lastNames[rnd.Next(0, lastNames.Length)],
HireDate = DateTime.Now.Date.AddDays(-rnd.Next(x, 12345))
}).ToList();
}
public class Employee
{
public int Id { get; set; }
public string Name { get; set; }
public string LastName { get; set; }
public DateTime HireDate { get; set; }
}
}
Perform different customizations like sorting, filtering, freezing and unfreezing, showing and hiding columns
More about the Grid Column FeaturesExport data to Excel with a click of a button and preserve all Grid settings in the xlsx document
More about the Grid Export CapabilitiesUtilize the built-in InCell editing mode and quickly edit only specific Grid fields and send up the changes.
More about the Grid InCell EditingTake control of the rendering of different aspects of the component - alter the default editor, control the rendering of the column, override the default rendering and much more.
More about the Grid TemplatesHave both rows and columns simultaneously virtualized for optimal performance when dealing with large volume of data rows and columns in your Blazor Grid
More about the Grid VirtualizationThe Telerik Blazor Grid now has the functionality to be exported to a CSV format. It is easily configured in the toolbar by adding a dedicated command button. After exporting, you will have all applied filters, sorting, paging, grouping and column ordering transferred to the CSV file. You have the option to export only the current page, or all the data.
The Blazor Data Grid is a full featured data visualization and editing component that works in both Blazor WebAssembly (WASM) and server-side Blazor apps. You can easily display large amounts of data in a table, then page, filter, sort and group over it, as well as edit rows and validate the user input.
All you need to do is provide data to the grid, enable the features you want through simple parameters and we will do the rest to ensure beautiful display and great performance. You can also tweak the visualization through templates and your own CSS styles.
The Column Menu feature simplifies access to common operations and provides your app’s users with a convenient way to apply sorting, filtering, and toggle the visible and lock states of the columns from a central spot. You also have the ability to group columns within the menu and configure it further via the GridColumnMenuSettings tag.
The Search Box is an additional method of filtering records in a Grid, complementary to the Grid Filtering options but much simpler. To add a Search Box to your Grid, simply add a GridSearchBox to its children. Once done, users will be able to type text to immediately and intuitively filter grid elements. The Search Box also features a small X button to easily clear its contents which can also be triggered programmatically.
Through the Multi-checkbox Filters, users can easily filter Grid data by a chosen value. This type of filter functions similarly to Microsoft Excel filtering and has many applications—from finding all sales made by an employee to finding all inventory items in a given category.
Sometimes it takes a while for your Grid to update some data on a heavily overloaded server. If you don’t want your users to stare at a blank screen during the operation, you can use the build-in Grid loading indicator to visually indicate that the data is being processed. The Grid is smart enough to show busy indicator when it detects detect a slow-running async data operation.
Check out the Grid Loading Animation demo page for an example on how to implement it.
With the Grid SortMode property, you can enable data sorting based on multiple grid columns. The SortMode accepts two values:
Display aggregated results in the Grid footer template for each data-bound column, commonly referred to Grand Total. This is especially useful in finance apps or internal reports where you can quickly give a summary of the data. Both of those examples aggregate values of each column and can show custom content. The footer template will always remain visible regardless of the vertical scrolling of the Grid.
Use the Grid column Visible property to programmatically control which Grid columns are visible. When a column needs to stay hidden at all times, you can directly set the column property Visible to false. However, you can also dynamically manage the column’s visibility in other cases when you need to provide conditional visibility. Check out more code samples on how to control column visibility in the Telerik UI for Blazor Grid.
Custom filter rows and Custom filter menus are two more ways to tailor the Grid for your specific needs. They provide you with the ability to replace the built-in filters on top of each column in the Grid with a more user-friendly filter for your specific case. For example, instead of the general built-in feature for numbers which can be overwhelming, you might want to simply give the user options to pick min and max values without too much thinking.
The Telerik Blazor Grid component lets your end users edit the data. They can alter or delete existing records or insert new ones—all the CRUD operations are conveniently exposed through events that give you the user action and the model, so all you have to do is add your business logic and call your data service. Excel-like editing is also supported in which the number of keystrokes is greatly reduced – hitting Enter will store the current cell value, move on to the next cell in the column, and automatically select its content so that the next keystroke will override it.
The grid also offers three built-in editing modes:
Popup
Inline where the entire row is being edited and saved at the same time,
InCell which lets you quickly edit only a certain field and send up the changes.
You can group the grid according to the values in different fields to see relationships between them, aggregates over the given groups and nest groups within groups to explore the data. Just set the Groupable parameter to true and you can simply drag the column headers to group by them.
The Telerik Blazor Data Grid lets you customize what renders in cells, editors and various headers and footers so you can tweak it according to your needs and to also show extra data.
You can define:
Special content for the cells – from specific formatting for a string or number, to entire components like charts and tooltips can go into each data cell.
Your own editors – while the grid offers built-in editors according to the field type, you can define your own where you can implement further logic, rendering and appearance.
Column header – when the field name is not enough and you want to add something more – from multiline text, to actionable buttons.
Column Group footer – a great place to add aggregates information (which the grid provides for you).
Group header – more descriptions about the current grouping level, including data aggregates.
The entire row rendering – you can render your own HTML, down to the <td> elements, instead of the grid.
The Telerik UI for Blazor Grid component dispatches the OnCellRender event when any of the Grid columns is rendered. The event is raised for every cell in the column and is given information about the items for which the current cell is being used. Use this event to conditionally format the styling classes of the cell.
The Grid can print any value type with a custom display format to improve the readability of values. The display format can be specified either by adding an attribute on the data member in the class or by adding an attribute to the GridColumn tag.
The Telerik UI for Blazor Grid can also use data from a weakly-typed ExpandoObject. This is often the case when connecting to a backend based on older technologies and usually makes integration much harder the Grid takes care of it.
In addition to the row virtualization, you can add easily enable virtualization of the Grid columns. And the great thing is that you can have both rows and columns simultaneously virtualized for optimal performance when dealing with large volume of data rows and columns in your Blazor Grid.
The Grid allows column resizing both programmatically (via methods) by developers and manually by end-users. End-users can resize columns by dragging the column border and dropping it to their desired location. As a developer, you can use three methods to resize the Data Grid columns:
AutoFitColumn adjusts the width of a column of your choice
AutoFitColumns adjusts the width of multiple columns of your choice
AutoFitAllColumns adjusts the width of all columns
When you declare the columns in a grid, you would usually put the most important ones first. A user may have a different need, task or preference, though, and the Telerik Blazor Grid lets them rearrange columns to fit their needs.
Whenever a row in the Grid is clicked or double-clicked, the corresponding event is fired and you can handle it to do interesting things like showing a detailed view of that row in a separate control or fetching/sending more data about this particular item to the server.
To simplify Grid columns definition, you can benefit from the automatic column generation feature. For cases when you want to display a list of columns in a Grid that are an exact match to your data model you can visualize, update, delete and insert records without extra overhead – all you have to do is set the Grid AutoGenerateColumns parameter to “true”.
Grid automatically generated columns work well together with column virtualization in Blazor Grid.
In a grid with many columns, the users often scroll to the left and right and want to keep certain important columns visible at all times – such as IDs, command column to edit, selection column, or anything else of value. The Telerik Blazor grid brings the Excel Frozen Columns feature to the web with even more flexibility – you can keep columns frozen in the beginning, at the end, and even columns from the middle of the grid can be always visible and stick to one end.
At the end of the day, people want to shut down their computers, then come back tomorrow exactly where they left off. The Telerik Blazor grid lets them have this experience in a web app by saving and loading its state from any storage. Every user action that changes the grid display (such as paging, filtering, even editing) fires up an event that you can use to record its state so you can restore it as-is when the user logs back in, or even on the click of a button.
Grid State also lets you invoke these operations from other places in your app logic. For example, if something else happens in the app, you can tell the grid to filter by a certain field and value, or to go back to the first page.
Grid State Management examples – persist (save and load), and change programmatically.
Thanks to the out-of-the-box support of complex (nested, navigation) properties, the Telerik Blazor Grid can be bound to both primitive types and complex model objects.
The row has a lot of details, but not all of them are important. Hide them in the Detail Template so the user can expand the row and see them when needed, without cluttering the main table.
The hierarchy feature of the grid is flexible and lets you drill down into data, expand and collapse the rows you want to look into and show data on demand. You can devise any layout you want, and put a grid there to showcase hierarchical relationship between the nested grid and its parent row.
Users in both Blazor server-side and WebAssembly applications can easily export Grid data to Excel with a click of a button. The exported file will preserve the Grid settings, so that filtering, sorting, paging, grouping, column order and column size are applied to data in the xlsx document. The export allows developers to set the resulting file name and configuration of the data to be exported – current shown page or all pages in the grid. Developers also control which data items or columns to be included in the exported file (via the OnBeforeExcelExport event) and the exported columns’ width seamless support. Excel and CSV exports can be triggered programmatically (via the newly exposed methods in the API).
Large data sets are commonly split into smaller pages of date for the convenience of your end users and to improve your app performance. The grid can do this for you automatically, just enable a single property.
When users highlight a certain row, you can use that information to show more data, other components or simply collect a list of their choices. The grid exposes all of this through single and multiple row selection modes, and also lets you select all items on the current page or across the entire grid, which comes in handy for batch operations like deleting many records at once, or moving data from one place (or state) to another. Select rows by clicking them or add a checkbox for selection to preserve the click interaction for cell editing.
The selected items offer a lot of flexibility – you can use two-way binding to predefine items or get your collection updated automatically; or you can consume an event so you can react to user activity and update your app.
In the simplest case, you just point the data parameter of the Blazor Grid to your data collection and define the columns you want in it. The grid will do everything else for you (paging, sorting, filtering and so on).
The Telerik UI for Blazor Grid can also use data from a DataTable object. This makes it easier to connect with legacy code which is still using DataTables.
You can improve performance by loading only the current page of data on demand using an IQueriable collection powered by EntityFramework (for a server-side Blazor app), or implementing your own data operations through the OnRead event (applies to both WASM and server-side Blazor). The custom data loading also applies to all other grid features such as paging, filtering and virtual scrolling, so you can make the most efficient database queries.
The Telerik Blazor Grid responds to the user culture automatically – for example, formats in numeric inputs and date inputs use the current user culture, and strings such as pager tooltips and command buttons’ texts can be easily translated.
Users with disabilities need to use your site as well, and the Telerik Grid component helps in that regard – it uses semantic markup and covers the current accessibility standards (including WCAG, Section 508 and WAI-ARIA attributes for screen readers). Moreover, you can navigate around the grid and invoke all actions with the keyboard alone.
Telerik has won Best Feature Set and Best Customer Support .
Progress Telerik UI has earned TrustRadius’ Top Rated Award for Software Components and .NET Development.
We are heavily invested in making sure your experience with the Blazor Grid is as successful and enjoyable as it can be. We are constantly publishing resources, refining our docs and demos, and even streaming on twitch. Here is some of our most popular resources.
Learn how to easily modify the data set to what you want and display it in reports.
Experience a real-world example with the Blazing Coffee PWA and see how a full-stack .NET application can be built with ASP.NET Core, Blazor WASM, and Telerik UI for Blazor.
See how to bind the Blazor Grid to any DataSource you want with the OnRead event.
