Skip to content

Commit 8425c6c

Browse files
svdimitrmarin-bratanov
svdimitr
and
marin-bratanov
authored
Docs media query (#270)
* feat(media): first commit * chore(media); docs * chore(mediaQuery): home page, ToC titles, link to mdn * chore(mediaquery): clarification on when event fires * docs(mediaQuery): examples * chore: improve examples Co-authored-by: Marin Bratanov <m.bratanov@gmail.com>
1 parent b86b993 commit 8425c6c

File tree

4 files changed

+446
-0
lines changed

4 files changed

+446
-0
lines changed

‎_config.yml

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -273,6 +273,8 @@ navigation:
273273
title: "MaskedTextBox"
274274
"*mediaplayer":
275275
title: "MediaPlayer"
276+
"*mediaquery":
277+
title: "MediaQuery"
276278
"*menu":
277279
title: "Menu"
278280
"*multiselect":
@@ -463,6 +465,7 @@ intro_columns:
463465
"Splitter": "splitter-overview"
464466
"Form": "form-overview"
465467
"Validation Tools": "validation-tools-overview"
468+
"Media Query": "mediaquery-overview"
466469
-
467470
title: "Scheduling"
468471
items:

‎components/mediaquery/events.md

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
---
2+
title: Events
3+
page_title: MediaQuery Events
4+
description: MediaQuery for Blazor - Events.
5+
slug: mediaquery-events
6+
tags: telerik,blazor,mediaquery,events
7+
published: True
8+
position: 30
9+
---
10+
11+
# Events
12+
13+
The TelerikMediaQuery component for Blazor exposes events that allow you to respond to user actions and provide custom logic.
14+
15+
* [OnChange](#onchange)
16+
17+
## OnChange
18+
19+
The `OnChange` event fires to notify you whether the media query string provided to the `Media` parameter is matched by the browser. It fires when it matches, and when it stops matching.
20+
21+
22+
>caption Use the OnChange event to resize a parent container
23+
24+
````CSHTML
25+
@* Resize the parent container *@
26+
27+
<TelerikMediaQuery Media="@MediaQuery" OnChange="@OnChange"></TelerikMediaQuery>
28+
29+
<div style="width: @(IsSmallScreen ? "500px" : "100%"); height: 400px; border: 1px solid black">
30+
Shrink the browser to less than 767px to resize the container.
31+
</div>
32+
33+
@code {
34+
private bool IsSmallScreen { get; set; }
35+
36+
private string MediaQuery { get; set; } = "(max-width: 767px)";
37+
38+
private void OnChange(bool doesMatch)
39+
{
40+
IsSmallScreen = doesMatch;
41+
}
42+
}
43+
````
44+
45+
## See Also
46+
47+
* [Overview]({%slug mediaquery-overview%})
48+
* [Integration]({%slug mediaquery-integration%})
49+

‎components/mediaquery/integration.md

Lines changed: 186 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,186 @@
1+
---
2+
title: Integration
3+
page_title: MediaQuery Overview
4+
description: Integration of the MediaQuery for Blazor.
5+
slug: mediaquery-integration
6+
tags: telerik,blazor,mediaquery,integration,chart,grid,form
7+
published: True
8+
position: 1
9+
---
10+
11+
# Integration
12+
13+
You can integrate the TelerikMediaQuery component with our existing components. This article provides examples on the most common scenarios:
14+
15+
* [Grid Integration](#grid-integration)
16+
17+
* [Chart Integration](#chart-integration)
18+
19+
* [Form Integration](#form-integration)
20+
21+
## Grid Integration
22+
23+
You can hide or more columns in the Grid based on the dimensions of the browser window by using the TelerikMediaQuery component and the [Visible parameter]({%slug components/grid/columns/bound%}#grid-bound-column-parameters) of the Grid column.
24+
25+
>tip You can use similar approach for the Telerik TreeList in order to hide some of the component columns on small devices. You can even replace the entire components with other components that have a simpler layout and limited functionality, such as a ListView, for small devices.
26+
27+
````CSHTML
28+
@* Hide Grid columns on small screens - those below 1024px in this example *@
29+
30+
<TelerikMediaQuery Media="(max-width: 1023px)" OnChange="@( (doesMatch) => IsMediumDown = doesMatch )"></TelerikMediaQuery>
31+
32+
<TelerikGrid Data="@MyData"
33+
Pageable="true" PageSize="10">
34+
<GridColumns>
35+
<GridCheckboxColumn Title="Select" Width="70px" />
36+
<GridColumn Field="@(nameof(User.Id))" Width="100px" />
37+
38+
<GridColumn Field="@(nameof(User.FirstName))" Title="First Name" Width="200px" Visible="@( !IsMediumDown )" />
39+
<GridColumn Field="@(nameof(User.LastName))" Title="Last Name" Width="200px" Visible="@( !IsMediumDown )" />
40+
41+
<GridColumn Field="@(nameof(User.FullName))" Title="Full Name" Width="200px" />
42+
43+
<GridColumn Field="@(nameof(User.DateOfBirth))" Title="Date of Birth" Width="200px" Visible="@( !IsMediumDown )" />
44+
<GridColumn Field="@(nameof(User.Age))" Title="Age" Width="100px" Visible="@( !IsMediumDown )" />
45+
46+
<GridColumn Field="@(nameof(User.EmailAddress))" Title="Email Address" Width="200px" />
47+
48+
<GridColumn Field="@(nameof(User.RegistrationDate))" Title="Registration Date" Width="200px" Visible="@( !IsMediumDown )" />
49+
<GridColumn Field="@(nameof(User.LocalTime))" Title="Local Time" Width="200px" Visible="@( !IsMediumDown )" />
50+
<GridColumn Field="@(nameof(User.UserNumber))" Title="User Number" Width="300px" Visible="@( !IsMediumDown )" />
51+
<GridColumn Field="@(nameof(User.Gender))" Title="Gender" Width="200px" Visible="@( !IsMediumDown )" />
52+
53+
<GridCommandColumn Width="250px" Title="Command Column">
54+
<GridCommandButton Command="Edit" Icon="edit">Edit</GridCommandButton>
55+
<GridCommandButton Command="Delete" Icon="delete">Delete</GridCommandButton>
56+
</GridCommandColumn>
57+
</GridColumns>
58+
</TelerikGrid>
59+
60+
@code {
61+
private bool IsMediumDown { get; set; } // sample rule to hide columns on small devices through their Visible parameter
62+
63+
// only sample data for the grid follows
64+
public IEnumerable<User> MyData = Enumerable.Range(1, 30).Select(x => new User
65+
{
66+
Id = x,
67+
FirstName = "App",
68+
LastName = $"User {x}",
69+
DateOfBirth = new DateTime(1970, 1, 1),
70+
EmailAddress = $"app-user{x}@mail.com",
71+
RegistrationDate = DateTime.Today.AddDays(-x),
72+
LocalTime = DateTime.Now,
73+
UserNumber = Guid.NewGuid(),
74+
Gender = x % 2 == 0 ? "Male" : "Female"
75+
});
76+
77+
public class User
78+
{
79+
public int Id { get; set; }
80+
public string FirstName { get; set; }
81+
public string LastName { get; set; }
82+
public string FullName
83+
{
84+
get
85+
{
86+
string fullName = $"{FirstName} {LastName}";
87+
return fullName;
88+
}
89+
}
90+
public DateTime DateOfBirth { get; set; }
91+
public int Age
92+
{
93+
get
94+
{
95+
var timeSpan = DateTime.Today - DateOfBirth;
96+
var years = timeSpan.Days / 365;
97+
return years;
98+
}
99+
}
100+
public string EmailAddress { get; set; }
101+
public Guid UserNumber { get; set; }
102+
public DateTime RegistrationDate { get; set; }
103+
public DateTime LocalTime { get; set; }
104+
public string Gender { get; set; }
105+
}
106+
}
107+
````
108+
109+
## Chart Integration
110+
111+
You can resize the Chart based on the browser size and re-render with the new dimensions. The `OnChange` event of the media query component lets you call the `Refresh()` method of the chart easily when your layout also changes so the chart needs new dimensions.
112+
113+
>note You can also see the <a href="https://github.com/telerik/blazor-ui/tree/master/chart/responsive-chart" target="_blank">Responsive Chart demo application</a> for additional examples.
114+
115+
````CSHMTL
116+
@* Resize the chart based on the browser size so it matches the corresponding responsive layout *@
117+
118+
<TelerikMediaQuery Media="(max-width: 767px)" OnChange="@OnChangeHandler"></TelerikMediaQuery>
119+
120+
<div style="width: @Width; height: @Height">
121+
122+
<TelerikChart Width="100%" Height="100%" @ref="@ChartRef">
123+
124+
<ChartSeriesItems>
125+
<ChartSeries Type="@ChartSeriesType.RadarColumn" Name="Soybean" Data="@series1Data">
126+
</ChartSeries>
127+
<ChartSeries Type="@ChartSeriesType.RadarColumn" Name="Lentils" Data="@series2Data">
128+
</ChartSeries>
129+
</ChartSeriesItems>
130+
<ChartCategoryAxes>
131+
<ChartCategoryAxis Categories="@xAxisItems">
132+
</ChartCategoryAxis>
133+
</ChartCategoryAxes>
134+
<ChartValueAxes>
135+
<ChartValueAxis Visible="false"></ChartValueAxis>
136+
</ChartValueAxes>
137+
<ChartTitle Text="Nutrients per 100g">
138+
</ChartTitle>
139+
<ChartLegend Position="@Telerik.Blazor.ChartLegendPosition.Right">
140+
</ChartLegend>
141+
142+
</TelerikChart>
143+
144+
</div>
145+
146+
@code {
147+
string Width { get; set; } = "600px";
148+
string Height { get; set; } = "600px";
149+
150+
public TelerikChart ChartRef { get; set; }
151+
152+
private async Task OnChangeHandler(bool isSmall)
153+
{
154+
//sample responsive layout. Often, ths is done with CSS alone, without C#
155+
if (isSmall)
156+
{
157+
Width = "400px";
158+
Height = "400px";
159+
}
160+
else
161+
{
162+
Width = "600px";
163+
Height = "600px";
164+
}
165+
166+
// re-render the chart after the layout has re-rendered too
167+
await Task.Delay(20);
168+
ChartRef.Refresh();
169+
}
170+
171+
public List<object> series1Data = new List<object>() { 36, 30, 20 };
172+
public List<object> series2Data = new List<object>() { 9, 20, 0.4d };
173+
public string[] xAxisItems = new string[] { "Protein", "Carbohydrates", "Fats" };
174+
}
175+
````
176+
177+
## Form Integration
178+
179+
You can utilize the Form Columns to fit the contents of the Telerik Form to a smaller browser window. You can find an example in the <a href="https://github.com/telerik/blazor-ui/tree/master/form/responsive-form" target="_blank">Responsive Form</a> demo application.
180+
181+
## See Also
182+
183+
* [Overview]({%slug mediaquery-overview%})
184+
* [Events]({%slug mediaquery-events%})
185+
186+

0 commit comments

Comments
 (0)