Try now
@using Telerik.Blazor.Components.Grid
<TelerikGrid Data=@GridData EditMode="inline"
Pageable="true" PageSize=@PageSize>
<TelerikGridToolBar>
<TelerikGridCommandButton Command="Create" Icon="add">Add Product</TelerikGridCommandButton>
</TelerikGridToolBar>
<TelerikGridColumns>
<TelerikGridColumn Field=@nameof(Product.ProductName) Title="Product Name" />
<TelerikGridColumn Field=@nameof(Product.UnitPrice) Title="Unit Price">
<Template>
@(String.Format("{0:C2}", (context as Product).UnitPrice))
</Template>
</TelerikGridColumn>
<TelerikGridColumn Field=@nameof(Product.UnitsInStock) Title="Units In Stock" />
<TelerikGridCommandColumn>
<TelerikGridCommandButton Command="Edit" Icon="edit" OnClick="TriggerEdit">Edit</TelerikGridCommandButton>
<TelerikGridCommandButton Command="Delete" Icon="delete">Delete</TelerikGridCommandButton>
<TelerikGridCommandButton Command="Update" Icon="save" ShowInEdit="true" OnClick="UpdateItem">Update</TelerikGridCommandButton>
<TelerikGridCommandButton Command="Cancel" Icon="cancel" ShowInEdit="true" OnClick="CancelItem">Cancel</TelerikGridCommandButton>
</TelerikGridCommandColumn>
</TelerikGridColumns>
</TelerikGrid>
@functions {
public IEnumerable<Product> GridData { get; set; }
public Product ProductToEdit { get; set; }
int PageSize = 15;
protected override void OnInit()
{
GridData = new List<Product>();
for (int i = 0; i < 100; i++)
{
GridData.Add(new Product()
{
ProductId = i,
ProductName = "Product" + i.ToString(),
SupplierId = i,
UnitPrice = (decimal)(i * 3.14),
UnitsInStock = (short)(i * 1),
});
}
}
private void TriggerEdit(GridCommandEventArgs args)
{
var product = (args.Item as Product);
if (product.ProductName == "Product1")
{
args.IsCancelled = true;
}
}
private void UpdateItem(GridCommandEventArgs args)
{
}
private void CancelItem(GridCommandEventArgs args)
{
}
}
@using Telerik.Blazor.Components.Chart
@using Telerik.Blazor
<div style="width:40%; display: inline-block;">
<TelerikChart>
<TelerikChartTitle Text="Gross domestic product growth /GDP annual %/"></TelerikChartTitle>
<TelerikChartLegend Visible="false"></TelerikChartLegend>
<TelerikChartSeriesItems>
<TelerikChartSeries Type="ChartSeriesType.Column" Data="@Data" Field="@nameof(ModelData.Series1)"></TelerikChartSeries>
<TelerikChartSeries Type="ChartSeriesType.Column" Data="@Data" Field="@nameof(ModelData.Series2)"></TelerikChartSeries>
<TelerikChartSeries Type="ChartSeriesType.Column" Data="@Data" Field="@nameof(ModelData.Series3)"></TelerikChartSeries>
<TelerikChartSeries Type="ChartSeriesType.Column" Data="@Data" Field="@nameof(ModelData.Series4)"></TelerikChartSeries>
</TelerikChartSeriesItems>
<TelerikChartCategoryAxes>
<TelerikChartCategoryAxis Categories="@Categories"></TelerikChartCategoryAxis>
</TelerikChartCategoryAxes>
</TelerikChart>
</div>
<div style="width:50%; display: inline-block; margin-left:10px;">
<TelerikChart>
<TelerikChartTitle Text="What is you favourite sport?"></TelerikChartTitle>
<TelerikChartLegend Visible="true" Position="ChartLegendPosition.Top"></TelerikChartLegend>
<TelerikChartSeriesItems>
<TelerikChartSeries Type="ChartSeriesType.Donut" Data="@DataForDonut" Field="@nameof(DonutData.Value)" CategoryField="@nameof(DonutData.Category)">
<TelerikChartSeriesLabels Position="ChartSeriesLabelsPosition.OutsideEnd"
Visible="true"
Background="transparent"
Template="#= dataItem.Category # - #= percentage*100 #%"></TelerikChartSeriesLabels>
</TelerikChartSeries>
</TelerikChartSeriesItems>
</TelerikChart>
</div>
@functions {
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
}
};
}
@using Telerik.Blazor.Components.Calendar
@using Telerik.Blazor
<TelerikCalendar SelectionMode="@CalendarSelectionMode.Single" Date="@startDate" View="@CalendarView.Year" BottomView="@CalendarView.Year">
</TelerikCalendar>
<TelerikCalendar SelectionMode="@CalendarSelectionMode.Multiple" Date="@startDate">
</TelerikCalendar>
@functions {
private DateTime startDate = new DateTime(2019, 4, 1);//set the initial date of the calendar
}
@using System.ComponentModel.DataAnnotations
@using Telerik.Blazor.Components.DropDownList
<EditForm Model="@employee" OnValidSubmit="@HandleValidSubmit">
<DataAnnotationsValidator />
<ValidationSummary></ValidationSummary>
<TelerikDropDownList Data="@DropDownListData" bind-Value=@SelectedValue Height="40" PopupHeight="170" DefaultItem="@DefaultItem" ValueField="ProductId" TextField="ProductName">
</TelerikDropDownList>
<TelerikDropDownList bind-Value="@employee.EmployeeId" Height="40" DefaultItem="@DefaultEmployeeItem" Data="@EmployeeData" ValueField="EmployeeId" TextField="Name">
</TelerikDropDownList>
<button class="k-button" type="submit">Submit</button>
</EditForm>
@functions {
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;
IEnumerable<DropDownValidationModel> EmployeeData { get; set; }
DropDownValidationModel employee { get; set; } = new DropDownValidationModel();
DropDownValidationModel DefaultEmployeeItem { get; set; } = new DropDownValidationModel()
{
Name = "Choose an employee"
};
protected override void OnInit()
{
DropDownListData = new List<Product>();
for (int i = 0; i < 5; i++)
{
DropDownListData.Add(new Product()
{
ProductId = i,
ProductName = "Product" + i.ToString(),
SupplierId = i,
UnitPrice = (decimal)(i * 3.14),
UnitsInStock = (short)(i * 1),
});
}
EmployeeData = new List<DropDownValidationModel>();
for (int i = 0; i < 10; i++)
{
EmployeeData.Add(new DropDownValidationModel()
{
Name = "John " + i.ToString(),
EmployeeId = i
});
}
base.OnInit();
}
class DropDownValidationModel
{
[Required(ErrorMessage = "Choose an employee")]
public int? EmployeeId { get; set; }
public string Name { get; set; }
}
string SuccessMessage = string.Empty;
void HandleValidSubmit()
{
SuccessMessage = "Form Submitted Successfully!";
}
}
Don’t reinvent the wheel – get 25+ native components off the shelf
Style your UI as you wish – theme for Twitter Bootstrap, Google Material, Telerik Default or your own
Native components all the way – we built the components natively, so you enjoy all Blazor’s features as they were intended to
Enhanced user experience - with our Telerik UI for Blazor Grid templates you can customize the look and feel of your data
Download a 30-day trial and measure how much more productive you can be
25+ (and growing) UI components to match various app scenarios
An SDK designed and built for Blazor, with zero dependencies
Our legendary support, with 95% customer satisfaction rating