Skip to content

Commit 41130c8

Browse files
EdCharbeneauEdCharbeneau
committed
Added telerik example with theme chooser
1 parent 10cfa70 commit 41130c8

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

44 files changed

+2111
-0
lines changed

‎Telerik/TelerikBlazorApp1/Client/App.razor

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<Router AppAssembly="@typeof(Program).Assembly">
2+
<Found Context="routeData">
3+
<RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
4+
</Found>
5+
<NotFound>
6+
<LayoutView Layout="@typeof(MainLayout)">
7+
<p>Sorry, there's nothing at this address.</p>
8+
</LayoutView>
9+
</NotFound>
10+
</Router>

‎Telerik/TelerikBlazorApp1/Client/Pages/Chart.razor

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
@page "/chart"
2+
3+
@using TelerikBlazorApp1.Shared
4+
@using TelerikBlazorApp1.Services
5+
@inject WeatherForecastService ForecastService
6+
7+
<div class="container-fluid">
8+
<div class='row my-4'>
9+
<div class='col-12 col-lg-9 border-right'>
10+
@if (forecasts?.Count > 0)
11+
{
12+
<TelerikChart>
13+
<ChartCategoryAxes>
14+
<ChartCategoryAxis BaseUnit="@ChartCategoryAxisBaseUnit.Weeks" Type="@ChartCategoryAxisType.Date">
15+
<ChartCategoryAxisLabels Format="{0:dd MMM}" />
16+
</ChartCategoryAxis>
17+
</ChartCategoryAxes>
18+
19+
<ChartSeriesItems>
20+
<ChartSeries Type="@ChartSeriesType.Line" Name="High" Color="red"
21+
Data="@forecasts"
22+
Field="@nameof(WeatherForecast.TemperatureF)"
23+
CategoryField="@nameof(WeatherForecast.Date)"
24+
Aggregate="@ChartSeriesAggregate.Max">
25+
<ChartSeriesLabels Visible="true" Template="#=dataItem.Summary#" />
26+
</ChartSeries>
27+
28+
<ChartSeries Type="@ChartSeriesType.Line" Name="Low" Color="blue"
29+
Data="@forecasts"
30+
Field="@nameof(WeatherForecast.TemperatureF)"
31+
CategoryField="@nameof(WeatherForecast.Date)"
32+
Aggregate="@ChartSeriesAggregate.Min">
33+
<ChartSeriesLabels Visible="true" Template="#=dataItem.Summary#" />
34+
</ChartSeries>
35+
</ChartSeriesItems>
36+
37+
<ChartValueAxes>
38+
<ChartValueAxis AxisCrossingValue="new object[] { -50 }">
39+
<ChartValueAxisLabels Format="{0} F"></ChartValueAxisLabels>
40+
</ChartValueAxis>
41+
</ChartValueAxes>
42+
43+
<ChartTitle Text="Min and Max temperatures for the upcoming weeks"></ChartTitle>
44+
</TelerikChart>
45+
}
46+
else
47+
{
48+
<div class="alert alert-info">No data available.</div>
49+
}
50+
</div>
51+
<div class='col-12 col-lg-3 mt-3 mt-lg-0'>
52+
<h3>Telerik UI for Blazor Chart</h3>
53+
<p>The Telerik UI for Blazor Charts provide high quality graphical data visualization options.</p>
54+
55+
<p>
56+
They include a variety of chart types and styles that have extensive configuration options. This
57+
flexibility allows you to quickly and easily create the exact chart you need to fit your specific
58+
requirements for functionality and appearance.
59+
</p>
60+
61+
<p>
62+
This example uses the following features:
63+
<ul>
64+
<li>
65+
<a target="_blank"
66+
href="https://docs.telerik.com/blazor-ui/components/chart/data-bind">Data binding</a>
67+
</li>
68+
<li>
69+
<a target="_blank"
70+
href="https://docs.telerik.com/blazor-ui/components/chart/date-axis">Date axis</a>
71+
</li>
72+
<li>
73+
<a target="_blank"
74+
href="https://docs.telerik.com/blazor-ui/components/chart/labels-template-and-format">Label templates</a>
75+
</li>
76+
</ul>
77+
</p>
78+
</div>
79+
</div>
80+
</div>
81+
82+
@code{
83+
List<WeatherForecast> forecasts { get; set; }
84+
85+
protected override async Task OnInitializedAsync()
86+
{
87+
DateTime currDate = DateTime.Now.Date;
88+
var allForecasts = await ForecastService.GetForecastListAsync(currDate);
89+
// use only dates within the last month as a reasonable range of data considering the BaseUnit
90+
forecasts = allForecasts.Where(f => currDate.Subtract(f.Date.Date) < new TimeSpan(30, 0, 0, 0) ).ToList();
91+
}
92+
}

‎Telerik/TelerikBlazorApp1/Client/Pages/Form.razor

Lines changed: 145 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,145 @@
1+
@page "/form"
2+
3+
@using TelerikBlazorApp1.Shared
4+
5+
<div class="container-fluid">
6+
<div class='row my-4'>
7+
<div class='col-12 col-lg-9 border-right'>
8+
<div class="row example-wrapper">
9+
<div class="col-xs-12 col-sm-6 offset-sm-3 example-col">
10+
<div class="card">
11+
<div class="card-block">
12+
<EditForm Model="@person" OnValidSubmit="@HandleValidSubmit" class="k-form">
13+
<DataAnnotationsValidator />
14+
<fieldset>
15+
<legend>User Details</legend>
16+
17+
<div class="form-group">
18+
<label for="FNameTb">
19+
<span>First Name <span class="k-required">*</span></span>
20+
</label>
21+
<TelerikTextBox @bind-Value="@person.FirstName" Width="100%" Id="FNameTb" />
22+
</div>
23+
<div class="form-group">
24+
<label for="LNameTb">
25+
<span>Last Name <span class="k-required">*</span></span>
26+
</label>
27+
<TelerikTextBox @bind-Value="@person.LastName" Width="100%" Id="LNameTb" />
28+
</div>
29+
<div class="form-group">
30+
<label for="GenderDDL">
31+
<span>Gender <span class="k-field-info">optional</span></span>
32+
</label>
33+
<TelerikDropDownList @bind-Value="person.Gender" DefaultText="Select gender"
34+
Data="@genders" TextField="Text" ValueField="Id"
35+
Width="100%" PopupWidth="200px" PopupHeight="auto" Id="GenderDDL">
36+
</TelerikDropDownList>
37+
</div>
38+
<div class="form-group">
39+
<label for="EmailTb">
40+
<span>Email <span class="k-required">*</span></span>
41+
</label>
42+
<TelerikTextBox @bind-Value="@person.Email" Width="100%" Id="EmailTb" />
43+
</div>
44+
</fieldset>
45+
46+
<fieldset>
47+
<legend>Team Preferences</legend>
48+
<div class="form-group">
49+
<label for="StartDateDP">
50+
<span>Start date <span class="k-required">*</span></span>
51+
</label>
52+
<TelerikDatePicker @bind-Value="@person.StartDate" Width="100%" Id="StartDateDP" />
53+
</div>
54+
<div class="form-group">
55+
<label for="TeamDDL">
56+
<span>Languages <span class="k-required">*</span></span>
57+
</label>
58+
<TelerikDropDownList @bind-Value="@person.PreferredTeam"
59+
DefaultText="Preferred team" Id="TeamDDL"
60+
Data="@Teams" Width="100%" PopupWidth="200px" />
61+
</div>
62+
</fieldset>
63+
64+
<ValidationSummary />
65+
66+
@if (ShowSuccessMessage)
67+
{
68+
<div class="alert alert-info">
69+
Application form submitted Successfully, we will get back to you
70+
</div>
71+
}
72+
73+
<div class="text-right">
74+
<TelerikButton ButtonType="@ButtonType.Button" OnClick="@CancelForm">Cancel</TelerikButton>
75+
<TelerikButton ButtonType="@ButtonType.Submit" Primary="true">Submit</TelerikButton>
76+
</div>
77+
</EditForm>
78+
</div>
79+
</div>
80+
</div>
81+
</div>
82+
83+
</div>
84+
<div class='col-12 col-lg-3 mt-3 mt-lg-0'>
85+
<h3>Telerik UI for Blazor Form</h3>
86+
<p>Telerik UI for Blazor provides comprehensive support for building forms.</p>
87+
88+
<p>
89+
For more information on implementing validation and labels, refer to the article
90+
on <a href="https://docs.telerik.com/blazor-ui/common-features/input-validation" target="_blank">Input Validation support by Telerik UI for Blazor
91+
</a>.
92+
</p>
93+
</div>
94+
</div>
95+
</div>
96+
97+
@code{
98+
Person person { get; set; }
99+
bool ShowSuccessMessage { get; set; }
100+
101+
protected override Task OnInitializedAsync()
102+
{
103+
GetDefaultPerson();
104+
105+
return base.OnInitializedAsync();
106+
}
107+
108+
async void HandleValidSubmit()
109+
{
110+
// implement actual data storage here
111+
ShowSuccessMessage = true;
112+
await Task.Delay(2000);
113+
ShowSuccessMessage = false;
114+
GetDefaultPerson();
115+
StateHasChanged();
116+
}
117+
118+
void CancelForm()
119+
{
120+
GetDefaultPerson();
121+
}
122+
123+
void GetDefaultPerson()
124+
{
125+
// in reality you may be pulling data from a service or authentication logic
126+
// not only for the form model, but also for the data sources below
127+
person = new Person()
128+
{
129+
StartDate = DateTime.Now.AddDays(7)
130+
};
131+
}
132+
133+
IEnumerable<DropDownModel> genders = new List<DropDownModel>
134+
{
135+
new DropDownModel {Text = "female", Id = 1},
136+
new DropDownModel {Text = "male", Id = 2},
137+
new DropDownModel {Text = "other", Id = 3},
138+
new DropDownModel {Text = "I'd rather not say", Id = 4}
139+
};
140+
141+
List<string> Teams = new List<string>
142+
{
143+
"Blazor", "Python", "Ruby", "Java", "JavaScript", "Assembler"
144+
};
145+
}

‎Telerik/TelerikBlazorApp1/Client/Pages/Grid.razor

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
@page "/grid"
2+
3+
@using TelerikBlazorApp1.Shared
4+
@using TelerikBlazorApp1.Services
5+
@inject WeatherForecastService ForecastService
6+
7+
<div class="container-fluid">
8+
<div class='row my-4'>
9+
<div class='col-12 col-lg-9 border-right'>
10+
<TelerikGrid Data="@forecasts" Height="550px" FilterMode="@GridFilterMode.FilterMenu"
11+
Sortable="true" Pageable="true" PageSize="20" Groupable="true"
12+
OnUpdate="@UpdateHandler" OnDelete="@DeleteHandler" OnCreate="@CreateHandler" EditMode="@GridEditMode.Inline">
13+
<GridColumns>
14+
<GridColumn Field="Id" Title="Id" Width="100px" Editable="false" Groupable="false" />
15+
<GridColumn Field="Date">
16+
<Template>
17+
@((context as WeatherForecast).Date.ToString("dddd, dd MMM yyyy"))
18+
</Template>
19+
</GridColumn>
20+
<GridColumn Field="TemperatureC" Title="Temp. C" />
21+
<GridColumn Field="TemperatureF" Title="Temp. F" />
22+
<GridColumn Field="Summary" />
23+
<GridCommandColumn>
24+
<GridCommandButton Command="Save" Icon="@IconName.Save" ShowInEdit="true">Update</GridCommandButton>
25+
<GridCommandButton Command="Edit" Icon="@IconName.Edit" Primary="true">Edit</GridCommandButton>
26+
<GridCommandButton Command="Delete" Icon="@IconName.Delete">Delete</GridCommandButton>
27+
<GridCommandButton Command="Cancel" Icon="@IconName.Cancel" ShowInEdit="true">Cancel</GridCommandButton>
28+
</GridCommandColumn>
29+
</GridColumns>
30+
<GridToolBar>
31+
<GridCommandButton Command="Add" Icon="@IconName.Plus" Primary="true">Add Forecast</GridCommandButton>
32+
</GridToolBar>
33+
</TelerikGrid>
34+
</div>
35+
<div class='col-12 col-lg-3 mt-3 mt-lg-0'>
36+
<h3>Telerik UI for Blazor Grid</h3>
37+
<p>
38+
The Telerik UI for Blazor Data Grid includes a comprehensive set of ready-to-use
39+
<a target="_blank" href="https://docs.telerik.com/blazor-ui/components/grid/overview">features</a> covering
40+
everything from paging, sorting, filtering, editing, and grouping to row virtualization and
41+
accessibility/keyboard support.
42+
</p>
43+
44+
<p>
45+
This example demonstrates CRUD operations with data from a service. In a real application, you would
46+
probably replace the service with something suitable (for example, EF for a server-side app or HTTP endpoints
47+
for a WASM app). Depending on how you store the grid data, you may also need to update the view model data -
48+
read more about this in the code comments.
49+
</p>
50+
</div>
51+
</div>
52+
</div>
53+
54+
@code {
55+
List<WeatherForecast> forecasts { get; set; }
56+
57+
protected override async Task OnInitializedAsync()
58+
{
59+
await GetForecasts();
60+
}
61+
62+
async Task GetForecasts()
63+
{
64+
forecasts = await ForecastService.GetForecastListAsync(DateTime.Now);
65+
}
66+
67+
// Sample CUD operations below that call a service
68+
// they also update the local view data - this is required when the grid data is not tied
69+
// directly to an IQueriable that fetches from an EF context (possible only in server blazor)
70+
// this sample uses the item from the grid immediately, but in a real app
71+
// you may return an updated/inserted/deleted item data from the service and use that instead
72+
// or add code to fetch all the grid data anew (which might be a performance hit but for data that updates often may be helpful)
73+
74+
public async Task DeleteHandler(GridCommandEventArgs args)
75+
{
76+
WeatherForecast currItem = args.Item as WeatherForecast;
77+
78+
await ForecastService.DeleteForecastAsync(currItem);
79+
80+
// update the view data
81+
forecasts.Remove(currItem);
82+
}
83+
84+
public async Task CreateHandler(GridCommandEventArgs args)
85+
{
86+
WeatherForecast currItem = args.Item as WeatherForecast;
87+
88+
await ForecastService.InsertForecastAsync(currItem);
89+
90+
// update the view data
91+
currItem.Id = forecasts.Count + 1;
92+
forecasts.Insert(0, currItem);
93+
}
94+
95+
public async Task UpdateHandler(GridCommandEventArgs args)
96+
{
97+
WeatherForecast currItem = args.Item as WeatherForecast;
98+
99+
await ForecastService.UpdateForecastAsync(currItem);
100+
101+
// update the view data
102+
var matchingItem = forecasts.FirstOrDefault(c => c.Id == currItem.Id);
103+
if (matchingItem != null)
104+
{
105+
matchingItem.Summary = currItem.Summary;
106+
matchingItem.TemperatureC = currItem.TemperatureC;
107+
matchingItem.Date = currItem.Date;
108+
}
109+
}
110+
}

0 commit comments

Comments
 (0)