<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;
}
}
}
<div style="width:40%; display: inline-block;">
<TelerikChart>
<ChartTitle Text="Gross domestic product growth /GDP annual %/"></ChartTitle>
<ChartLegend Visible="false"></ChartLegend>
<ChartSeriesItems>
<ChartSeries Type="ChartSeriesType.Column" Data="@Data" Field="@nameof(ModelData.Series1)"></ChartSeries>
<ChartSeries Type="ChartSeriesType.Column" Data="@Data" Field="@nameof(ModelData.Series2)"></ChartSeries>
<ChartSeries Type="ChartSeriesType.Column" Data="@Data" Field="@nameof(ModelData.Series3)"></ChartSeries>
<ChartSeries Type="ChartSeriesType.Column" Data="@Data" Field="@nameof(ModelData.Series4)"></ChartSeries>
</ChartSeriesItems>
<ChartCategoryAxes>
<ChartCategoryAxis Categories="@Categories"></ChartCategoryAxis>
</ChartCategoryAxes>
</TelerikChart>
</div>
<div style="width:50%; display: inline-block; margin-left:10px;">
<TelerikChart>
<ChartTitle Text="What is you favourite sport?"></ChartTitle>
<ChartLegend Visible="true" Position="ChartLegendPosition.Top"></ChartLegend>
<ChartSeriesItems>
<ChartSeries Type="ChartSeriesType.Donut" Data="@DataForDonut" Field="@nameof(DonutData.Value)" CategoryField="@nameof(DonutData.Category)">
<ChartSeriesLabels Position="ChartSeriesLabelsPosition.OutsideEnd"
Visible="true"
Background="transparent"
Template="#= dataItem.Category # - #= percentage*100 #%"></ChartSeriesLabels>
</ChartSeries>
</ChartSeriesItems>
</TelerikChart>
</div>
@code {
public class DonutData
{
public string Category { get; set; }
public Int32 Value { get; set; }
}
public List<DonutData> DataForDonut = new List<DonutData>()
{
new DonutData()
{
Category = "Football",
Value = 35
},
new DonutData()
{
Category = "Basketball",
Value = 25
},
new DonutData()
{
Category = "Volleyball",
Value = 20
},
new DonutData()
{
Category = "Rugby",
Value = 10
},
new DonutData()
{
Category = "Tennis",
Value = 10
},
};
public class ModelData
{
public double Series1 { get; set; }
public double Series2 { get; set; }
public double Series3 { get; set; }
public double Series4 { get; set; }
}
public string[] Categories = new string[] { "2002", "2003", "2004", "2005", "2006", "2007", "2008", "2009", "2010", "2011" };
public List<ModelData> Data = new List<ModelData>()
{
new ModelData()
{
Series1 = 3.907,
Series2 = 4.743,
Series3 = 0.01,
Series4 = 1.988
},
new ModelData()
{
Series1 = 7.943,
Series2 = 7.295,
Series3 = 0.375,
Series4 = 2.733
},
new ModelData()
{
Series1 = 7.848,
Series2 = 7.175,
Series3 = 1.161,
Series4 = 3.994
},
new ModelData()
{
Series1 = 9.284,
Series2 = 6.376,
Series3 = 0.684,
Series4 = 3.464
},
new ModelData()
{
Series1 = 9.263,
Series2 = 8.153,
Series3 = 3.7,
Series4 = 4.001
},
new ModelData()
{
Series1 = 9.801,
Series2 = 8.535,
Series3 = 3.269,
Series4 = 3.939
},
new ModelData()
{
Series1 = 3.89,
Series2 = 5.247,
Series3 = 1.083,
Series4 = 1.333
},
new ModelData()
{
Series1 = 8.238,
Series2 = 7.832,
Series3 = 5.127,
Series4 = 2.245
},
new ModelData()
{
Series1 = 9.552,
Series2 = 4.3,
Series3 = 3.69,
Series4 = 4.339
},
new ModelData()
{
Series1 = 6.855,
Series2 = 4.3,
Series3 = 2.995,
Series4 = 2.727
}
};
}
<div class="calendar-wrap">
<div class="col col-sm">
<div class="switch-view-wrap">
<h2>Switch View</h2>
<ul class="fieldlist">
@foreach (var possibleCalendarView in Enum.GetValues(typeof(CalendarView)))
{
<li>
<input type="radio" name="calendarView" id="@possibleCalendarView" value="@possibleCalendarView" @onchange="ChangeCalendarView" class="k-radio" checked="@(String.Equals(possibleCalendarView.ToString(), CalendarViewValue.ToString()))" />
<label class="k-radio-label" for="@possibleCalendarView">@possibleCalendarView View </label>
</li>
}
</ul>
</div>
</div>
<div class="col col-lg">
<TelerikCalendar SelectionMode="@CalendarSelectionMode.Multiple"
Date="@startDate"
@bind-View="@CalendarViewValue">
</TelerikCalendar>
</div>
</div>
@code {
private DateTime startDate = new DateTime(2019, 4, 1);
public CalendarView CalendarViewValue { get; set; } = CalendarView.Month;
public void ChangeCalendarView(ChangeEventArgs args)
{
CalendarViewValue = (CalendarView)Enum.Parse(typeof(CalendarView), args.Value.ToString());
}
}
<style>
.calendar-wrap {
width: 100%;
height: 340px;
max-width: 100%;
max-height: 100%;
display: flex;
justify-content: center;
}
.calendar-wrap .col {
padding: 0 30px;
box-sizing: border-box;
}
.calendar-wrap h2 {
margin-top: 0;
margin-bottom: 1.5em;
}
.col-sm {
width: 40%;
}
.col-lg {
width: 60%;
}
.switch-view-wrap {
width: 150px;
margin-left: auto;
}
.fieldlist {
margin-bottom: 0 0 -1em;
}
.fieldlist li {
padding-bottom: 1.5em;
}
</style>
@using System.ComponentModel.DataAnnotations
<div class="dropdownlist-form">
<div class="header">
<h3>Product Details</h3>
</div>
<EditForm Model="@category" OnValidSubmit="@HandleValidSubmit">
<DataAnnotationsValidator />
<ValidationSummary></ValidationSummary>
<label>Categories</label>
<TelerikDropDownList Data="@CategoryData" @bind-Value="@category.CategoryId" DefaultItem="@DefaultCategory" ValueField="CategoryId" TextField="CategoryName">
</TelerikDropDownList>
<label>Products</label>
<TelerikDropDownList Data="@DropDownListData" @bind-Value=@SelectedValue PopupHeight="170" DefaultItem="@DefaultItem" ValueField="ProductId" TextField="ProductName">
</TelerikDropDownList>
<label>Shipping Address</label>
<TelerikDropDownList Data="@OrderData" @bind-Value=@order.OrderId PopupHeight="170" DefaultItem="@DefaultOrder" ValueField="OrderId" TextField="OrderName">
</TelerikDropDownList>
<div class="submit-btn-wrap">
<button class="k-button k-primary" type="submit">Submit</button>
</div>
@if (SuccessMessage != string.Empty)
{
<div class="k-notification k-notification-success">
@SuccessMessage
</div>
}
</EditForm>
</div>
@code {
string[] categoriesList = { "Seafood", "Confections", "Dairy Products", "Meat/Poultry", "Beverages" };
string[] productsList = { "Boston Crab Meat", "Teatime Chocolate Biscuits", "Tofu", "Mascarpone", "Chai" };
string[] orderList = { "Marseille", "Rio de Janeiro", "Lyon", "Bern", "Genève" };
public IEnumerable<Product> DropDownListData { get; set; }
public Product DefaultItem { get; set; } = new Product()
{
ProductId = 0,
ProductName = "Select a product..."
};
public int SelectedValue { get; set; } = 2;
protected override void OnInitialized()
{
List<Product> products = new List<Product>();
for (int i = 0; i < 5; i++)
{
products.Add(new Product()
{
ProductId = i,
ProductName = productsList[i],
});
}
DropDownListData = products.AsQueryable();
List<DropDownValidationModel> categories = new List<DropDownValidationModel>();
for (int i = 0; i < 5; i++)
{
categories.Add(new DropDownValidationModel()
{
CategoryId = i,
CategoryName = categoriesList[i],
});
}
CategoryData = categories.AsQueryable();
List<Order> orders = new List<Order>();
for (int i = 0; i < 5; i++)
{
orders.Add(new Order()
{
OrderId = i,
OrderName = orderList[i],
});
}
OrderData = orders.AsQueryable();
base.OnInitialized();
}
class DropDownValidationModel
{
[Required(ErrorMessage = "Choose a category")]
public int? CategoryId { get; set; }
public string CategoryName { get; set; }
}
IEnumerable<DropDownValidationModel> CategoryData { get; set; }
DropDownValidationModel category { get; set; } = new DropDownValidationModel();
DropDownValidationModel DefaultCategory { get; set; } = new DropDownValidationModel()
{
CategoryName = "Choose a category"
};
string SuccessMessage = string.Empty;
void HandleValidSubmit()
{
SuccessMessage = "Form Submitted Successfully!";
}
class Order
{
public int? OrderId { get; set; }
public string OrderName { get; set; }
}
IEnumerable<Order> OrderData { get; set; }
Order order { get; set; } = new Order();
Order DefaultOrder { get; set; } = new Order()
{
OrderId = 0,
OrderName = "Choose a shipping city"
};
}
<style>
.dropdownlist-form {
max-width: 340px;
padding: 20px 0;
}
.dropdownlist-form form {
padding: 15px 20px;
}
.dropdownlist-form h3 {
color: #454545;
font-weight: 700;
}
.dropdownlist-form .header:before {
bottom: 12px;
}
.dropdownlist-form label {
font-size: 14px;
}
.dropdownlist-form .k-widget {
margin-bottom: 20px;
}
.submit-btn-wrap {
margin-top: 10px;
text-align: right;
}
.k-notification {
margin-top: 20px;
}
.validation-errors {
margin-bottom: 20px;
}
.validation-message {
color: #f31700;
}
</style>