Skip to content

docs(mediaquery): Replace obsolete Form Integration demo #2408

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Oct 3, 2024
Merged

docs(mediaquery): Replace obsolete Form Integration demo #2408

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
61d4072
docs(mediaquery): Replace obsolete Form Integration demo
dimodi Oct 3, 2024
b0aa012
Update overview.md
dimodi Oct 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
142 changes: 136 additions & 6 deletions components/mediaquery/integration.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -191,12 +191,142 @@ You can resize the Chart based on the browser size and re-render with the new di

## Form Integration

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.
You can use the MediaQuery component to set various [layout-related parameters of the Form component]({%slug form-overview%}#form-parameters), such as `Orientation`, `Columns`, `ColumnSpacing`, and `ButtonsLayout`.

>caption Responsive Form with MediaQuery

````CSHTML
@using System.ComponentModel.DataAnnotations

<ul>
<li>
<code>IsSmallScreen</code>: <strong>@IsSmallScreen</strong>
</li>
<li>
<code>IsMediumScreen</code>: <strong>@IsMediumScreen</strong>
</li>
<li>
<code>IsLargeScreen</code>: <strong>@IsLargeScreen</strong>
</li>
<li>
<code>IsExtraLargeScreen</code>: <strong>@IsExtraLargeScreen</strong>
</li>
</ul>

<TelerikForm Model="@Employee"
ButtonsLayout="@FormButtonsLayout"
Orientation="@FormOrientation">
<FormValidation>
<DataAnnotationsValidator></DataAnnotationsValidator>
<TelerikValidationSummary />
</FormValidation>
<FormItems>
<FormGroup LabelText="Personal Information" Columns="@FormGroupColumns" ColumnSpacing="@FormGroupColumnSpacing">
<FormItem Field="@nameof(Person.FirstName)" LabelText="First Name"></FormItem>
<FormItem Field="@nameof(Person.MiddleName)" LabelText="Middle Name"></FormItem>
<FormItem Field="@nameof(Person.LastName)" LabelText="Last Name"></FormItem>
<FormItem Field="@nameof(Person.BirthDate)" LabelText="Birth Date"></FormItem>
<FormItem Field="@nameof(Person.Address)" EditorType="@FormEditorType.TextArea" ColSpan="@FormGroupColumns"></FormItem>
</FormGroup>
<FormGroup LabelText="Work Information" Columns="@FormGroupColumns" ColumnSpacing="@FormGroupColumnSpacing">
<FormItem Field="@nameof(Person.Id)" LabelText="Corporate ID" Enabled="false"></FormItem>
<FormItem Field="@nameof(Person.HireDate)" LabelText="Hire Date"></FormItem>
<FormItem Field="@nameof(Person.Team)"></FormItem>
<FormItem Field="@nameof(Person.LeaveDate)" LabelText="Leave Date"></FormItem>
</FormGroup>
</FormItems>
</TelerikForm>

<TelerikMediaQuery Media="@SmallScreenMediaQuery" OnChange="@( (bool matches) => { IsSmallScreen = matches; ConfigureForm(); } )" />
<TelerikMediaQuery Media="@MediumScreenMediaQuery" OnChange="@( (bool matches) => { IsMediumScreen = matches; ConfigureForm(); } )" />
<TelerikMediaQuery Media="@LargeScreenMediaQuery" OnChange="@( (bool matches) => { IsLargeScreen = matches; ConfigureForm(); } )" />
<TelerikMediaQuery Media="@ExtraLargeScreenMediaQuery" OnChange="@( (bool matches) => { IsExtraLargeScreen = matches; ConfigureForm(); } )" />

@code {
private Person Employee { get; set; } = new() { Id = 1234 };

private FormOrientation FormOrientation { get; set; } = FormOrientation.Vertical;
private FormButtonsLayout FormButtonsLayout { get; set; } = FormButtonsLayout.Start;
private int FormGroupColumns { get; set; } = 1;
private string FormGroupColumnSpacing { get; set; } = string.Empty;

private string SmallScreenMediaQuery { get; set; } = "(max-width: 430px)";
private string MediumScreenMediaQuery { get; set; } = "(min-width: 431px)";
private string LargeScreenMediaQuery { get; set; } = "(min-width: 768px)";
private string ExtraLargeScreenMediaQuery { get; set; } = "(min-width: 1199px)";

private bool IsSmallScreen { get; set; }
private bool IsMediumScreen { get; set; }
private bool IsLargeScreen { get; set; }
private bool IsExtraLargeScreen { get; set; }

private void ConfigureForm()
{
if (IsMediumScreen)
{
FormOrientation = FormOrientation.Horizontal;
FormButtonsLayout = FormButtonsLayout.Center;
FormGroupColumns = 2;
FormGroupColumnSpacing = "1em";
}

if (IsSmallScreen)
{
FormOrientation = FormOrientation.Vertical;
FormButtonsLayout = FormButtonsLayout.Stretch;
FormGroupColumns = 1;
FormGroupColumnSpacing = string.Empty;
}

if (IsLargeScreen)
{
FormOrientation = FormOrientation.Vertical;
FormButtonsLayout = FormButtonsLayout.Start;
FormGroupColumns = 3;
FormGroupColumnSpacing = "2em";
}

if (IsExtraLargeScreen)
{
FormOrientation = FormOrientation.Vertical;
FormButtonsLayout = FormButtonsLayout.End;
FormGroupColumns = 4;
FormGroupColumnSpacing = "3em";
}
}

public class Person
{
public int Id { get; set; }

[Required]
public string FirstName { get; set; } = string.Empty;

[Required]
public string MiddleName { get; set; } = string.Empty;

[Required]
public string LastName { get; set; } = string.Empty;

[Required]
public string Address { get; set; } = string.Empty;

[Required]
public DateTime? BirthDate { get; set; }

[Required]
public DateTime HireDate { get; set; } = DateTime.Today;

[Required]
public string? Team { get; set; }

public DateTime? LeaveDate { get; set; }
}
}
````

## See Also

* [Live Demo: MediaQuery - Grid Integration](https://demos.telerik.com/blazor-ui/mediaquery/grid-integration)
* [Overview]({%slug mediaquery-overview%})
* [Events]({%slug mediaquery-events%})


* [Live Demo: MediaQuery and Grid Integration](https://demos.telerik.com/blazor-ui/mediaquery/grid-integration)
* [MediaQuery Overview]({%slug mediaquery-overview%})
* [MediaQuery Events]({%slug mediaquery-events%})
13 changes: 6 additions & 7 deletions components/mediaquery/overview.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,17 +61,16 @@ The <a href = "https://www.telerik.com/blazor-ui/mediaquery" target="_blank">Med

@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout)

| Parameter | Type and Default value | Description |
|-----------|------------------------|-------------|
| `Media` | `string` | the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries" target="_blank">media query string</a> that will be matched. |
| Parameter | Type | Description |
|---|---|---|
| `Media` | `string` | The <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries" target="_blank">media query string</a> that will be matched. |

## Notes

The MediaQuery component facilitates the usage of CSS media queries in your C# code. There are a few points to keep in mind:
The MediaQuery component facilitates the usage of CSS media queries in your C# code:

* The MediaQuery component is not a replacement for responsive design, layout and CSS. You should use them to create your responsive application layouts like with any other web application.

* The MediaQuery component makes it easy to use C# logic based on the breakpoint that matches - such as changing parameter values, replacing a component with a different component or even not rendering a part of the layout (with CSS alone you can resize parts of the app or hide them visually, but they still render).
* The MediaQuery component makes it easy to use C# logic based on the matched media query breakpoints. For example, you can change parameter values, replace a component with a different component or even not render parts of the layout. With CSS alone you can resize parts of the app or hide them visually, but they still render.
* The MediaQuery component is not designed as a full replacement for responsive design, layout and CSS. You should use them to create your responsive application layouts like with any other web application.

## Next Steps

Expand Down
Loading