Latest source merged from Syncfusion
This commit is contained in:
pipeline
Родитель
ec82cd323d
Коммит
fabeee56b6
127
blazor-toc.html
127
blazor-toc.html
|
|
@ -16,25 +16,7 @@
|
|||
<li>
|
||||
<a href="/blazor/nuget-packages">Individual NuGet Packages</a>
|
||||
</li>
|
||||
<li>Installation and Upgrade
|
||||
<ul>
|
||||
<li>
|
||||
<a href="/blazor/installation-and-upgrade/download">Download</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/blazor/installation-and-upgrade/installation-using-web-installer">Installation using Web Installer</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/blazor/installation-and-upgrade/installation-using-off-line-installer">Installation using Offline Installer</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/blazor/installation-and-upgrade/common-installation-errors">Installation Errors</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/blazor/installation-and-upgrade/upgrading">Upgrading</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li>Getting Started
|
||||
<ul>
|
||||
<li>
|
||||
|
|
@ -64,6 +46,28 @@
|
|||
<li>
|
||||
<a href="/blazor/getting-started/razor-class-library">Razor Class Library in Visual Studio</a>
|
||||
</li>
|
||||
|
||||
<li>License Key<ul>
|
||||
<li>
|
||||
<a href="/blazor/getting-started/license-key/overview">Overview</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/blazor/getting-started/license-key/how-to-generate">How to generate Syncfusion Blazor license key?</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/blazor/getting-started/license-key/how-to-register-in-an-application">How to register Syncfusion license key in Blazor application?</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/blazor/getting-started/license-key/how-to-register-in-a-razor-class-library">How to register Syncfusion license key in a Razor class library application?</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/blazor/getting-started/license-key/licensing-errors">Licensing Errors</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/blazor/getting-started/license-key/licensing-faq">Licensing FAQ</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Appearance
|
||||
|
|
@ -71,6 +75,9 @@
|
|||
<li>
|
||||
<a href="/blazor/appearance/themes">Built-in Themes</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/blazor/appearance/size-modes">Size Modes</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/blazor/appearance/theme-studio">Theme Studio</a>
|
||||
</li>
|
||||
|
|
@ -172,24 +179,69 @@
|
|||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Licensing
|
||||
<ul>
|
||||
<li>Installation<ul>
|
||||
<li>Web Installer
|
||||
<ul>
|
||||
<li>
|
||||
<a href="/blazor/licensing/overview">Overview</a>
|
||||
<a href="/blazor/installation/web-installer/how-to-download">How to download?</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/blazor/licensing/license-key-generation">Generating license keys</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/blazor/licensing/license-key-registration">Registering license keys</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/blazor/licensing/licensing-errors">Licensing Errors</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/blazor/licensing/licensing-troubleshoot">Licensing FAQ</a>
|
||||
<a href="/blazor/installation/web-installer/how-to-install">How to install?</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
<li>Offline Installer
|
||||
<ul>
|
||||
<li>
|
||||
<a href="/blazor/installation/offline-installer/how-to-download">How to download?</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/blazor/installation/offline-installer/how-to-install">How to install?</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Mac Installer
|
||||
<ul>
|
||||
<li>
|
||||
<a href="/blazor/installation/mac-installer/how-to-download">How to download?</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/blazor/installation/mac-installer/how-to-install">How to install?</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/blazor/installation/install-nuget-packages">Install through NuGet packages</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/blazor/installation/common-installation-errors">Common Installation Errors</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Upgrade
|
||||
<ul>
|
||||
<li>
|
||||
<a href="/blazor/upgrade/release-history">Release History</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/blazor/upgrade/version-compatibility">Version Compatibility</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/blazor/upgrade/version-convention">Version Convention for Blazor NuGet packages</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/blazor/upgrade/how-to-upgrade">How to upgrade Syncfusion Blazor installer to a latest version?</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/blazor/upgrade/upgrade-syncfusion-blazor-nuget-packages">How to upgrade Syncfusion Blazor NuGet packages to a latest version?</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/blazor/upgrade/how-to-upgrade-syncfusion-components-using-vs-extensions">How to upgrade Syncfusion Blazor components using VS Extensions?</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
<li>Visual Studio Code Integration
|
||||
<ul>
|
||||
|
|
@ -2001,6 +2053,7 @@
|
|||
<li> <a href="/blazor/gantt-chart/how-to/web-assembly">WebAssembly Gantt Chart</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li> <a href="/blazor/gantt-chart/events">Events</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>HeatMap Chart
|
||||
|
|
@ -2471,11 +2524,11 @@
|
|||
<li> <a href="/blazor/range-selector/getting-started">Getting Started</a></li>
|
||||
<li> <a href="/blazor/range-selector/range">Range</a></li>
|
||||
<li> <a href="/blazor/range-selector/light-weight">Lightweight</a></li>
|
||||
<li> <a href="/blazor/range-selector/series-type">Series Type</a></li>
|
||||
<li> <a href="/blazor/range-selector/data">Type of Data</a></li>
|
||||
<li> <a href="/blazor/range-selector/series-type">Series Types</a></li>
|
||||
<li> <a href="/blazor/range-selector/data">Types of Data</a></li>
|
||||
<li> <a href="/blazor/range-selector/period-selector">Period Selector</a></li>
|
||||
<li> <a href="/blazor/range-selector/labels">Labels</a></li>
|
||||
<li> <a href="/blazor/range-selector/grid-tick">Grid Lines and Tick Lines</a></li>
|
||||
<li> <a href="/blazor/range-selector/grid-tick">Grid and Tick Lines</a></li>
|
||||
<li> <a href="/blazor/range-selector/custom">Customization</a></li>
|
||||
<li> <a href="/blazor/range-selector/tool-tip">Tooltip</a></li>
|
||||
<li> <a href="/blazor/range-selector/r-t-l">RTL</a></li>
|
||||
|
|
@ -2900,9 +2953,9 @@
|
|||
<li> <a href="/blazor/treemap/leaf-item">Leaf Item</a></li>
|
||||
<li> <a href="/blazor/treemap/levels">Levels</a></li>
|
||||
<li> <a href="/blazor/treemap/color-mapping">Color Mapping</a></li>
|
||||
<li> <a href="/blazor/treemap/labels">Labels</a></li>
|
||||
<li> <a href="/blazor/treemap/labels">Data Label</a></li>
|
||||
<li> <a href="/blazor/treemap/legend">Legend</a></li>
|
||||
<li> <a href="/blazor/treemap/drill-down">Drill-down</a></li>
|
||||
<li> <a href="/blazor/treemap/drill-down">Drilldown</a></li>
|
||||
<li> <a href="/blazor/treemap/tooltip">Tooltip</a></li>
|
||||
<li> <a href="/blazor/treemap/selection-and-highlight">Selection and Highlight</a></li>
|
||||
<li> <a href="/blazor/treemap/print-and-export">Print and Export</a></li>
|
||||
|
|
|
|||
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 300 KiB |
Двоичные данные
blazor/appearance/images/change-size-mode-for-application-at-runtime.gif
Normal file
Двоичные данные
blazor/appearance/images/change-size-mode-for-application-at-runtime.gif
Normal file
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 272 KiB |
|
|
@ -0,0 +1,203 @@
|
|||
---
|
||||
layout: post
|
||||
title: Component Size Modes in Blazor - Syncfusion
|
||||
description: Check out and learn here all about component size mode for Syncfusion Blazor Components and much more.
|
||||
platform: Blazor
|
||||
component: Appearance
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Size Mode for Blazor Components
|
||||
|
||||
Syncfusion blazor components supports touch (bigger theme) and normal size modes. Below topics explains how to enable the same in your application.
|
||||
|
||||
## Size mode for application
|
||||
|
||||
You can enable touch mode (bigger theme) for an application by adding `.e-bigger` class in `~/wwwroot/css/site.css` file.
|
||||
|
||||
```css
|
||||
.e-bigger {
|
||||
font-size: x-large;
|
||||
}
|
||||
```
|
||||
|
||||
## Size mode for a control
|
||||
|
||||
You can enable touch mode (bigger theme) for a control by adding `.e-bigger` class and assign to the `div` which contains the control.
|
||||
|
||||
```cshtml
|
||||
|
||||
@page "/"
|
||||
|
||||
@using Syncfusion.Blazor.Calendars;
|
||||
@using Syncfusion.Blazor.Buttons;
|
||||
@using Syncfusion.Blazor.Popups;
|
||||
|
||||
<div class="e-bigger">
|
||||
<SfCalendar TValue="DateTime?" Value="@DateValue"></SfCalendar>
|
||||
</div>
|
||||
|
||||
<div class="e-bigger">
|
||||
<SfButton> Button </SfButton>
|
||||
</div>
|
||||
|
||||
<div class="e-bigger">
|
||||
<SfCheckBox Label="checked" @bind-Checked="isChecked"></SfCheckBox>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.e-bigger {
|
||||
font-size: x-large;
|
||||
}
|
||||
</style>
|
||||
|
||||
@code {
|
||||
private bool isChecked = true;
|
||||
public DateTime? DateValue { get; set; } = new DateTime(DateTime.Now.Year, DateTime.Now.Month, 28);
|
||||
}
|
||||
```
|
||||
|
||||
## Change size mode for application at runtime
|
||||
|
||||
You can change the size mode of an application between touch and normal (mouse) mode at runtime by adding and removing `.e-bigger` using `JavaScriptInterop`.
|
||||
|
||||
Follow below steps to change the size mode for an application at runtime.
|
||||
|
||||
1. Add the `e-bigger` CSS class in the `~/wwwroot/css/site.css` file.
|
||||
|
||||
```css
|
||||
.e-bigger {
|
||||
font-size: x-large;
|
||||
}
|
||||
```
|
||||
|
||||
2. Add the following JavaScript methods inside the script tag of `wwwroot/index.html` (Blazor WebAssembly App) or `Pages/_Host.cshtml` (Blazor Server App) to switch between touch and mouse mode using `e-bigger` class.
|
||||
|
||||
```cshtml
|
||||
<script>
|
||||
function onTouch() {
|
||||
document.body.classList.add('e-bigger');
|
||||
}
|
||||
|
||||
function onMouse() {
|
||||
document.body.classList.remove('e-bigger');
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
2. To call JavaScript method from .NET, inject the `IJSRuntime` abstraction and call `InvokeAsync` method as given in the below code,
|
||||
|
||||
```cshtml
|
||||
@page "/"
|
||||
|
||||
@using Syncfusion.Blazor.Calendars;
|
||||
@using Syncfusion.Blazor.Buttons;
|
||||
@using Syncfusion.Blazor.Popups
|
||||
@inject IJSRuntime jsRuntime;
|
||||
|
||||
<p> Size-modes for application </p>
|
||||
<p> This demo shows the Size-Modes applied for an entire application </p>
|
||||
|
||||
<button @onclick="callOnTouch">Touch Mode</button>
|
||||
<button @onclick="callOnMouse">Mouse Mode</button>
|
||||
<div>
|
||||
<SfCalendar TValue="DateTime?" Value="@DateValue"></SfCalendar>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<SfButton> Button </SfButton>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<SfCheckBox Label="checked" @bind-Checked="isChecked"></SfCheckBox>
|
||||
</div>
|
||||
|
||||
@code {
|
||||
private bool isChecked = true;
|
||||
private async void callOnTouch(MouseEventArgs args)
|
||||
{
|
||||
await jsRuntime.InvokeAsync<string>("onTouch");
|
||||
}
|
||||
private async void callOnMouse(MouseEventArgs args)
|
||||
{
|
||||
await jsRuntime.InvokeAsync<string>("onMouse");
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
> [View sample in GitHub](https://github.com/SyncfusionExamples/size-mode-in-blazor-application)
|
||||
|
||||
## Change size mode for a control at runtime
|
||||
|
||||
You can change the size mode of a control between touch and normal (mouse) mode at runtime by setting `.e-bigger` CSS class.
|
||||
|
||||
Refer to the following code, in which the `e-bigger` class is added for enabling touch mode using the `check` variable.
|
||||
|
||||
```cshtml
|
||||
|
||||
@page "/"
|
||||
|
||||
@using Syncfusion.Blazor.Calendars;
|
||||
@using Syncfusion.Blazor.Buttons;
|
||||
@using Syncfusion.Blazor.Popups;
|
||||
|
||||
<h2>Syncfusion Component Size-Modes</h2>
|
||||
|
||||
<button @onclick="OnTouch">Touch Mode</button>
|
||||
<button @onclick="OnMouse">Mouse Mode</button>
|
||||
|
||||
<div class="@touchCSS">
|
||||
<SfCalendar TValue="DateTime?" Value="@DateValue"></SfCalendar>
|
||||
</div>
|
||||
|
||||
<div class="@touchCSS">
|
||||
<SfButton> Button </SfButton>
|
||||
</div>
|
||||
|
||||
<div class="@touchCSS">
|
||||
<SfCheckBox Label="checked" @bind-Checked="isChecked"></SfCheckBox>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.e-bigger {
|
||||
font-size: x-large;
|
||||
}
|
||||
</style>
|
||||
|
||||
@code {
|
||||
private bool isChecked = true;
|
||||
|
||||
public DateTime? DateValue { get; set; } = new DateTime(DateTime.Now.Year, DateTime.Now.Month, 28);
|
||||
|
||||
public string touchCSS { get; set; }
|
||||
|
||||
public void OnTouch()
|
||||
{
|
||||
touchCSS = "e-bigger";
|
||||
}
|
||||
|
||||
public void OnMouse()
|
||||
{
|
||||
touchCSS = "";
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
> [View sample in GitHub](https://github.com/SyncfusionExamples/size-mode-in-blazor-application)
|
||||
|
||||
|
||||
## See Also
|
||||
|
||||
Refer below topics to learn about responsiveness components based on available size in Syncfusion Blazor Components.
|
||||
|
||||
* [Sidebar Responsiveness](https://blazor.syncfusion.com/documentation/sidebar/auto-close)
|
||||
* [DataGrid Responsiveness](https://blazor.syncfusion.com/documentation/datagrid/columns#responsive-columns)
|
||||
* [TreeGrid Responsiveness](https://blazor.syncfusion.com/documentation/treegrid/scrolling#responsive-with-parent-container)
|
||||
* [Dashboard Layout Responsiveness](https://blazor.syncfusion.com/documentation/dashboard-layout/responsive-adaptive)
|
||||
* [Kanban Responsiveness](https://blazor.syncfusion.com/documentation/kanban/responsive-mode)
|
||||
* [Toolbar Responsiveness](https://blazor.syncfusion.com/documentation/toolbar/responsive-mode)
|
||||
* [Tab Responsiveness](https://blazor.syncfusion.com/documentation/tabs/responsive-modes)
|
||||
|
|
@ -197,7 +197,6 @@ In the client Blazor application, go to the `wwwroot/index.html` file and replac
|
|||
|
||||
In the Blazor application, the application theme can be changed dynamically by changing its style sheet reference in code.
|
||||
|
||||
|
||||
### Change theme dynamically in blazor server app
|
||||
|
||||
The following example demonstrates how to change a theme dynamically in Blazor Server application using Syncfusion Blazor themes using Syncfusion Dropdown component.
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@ The Blazor Button has the following predefined styles that can be defined using
|
|||
|
||||
```
|
||||
|
||||
Output be like
|
||||
Output will be as follows
|
||||
|
||||
|
||||
|
||||
|
|
@ -55,15 +55,15 @@ The types of Blazor Button are as follows:
|
|||
|
||||
### Flat Button
|
||||
|
||||
The Flat Button is styled with no background color. To create a flat Button, set the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfButton.html#Syncfusion_Blazor_Buttons_SfButton_CssClass) property to `e-flat`.
|
||||
The Flat Button is styled with no background color. To create a Flat Button, set the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfButton.html#Syncfusion_Blazor_Buttons_SfButton_CssClass) property to `e-flat`.
|
||||
|
||||
### Outline Button
|
||||
|
||||
An outline Button has a border with transparent background. To create an outline Button, set the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfButton.html#Syncfusion_Blazor_Buttons_SfButton_CssClass) property to `e-outline`.
|
||||
An Outline Button has a border with transparent background. To create an Outline Button, set the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfButton.html#Syncfusion_Blazor_Buttons_SfButton_CssClass) property to `e-outline`.
|
||||
|
||||
### Round Button
|
||||
|
||||
A round Button is shaped like a circle. Usually, it contains an icon representing its action. To create a round Button, set the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfButton.html#Syncfusion_Blazor_Buttons_SfButton_CssClass) property to `e-round`.
|
||||
A Round Button is circular in shape. Usually, it contains an icon representing its action. To create a Round Button, set the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfButton.html#Syncfusion_Blazor_Buttons_SfButton_CssClass) property to `e-round`.
|
||||
|
||||
```cshtml
|
||||
@using Syncfusion.Blazor.Buttons
|
||||
|
|
@ -79,7 +79,7 @@ A round Button is shaped like a circle. Usually, it contains an icon representin
|
|||
</style>
|
||||
```
|
||||
|
||||
Output be like
|
||||
Output will be as follows
|
||||
|
||||
|
||||
|
||||
|
|
@ -93,7 +93,7 @@ The primary button is styled with background color and it is used to represent a
|
|||
<SfButton IsPrimary="true">Primary</SfButton>
|
||||
```
|
||||
|
||||
Output be like
|
||||
Output will be as follows
|
||||
|
||||
|
||||
|
||||
|
|
@ -140,7 +140,7 @@ A toggle Button allows you to change between the two states. The Button is activ
|
|||
|
||||
```
|
||||
|
||||
Output be like
|
||||
Output will be as follows
|
||||
|
||||
|
||||
|
||||
|
|
@ -167,7 +167,7 @@ The Button can have an icon to provide the visual representation of the action.
|
|||
|
||||
```
|
||||
|
||||
Output be like
|
||||
Output will be as follows
|
||||
|
||||
|
||||
|
||||
|
|
@ -183,6 +183,6 @@ The two types of Button sizes are default and small. To change the size of the d
|
|||
|
||||
```
|
||||
|
||||
Output be like
|
||||
Output will be as follows
|
||||
|
||||
|
||||
|
|
@ -35,11 +35,11 @@ The following example demonstrates how to set the `Year` as the start view of th
|
|||
|
||||
The output will be as follows.
|
||||
|
||||
|
||||
|
||||
|
||||
## View Restriction
|
||||
|
||||
By defining the Start and Depth property with the different view, drill-down and drill-up views navigation can be limited to the users. Calendar views will be drill-down up to the view which is set in [Depth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.CalendarBase-1.html#Syncfusion_Blazor_Calendars_CalendarBase_1_Depth) property and drill-up up to the view which is set in [Start](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfCalendar-1.html) property.
|
||||
By defining the Start and Depth property with the different view, drill-down and drill-up views navigation can be limited to the users. Calendar views will be drill-down upto the view which is set in [Depth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.CalendarBase-1.html#Syncfusion_Blazor_Calendars_CalendarBase_1_Depth) property and drill-up upto the view which is set in [Start](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfCalendar-1.html) property.
|
||||
|
||||
The following example displays the Calendar in `Decade` view, and allows you to select a date in `Month` view.
|
||||
|
||||
|
|
@ -58,4 +58,4 @@ The following example displays the Calendar in `Decade` view, and allows you to
|
|||
|
||||
The output will be as follows.
|
||||
|
||||
|
||||
|
||||
|
|
@ -44,22 +44,22 @@ Card image is supported to include a `Title` property for the image. By default,
|
|||
|
||||
## Divider
|
||||
|
||||
Divider used to separate the elements inside the card. You can add divider inside the card elements to separate it. Set `EnableSeperator` property to `true` in card content for adding a divider.
|
||||
Divider used to separate the elements inside the card. You can add divider inside the card elements to separate it. Set `EnableSeparator` property to `true` in card content for adding a divider.
|
||||
|
||||
```cshtml
|
||||
@using Syncfusion.Blazor.Cards
|
||||
|
||||
<SfCard>
|
||||
<CardHeader Title="Explore Cities"></CardHeader>
|
||||
<CardContent EnableSeperator="true">
|
||||
<CardContent EnableSeparator="true">
|
||||
Sydney is a city on the east coast of Australia. Sydney is the capital city of New South
|
||||
Wales. About four million people live in Sydney which makes it the biggest cityin Oceania.
|
||||
</CardContent>
|
||||
<CardContent EnableSeperator="true">
|
||||
<CardContent EnableSeparator="true">
|
||||
New York City has been described as the cultural, financial, and media capital of the
|
||||
world, and exerts a significant impact upon commerce and etc.
|
||||
</CardContent>
|
||||
<CardContent EnableSeperator="true">
|
||||
<CardContent EnableSeparator="true">
|
||||
Malaysia is one of the Southeast Asian countries, on a peninsula of the Asian continent,
|
||||
to a certain extent; it can be recognized as part of the Asian continent.
|
||||
</CardContent>
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ By default, all the card elements are aligned vertically one after the other as
|
|||
|
||||
## Stacked cards
|
||||
|
||||
An horizontally aligned card can push a specific column to align vertical using `CardStacked` component. This will align the stacked section vertically aligned differentiating from horizontal layout.
|
||||
A horizontally aligned card can push a specific column to align vertically using the `CardStacked` component. This will align the stacked section vertically to differentiate from horizontal layout.
|
||||
|
||||
```cshtml
|
||||
@using Syncfusion.Blazor.Cards
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@ documentation: ug
|
|||
|
||||
|
||||
|
||||
> Refer to our [Blazor Area Charts](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/area-chart) feature tour page to know about its other groundbreaking feature representations. Explore our [Blazor Area Chart Example](https://blazor.syncfusion.com/demos/chart/area?theme=bootstrap4) to knows how to represent time-dependent data, showing trends at equal intervals.
|
||||
> Refer to our [Blazor Area Charts](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/area-chart) feature tour page to know about its other groundbreaking feature representations. Explore our [Blazor Area Chart Example](https://blazor.syncfusion.com/demos/chart/area?theme=bootstrap4) to know how to represent time-dependent data, showing trends at equal intervals.
|
||||
|
||||
## Multicolored Area
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
layout: post
|
||||
title: Box and Whisker in Blazor Charts Component | Syncfusion
|
||||
description: Checkout and learn here all about the Box and Whisker Chart in Syncfusion Blazor Charts component and muchmore.
|
||||
description: Checkout and learn here all about the Box and Whisker Chart in Syncfusion Blazor Charts component and much more.
|
||||
platform: Blazor
|
||||
control: Chart
|
||||
documentation: ug
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ documentation: ug
|
|||
|
||||
## Candle
|
||||
|
||||
[Candle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeriesType.html#Syncfusion_Blazor_Charts_ChartSeriesType_Candle) series is similar to Hilo Open Close series, and are used to represent the **Low**, **High**, **Open and Closing** price over time. To render a candle series, set series [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Type) as [Candle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeriesType.html#Syncfusion_Blazor_Charts_ChartSeriesType_Candle).
|
||||
[Candle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeriesType.html#Syncfusion_Blazor_Charts_ChartSeriesType_Candle) series is similar to Hilo Open Close series. It is used to represent the **Low**, **High**, **Open and Closing** prices over time. To render a candle series, set series [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Type) as [Candle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeriesType.html#Syncfusion_Blazor_Charts_ChartSeriesType_Candle).
|
||||
|
||||
## Hollow Candle
|
||||
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ documentation: ug
|
|||
|
||||
## Error Bar
|
||||
|
||||
Error bars are graphical representations of the variability of data and used on graphs to indicate the error or uncertainty in a reported measurement. To render the error bar for the series, set [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartErrorBarSettings.html#Syncfusion_Blazor_Charts_ChartErrorBarSettings_Visible) property to **true** in [ChartErrorBarSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartErrorBarSettings.html).
|
||||
Error bars are graphical representations of the variability of data that are used on graphs to indicate the error or uncertainty in a reported measurement. To render the error bar for the series, set [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartErrorBarSettings.html#Syncfusion_Blazor_Charts_ChartErrorBarSettings_Visible) property to **true** in [ChartErrorBarSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartErrorBarSettings.html).
|
||||
|
||||
```cshtml
|
||||
|
||||
|
|
@ -139,7 +139,7 @@ To customize the error bar type, specify the [Type](https://help.syncfusion.com/
|
|||
|
||||
## Error Bar Mode
|
||||
|
||||
Error bar mode is used to define whether the error bar line has to be drawn horizontally, vertically or in both side and to change the error bar mode, use [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartErrorBarSettings.html#Syncfusion_Blazor_Charts_ChartErrorBarSettings_Mode) property in [ChartErrorBarSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartErrorBarSettings.html).
|
||||
Error bar mode is used to define whether the error bar line should be drawn horizontally, vertically, or on both sides. To change the error bar mode, use [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartErrorBarSettings.html#Syncfusion_Blazor_Charts_ChartErrorBarSettings_Mode) property in [ChartErrorBarSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartErrorBarSettings.html).
|
||||
|
||||
```cshtml
|
||||
|
||||
|
|
@ -180,7 +180,7 @@ Error bar mode is used to define whether the error bar line has to be drawn hori
|
|||
|
||||
## Error Bar Direction
|
||||
|
||||
To change the error bar direction to plus, minus or both side, use [Direction](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartErrorBarSettings.html#Syncfusion_Blazor_Charts_ChartErrorBarSettings_Direction) property in [ChartErrorBarSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartErrorBarSettings.html).
|
||||
To change the error bar direction to plus, minus, or both sides, use [Direction](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartErrorBarSettings.html#Syncfusion_Blazor_Charts_ChartErrorBarSettings_Direction) property in [ChartErrorBarSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartErrorBarSettings.html).
|
||||
|
||||
```cshtml
|
||||
|
||||
|
|
@ -263,7 +263,7 @@ To customize the error bar cap [Length](https://help.syncfusion.com/cr/blazor/Sy
|
|||
|
||||
|
||||
|
||||
> Refer to our [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for its groundbreaking feature representations and also explore our [Blazor Chart Example](https://blazor.syncfusion.com/demos/chart/line?theme=bootstrap4) to knows various chart types and how to represent time-dependent data, showing trends at equal intervals.
|
||||
> Refer to our [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for its groundbreaking feature representations and also explore our [Blazor Chart Example](https://blazor.syncfusion.com/demos/chart/line?theme=bootstrap4) to know various chart types and how to represent time-dependent data, showing trends at equal intervals.
|
||||
|
||||
## See Also
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
layout: post
|
||||
title: Scatter in Blazor Charts Component | Syncfusion
|
||||
description: Checkout and learn here all about the Scatter Chart in Syncfusion Blazor Charts component and muchmore.
|
||||
description: Checkout and learn here all about the Scatter Chart in Syncfusion Blazor Charts component and much more.
|
||||
platform: Blazor
|
||||
control: Chart
|
||||
documentation: ug
|
||||
|
|
@ -11,7 +11,7 @@ documentation: ug
|
|||
|
||||
## Scatter
|
||||
|
||||
[Scatter Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/scatter-chart) used to visualize the relationship between two Cartesian parameters. To render a [Scatter Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/scatter-chart), set the series [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Type) as [Scatter](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeriesType.html#Syncfusion_Blazor_Charts_ChartSeriesType_Scatter).
|
||||
[Scatter Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/scatter-chart) is used to visualize the relationship between two Cartesian parameters. To render a [Scatter Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/scatter-chart), set the series [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Type) as [Scatter](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeriesType.html#Syncfusion_Blazor_Charts_ChartSeriesType_Scatter).
|
||||
|
||||
```cshtml
|
||||
|
||||
|
|
|
|||
|
|
@ -54,7 +54,7 @@ documentation: ug
|
|||
|
||||
|
||||
|
||||
> Refer to our [Blazor Spline Area Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/spline-area-chart) feature tour page to know about its other groundbreaking feature representations. Explore our [Blazor Spline Area Chart Example](https://blazor.syncfusion.com/demos/chart/spline-area?theme=bootstrap4) to know how to connects the data points with smooth curves.
|
||||
> Refer to our [Blazor Spline Area Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/spline-area-chart) feature tour page to know about its other groundbreaking feature representations. Explore our [Blazor Spline Area Chart Example](https://blazor.syncfusion.com/demos/chart/spline-area?theme=bootstrap4) to know how to connect the data points with smooth curves.
|
||||
|
||||
## Series Customization
|
||||
|
||||
|
|
|
|||
|
|
@ -54,7 +54,7 @@ documentation: ug
|
|||
|
||||
|
||||
|
||||
> Refer to our [Blazor Spline Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/spline-chart) feature tour page to know about its other groundbreaking feature representations. Explore our [Blazor Spline Chart Example](https://blazor.syncfusion.com/demos/chart/spline?theme=bootstrap4) to know how to connects the data points with smooth curves.
|
||||
> Refer to our [Blazor Spline Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/spline-chart) feature tour page to know about its other groundbreaking feature representations. Explore our [Blazor Spline Chart Example](https://blazor.syncfusion.com/demos/chart/spline?theme=bootstrap4) to know how to connect the data points with smooth curves.
|
||||
|
||||
## Type of spline
|
||||
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ documentation: ug
|
|||
|
||||
## 100% Stacked Area Chart
|
||||
|
||||
[100% Stacked Area Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/100-stacked-area-chart) displays multiple series of data as stacked areas, ensuring that the cumulative proportion of each stacked element always totals 100%. The y-axis will hence always be rendered with the range 0–100%. To render a [100% Stacked Area](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/100-stacked-area-chart) series, set the series [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Type) as [StackingArea100](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeriesType.html#Syncfusion_Blazor_Charts_ChartSeriesType_StackingArea100).
|
||||
[100% Stacked Area Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/100-stacked-area-chart) displays multiple series of data as stacked areas, ensuring that the cumulative proportion of each stacked element always totals 100%. Hence, the y-axis will always be rendered with the range 0–100%. To render a [100% Stacked Area](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/100-stacked-area-chart) series, set the series [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Type) as [StackingArea100](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeriesType.html#Syncfusion_Blazor_Charts_ChartSeriesType_StackingArea100).
|
||||
|
||||
```cshtml
|
||||
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ documentation: ug
|
|||
|
||||
## 100% Stacked Bar
|
||||
|
||||
[100% Stacked Bar Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/100-stacked-bar-chart) displays multiple series of data as stacked bars, ensuring that the cumulative proportion of each stacked element always totals 100%. The y-axis will hence always be rendered with the range 0–100%. To render a [100% Stacked Bar](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/100-stacked-bar-chart) series, set the series [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Type) as [StackingBar100](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeriesType.html#Syncfusion_Blazor_Charts_ChartSeriesType_StackingBar100).
|
||||
[100% Stacked Bar Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/100-stacked-bar-chart) displays multiple series of data as stacked bars, ensuring that the cumulative proportion of each stacked element always totals 100%. Hence, the y-axis will always be rendered with the range 0–100%. To render a [100% Stacked Bar](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/100-stacked-bar-chart) series, set the series [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Type) as [StackingBar100](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeriesType.html#Syncfusion_Blazor_Charts_ChartSeriesType_StackingBar100).
|
||||
|
||||
```cshtml
|
||||
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ documentation: ug
|
|||
|
||||
## 100% Stacked Column
|
||||
|
||||
[100% Stacked Column Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/100-stacked-column-chart) displays multiple series of data as stacked columns, ensuring that the cumulative proportion of each stacked element always totals 100%. The y-axis will hence always be rendered with the range 0–100%. To render a [100% Stacked Column](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/100-stacked-column-chart) series, set the series [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Type) as [StackingColumn100](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeriesType.html#Syncfusion_Blazor_Charts_ChartSeriesType_StackingColumn100).
|
||||
[100% Stacked Column Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/100-stacked-column-chart) displays multiple series of data as stacked columns, ensuring that the cumulative proportion of each stacked element always totals 100%. Hence, the y-axis will always be rendered with the range 0–100%. To render a [100% Stacked Column](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/100-stacked-column-chart) series, set the series [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Type) as [StackingColumn100](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeriesType.html#Syncfusion_Blazor_Charts_ChartSeriesType_StackingColumn100).
|
||||
|
||||
```cshtml
|
||||
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ documentation: ug
|
|||
|
||||
## 100% Stacked Line
|
||||
|
||||
[100% Stacked Line Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/100-stacked-line-chart) displays multiple series of data as stacked lines, ensuring that the cumulative proportion of each stacked element always totals 100%. The y-axis will hence always be rendered with the range 0–100%. To render a [100% Stacked Line](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/100-stacked-line-chart) series, set the series [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Type) as [StackingLine100](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeriesType.html#Syncfusion_Blazor_Charts_ChartSeriesType_StackingLine100).
|
||||
[100% Stacked Line Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/100-stacked-line-chart) displays multiple series of data as stacked lines, ensuring that the cumulative proportion of each stacked element always totals 100%. Hence, the y-axis will always be rendered with the range 0–100%. To render a [100% Stacked Line](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/100-stacked-line-chart) series, set the series [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Type) as [StackingLine100](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeriesType.html#Syncfusion_Blazor_Charts_ChartSeriesType_StackingLine100).
|
||||
|
||||
```cshtml
|
||||
|
||||
|
|
|
|||
|
|
@ -55,7 +55,7 @@ documentation: ug
|
|||
|
||||
|
||||
|
||||
> Refer to our [Blazor Stacked Area Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/stacked-area-chart) feature tour page to know about its other groundbreaking feature representations. Explore our [Blazor Stacked Area Chart Example](https://blazor.syncfusion.com/demos/chart/stacked-area?theme=bootstrap4) to know how to to render and configure the Stacked Area type chart.
|
||||
> Refer to our [Blazor Stacked Area Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/stacked-area-chart) feature tour page to know about its other groundbreaking feature representations. Explore our [Blazor Stacked Area Chart Example](https://blazor.syncfusion.com/demos/chart/stacked-area?theme=bootstrap4) to know how to render and configure the Stacked Area type chart.
|
||||
|
||||
## Series Customization
|
||||
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ documentation: ug
|
|||
|
||||
The web accessibility makes web content and web applications more accessible for people with disabilities. It especially helps in dynamic content change and development of advanced user interface controls with AJAX, HTML, JavaScript, and related technologies. It helps to provide information about the widget for assistive technology to the disabled person in screen reader.
|
||||
|
||||
Color Picker provides built-in compliance with the [WAI-ARIA](http://www.w3.org/WAI/PF/aria-practices) specifications. WAI-ARIA supports is achieved through the attributes like `aria-label`and `aria-selected` applied to the color palette tiles.
|
||||
Color Picker provides built-in compliance with the [WAI-ARIA](https://www.w3.org/TR/wai-aria-practices/) specifications. WAI-ARIA supports is achieved through the attributes like `aria-label`and `aria-selected` applied to the color palette tiles.
|
||||
|
||||
| Properties | Functionality |
|
||||
| ------------ | ----------------------- |
|
||||
|
|
|
|||
|
|
@ -309,6 +309,44 @@ The output will be as follows.
|
|||
|
||||
|
||||
|
||||
### ValueTuple data binding
|
||||
|
||||
You can bind [ValueTuple](https://docs.microsoft.com/en-us/dotnet/api/system.valuetuple-2?view=net-5.0) data to the ComboBox component. The following code helps you to get a string value from the enumeration data by using [ValueTuple](https://docs.microsoft.com/en-us/dotnet/api/system.valuetuple-2?view=net-5.0).
|
||||
|
||||
```csharp
|
||||
|
||||
@using Syncfusion.Blazor.DropDowns;
|
||||
|
||||
<SfComboBox TItem="(DayOfWeek, string)" Width="250px" TValue="DayOfWeek"
|
||||
DataSource="@(Enum.GetValues<DayOfWeek>().Select(e => (e, e.ToString())))">
|
||||
<ComboBoxFieldSettings Value="Item1" Text="Item2" />
|
||||
</SfComboBox>
|
||||
|
||||
```
|
||||
|
||||
The output will shown as follows,
|
||||
|
||||
|
||||
|
||||
### ValueTuple data binding
|
||||
|
||||
You can bind [ValueTuple](https://docs.microsoft.com/en-us/dotnet/api/system.valuetuple-2?view=net-5.0) data to the ComboBox component. The following code helps you to get a string value from the enumeration data by using [ValueTuple](https://docs.microsoft.com/en-us/dotnet/api/system.valuetuple-2?view=net-5.0).
|
||||
|
||||
```csharp
|
||||
|
||||
@using Syncfusion.Blazor.DropDowns;
|
||||
|
||||
<SfComboBox TItem="(DayOfWeek, string)" Width="250px" TValue="DayOfWeek"
|
||||
DataSource="@(Enum.GetValues<DayOfWeek>().Select(e => (e, e.ToString())))">
|
||||
<ComboBoxFieldSettings Value="Item1" Text="Item2" />
|
||||
</SfComboBox>
|
||||
|
||||
```
|
||||
|
||||
The output will shown as follows,
|
||||
|
||||
|
||||
|
||||
## Entity Framework
|
||||
|
||||
You need to follow the below steps to consume data from the **Entity Framework** in the ComboBox component.
|
||||
|
|
|
|||
|
|
@ -49,9 +49,9 @@ Navigates down or to the next menu item.</td></tr>
|
|||
<tr>
|
||||
<td>
|
||||
<kbd>Left</kbd></td><td>
|
||||
Close the current sub menu and navigates to the parent menu.</td></tr>
|
||||
Closes the current sub menu and navigates to the parent menu.</td></tr>
|
||||
<tr>
|
||||
<td>
|
||||
<kbd>Right</kbd></td><td>
|
||||
Navigates and open the next sub menu.</td></tr>
|
||||
Navigates and opens the next sub menu.</td></tr>
|
||||
</table>
|
||||
|
|
@ -54,7 +54,7 @@ To customize Context Menu items in your application, set your customized templat
|
|||
|
||||
```
|
||||
|
||||
Output be like
|
||||
Output will be as follows
|
||||
|
||||
|
||||
|
||||
|
|
@ -94,7 +94,7 @@ The Context Menu items can be customized by using the `CssClass` property. In th
|
|||
|
||||
```
|
||||
|
||||
Output be like
|
||||
Output will be as follows
|
||||
|
||||
|
||||
|
||||
|
|
@ -138,6 +138,6 @@ property inside the parent [MenuItem](https://help.syncfusion.com/cr/blazor/Sync
|
|||
|
||||
```
|
||||
|
||||
Output be like
|
||||
Output will be as follows
|
||||
|
||||
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
layout: post
|
||||
title: Getting Started with Blazor ContextMenu Component | Syncfusion
|
||||
description: Checkout and learn about getting started with Blazor ContextMenu component of Syncfusion, and more details.
|
||||
description: Checkout and learn more details about getting started with the Blazor ContextMenu component of Syncfusion.
|
||||
platform: Blazor
|
||||
control: Context Menu
|
||||
documentation: ug
|
||||
|
|
@ -9,9 +9,9 @@ documentation: ug
|
|||
|
||||
# Getting Started with Blazor ContextMenu Component
|
||||
|
||||
This section briefly explains about how to include Context Menu Component in your Blazor server-side application. You can refer [Getting Started with Syncfusion Blazor for Server-side in Visual Studio 2019 page](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio-2019/) page for the introduction and configuring the common specifications.
|
||||
This section briefly explains about how to include Context Menu Component in your Blazor server-side application. You can refer [Getting Started with Syncfusion Blazor for Server-side in Visual Studio 2019 page](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio-2019/) page for the introduction and configuring the common specifications.
|
||||
|
||||
To get start quickly with Context Menu Component using Blazor, you can check on this video:
|
||||
To get started quickly with Context Menu Component using Blazor, you can check out this video:
|
||||
|
||||
{% youtube
|
||||
"youtube:https://www.youtube.com/watch?v=0-II6YezL1s"%}
|
||||
|
|
@ -29,7 +29,7 @@ To get start quickly with Context Menu Component using Blazor, you can check on
|
|||
</head>
|
||||
```
|
||||
|
||||
For Internet Explorer 11 kindly refer the polyfills. Refer the [documentation](https://blazor.syncfusion.com/documentation/common/how-to/render-blazor-server-app-in-ie/) for more information.
|
||||
For Internet Explorer 11, kindly refer the polyfills. Refer the [documentation](https://blazor.syncfusion.com/documentation/common/how-to/render-blazor-server-app-in-ie/) for more information.
|
||||
|
||||
```cshtml
|
||||
<head>
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@ To bind the menu event in the context menu [ItemSelected](https://help.syncfusio
|
|||
|
||||
@code {
|
||||
public MenuItem SelectedItem;
|
||||
// Triggers when item is selected
|
||||
// Triggers when the item is selected
|
||||
private void selectedHandler(MenuEventArgs<MenuItem> args) {
|
||||
SelectedItem = args.Item;
|
||||
}
|
||||
|
|
@ -47,6 +47,6 @@ To bind the menu event in the context menu [ItemSelected](https://help.syncfusio
|
|||
|
||||
```
|
||||
|
||||
Output be like
|
||||
Output will be as follows
|
||||
|
||||
|
||||
|
|
@ -48,6 +48,6 @@ The following sample illustrates how to open Context Menu with `FadeIn` effect w
|
|||
|
||||
```
|
||||
|
||||
Output be like
|
||||
Output will be as follows
|
||||
|
||||
|
||||
|
|
@ -51,6 +51,6 @@ To bind local data source to the Context Menu, menu items are populated from dat
|
|||
|
||||
```
|
||||
|
||||
Output be like
|
||||
Output will be as follows
|
||||
|
||||
|
||||
|
|
@ -63,7 +63,7 @@ In the following example, the **Display Settings** in parent items is disabled d
|
|||
|
||||
```
|
||||
|
||||
Output be like
|
||||
Output will be as follows
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ documentation: ug
|
|||
|
||||
# Open and close Context Menu in Blazor ContextMenu Component
|
||||
|
||||
Open and close the Context Menu manually whenever required by using the Open and Close methods. In the following sample, the Context Menu manually open while clicking the button using [Open](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfContextMenu-1.html#Syncfusion_Blazor_Navigations_SfContextMenu_1_Open_System_Nullable_System_Double__System_Nullable_System_Double__) method with `ClientX` and `ClientY` coordinates.
|
||||
Open and close the Context Menu manually whenever required by using the Open and Close methods. In the following sample, the Context Menu manually opens while clicking the button using [Open](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfContextMenu-1.html#Syncfusion_Blazor_Navigations_SfContextMenu_1_Open_System_Nullable_System_Double__System_Nullable_System_Double__) method with `ClientX` and `ClientY` coordinates.
|
||||
|
||||
To manually close the Context Menu, [Close](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfContextMenu-1.html#Syncfusion_Blazor_Navigations_SfContextMenu_1_Close) method can be used.
|
||||
|
||||
|
|
@ -38,6 +38,6 @@ To manually close the Context Menu, [Close](https://help.syncfusion.com/cr/blazo
|
|||
|
||||
```
|
||||
|
||||
Output be like
|
||||
Output will be as follows
|
||||
|
||||
|
||||
|
|
@ -65,5 +65,5 @@ In the following sample, Dialog will open while clicking `Save As...` item.
|
|||
|
||||
```
|
||||
|
||||
Output be like
|
||||
Output will be as follows
|
||||
|
||||
|
|
@ -11,7 +11,7 @@ documentation: ug
|
|||
|
||||
## Icons
|
||||
|
||||
The Context Menu item have an icon/image in it to provide visual representation of the action. To place the icon on a menu item, set the [IconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.MenuItem.html#Syncfusion_Blazor_Navigations_MenuItem_IconCss) property to e-icons with the required icon CSS. By default, the icon is positioned to the left side of the menu item. In the following sample, the icons for Cut, Copy and Paste menu items are added using the `IconCss` property.
|
||||
The Context Menu item has an icon/image in it to provide a visual representation of the action. To place the icon on a menu item, set the [IconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.MenuItem.html#Syncfusion_Blazor_Navigations_MenuItem_IconCss) property to e-icons with the required icon CSS. By default, the icon is positioned to the left side of the menu item. In the following sample, the icons for Cut, Copy and Paste menu items are added using the `IconCss` property.
|
||||
|
||||
```cshtml
|
||||
@using Syncfusion.Blazor.Navigations
|
||||
|
|
@ -48,7 +48,7 @@ The Context Menu item have an icon/image in it to provide visual representation
|
|||
|
||||
```
|
||||
|
||||
Output be like
|
||||
Output will be as follows
|
||||
|
||||
|
||||
|
||||
|
|
@ -57,7 +57,7 @@ You can also use third party icons on the Context Menu using the `IconCss`proper
|
|||
|
||||
## Navigation
|
||||
|
||||
Navigation in Context Menu is usage to navigate to the other web page when menu item is clicked. This can be achieved by providing link to the menu item using the [Url](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.MenuItem.html#Syncfusion_Blazor_Navigations_MenuItem_Url) property. In the following sample, Navigation URL for Flip kart, Amazon, and Snap deal menu items are added using the `Url` property.
|
||||
Navigation in Context Menu is used to navigate to the other web page when menu item is clicked. This can be achieved by providing link to the menu item using the [Url](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.MenuItem.html#Syncfusion_Blazor_Navigations_MenuItem_Url) property. In the following sample, Navigation URL for Flip kart, Amazon, and Snap deal menu items are added using the `Url` property.
|
||||
|
||||
```cshtml
|
||||
@using Syncfusion.Blazor.Navigations
|
||||
|
|
@ -85,6 +85,6 @@ Navigation in Context Menu is usage to navigate to the other web page when menu
|
|||
|
||||
```
|
||||
|
||||
Output be like
|
||||
Output will be as follows
|
||||
|
||||
|
||||
|
|
@ -9,7 +9,7 @@ documentation: ug
|
|||
|
||||
# Accessibility in Blazor Dashboard Layout Component
|
||||
|
||||
The Dashboard Layout component has been designed with keeping the `WAI-ARIA` specifications in mind and applying the `WAI-ARIA` roles, states, and properties. This component is characterized by ARIA accessibility support, which makes navigation easy for people who use assistive technologies (AT).
|
||||
The Dashboard Layout component has been designed with the `WAI-ARIA` specifications in mind and applying the `WAI-ARIA` roles, states, and properties. This component is characterized by ARIA accessibility support, which makes navigation easy for people who use assistive technologies (AT).
|
||||
|
||||
## ARIA attributes
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
layout: post
|
||||
title: Getting Started with Blazor Dashboard Layout Component | Syncfusion
|
||||
description: Checkout and learn about getting started with Blazor Dashboard Layout component of Syncfusion, and more details.
|
||||
description: Checkout and learn more details about getting started with the Blazor Dashboard Layout component of Syncfusion.
|
||||
platform: Blazor
|
||||
control: Dashboard Layout
|
||||
documentation: ug
|
||||
|
|
@ -35,7 +35,7 @@ This section briefly explains about how to include a `Dashboard Layout` componen
|
|||
</head>
|
||||
```
|
||||
|
||||
* For `Internet Explorer 11` kindly refer the polyfills. Refer the [documentation](https://blazor.syncfusion.com/documentation/common/how-to/render-blazor-server-app-in-ie/) for more information.
|
||||
* For `Internet Explorer 11`, kindly refer the polyfills. Refer the [documentation](https://blazor.syncfusion.com/documentation/common/how-to/render-blazor-server-app-in-ie/) for more information.
|
||||
|
||||
```html
|
||||
<head>
|
||||
|
|
@ -145,7 +145,7 @@ It is easy to initialize a dashboard layout component with panel. To render a da
|
|||
|
||||
```
|
||||
|
||||
> There is no need to assign default value for panels. Refer to the [Panels](./panels/position-sizing-of-panels/#panels) section to learn about default value.
|
||||
> There is no need to assign default value for panels. Refer to the [Panels](./panels/position-sizing-of-panels/#panels) section to learn about default value.
|
||||
|
||||
## Run the application
|
||||
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ documentation: ug
|
|||
|
||||
The control is provided with built-in responsive support, where panels within the layout get adjusted based on their parent element's dimensions to accommodate any resolution, which relieves the burden of building responsive dashboards.
|
||||
|
||||
The dashboard layout is designed to automatically adapt with lower resolutions by transforming the entire layout into a stacked one, so that, the panels will be displayed in a vertical column. By default, whenever the screen resolution meets 600px or lower resolutions this layout transformation occurs. This transformation can be modified for any user defined resolution by defining the `MediaQuery` property of the component.
|
||||
The dashboard layout is designed to automatically adapt with lower resolutions by transforming the entire layout into a stacked one. So that, the panels will be displayed in a vertical column. By default, whenever the screen resolution meets 600px or lower resolutions this layout transformation occurs. This transformation can be modified for any user defined resolution by defining the `MediaQuery` property of the component.
|
||||
|
||||
```cshtml
|
||||
|
||||
|
|
|
|||
|
|
@ -54,7 +54,7 @@ In the above sample, width of the parent element is divided into five equal cell
|
|||
|
||||
The height of these cells will be 50px based on the CellAspectRatio value 100/50 (that is for every 100px of width, 50px will be the height of the cell).
|
||||
|
||||
The following output demonstrates the setting of `cellAspectRatio` and `Columns` property in dashboard component.
|
||||
The following output demonstrates the setting of `cellAspectRatio` and `Columns` properties in the dashboard component.
|
||||
|
||||
|
||||
|
||||
|
|
@ -98,7 +98,7 @@ The following output demonstrates the neat and clear representation of data by s
|
|||
|
||||
## Graphical representation of grid layout
|
||||
|
||||
These cells combinedly forms a grid-structured layout, which will be hidden initially. This grid-structured layout can be made visible by enabling the `ShowGridLines` property, which clearly pictures the cells split-up within the layout. These gridlines are helpful in panels sizing and placement within the layout during initial designing of a dashboard.
|
||||
These cells combinedly forms a grid-structured layout, which will be hidden initially. This grid-structured layout can be made visible by enabling the `ShowGridLines` property, which clearly shows the cells split-up within the layout. These gridlines are helpful in panels sizing and placement within the layout during initial designing of a dashboard.
|
||||
|
||||
```cshtml
|
||||
|
||||
|
|
@ -130,6 +130,6 @@ These cells combinedly forms a grid-structured layout, which will be hidden init
|
|||
|
||||
```
|
||||
|
||||
The following output demonstrates the gridlines indicate the cells split-up of the layout and the data containers placed over these cells are known as panels.
|
||||
The following output demonstrates the gridlines indicating the cells split-up of the layout and the data containers placed over these cells are known as panels.
|
||||
|
||||
|
||||
|
|
@ -11,7 +11,7 @@ documentation: ug
|
|||
|
||||
# Adaptors in Blazor DataManager Component
|
||||
|
||||
Each data source or remote service uses different way for accepting request and sending back the response. The [SfDataManager](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.Data.SfDataManager.html) cannot anticipate every way a data source works. To tackle this problem the [SfDataManager](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.Data.SfDataManager.html) uses adaptor concept to communicate with particular data source.
|
||||
Each data source or remote service uses different way for accepting request and sending back the response. The [SfDataManager](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.Data.SfDataManager.html) cannot anticipate every way a data source works. To tackle this problem the [SfDataManager](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.Data.SfDataManager.html) uses adaptor concept to communicate with the particular data source.
|
||||
|
||||
* For local data sources, the role of the data adaptor is to query the object array based on the Query object and manipulate them.
|
||||
|
||||
|
|
@ -93,7 +93,7 @@ The following sample code demonstrates binding data to the DataGrid component th
|
|||
}
|
||||
```
|
||||
|
||||
> The above provided url is given for reference purpose. In that place you can provide your service url.
|
||||
> The above mentioned URL is given for reference purposes. In that place, you can provide your service URL.
|
||||
|
||||
`UrlAdaptor` expects response as a JSON object with properties `result` and `count` which contains the collection of entities and the total number of records respectively.
|
||||
|
||||
|
|
@ -170,7 +170,7 @@ The following sample code demonstrates binding remote data to the DataGrid compo
|
|||
|
||||
## Web API adaptor
|
||||
|
||||
You can use the `WepApiAdaptor` to interact with Web APIs created with OData endpoint. The `WebApiAdaptor` is extended from the `ODataAdaptor`. Hence to use `WebApiAdaptor`, the endpoint should understand the OData formatted queries sent along with request.
|
||||
You can use the `WebApiAdaptor` to interact with Web APIs created with OData endpoint. The `WebApiAdaptor` is extended from the `ODataAdaptor`. Hence to use `WebApiAdaptor`, the endpoint should understand the OData formatted queries sent along with request.
|
||||
|
||||
To enable OData query option for Web API, please refer to this [documentation](https://docs.microsoft.com/en-us/aspnet/web-api/overview/odata-support-in-aspnet-web-api/supporting-odata-query-options).
|
||||
|
||||
|
|
@ -215,7 +215,7 @@ The sample response object should look like below.
|
|||
|
||||
## WebMethod adaptor
|
||||
|
||||
You can use the `WepApiAdaptor` to interact with Web APIs created with OData endpoint. The `WebApiAdaptor` is extended from the `ODataAdaptor`. Hence to use `WebApiAdaptor`, the endpoint should understand the OData formatted queries sent along with request.
|
||||
You can use the `WebApiAdaptor` to interact with Web APIs created with OData endpoint. The `WebApiAdaptor` is extended from the `ODataAdaptor`. Hence to use `WebApiAdaptor`, the endpoint should understand the OData formatted queries sent along with request.
|
||||
|
||||
To enable OData query option for Web API, please refer to this [documentation](https://docs.microsoft.com/en-us/aspnet/web-api/overview/odata-support-in-aspnet-web-api/supporting-odata-query-options).
|
||||
|
||||
|
|
@ -247,7 +247,7 @@ The following sample code demonstrates binding remote data to the DataGrid compo
|
|||
}
|
||||
```
|
||||
|
||||
> The above provided url is given for reference purpose. In that place you can provide your service url.
|
||||
> The above mentioned URL is given for reference purposes. In that place, you can provide your service URL.
|
||||
|
||||
`WebMethodAdaptor` expects JSON response from the server and the response object should contain properties `result` and `count` whose values are collection of entities and total count of the entities respectively.
|
||||
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@ public abstract class DataAdaptor
|
|||
public virtual object Remove(DataManager dataManager, object data, string keyField, string key)
|
||||
|
||||
/// <summary>
|
||||
/// Performs Remove operation asynchronously..
|
||||
/// Performs Remove operation asynchronously.
|
||||
/// </summary>
|
||||
public virtual Task<object> RemoveAsync(DataManager dataManager, object data, string keyField, string key)
|
||||
|
||||
|
|
@ -71,11 +71,11 @@ public abstract class DataAdaptor
|
|||
}
|
||||
```
|
||||
|
||||
For implementing the custom data binding alone in the DataGrid component provide the custom adaptor class and override the **Read** or **ReadAsync** method of the **DataAdaptor** abstract class.
|
||||
For implementing the custom data binding alone in the DataGrid component, provide the custom adaptor class and override the **Read** or **ReadAsync** method of the **DataAdaptor** abstract class.
|
||||
|
||||
> If the Read/ReadAsync method is not overridden in the custom adaptor then it will be handled by the default read handler.
|
||||
|
||||
For implementing the CRUD operations for the custom bounded data override the following CRUD methods of the **DataAdaptor** abstract class,
|
||||
For implementing the CRUD operations for the custom bounded data, override the following CRUD methods of the **DataAdaptor** abstract class,
|
||||
|
||||
* Insert/InsertAsync
|
||||
* Remove/RemoveAsync
|
||||
|
|
@ -219,5 +219,5 @@ The following sample code demonstrates implementing custom adaptor of the [SfDat
|
|||
|
||||
> If the **DataManagerRequest.RequiresCounts** value is **true**, then the Read/ReadAsync return value must be of **DataResult** with properties **Result** whose value is a collection of records and **Count** whose value is the total number of records. If the **DataManagerRequest.RequiresCounts** is **false**, then simply send the collection of records.
|
||||
|
||||
The following GIF demonstrates Grid component with data bound using custom adaptor and the CRUD operations being performed on it,
|
||||
The following GIF demonstrates the Grid component with data bound using custom adaptor and the CRUD operations being performed on it,
|
||||
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
layout: post
|
||||
title: Getting Started with Blazor DataManager Component | Syncfusion
|
||||
description: Checkout and learn about getting started with Blazor DataManager component of Syncfusion, and more details.
|
||||
description: Checkout and learn more details about getting started with the Blazor DataManager component of Syncfusion.
|
||||
platform: Blazor
|
||||
control: DataManager
|
||||
documentation: ug
|
||||
|
|
@ -41,7 +41,7 @@ Open **~/_Imports.razor** file and import the **Syncfusion.Blazor.Data** package
|
|||
|
||||
## Add Data Manager Component
|
||||
|
||||
To initialize the [SfDataManager](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.Data.SfDataManager.html) component add the below code to your **Index.razor** view page which is present under **~/Pages** folder.
|
||||
To initialize the [SfDataManager](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.Data.SfDataManager.html) component, add the below code to your **Index.razor** view page which is present under **~/Pages** folder.
|
||||
|
||||
```cshtml
|
||||
|
||||
|
|
@ -132,9 +132,9 @@ The following sample code demonstrates binding OData through the [SfDataManager]
|
|||
|
||||
## Component binding
|
||||
|
||||
As mentioned the [SfDataManager](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.Data.SfDataManager.html) can be used with Syncfusion components which supports data binding.
|
||||
As mentioned, the [SfDataManager](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.Data.SfDataManager.html) can be used with Syncfusion components which supports data binding.
|
||||
|
||||
Here the [SfDataManager](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.Data.SfDataManager.html) is bound with DropDownList component to demonstrate data binding for the components.
|
||||
Here, the [SfDataManager](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.Data.SfDataManager.html) is bound with DropDownList component to demonstrate data binding for the components.
|
||||
|
||||
### Local data binding
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
layout: post
|
||||
title: Aggregates in Blazor DataGrid Component | Syncfusion
|
||||
description: Checkout and learn here all about Aggregates in Syncfusion Blazor DataGrid component and much more details.
|
||||
description: Checkout and learn here all about Aggregates in the Syncfusion Blazor DataGrid component and much more.
|
||||
platform: Blazor
|
||||
control: DataGrid
|
||||
documentation: ug
|
||||
|
|
@ -182,7 +182,7 @@ To access the aggregate values inside the **FooterTemplate**, you can use the im
|
|||
|
||||
## Group and caption aggregate
|
||||
|
||||
Group and caption aggregate values are calculated from the current group items. If **GroupFooterTemplate** is provided, the aggregate values are displayed in the group footer cells and if **GroupCaptionTemplate** is provided, aggregate values are displayed in the group caption cells.
|
||||
Group and caption aggregate values are calculated from the current group items. If **GroupFooterTemplate** is provided, the aggregate values will be displayed in the group footer cells and if **GroupCaptionTemplate** is provided, aggregate values will be displayed in the group caption cells.
|
||||
|
||||
Both **GroupCaptionTemplate** and **GroupFooterTemplate** should be provided within the **GridAggregateColumn** directive.
|
||||
|
||||
|
|
@ -331,7 +331,7 @@ To use Custom aggregate, specify the **AggregateType** as **Custom** in **GridAg
|
|||
}
|
||||
```
|
||||
|
||||
> You can refer to our [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) feature tour page for its groundbreaking feature representations. You can also explore our [Blazor DataGrid example](https://blazor.syncfusion.com/demos/datagrid/overview?theme=bootstrap4) to understand how to present and manipulate data.
|
||||
> You can refer to the [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) feature tour page for its groundbreaking feature representations. You can also explore [Blazor DataGrid example](https://blazor.syncfusion.com/demos/datagrid/overview?theme=bootstrap4) to understand how to present and manipulate data.
|
||||
|
||||
## Handling Aggregates in Custom Adaptor
|
||||
|
||||
|
|
@ -456,7 +456,7 @@ The following sample code demonstrates implementing the aggregates for the custo
|
|||
|
||||
When using batch editing, the aggregate values will be refreshed on every cell save. The footer, group footer, and group caption aggregate values will be refreshed.
|
||||
|
||||
> Adding a new record to the grouped datagrid will not refresh the aggregate values.
|
||||
> Adding a new record to the grouped DataGrid will not refresh the aggregate values.
|
||||
|
||||
```cshtml
|
||||
@using Syncfusion.Blazor.Grids
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
layout: post
|
||||
title: Cell in Blazor DataGrid Component | Syncfusion
|
||||
description: Checkout and learn here all about Cell in Syncfusion Blazor DataGrid component and much more details.
|
||||
description: Checkout and learn here all about the Cell in the Syncfusion Blazor DataGrid component and much more.
|
||||
platform: Blazor
|
||||
control: DataGrid
|
||||
documentation: ug
|
||||
|
|
@ -130,13 +130,13 @@ The appearance of cells can be customized by using the [QueryCellInfo](https://h
|
|||
</style>
|
||||
```
|
||||
|
||||
The following screenshot represents a DataGrid with customize cell styles.
|
||||
The following screenshot represents a DataGrid with customized cell styles.
|
||||
|
||||
|
||||
|
||||
## Auto wrap
|
||||
|
||||
The auto wrap allows the cell content of the datagrid to wrap to the next line when it exceeds the boundary of the cell width. The Cell Content wrapping works based on the position of white space between words. To enable auto wrap, set the [AllowTextWrap](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowTextWrap) property to `true`. You can configure the auto wrap mode by setting the [TextWrapSettings.WrapMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Type) property.
|
||||
The auto wrap allows the cell content of the DataGrid to wrap to the next line when it exceeds the boundary of the cell width. The Cell Content wrapping works based on the position of white space between words. To enable auto wrap, set the [AllowTextWrap](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowTextWrap) property to `true`. You can configure the auto wrap mode by setting the [TextWrapSettings.WrapMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Type) property.
|
||||
|
||||
There are three types of [WrapMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridTextWrapSettings.html#Syncfusion_Blazor_Grids_GridTextWrapSettings_WrapMode). They are:
|
||||
|
||||
|
|
@ -144,7 +144,7 @@ There are three types of [WrapMode](https://help.syncfusion.com/cr/blazor/Syncfu
|
|||
* **Header**: Auto wrap will be enabled only for the header.
|
||||
* **Content**: Auto wrap will be enabled only for the content.
|
||||
|
||||
> When a column width is not specified, then auto wrap of columns will be adjusted with respect to the datagrid's width.
|
||||
> When a column width is not specified, then auto wrap of columns will be adjusted with respect to the DataGrid's width.
|
||||
|
||||
In the following example, the [TextWrapSettings.WrapMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridTextWrapSettings.html#Syncfusion_Blazor_Grids_GridTextWrapSettings_WrapMode) is set to **Content**.
|
||||
|
||||
|
|
@ -194,9 +194,9 @@ The following screenshot represents a DataGrid with auto wrap.
|
|||
|
||||
## Custom Attributes
|
||||
|
||||
You can customize the datagrid cells by adding a CSS class to the [CustomAttributes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ColumnModel.html#Syncfusion_Blazor_Grids_ColumnModel_CustomAttributes) property of the column.
|
||||
You can customize the DataGrid cells by adding a CSS class to the [CustomAttributes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ColumnModel.html#Syncfusion_Blazor_Grids_ColumnModel_CustomAttributes) property of the column.
|
||||
|
||||
In the below example, we have customized the cells of **OrderID** and **ShipCity** columns.
|
||||
In the following example, the cells of the **OrderID** and **ShipCity** columns are customized.
|
||||
|
||||
```cshtml
|
||||
@using Syncfusion.Blazor.Grids
|
||||
|
|
@ -244,15 +244,15 @@ In the below example, we have customized the cells of **OrderID** and **ShipCity
|
|||
|
||||
The [GridLines](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GridLines) have option to display cell border and it can be defined by the [GridLines](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GridLines) property.
|
||||
|
||||
The available modes of datagrid lines are:
|
||||
The available modes of DataGrid lines are:
|
||||
|
||||
| Modes | Actions |
|
||||
|-------|---------|
|
||||
| Both | Displays both the horizontal and vertical datagrid lines.|
|
||||
| None | No datagrid lines are displayed.|
|
||||
| Horizontal | Displays the horizontal datagrid lines only.|
|
||||
| Vertical | Displays the vertical datagrid lines only.|
|
||||
| Default | Displays datagrid lines based on the theme.|
|
||||
| Both | Displays both the horizontal and vertical DataGrid lines.|
|
||||
| None | No DataGrid lines are displayed.|
|
||||
| Horizontal | Displays the horizontal DataGrid lines only.|
|
||||
| Vertical | Displays the vertical DataGrid lines only.|
|
||||
| Default | Displays DataGrid lines based on the theme.|
|
||||
|
||||
```cshtml
|
||||
@using Syncfusion.Blazor.Grids
|
||||
|
|
@ -290,7 +290,7 @@ The available modes of datagrid lines are:
|
|||
}
|
||||
```
|
||||
|
||||
>By default, the datagrid renders with **Default** mode.
|
||||
>By default, the DataGrid renders with **Default** mode.
|
||||
|
||||
## Clip Mode
|
||||
|
||||
|
|
@ -347,4 +347,4 @@ The following screenshot represents a clip mode in DataGrid
|
|||
|
||||
|
||||
|
||||
> You can refer to our [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) feature tour page for its groundbreaking feature representations. You can also explore our [Blazor DataGrid example](https://blazor.syncfusion.com/demos/datagrid/overview?theme=bootstrap4) to understand how to present and manipulate data.
|
||||
> You can refer to the [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) feature tour page for its groundbreaking feature representations. You can also explore [Blazor DataGrid example](https://blazor.syncfusion.com/demos/datagrid/overview?theme=bootstrap4) to understand how to present and manipulate data.
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
layout: post
|
||||
title: Clipboard in Blazor DataGrid Component | Syncfusion
|
||||
description: Checkout and learn here all about Clipboard in Syncfusion Blazor DataGrid component and much more details.
|
||||
description: Checkout and learn here all about Clipboard in the Syncfusion Blazor DataGrid component and much more.
|
||||
platform: Blazor
|
||||
control: DataGrid
|
||||
documentation: ug
|
||||
|
|
@ -56,7 +56,7 @@ Interaction keys |Description
|
|||
|
||||
## Copy to clipboard by external buttons
|
||||
|
||||
To copy selected rows or cells data into the clipboard with help of toolbar buttons, you need to invoke the **Copy** method.
|
||||
To copy selected rows or cells data into the clipboard with help of toolbar buttons, you need to invoke the **Copy** method.
|
||||
|
||||
```cshtml
|
||||
@using Syncfusion.Blazor.Buttons
|
||||
|
|
@ -109,11 +109,11 @@ To copy selected rows or cells data into the clipboard with help of toolbar butt
|
|||
}
|
||||
```
|
||||
|
||||
> You can refer to our [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) feature tour page for its groundbreaking feature representations. You can also explore our [Blazor DataGrid example](https://blazor.syncfusion.com/demos/datagrid/overview?theme=bootstrap4) to understand how to present and manipulate data.
|
||||
> You can refer to the [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) feature tour page for its groundbreaking feature representations. You can also explore [Blazor DataGrid example](https://blazor.syncfusion.com/demos/datagrid/overview?theme=bootstrap4) to understand how to present and manipulate data.
|
||||
|
||||
## AutoFill
|
||||
|
||||
AutoFill Feature allows you to copy the data of selected cells and paste it to another cells by just dragging the autofill icon of the selected cells up to required cells. This feature is enabled by defining [EnableAutoFill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableAutoFill) property as true.
|
||||
AutoFill Feature allows to copy the data of selected cells and paste it to another cells by just dragging the autofill icon of the selected cells to the required cells. This feature is enabled by defining the [EnableAutoFill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableAutoFill) property as true.
|
||||
|
||||
```cshtml
|
||||
@using Syncfusion.Blazor.Grids
|
||||
|
|
@ -153,7 +153,7 @@ AutoFill Feature allows you to copy the data of selected cells and paste it to a
|
|||
}
|
||||
```
|
||||
|
||||
The following represents Autofill in datagrid
|
||||
The following represents Autofill in DataGrid
|
||||
|
||||
|
||||
> * If [EnableAutoFill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableAutoFill) is set to true, then the autofill icon will be displayed on cell selection to copy cells.
|
||||
|
|
@ -161,12 +161,12 @@ The following represents Autofill in datagrid
|
|||
|
||||
### Limitations of AutoFill
|
||||
|
||||
* Since the string values are not parsed to number and date type, so when the selected string type cells are dragged to number type cells then it will display as **NaN**. For date type cells, when the selected string type cells are dragged to date type cells then it will display as an **empty cell**.
|
||||
* Since the string values are not parsed to number and date type, when the selected string type cells are dragged to number type cells then it will display as **NaN**. For date type cells, when the selected string type cells are dragged to date type cells then it will display as an **empty cell**.
|
||||
* Linear series and the sequential data generations are not supported in this autofill feature.
|
||||
|
||||
## Paste
|
||||
|
||||
You can able to copy the content of a cell or a group of cells by selecting the cells and pressing <kbd>Ctrl + C</kbd> shortcut key and paste it to another set of cells by selecting the cells and pressing <kbd>Ctrl + V</kbd> shortcut key.
|
||||
You can copy the content of a cell or a group of cells by selecting the cells and pressing <kbd>Ctrl + C</kbd> shortcut key, and paste it to another set of cells by selecting the cells and pressing <kbd>Ctrl + V</kbd> shortcut key.
|
||||
|
||||
```cshtml
|
||||
@using Syncfusion.Blazor.Grids
|
||||
|
|
@ -210,4 +210,4 @@ You can able to copy the content of a cell or a group of cells by selecting the
|
|||
|
||||
### Limitation of Paste Functionality
|
||||
|
||||
Since the string values are not parsed to number and date type, so when the copied string type cells are pasted to number type cells then it will display as **NaN**. For date type cells, when the copied string format cells are pasted to date type cells then it will display as an **empty cell**.
|
||||
Since the string values are not parsed to number and date type, when the copied string type cells are pasted to number type cells then it will display as **NaN**. For date type cells, when the copied string format cells are pasted to date type cells then it will display as an **empty cell**.
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
layout: post
|
||||
title: Columns in Blazor DataGrid Component | Syncfusion
|
||||
description: Checkout and learn here all about Columns in Syncfusion Blazor DataGrid component and much more details.
|
||||
description: Checkout and learn here all about Columns in the Syncfusion Blazor DataGrid component and much more.
|
||||
platform: Blazor
|
||||
control: DataGrid
|
||||
documentation: ug
|
||||
|
|
@ -9,7 +9,7 @@ documentation: ug
|
|||
|
||||
# Columns in Blazor DataGrid Component
|
||||
|
||||
The column definitions are used as the **DataSource** schema in the DataGrid. This plays a vital role in rendering column values in the required format. The datagrid operations such as sorting, filtering and grouping etc. are performed based on column definitions. The [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Field) property of **GridColumn**, is necessary to map the datasource values in DataGrid columns.
|
||||
The column definitions are used as the **DataSource** schema in the DataGrid. This plays a vital role in rendering column values in the required format. The DataGrid operations such as sorting, filtering and grouping etc. are performed based on column definitions. The [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Field) property of **GridColumn** is necessary to map the datasource values in DataGrid columns.
|
||||
|
||||
> 1. If the column [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Field) is not specified in the dataSource, the column values will be empty.
|
||||
> 2. If the [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Field) name contains “dot” operator, it is considered as complex binding.
|
||||
|
|
@ -50,7 +50,7 @@ The [Columns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.Colu
|
|||
|
||||
## Dynamic column building
|
||||
|
||||
It is possible to dynamically build and customize each of the datagrid column using the type of the model.
|
||||
It is possible to dynamically build and customize each of the DataGrid column using the type of the model.
|
||||
|
||||
You can refer the following code example to achieve this.
|
||||
|
||||
|
|
@ -84,12 +84,12 @@ You can refer the following code example to achieve this.
|
|||
}
|
||||
```
|
||||
|
||||
The following image represents datagrid with dynamically build columns,
|
||||
The following image represents DataGrid with dynamically build columns,
|
||||
|
||||
|
||||
## Complex data binding
|
||||
|
||||
You can achieve complex data binding in the datagrid by using the dot(.) operator in the column.field. In the below examples **Name.FirstName** and **Name.LastName** are complex data.
|
||||
You can achieve complex data binding in the DataGrid by using the dot(.) operator in the column.field. In the following examples, **Name.FirstName** and **Name.LastName** are complex data.
|
||||
|
||||
```cshtml
|
||||
@using Syncfusion.Blazor.Grids
|
||||
|
|
@ -138,11 +138,11 @@ You can achieve complex data binding in the datagrid by using the dot(.) operato
|
|||
The following image represents complex data binding
|
||||
|
||||
|
||||
>For OData and ODataV4 adaptors, you need to add expand query to the query property (of DataGrid), to eager load the complex data.
|
||||
>For OData and ODataV4 adaptors, you need to add expand query to the query property (of DataGrid) to load the complex data.
|
||||
|
||||
### ExpandoObject Complex data binding
|
||||
|
||||
Before proceeding this you learn about [ExpandoObject Binding](https://blazor.syncfusion.com/documentation/datagrid/data-binding/#expandoobject-binding). You can achieve ExpandoObject complex data binding in the datagrid by using the dot(.) operator in the column.field. In the below examples `CustomerID.Name` and `ShipCountry.Country` are complex data.
|
||||
Before proceeding this, learn about [ExpandoObject Binding](https://blazor.syncfusion.com/documentation/datagrid/data-binding/#expandoobject-binding). You can achieve ExpandoObject complex data binding in the DataGrid by using the dot(.) operator in the column.field. In the following examples, `CustomerID.Name` and `ShipCountry.Country` are complex data.
|
||||
|
||||
```cshtml
|
||||
@using Syncfusion.Blazor.Grids
|
||||
|
|
@ -194,7 +194,7 @@ The following image represents ExpandoObject complex data binding
|
|||
|
||||
### DynamicObject Complex data binding
|
||||
|
||||
Before proceeding this you learn about [DynamicObject Binding](https://blazor.syncfusion.com/documentation/datagrid/data-binding/#dynamicobject-binding). You can achieve DynamicObject complex data binding in the datagrid by using the dot(.) operator in the column.field. In the below examples `CustomerID.Name` and `ShipCountry.Country` are complex data.
|
||||
Before proceeding this, learn about [DynamicObject Binding](https://blazor.syncfusion.com/documentation/datagrid/data-binding/#dynamicobject-binding). You can achieve DynamicObject complex data binding in the datagrid by using the dot(.) operator in the column.field. In the following examples, `CustomerID.Name` and `ShipCountry.Country` are complex data.
|
||||
|
||||
```cshtml
|
||||
@using Syncfusion.Blazor.Grids
|
||||
|
|
@ -513,7 +513,7 @@ The following screenshot represents the Header Template.
|
|||
|
||||
## Column template
|
||||
|
||||
> Before adding column template to the datagrid, we strongly recommend you to go through the [template](./templates/#templates) section topic to configure the template.
|
||||
> Before adding column template to the DataGrid, we strongly recommend you to go through the [template](./templates/#templates) section topic to configure the template.
|
||||
|
||||
To know about **Column Template** in Blazor DataGrid Component, you can check this video.
|
||||
|
||||
|
|
@ -716,9 +716,9 @@ The following screenshot represents the Image Template.
|
|||
|
||||
### Using hyperlink column and performing routing on click
|
||||
|
||||
The Column template property can be used to provide routing links inside the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template) property of the [GridColumn](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.Grids.GridColumn.html). For routing [UriHelper](https://docs.microsoft.com/en-us/aspnet/core/blazor/routing?view=aspnetcore-3.0#uri-and-navigation-state-helpers) can be utilized.
|
||||
The Column template property can be used to provide routing links inside the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template) property of the [GridColumn](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.Grids.GridColumn.html). For routing, [UriHelper](https://docs.microsoft.com/en-us/aspnet/core/blazor/routing?view=aspnetcore-3.0#uri-and-navigation-state-helpers) can be utilized.
|
||||
|
||||
This can be achieved by initially defining an anchor tag inside the column template and binding click event to it. In this event the DataGrid data **context** is passed on to its function.
|
||||
This can be achieved by initially defining an anchor tag inside the column template and binding click event to it. In this event, the DataGrid data **context** is passed on to its function.
|
||||
|
||||
```cshtml
|
||||
@inject NavigationManager UriHelper
|
||||
|
|
@ -773,9 +773,9 @@ This can be achieved by initially defining an anchor tag inside the column templ
|
|||
}
|
||||
```
|
||||
|
||||
In the above code, the url to be navigated is specified in the Link variable of the DataGrid data. Based on this the page is routed to the corresponding url.
|
||||
In the above code, the url to be navigated is specified in the Link variable of the DataGrid data. Based on this, the page is routed to the corresponding url.
|
||||
|
||||
After this add new razor page for routing with routing url along with the parameters to be received and initialize it with the required details.
|
||||
After that, add new razor page for routing with routing url along with the parameters to be received, and initialize it with the required details.
|
||||
|
||||
```cshtml
|
||||
@page "/nancy_fuller/{EmpID}/{Name}/{Title}"
|
||||
|
|
@ -815,8 +815,7 @@ DataGrid column supports the following types:
|
|||
* DateTime
|
||||
* CheckBox
|
||||
|
||||
> If the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Type) is not defined, it will be determined from the first record of the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html). In case if the first record of the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) is null/blank value for a column then it is necessary to define the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Type) for that column.
|
||||
|
||||
> If the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Type) is not defined, it will be determined from the first record of the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html). In case, if the first record of the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) is null/blank value for a column then it is necessary to define the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Type) for that column.
|
||||
### Difference between Boolean type and CheckBox type column
|
||||
|
||||
* Use GridColumn [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Type) as Boolean if you want to bind boolean values from your datasource and/or edit Boolean property value from your Type.
|
||||
|
|
@ -879,7 +878,7 @@ The following GIF represents the column chooser functionality in DataGrid
|
|||
|
||||
The column chooser has options to show or hide columns dynamically. It can be enabled by defining the [ShowColumnChooser](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Fill) as true.
|
||||
|
||||
In this below example, we have opened column chooser using external button click.
|
||||
In this following example, we have opened column chooser using external button click.
|
||||
|
||||
```cshtml
|
||||
@using Syncfusion.Blazor.Buttons
|
||||
|
|
@ -938,7 +937,7 @@ The following GIF represents opening column chooser functionality in DataGrid us
|
|||
|
||||
## Format
|
||||
|
||||
To format cell values based on specific culture, use the [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Format) property of **GridColumn** component . The datagrid uses **Internalization** library to format **number** and **date**.
|
||||
To format cell values based on specific culture, use the [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Format) property of **GridColumn** component . The DataGrid uses **Internalization** library to format **number** and **date**.
|
||||
values.
|
||||
|
||||
```cshtml
|
||||
|
|
@ -981,7 +980,7 @@ values.
|
|||
|
||||
### Number formatting
|
||||
|
||||
The number or integer values can be formatted using the below format strings.
|
||||
The number or integer values can be formatted using the following format strings.
|
||||
|
||||
Format |Description |Remarks
|
||||
-----|-----|-----
|
||||
|
|
@ -993,11 +992,11 @@ P | Denotes percentage type | The percentage format expects the input value to b
|
|||
|
||||
You can format date values either using built-in date format string.
|
||||
|
||||
For built-in date format you can specify [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Format) property of **GridColumn** as string.
|
||||
For built-in date format, you can specify the [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Format) property of **GridColumn** as string.
|
||||
|
||||
## Visibility
|
||||
|
||||
You can hide any particular column in DataGrid before rendering by defining [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Visible) property of **GridColumn** as false. In the below sample **Freight** column is defined as visible false.
|
||||
You can hide any particular column in DataGrid before rendering by defining the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Visible) property of **GridColumn** as false. In the following sample, **Freight** column is defined as visible false.
|
||||
|
||||
```cshtml
|
||||
@using Syncfusion.Blazor.Grids
|
||||
|
|
@ -1043,7 +1042,7 @@ The column width can be set using the **Width** property of the **GridColumn**.
|
|||
|
||||
* Columns will respect the width value irrespective of its cell content width.
|
||||
* Columns with no width set will share the available space equally.
|
||||
* When all columns are provided with a width value and the cumulative width of all columns is greater than the grid element width, a horizontal scrollbar will be showed.
|
||||
* When all columns are provided with a width value and the cumulative width of all columns is greater than the grid element width, a horizontal scrollbar will be shown.
|
||||
* When only some columns are provided with the width value and if the cumulative width of the columns is greater than the grid element width then columns with no width might be invisible as their width is zero.
|
||||
* When only some columns are provided with the width value and if the cumulative width of the columns is lesser than the grid element width then columns with no width will share the available space evenly.
|
||||
* When no width is provided in a column and MinWidth property is defined, if the cumulative width of the column is greater than the grid element width then MinWidth would be used as the column width to avoid it from becoming invisible.
|
||||
|
|
@ -1054,7 +1053,7 @@ You can auto fit a column interactively by double clicking the right border of t
|
|||
|
||||
### Autofit columns at initial rendering
|
||||
|
||||
**AutoFit** resizes the column to fit the widest cell’s content without wrapping. To enable AutoFit for specific columns you need to set the AutoFit property to true.
|
||||
**AutoFit** resizes the column to fit the widest cell’s content without wrapping. To enable AutoFit for specific columns, you need to set the AutoFit property to true.
|
||||
|
||||
```cshtml
|
||||
@using Syncfusion.Blazor.Grids
|
||||
|
|
@ -1092,12 +1091,12 @@ You can auto fit a column interactively by double clicking the right border of t
|
|||
}
|
||||
```
|
||||
|
||||
In the following Image **Autofit** Property is set to true for CustomerName and OrderDate.
|
||||
In the following Image, **Autofit** Property is set to true for CustomerName and OrderDate.
|
||||
|
||||
|
||||
### Autofit columns by method
|
||||
|
||||
The **AutoFitColumns** method resizes the column to fit the widest cell's content without wrapping. You can autofit a specific column at initial rendering by invoking the **AutoFitColumns** method in [DataBound](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html) event.
|
||||
The **AutoFitColumns** method resizes the column to fit the widest cell's content without wrapping. You can autofit a specific column at initial rendering by invoking the **AutoFitColumns** method in the [DataBound](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html) event.
|
||||
|
||||
```cshtml
|
||||
@using Syncfusion.Blazor.Grids
|
||||
|
|
@ -1150,7 +1149,7 @@ The following image represents AutoFit column by method
|
|||
|
||||
## Reorder
|
||||
|
||||
Reordering can be done by drag and drop of a particular column header from one index to another index within the datagrid. To enable reordering, set the [AllowReordering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowReordering) property to true.
|
||||
Reordering can be done by drag and drop of a particular column header from one index to another index within the DataGrid. To enable reordering, set the [AllowReordering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowReordering) property to true.
|
||||
|
||||
```cshtml
|
||||
@using Syncfusion.Blazor.Grids
|
||||
|
|
@ -1194,7 +1193,7 @@ The following represents Reordering of columns
|
|||
|
||||
### Reorder single column
|
||||
|
||||
DataGrid has option to reorder single column either by Interaction or by using the [ReorderColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ReorderColumns_System_Collections_Generic_List_System_String__System_String_) method. In the below sample, **Freight** column is reordered to last column position by using the method.
|
||||
DataGrid has option to reorder single column either by Interaction or by using the [ReorderColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ReorderColumns_System_Collections_Generic_List_System_String__System_String_) method. In the following sample, **Freight** column is reordered to last column position by using the method.
|
||||
|
||||
```cshtml
|
||||
@using Syncfusion.Blazor.Buttons
|
||||
|
|
@ -1246,9 +1245,9 @@ The following GIF represents Reordering column **Freight** by using method,
|
|||
|
||||
### Reorder multiple columns
|
||||
|
||||
User can reorder a single column at a time by Interaction. Sometimes we need to have reorder multiple columns at the same time, It can be achieved programmatically by using [ReorderColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ReorderColumns_System_Collections_Generic_List_System_String__System_String_) method.
|
||||
User can reorder a single column at a time by Interaction. Sometimes, we need to reorder multiple columns at the same time. This can be achieved programmatically by using [ReorderColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ReorderColumns_System_Collections_Generic_List_System_String__System_String_) method.
|
||||
|
||||
In the below sample, **Customer Name** and **Freight** columns are reordered to last column position by using this method on button click.
|
||||
In the following sample, **Customer Name** and **Freight** columns are reordered to last column position by using this method on button click.
|
||||
|
||||
```cshtml
|
||||
@using Syncfusion.Blazor.Buttons
|
||||
|
|
@ -1358,7 +1357,7 @@ During the reorder action, the grid component triggers the below events,
|
|||
|
||||
You can lock columns by using [`LockColumn`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_LockColumn) property. The locked columns will be moved to the first position and can’t be reordered.
|
||||
|
||||
In the below example, Order ID column is locked and its reordering functionality is disabled.
|
||||
In the following example, Order ID column is locked and its reordering functionality is disabled.
|
||||
|
||||
```cshtml
|
||||
@using Syncfusion.Blazor.Grids
|
||||
|
|
@ -1521,12 +1520,12 @@ Stacked columns can be resized by clicking and dragging the right edge of the st
|
|||
}
|
||||
```
|
||||
|
||||
The following shows resizing of stacked header
|
||||
Resizing of stacked header is shown below
|
||||
|
||||
|
||||
### Touch interaction
|
||||
|
||||
When the right edge of the header cell is tapped, a floating handler will be visible over the right border of the column. To resize the column, tap and drag the floating handler as needed. You can autoFit a column by using the Column menu of the datagrid.
|
||||
When the right edge of the header cell is tapped, a floating handler will be visible over the right border of the column. To resize the column, tap and drag the floating handler as needed. You can autoFit a column by using the Column menu of the DataGrid.
|
||||
|
||||
The following screenshot represents the column resizing in touch device.
|
||||
|
||||
|
|
@ -1838,7 +1837,7 @@ The following GIF shows the customized column menu item for particular column in
|
|||
|
||||
<!-- Column spanning
|
||||
|
||||
The grid has option to span the adjacent cells. To achieve this define the [`ColSpan`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.QueryCellInfoEventArgs-1.html#Syncfusion_Blazor_Grids_QueryCellInfoEventArgs_1_ColSpan) attribute in the [`QueryCellInfo`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_QueryCellInfo) event.
|
||||
The grid has option to span the adjacent cells. To achieve this, define the [`ColSpan`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.QueryCellInfoEventArgs-1.html#Syncfusion_Blazor_Grids_QueryCellInfoEventArgs_1_ColSpan) attribute in the [`QueryCellInfo`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_QueryCellInfo) event.
|
||||
|
||||
In the following demo, the cells have been spanned based on the employees schedule
|
||||
|
||||
|
|
@ -2019,7 +2018,7 @@ The following GIF shows the column spanning in Grid -->
|
|||
|
||||
You can toggle column visibility based on media queries. This can be achieved by defining Media Queries in the [HideAtMedia](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_HideAtMedia) Column property. The [HideAtMedia](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_HideAtMedia) accepts valid [Media Queries](http://cssmediaqueries.com/what-are-css-media-queries.html).
|
||||
|
||||
In the below sample code, for OrderID column - HideAtMedia property value is set as (min-width: 700px). This hides the OrderID column when the browser screen width is less than 700px.
|
||||
In the following sample code, for OrderID column - HideAtMedia property value is set as (min-width: 700px). This hides the OrderID column when the browser screen width is less than 700px.
|
||||
|
||||
```cshtml
|
||||
@using Syncfusion.Blazor.Grids
|
||||
|
|
@ -2057,14 +2056,13 @@ In the below sample code, for OrderID column - HideAtMedia property value is set
|
|||
}
|
||||
```
|
||||
|
||||
The following GIF shows the responsive columns behavior when window is resized,
|
||||
The following GIF shows the responsive columns behavior when the window is resized,
|
||||
|
||||
|
||||
## Controlling datagrid actions
|
||||
|
||||
You can enable or disable datagrid action for a particular column by using the [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_AllowFiltering), [AllowGrouping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_AllowGrouping), [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_AllowSorting), [AllowReordering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_AllowReordering), and [AllowEditing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_AllowEditing) properties.
|
||||
|
||||
The following sample code shows datagrid actions disabled for particular columns,
|
||||
The following sample code shows DataGrid actions disabled for particular columns,
|
||||
|
||||
```cshtml
|
||||
@using Syncfusion.Blazor.Grids
|
||||
|
|
@ -2103,12 +2101,12 @@ The following sample code shows datagrid actions disabled for particular columns
|
|||
}
|
||||
```
|
||||
|
||||
The following GIF shows the datagrid actions for different columns,
|
||||
The following GIF shows the DataGrid actions for different columns,
|
||||
|
||||
|
||||
## Show/hide columns by external button
|
||||
|
||||
You can show or hide datagrid columns dynamically using external buttons by invoking the [ShowColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ShowColumns_System_Object_System_String_) or [HideColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_HideColumns_System_Object_System_String_) method.
|
||||
You can show or hide DataGrid columns dynamically using external buttons by invoking the [ShowColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ShowColumns_System_Object_System_String_) or [HideColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_HideColumns_System_Object_System_String_) method.
|
||||
|
||||
The following sample code demonstrates showing and hiding of columns using their header texts **("Order Date", "Freight")** on button click,
|
||||
|
||||
|
|
@ -2223,7 +2221,7 @@ The following image represents the Grid with manipulated column data. -->
|
|||
|
||||
You can bind an array of objects in a column by using the [`ValueAccessor`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) property.
|
||||
|
||||
In the following sample code, the name field having an array of two objects, FirstName and LastName are joined and bound to a column using the [`ValueAccessor`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) property.
|
||||
In the following sample code, the name field has an array of two objects, FirstName and LastName are joined and bound to a column using the [`ValueAccessor`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) property.
|
||||
|
||||
```cshtml
|
||||
@using Syncfusion.Blazor.Grids
|
||||
|
|
@ -2269,7 +2267,7 @@ In the following sample code, the name field having an array of two objects, Fir
|
|||
}
|
||||
```
|
||||
|
||||
The following image represents the binded column data in Grid using ValueAccessor property -->
|
||||
The following image represents the bound column data in Grid using ValueAccessor property -->
|
||||
|
||||
<!-- Expression column
|
||||
|
||||
|
|
@ -2377,4 +2375,4 @@ The following sample code demonstrates [DisplayAsCheckBox](https://help.syncfusi
|
|||
The following image represents the DisplayAsCheckBox enabled for a DataGrid column,
|
||||
|
||||
|
||||
> You can refer to our [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) feature tour page for its groundbreaking feature representations. You can also explore our [Blazor DataGrid example](https://blazor.syncfusion.com/demos/datagrid/overview?theme=bootstrap4) to understand how to present and manipulate data.
|
||||
> You can refer to the [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) feature tour page for its groundbreaking feature representations. You can also explore [Blazor DataGrid example](https://blazor.syncfusion.com/demos/datagrid/overview?theme=bootstrap4) to understand how to present and manipulate data.
|
||||
|
|
@ -22,9 +22,9 @@ Items |Description
|
|||
`Save` | Save the edited record.
|
||||
`Cancel` | Cancel the edited state.
|
||||
`Copy` | Copy the selected records.
|
||||
`PdfExport` | Export the datagrid data as Pdf document.
|
||||
`ExcelExport` | Export the datagrid data as Excel document.
|
||||
`CsvExport` | Export the datagrid data as CSV document.
|
||||
`PdfExport` | Export the DataGrid data as Pdf document.
|
||||
`ExcelExport` | Export the DataGrid data as Excel document.
|
||||
`CsvExport` | Export the DataGrid data as CSV document.
|
||||
`Group` | Group the current column.
|
||||
`Ungroup` | Ungroup the current column.
|
||||
`SortAscending` | Sort the current column in ascending order.
|
||||
|
|
@ -159,7 +159,7 @@ The following image represents the DataGrid enabled with custom context menu ite
|
|||
|
||||
## Built-in and Custom context menu items
|
||||
|
||||
DataGrid have an option to use both built-in and custom context menu items at same time.
|
||||
DataGrid has an option to use both built-in and custom context menu items at same time.
|
||||
|
||||
The following sample code demonstrates defining built-in and custom context menu items and custom context menu item corresponding action in the [ContextMenuItemClicked](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ContextMenuClickEventArgs-1.html) event,
|
||||
|
||||
|
|
@ -213,7 +213,7 @@ The following sample code demonstrates defining built-in and custom context menu
|
|||
|
||||
## Sub context menu items in DataGrid
|
||||
|
||||
The sub context menu items can be added by defining the collection of **MenuItems** for **Items** Property in [ContextMenuItems](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.Grids.ContextMenuItemModel.html) Actions for these customized items can be defined in the [ContextMenuItemClicked](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ContextMenuClickEventArgs-1.html) event.
|
||||
The sub context menu items can be added by defining the collection of **MenuItems** for **Items** Property in [ContextMenuItems](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.Grids.ContextMenuItemModel.html). Actions for these customized items can be defined in the [ContextMenuItemClicked](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ContextMenuClickEventArgs-1.html) event.
|
||||
|
||||
The following sample code demonstrates defining sub context menu item and its corresponding action in the [ContextMenuItemClicked](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ContextMenuClickEventArgs-1.html) event,
|
||||
|
||||
|
|
@ -273,9 +273,9 @@ The following sample code demonstrates defining sub context menu item and its co
|
|||
|
||||
## Disable the Context menu for specific columns in DataGrid
|
||||
|
||||
Context Menu can be prevented for specific columns using [ContextMenuOpen](https://blazor.syncfusion.com/documentation/datagrid/events/#contextmenuopen) event of DataGrid. This is event will be triggered before opening the ContextMenu. We can prevent the context menu from opening by defining the **Cancel** arguments of [ContextMenuOpen](https://blazor.syncfusion.com/documentation/datagrid/events/#contextmenuopen) to **false**.
|
||||
Context Menu can be prevented for specific columns using [ContextMenuOpen](https://blazor.syncfusion.com/documentation/datagrid/events/#contextmenuopen) event of DataGrid. This event will be triggered before opening the ContextMenu. We can prevent the context menu from opening by defining the **Cancel** arguments of [ContextMenuOpen](https://blazor.syncfusion.com/documentation/datagrid/events/#contextmenuopen) to **false**.
|
||||
|
||||
The following sample code demonstrates the disabling the context for specific column using event arguments of [ContextMenuOpen](https://blazor.syncfusion.com/documentation/datagrid/events/#contextmenuopen) event,
|
||||
The following sample code demonstrates how to disable the context for specific column using event arguments of [ContextMenuOpen](https://blazor.syncfusion.com/documentation/datagrid/events/#contextmenuopen) event,
|
||||
|
||||
```cshtml
|
||||
@using Syncfusion.Blazor.Grids
|
||||
|
|
@ -319,7 +319,7 @@ The following sample code demonstrates the disabling the context for specific co
|
|||
{
|
||||
if (Args.Column.Field == "OrderDate")
|
||||
{
|
||||
Args.Cancel = true; // to prevent the context menu from opening
|
||||
Args.Cancel = true; // To prevent the context menu from opening
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -335,7 +335,7 @@ The following sample code demonstrates the disabling the context for specific co
|
|||
|
||||
## Disable context menu items dynamically in DataGrid
|
||||
|
||||
You can enable or disable context menu items using the **Disabled** property. Here, we enable and disable the **Edit** context menu items in [ContextMenuOpen](https://blazor.syncfusion.com/documentation/datagrid/events/#contextmenuopen) event of DataGrid. This is event will be triggered before opening the ContextMenu. We can disabled the context menu item by defining the corresponding context menu items **Disabled** property as **true**.
|
||||
You can enable or disable context menu items using the **Disabled** property. Here, you can enable and disable the **Edit** context menu items in [ContextMenuOpen](https://blazor.syncfusion.com/documentation/datagrid/events/#contextmenuopen) event of DataGrid. This event will be triggered before opening the ContextMenu. You can disable the context menu item by defining the corresponding context menu items **Disabled** property as **true**.
|
||||
|
||||
The following sample code demonstrates how to enable or disable context menu items dynamically in Grid using event arguments of [ContextMenuOpen](https://blazor.syncfusion.com/documentation/datagrid/events/#contextmenuopen) event,
|
||||
|
||||
|
|
@ -371,13 +371,13 @@ The following sample code demonstrates how to enable or disable context menu ite
|
|||
public void OnContextMenuOpen(ContextMenuOpenEventArgs<Order> Args)
|
||||
{
|
||||
#pragma warning disable BL0005
|
||||
if (Args.Column.Field == "OrderDate") // you can check condition based on your requirement
|
||||
if (Args.Column.Field == "OrderDate") // You can check condition based on your requirement
|
||||
{
|
||||
Args.ContextMenuObj.Items[0].Disabled = true; // to disable edit context menu item
|
||||
Args.ContextMenuObj.Items[0].Disabled = true; // To disable edit context menu item
|
||||
}
|
||||
else
|
||||
{
|
||||
Args.ContextMenuObj.Items[0].Disabled = false; // to enable edit context menu item
|
||||
Args.ContextMenuObj.Items[0].Disabled = false; // To enable edit context menu item
|
||||
}
|
||||
#pragma warning restore BL0005
|
||||
}
|
||||
|
|
@ -392,4 +392,4 @@ The following sample code demonstrates how to enable or disable context menu ite
|
|||
}
|
||||
```
|
||||
|
||||
> You can refer to our [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) feature tour page for its groundbreaking feature representations. You can also explore our [Blazor DataGrid example](https://blazor.syncfusion.com/demos/datagrid/overview?theme=bootstrap4) to understand how to present and manipulate data.
|
||||
> You can refer to [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) feature tour page for its groundbreaking feature representations. You can also explore [Blazor DataGrid example](https://blazor.syncfusion.com/demos/datagrid/overview?theme=bootstrap4) to understand how to present and manipulate data.
|
||||
|
|
@ -43,7 +43,7 @@ public abstract class DataAdaptor
|
|||
public virtual object Remove(DataManager dataManager, object data, string keyField, string key)
|
||||
|
||||
/// <summary>
|
||||
/// Performs Remove operation asynchronously..
|
||||
/// Performs Remove operation asynchronously.
|
||||
/// </summary>
|
||||
public virtual Task<object> RemoveAsync(DataManager dataManager, object data, string keyField, string key)
|
||||
|
||||
|
|
@ -162,13 +162,13 @@ The following sample code demonstrates implementing custom data binding using cu
|
|||
The following image shows the custom bound data displayed in the DataGrid component,
|
||||
|
||||
|
||||
> If the Read/ReadAsync method is not overridden in the custom adaptor then it will be handled by the default read handler.
|
||||
> If the Read/ReadAsync method is not overridden in the custom adaptor, then it will be handled by the default read handler.
|
||||
|
||||
## Inject service into Custom Adaptor
|
||||
|
||||
If you want to inject some of your service into Custom Adaptor and use the service, then you can achieve your requirement by using below way.
|
||||
|
||||
Initially you need to add CustomAdaptor class as AddScoped in `StartUp.cs` file.
|
||||
Initially, you need to add CustomAdaptor class as AddScoped in `StartUp.cs` file.
|
||||
|
||||
```csharp
|
||||
public void ConfigureServices(IServiceCollection services)
|
||||
|
|
@ -201,7 +201,7 @@ The following sample code demonstrates injecting service into Custom Adaptor,
|
|||
|
||||
public class CustomAdaptor : DataAdaptor
|
||||
{
|
||||
//here you can inject your service
|
||||
//Here, you can inject your service
|
||||
public OrderDataAccessLayer context { get; set; };
|
||||
public CustomAdaptor(OrderDataAccessLayer _context)
|
||||
{
|
||||
|
|
@ -408,16 +408,16 @@ The following sample code demonstrates `DataAdaptor` extended from `OwningCompon
|
|||
|
||||
## CRUD operation
|
||||
|
||||
The CRUD operations for the custom bounded data in the DataGrid component can be implemented by overriding the following CRUD methods of the **DataAdaptor** abstract class,
|
||||
The CRUD operations for the custom bound data in the DataGrid component can be implemented by overriding the following CRUD methods of the **DataAdaptor** abstract class,
|
||||
|
||||
* **Insert/InsertAsync**
|
||||
* **Remove/RemoveAsync**
|
||||
* **Update/UpdateAsync**
|
||||
* **BatchUpdate/BatchUpdateAsync**
|
||||
|
||||
> While using batch editing in datagrid, use BatchUpdate/BatchUpdateAsync method to handle the corresponding CRUD operation
|
||||
> While using batch editing in DataGrid, use BatchUpdate/BatchUpdateAsync method to handle the corresponding CRUD operation.
|
||||
|
||||
The following sample code demonstrates implementing CRUD operations for the custom bounded data,
|
||||
The following sample code demonstrates implementing CRUD operations for the custom bound data,
|
||||
|
||||
```cshtml
|
||||
@using Syncfusion.Blazor
|
||||
|
|
@ -553,16 +553,16 @@ The following sample code demonstrates implementing CRUD operations for the cust
|
|||
}
|
||||
```
|
||||
|
||||
The following GIF displays the CRUD operations performed on the custom bounded data displayed in the DataGrid component,
|
||||
The following GIF displays the CRUD operations performed on the custom bound data displayed in the DataGrid component,
|
||||
|
||||
|
||||
> You can refer to our [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) feature tour page for its groundbreaking feature representations. You can also explore our [Blazor DataGrid example](https://blazor.syncfusion.com/demos/datagrid/overview?theme=bootstrap4) to understand how to present and manipulate data.
|
||||
> You can refer to the [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) feature tour page for its groundbreaking feature representations. You can also explore [Blazor DataGrid example](https://blazor.syncfusion.com/demos/datagrid/overview?theme=bootstrap4) to understand how to present and manipulate data.
|
||||
|
||||
## Handling Aggregates in Custom Adaptor
|
||||
|
||||
When using Custom Adaptor, the aggregates has to be handled in the Read/ReadAsync method of Custom adaptor.
|
||||
When using Custom Adaptor, the aggregates must be handled in the Read/ReadAsync method of Custom adaptor.
|
||||
|
||||
The following sample code demonstrates implementing the aggregates for the custom bounded data,
|
||||
The following sample code demonstrates implementing the aggregates for the custom bound data,
|
||||
|
||||
```cshtml
|
||||
@using Syncfusion.Blazor.Grids
|
||||
|
|
@ -675,4 +675,97 @@ The following sample code demonstrates implementing the aggregates for the custo
|
|||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Handling Grouping in Custom Adaptor
|
||||
|
||||
When using Custom Adaptor, the grouping operation has to be handled in the Read/ReadAsync method of Custom adaptor.
|
||||
|
||||
The following sample code demonstrates implementing the grouping operation for the custom bounded data,
|
||||
|
||||
```cshtml
|
||||
@using Syncfusion.Blazor
|
||||
@using Syncfusion.Blazor.Data
|
||||
@using Syncfusion.Blazor.Grids
|
||||
@using System.Collections
|
||||
|
||||
<SfGrid TValue="Order" ID="Grid" AllowSorting="true" AllowFiltering="true" AllowPaging="true" AllowGrouping="true">
|
||||
<SfDataManager AdaptorInstance="@typeof(CustomAdaptor)" Adaptor="Adaptors.CustomAdaptor"></SfDataManager>
|
||||
<GridPageSettings PageSize="8"></GridPageSettings>
|
||||
<GridColumns>
|
||||
<GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsPrimaryKey="true" TextAlign="@TextAlign.Center" Width="140"></GridColumn>
|
||||
<GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn>
|
||||
<GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" Width="150"></GridColumn>
|
||||
</GridColumns>
|
||||
</SfGrid>
|
||||
|
||||
@code{
|
||||
public static List<Order> Orders { get; set; }
|
||||
|
||||
protected override void OnInitialized()
|
||||
{
|
||||
Orders = Enumerable.Range(1, 75).Select(x => new Order()
|
||||
{
|
||||
OrderID = 1000 + x,
|
||||
CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],
|
||||
Freight = 2.1 * x,
|
||||
}).ToList();
|
||||
}
|
||||
|
||||
public class Order
|
||||
{
|
||||
public int OrderID { get; set; }
|
||||
public string CustomerID { get; set; }
|
||||
public double Freight { get; set; }
|
||||
}
|
||||
|
||||
// Implementing custom adaptor by extending the DataAdaptor class
|
||||
public class CustomAdaptor : DataAdaptor
|
||||
{
|
||||
// Performs data Read operation
|
||||
public override object Read(DataManagerRequest dm, string key = null)
|
||||
{
|
||||
IEnumerable<Order> DataSource = Orders;
|
||||
if (dm.Search != null && dm.Search.Count > 0)
|
||||
{
|
||||
// Searching
|
||||
DataSource = DataOperations.PerformSearching(DataSource, dm.Search);
|
||||
}
|
||||
if (dm.Sorted != null && dm.Sorted.Count > 0)
|
||||
{
|
||||
// Sorting
|
||||
DataSource = DataOperations.PerformSorting(DataSource, dm.Sorted);
|
||||
}
|
||||
if (dm.Where != null && dm.Where.Count > 0)
|
||||
{
|
||||
// Filtering
|
||||
DataSource = DataOperations.PerformFiltering(DataSource, dm.Where, dm.Where[0].Operator);
|
||||
}
|
||||
int count = DataSource.Cast<Order>().Count();
|
||||
if (dm.Skip != 0)
|
||||
{
|
||||
//Paging
|
||||
DataSource = DataOperations.PerformSkip(DataSource, dm.Skip);
|
||||
}
|
||||
if (dm.Take != 0)
|
||||
{
|
||||
DataSource = DataOperations.PerformTake(DataSource, dm.Take);
|
||||
}
|
||||
DataResult DataObject = new DataResult();
|
||||
if (dm.Group != null)
|
||||
{
|
||||
IEnumerable ResultData = DataSource.ToList();
|
||||
// Grouping
|
||||
foreach (var group in dm.Group)
|
||||
{
|
||||
ResultData = DataUtil.Group<Order>(ResultData, group, dm.Aggregates, 0, dm.GroupByFormatter);
|
||||
}
|
||||
DataObject.Result = ResultData;
|
||||
DataObject.Count = count;
|
||||
return dm.RequiresCounts ? DataObject : (object)ResultData;
|
||||
}
|
||||
return dm.RequiresCounts ? new DataResult() { Result = DataSource, Count = count } : (object)DataSource;
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
|
@ -1,17 +1,17 @@
|
|||
---
|
||||
layout: post
|
||||
title: Custom toolbar items with text name same as default toolbar items in Blazor DataGrid Component | Syncfusion
|
||||
title: Custom toolbar items in Blazor DataGrid Component | Syncfusion
|
||||
description: Learn here all about Custom toolbar items with text name same as default toolbar items in Syncfusion Blazor DataGrid component and more.
|
||||
platform: Blazor
|
||||
control: DataGrid
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Custom toolbar items with text name same as default toolbar items in Blazor DataGrid Component
|
||||
# Custom toolbar items with text name same as default toolbar items
|
||||
|
||||
You can create the Custom toolbar items with text name same as default toolbar items (Add,Edit,Delete,etc.). But while creating them, they will be considered as default toolbar items which will cause some issues while clicking on it. To overcome this behavior, we suggest you to define the **Id** property for custom toolbar items.
|
||||
|
||||
This is demonstrated in the below sample code where we have custom toolbar items with text same as **Add** and **Delete** buttons. These toolbar buttons will be enabled only when GridEditSettings is defined in DataGrid. So custom toolbar will be disabled state considering it as default toolbar item. We have overcome that behaviour by defining the Id property.
|
||||
This is demonstrated in the below sample code where we have custom toolbar items with text same as **Add** and **Delete** buttons. These toolbar buttons will be enabled only when GridEditSettings is defined in DataGrid. So custom toolbar will be disabled state considering it as default toolbar item. We have overcome that behavior by defining the Id property.
|
||||
|
||||
```cshtml
|
||||
@using Syncfusion.Blazor.Grids
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
layout: post
|
||||
title: Prevent default action in Blazor DataGrid Component | Syncfusion
|
||||
description: Learn here all about preventing the default datagrid action in Syncfusion Blazor DataGrid component and more.
|
||||
description: Learn here all about preventing the default DataGrid action in Syncfusion Blazor DataGrid component and more.
|
||||
platform: Blazor
|
||||
control: DataGrid
|
||||
documentation: ug
|
||||
|
|
@ -9,7 +9,7 @@ documentation: ug
|
|||
|
||||
# Prevent default datagrid action in Blazor DataGrid Component
|
||||
|
||||
The default datagrid actions can be prevented by cancelling them in the [OnActionBegin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Fill) event.
|
||||
The default DataGrid actions can be prevented by canceling them in the [OnActionBegin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Fill) event.
|
||||
|
||||
This is demonstrated in the below sample code where the `Add` operation is prevented by setting `Cancel` argument value of the [OnActionBegin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Fill) event to **false**,
|
||||
|
||||
|
|
|
|||
Разница между файлами не показана из-за своего большого размера
Загрузить разницу
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 40 KiB |
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 52 KiB |
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 42 KiB |
Двоичные данные
blazor/installation-and-upgrade/images/start-trial-download.PNG
Двоичные данные
blazor/installation-and-upgrade/images/start-trial-download.PNG
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 17 KiB |
Двоичные данные
blazor/installation-and-upgrade/images/trial-confirmation.PNG
Двоичные данные
blazor/installation-and-upgrade/images/trial-confirmation.PNG
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 59 KiB |
Двоичные данные
blazor/installation-and-upgrade/images/webinstaller-10.png
Двоичные данные
blazor/installation-and-upgrade/images/webinstaller-10.png
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 35 KiB |
Двоичные данные
blazor/installation-and-upgrade/images/webinstaller-11.png
Двоичные данные
blazor/installation-and-upgrade/images/webinstaller-11.png
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 49 KiB |
Двоичные данные
blazor/installation-and-upgrade/images/webinstaller-12.png
Двоичные данные
blazor/installation-and-upgrade/images/webinstaller-12.png
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 27 KiB |
Двоичные данные
blazor/installation-and-upgrade/images/webinstaller-13.png
Двоичные данные
blazor/installation-and-upgrade/images/webinstaller-13.png
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 83 KiB |
Двоичные данные
blazor/installation-and-upgrade/images/webinstaller-2.png
Двоичные данные
blazor/installation-and-upgrade/images/webinstaller-2.png
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 56 KiB |
Двоичные данные
blazor/installation-and-upgrade/images/webinstaller-3.png
Двоичные данные
blazor/installation-and-upgrade/images/webinstaller-3.png
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 70 KiB |
Двоичные данные
blazor/installation-and-upgrade/images/webinstaller-5.png
Двоичные данные
blazor/installation-and-upgrade/images/webinstaller-5.png
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 70 KiB |
Двоичные данные
blazor/installation-and-upgrade/images/webinstaller-6.png
Двоичные данные
blazor/installation-and-upgrade/images/webinstaller-6.png
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 41 KiB |
Двоичные данные
blazor/installation-and-upgrade/images/webinstaller-8.png
Двоичные данные
blazor/installation-and-upgrade/images/webinstaller-8.png
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 60 KiB |
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 99 KiB |
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 42 KiB |
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 67 KiB |
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 41 KiB |
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 60 KiB |
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 76 KiB |
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 46 KiB |
|
|
@ -1,173 +0,0 @@
|
|||
---
|
||||
layout: post
|
||||
title: Installation using Web Installer in Blazor - Syncfusion
|
||||
description: Learn here about that how to install using the web installer of Essential Syncfusion Blazor Components.
|
||||
platform: Blazor
|
||||
component: Common
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Installation using Web Installer
|
||||
|
||||
You can refer to the [Download](https://help.syncfusion.com/winui/installation-and-upgrade/download) section to learn how to get the Blazor trial or licensed installer.
|
||||
|
||||
## Overview
|
||||
|
||||
For the Essential Studio Blazor product, Syncfusion offers a Web Installer. This installer alleviates the burden of downloading a larger installer. You can simply download and run the online installer, which will be smaller in size and will download and install the Essential Studio products you have chosen. You can get the most recent version of Essential Studio Web Installer [here](https://www.syncfusion.com/downloads/latest-version).
|
||||
|
||||
## Installation
|
||||
|
||||
The steps below show how to install Essential Studio Blazor Web Installer.
|
||||
|
||||
1. Open the Syncfusion Essential Studio Blazor Web Installer file from downloaded location by double-clicking it. The Installer Wizard automatically opens and extracts the package.
|
||||
|
||||
|
||||
|
||||
> The installer wizard extracts the syncfusionessentialblazorwebinstaller_{version}.exe dialog, which displays the package’s unzip operation.
|
||||
|
||||
2. The Syncfusion Blazor Web Installer’s welcome wizard will be displayed. Click the Next button.
|
||||
|
||||
|
||||
|
||||
3. The Platform Selection Wizard will appear. From the **Available** tab, select the products to be installed. Select the **Install All** checkbox to install all products.
|
||||
|
||||
***Available***
|
||||
|
||||
|
||||
|
||||
If you have multiple products installed in the same version, they will be listed under the **Installed** tab. You can also select which products to uninstall from the same version. Click the Next button.
|
||||
|
||||
***Installed***
|
||||
|
||||
|
||||
|
||||
> If the required software for the selected product isn’t already installed, the **Additional Software Required** alert will appear. However, you can continue the installation and install the necessary software later.
|
||||
|
||||
***Required Software***
|
||||
|
||||
|
||||
|
||||
4. If previous version(s) for the selected products are installed, the Uninstall previous version wizard will be displayed. You can see the list of previously installed versions for the products you’ve chosen here. To remove all versions, check the **Uninstall All** checkbox. Click the Next button.
|
||||
|
||||
|
||||
|
||||
> From the 2021 Volume 1 release, Syncfusion has provided option to uninstall the previous versions from 18.1 while installing the new version.
|
||||
|
||||
5. Pop up screen will be displayed to get the confirmation to uninstall selected previous versions.
|
||||
|
||||
|
||||
|
||||
6. The Confirmation Wizard will appear with the list of products to be installed/uninstalled. You can view and modify the list of products that will be installed and uninstalled from this page.
|
||||
|
||||
|
||||
|
||||
> By clicking the **Download Size and Installation** Size links, you can determine the approximate size of the download and installation
|
||||
|
||||
7. The Configuration Wizard will appear. You can change the Download, Install, and Demos locations from here. You can also change the Additional settings on a product-by-product basis. Click Next to install with the default settings.
|
||||
|
||||
|
||||
|
||||
***Additional settings***
|
||||
|
||||
* Select the **Install Demos** check box to install Syncfusion samples, or leave the check box unchecked, if you do not want to install Syncfusion samples.
|
||||
|
||||
* Select the **Configure Syncfusion Extensions controls in Visual Studio** checkbox to configure the Syncfusion Extensions in Visual Studio or clear this check box when you do not want to configure the Syncfusion Extensions in Visual Studio.
|
||||
|
||||
* Check the **Create Desktop Shortcut** checkbox to add a desktop shortcut for Syncfusion Control Panel.
|
||||
|
||||
* Check the **Create Start Menu Shortcut** checkbox to add a shortcut to the start menu for Syncfusion Control Panel.
|
||||
|
||||
8. After reading the License Terms and Conditions, check the **I agree to the License Terms and Privacy Policy** check box. Click the Next button.
|
||||
|
||||
9. The login wizard will appear. You must enter your Syncfusion email address and password. If you do not already have a Syncfusion account, you can create one by clicking on **Create an Account**. If you have forgotten your password, click **Forgot Password** to create a new one. Click the Install button.
|
||||
|
||||
|
||||
|
||||
> The products you have chosen will be installed based on your Syncfusion License (Trial or Licensed).
|
||||
|
||||
10. The download and installation\uninstallation progress will be displayed as shown below.
|
||||
|
||||
To open the Syncfusion Control Panel, click **Launch Control Panel**.
|
||||
|
||||
11. When the installation is finished, the **Summary** wizard will appear. Here, you can see the list of products that have been installed successfully and those that have failed. To close the Summary wizard, click Finish.
|
||||
|
||||
12. After installation, there will be two Syncfusion control panel entries, as shown below. The Essential Studio entry will manage all Syncfusion products installed in the same version, while the Product entry will only uninstall the specific product setup.
|
||||
|
||||
|
||||
## Uninstallation
|
||||
|
||||
Syncfusion Blazor installer can be uninstalled in two ways.
|
||||
|
||||
* Uninstall the Blazor using the Syncfusion Blazor web installer
|
||||
|
||||
* Uninstall the Blazor from Windows Control Panel
|
||||
|
||||
Follow either one of the option below to uninstall Syncfusion Essential Studio Blazor installer.
|
||||
|
||||
### Option 1: Uninstall the Blazor using the Syncfusion Blazor web installer
|
||||
|
||||
Syncfusion provides the option to uninstall products of the same version directly from the Web Installer application. Select the products to be uninstalled from the list, and Web Installer will uninstall them one by one.
|
||||
|
||||
Open the Syncfusion Essential Studio Blazor Online Installer file from downloaded location by double-clicking it. The Installer Wizard automatically opens and extracts the package
|
||||
|
||||
|
||||
|
||||
The Syncfusion Blazor Web Installer’s welcome wizard will be displayed. Click the Next button
|
||||
|
||||
|
||||
|
||||
### Option 2: Uninstall the Blazor from Windows Control Panel
|
||||
|
||||
You can uninstall all the installed products by selecting the **Syncfusion Essential Studio {version}** entry (element 1 in the below screenshot) from the Windows control panel, or you can uninstall Blazor alone by selecting the **Syncfusion Essential Studio for Blazor {version}** entry (element 2 in the below screenshot) from the Windows control panel.
|
||||
|
||||
|
||||
|
||||
> If the **Syncfusion Essential Studio for Blazor {version}** entry is selected from the Windows control panel, the Syncfusion Essential Studio Blazor alone will be removed and the below default MSI uninstallation window will be displayed.
|
||||
|
||||
1. The Platform Selection Wizard will appear. From the **Installed** tab, select the products to be uninstalled. To select all products, check the **Uninstall All** checkbox. Click the Next button.
|
||||
|
||||
***Installed***
|
||||
|
||||
|
||||
|
||||
You can also select the products to be installed from the **Available** tab. Click the Next button.
|
||||
|
||||
***Available***
|
||||
|
||||
|
||||
|
||||
2. If any other products selected for installation, Uninstall previous version wizard will be displayed with previous version(s) installed for the selected products. Here, you can view the list of installed previous versions for the selected products. Select **Uninstall All** checkbox to select all the versions. Click Next.
|
||||
|
||||
|
||||
|
||||
3. Pop up screen will be displayed to get the confirmation to uninstall selected previous versions.
|
||||
|
||||
|
||||
|
||||
4. The Confirmation Wizard will appear with the list of products to be installed/uninstalled. Here, you can view and modify the list of products that will be installed/uninstalled.
|
||||
|
||||
|
||||
|
||||
> By clicking the **Download Size and Installation** Size links, you can determine the approximate size of the download and installation.
|
||||
|
||||
5. The Configuration Wizard will appear. You can change the Download, Install, and Demos locations from here. You can also change the Additional settings on a product-by-product basis. Click Next to install with the default settings.
|
||||
|
||||
|
||||
|
||||
6. After reading the License Terms and Conditions, check the **I agree to the License Terms and Privacy Policy** check box. Click the Next button.
|
||||
|
||||
7. The login wizard will appear. You must enter your Syncfusion email address and password. If you do not already have a Syncfusion account, you can create one by clicking on **Create an Account**. If you have forgotten your password, click **Forgot Password** to create a new one. Click the Install button.
|
||||
|
||||
|
||||
|
||||
> The products you have chosen will be installed based on your Syncfusion License (Trial or Licensed).
|
||||
|
||||
8. The download, installation, and uninstallation progresses will be shown.
|
||||
|
||||
|
||||
|
||||
9. When the installation is finished, the **Summary** wizard will appear. Here, you can see the list of products that have been successfully and unsuccessfully installed/uninstalled. To close the Summary wizard, click Finish.
|
||||
|
||||
|
||||
|
||||
10. To open the Syncfusion Control Panel, click **Launch Control Panel**.
|
||||
Двоичные данные
blazor/licensing/images/get-community-license-key.png
Двоичные данные
blazor/licensing/images/get-community-license-key.png
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 138 KiB |
|
|
@ -1,16 +0,0 @@
|
|||
---
|
||||
layout: post
|
||||
title: License Key Generation for Syncfusion Blazor Components | Syncfusion
|
||||
description: Checkout and learn here all about license key generation for Syncfusion Blazor Components and much more.
|
||||
platform: Blazor
|
||||
component: Common
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# License Key Generation for Syncfusion Blazor Components
|
||||
|
||||
License keys can be generated from the [License & Downloads](https://syncfusion.com/account/downloads) or [Trail & Downloads](https://www.syncfusion.com/account/manage-trials/downloads) section of the Syncfusion website.
|
||||
|
||||
|
||||
|
||||
Syncfusion license keys are version and platform specific, refer to the [KB](https://www.syncfusion.com/kb/8976/how-to-generate-license-key-for-licensed-products) to generate the license key for the required version and platform. Also, refer this [KB](https://www.syncfusion.com/kb/8951/which-version-syncfusion-license-key-should-i-use-in-my-application) to know about which version of the Syncfusion license key should be used in the application.
|
||||
|
|
@ -1,56 +0,0 @@
|
|||
---
|
||||
layout: post
|
||||
title: Licensing Errors and Solution for Syncfusion Blazor Components | Syncfusion
|
||||
description: Checkout and learn here all about licensing errors and solution for Syncfusion Blazor Components and much more.
|
||||
platform: Blazor
|
||||
component: Common
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Licensing Errors and Solution for Syncfusion Blazor Components
|
||||
|
||||
Licensing error popup is displayed with various messages under different circumstances. Here are some ways to resolve different issues.
|
||||
|
||||
## License key not registered
|
||||
|
||||
The following error message will be shown if a Syncfusion license key has not been registered in your application.
|
||||
|
||||
**Error message:** <br /> This application was built using a trial version of Syncfusion Essential Studio. Please include a valid license to permanently remove this license validation message. You can also obtain a free 30 day evaluation license to temporarily remove this message during the evaluation period. Please refer to this [help topic](https://help.syncfusion.com/es/licensing/) for more information.
|
||||
|
||||
**Solution:** <br /> Generate a valid license key from here [Licensed users](https://www.syncfusion.com/account/downloads) or [Trial users](https://www.syncfusion.com/account/manage-trials/downloads) for a specific version and platform.
|
||||
|
||||
## Invalid key
|
||||
|
||||
If the application is registered with an invalid key, another version of license key, or another platform’s license key, the following error message will pop up when launching the application.
|
||||
|
||||
**Error message:** <br /> The included Syncfusion license is invalid. Please refer to this [help topic](https://help.syncfusion.com/es/licensing/invalid/) for more information.
|
||||
|
||||
**Solution:** <br /> Generate a valid license key from here [Licensed users](https://www.syncfusion.com/account/downloads) or [Trial users](https://www.syncfusion.com/account/manage-trials/downloads) for a specific version and platform.
|
||||
|
||||
## Trial Expired
|
||||
|
||||
The following error message will be shown if the trial key has expired after 30 days.
|
||||
|
||||
**Error message:** <br /> Your Syncfusion trial license has expired. Please refer to this [help topic](https://help.syncfusion.com/es/licensing/expired) for more information.
|
||||
|
||||
**Solution:** <br /> Purchase from [here](https://www.syncfusion.com/sales/products) to get a valid Syncfusion license.
|
||||
|
||||
## Platform Mismatch
|
||||
|
||||
If the application is registered with another platform’s license key, the following error message will pop up when launching the application.
|
||||
|
||||
**Error message:** <br /> The included Syncfusion license is invalid (Platform mismatch). Please refer to this [help topic](https://help.syncfusion.com/es/licensing/platform-mismatch/) for more information.
|
||||
|
||||
**Solution:** <br /> Generate a valid license key from here [Licensed users](https://www.syncfusion.com/account/downloads) or [Trial users](https://www.syncfusion.com/account/manage-trials/downloads) for a specific version and platform.
|
||||
|
||||
## Version Mismatch
|
||||
|
||||
If the application is registered with another version’s license key, the following error message will pop up when launching the application.
|
||||
|
||||
**Error message:** <br /> The included Syncfusion license ({Registered Version}) is invalid for version {Required version}. Please refer to this [help topic](https://help.syncfusion.com/es/licensing/version-mismatch/) for more information.
|
||||
|
||||
**Solution:** <br /> Generate a valid license key from here [Licensed users](https://www.syncfusion.com/account/downloads) or [Trial users](https://www.syncfusion.com/account/manage-trials/downloads) for a specific version and platform. Kindly follow the [KB](https://www.syncfusion.com/kb/8976/how-to-generate-license-key-for-licensed-products) to generate license key.
|
||||
|
||||
## Could not load Syncfusion.Licensing.dll assembly version
|
||||
|
||||
Make sure that all the referenced Syncfusion assembles are of the same version. Try cleaning and rebuilding the application to resolve assembly conflict issues.
|
||||
|
|
@ -1,36 +0,0 @@
|
|||
---
|
||||
layout: post
|
||||
title: Licensing FAQ for Syncfusion Blazor Components | Syncfusion
|
||||
description: Learn here all about frequently asked questions about licensing in Syncfusion Blazor Components and much more.
|
||||
platform: Blazor
|
||||
component: Common
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Licensing FAQ for Syncfusion Blazor Components
|
||||
|
||||
## How to upgrade from Trial version after purchasing a license
|
||||
|
||||
To upgrade from trial version, there are two possible solutions.
|
||||
|
||||
* Uninstall the trial version and install the fully licensed build from the [License & Downloads](https://www.syncfusion.com/account/downloads) section of our website.
|
||||
|
||||
* If you are using Syncfusion controls from [nuget.org](http://172.16.0.76/aspnet-core/licensing/licensing-faq/(https:/www.nuget.org/packages?q=syncfusion)), replace the currently used trial license key with a paid license key that can be generated from the [License & Downloads](https://www.syncfusion.com/account/downloads) section of our website. Refer to [this](https://help.syncfusion.com/common/essential-studio/licensing/license-key#how-to-register-the-syncfusion-license-key) topic for more information regarding registering the license in the application.
|
||||
|
||||
> License registration is not required if you reference Syncfusion assemblies from Licensed installer. These licensing changes applicable to all evaluators who refers the Syncfusion assemblies from evaluation installer and those who use Syncfusion NuGet packages from [nuget.org](https://www.nuget.org/).
|
||||
|
||||
## Where can I get a license key
|
||||
|
||||
License keys can be generated from the [License & Downloads](https://syncfusion.com/account/downloads) or [Trail & Downloads](https://www.syncfusion.com/account/manage-trials/downloads) section of the Syncfusion website.
|
||||
|
||||
|
||||
|
||||
Syncfusion license keys are **version and platform specific**, refer to the [KB](https://www.syncfusion.com/kb/8976/how-to-generate-license-key-for-licensed-products) to generate the license key for the required version and platform. Also, refer this [KB](https://www.syncfusion.com/kb/8951/which-version-syncfusion-license-key-should-i-use-in-my-application) to know about which version of the Syncfusion license key should be used in the application.
|
||||
|
||||
## Registering Syncfusion account for direct NuGet.org user
|
||||
|
||||
If you have directly obtained Syncfusion assemblies from [NuGet.org](http://nuget.org/) and do not have a Syncfusion account, follow the steps to obtain a free 30-day trial license key:
|
||||
|
||||
* Register for a free Syncfusion account [here](https://www.syncfusion.com/account/register).
|
||||
* Go to the start trials [page](https://syncfusion.com/account/manage-trials/start-trials) and start a trial.
|
||||
* Finally proceed to the [Trial & Downloads section](https://www.syncfusion.com/account/manage-trials/downloads) to obtain the [license key](https://blazor.syncfusion.com/documentation/licensing/generating-license-keys).
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
---
|
||||
layout: post
|
||||
title: About Syncfusion Blazor Licensing | Syncfusion
|
||||
description: Learn here about Syncfusion Blazor licensing, how to generate the license key, how to register the license key, and more details.
|
||||
platform: Blazor
|
||||
component: Common
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Syncfusion Licensing in Blazor
|
||||
|
||||
We have introduced a new licensing system starting with version 16.2.0.x release of Essential Studio. These modifications apply to all evaluators and only to paid customers who use NuGet packages from [nuget.org](https://www.nuget.org/packages?q=syncfusion). Starting with v16.2.0.x, if you use the evaluation installer or the NuGet feed to reference Syncfusion assemblies, you must also include the corresponding platform and version license key in your projects.
|
||||
|
||||
## Difference between unlock key and license key
|
||||
|
||||
Please note that this license key is different from the installer unlock key that you might have used in the past and needs to be separately generated from Syncfusion website. Refer [this](https://www.syncfusion.com/kb/8950/difference-between-the-unlock-key-and-licensing-key) KB article to know more about difference between the Syncfusion Unlock Key and the Syncfusion License Key.
|
||||
|
||||
Following licensing error will be shown if the license key is not registered in your projects, while using assemblies from evaluation installer or from the [nuget.org](https://www.nuget.org/packages?q=syncfusion).
|
||||
|
||||
> This application was built using a trial version of Syncfusion Essential Studio. Please include a valid license to permanently remove this license validation message. You can also obtain a free 30 day evaluation license to temporarily remove this message during the evaluation period. Please refer to this [help topic](https://help.syncfusion.com/common/essential-studio/licensing/license-key) for more information.
|
||||
|
|
@ -54,7 +54,7 @@ The numeric scale is used to represent the numeric values of data in a Range Sel
|
|||
|
||||
### Range
|
||||
|
||||
The minimum and the maximum of the scale will be calculated automatically based on the provided data. It can be customized by using the [Minimum](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfRangeNavigator.html#Syncfusion_Blazor_Charts_SfRangeNavigator_Minimum), the [Maximum](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfRangeNavigator.html#Syncfusion_Blazor_Charts_SfRangeNavigator_Maximum), and the [Interval](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfRangeNavigator.html#Syncfusion_Blazor_Charts_SfRangeNavigator_Interval) properties.
|
||||
The minimum and the maximum of the scale will be calculated automatically based on the provided data. It can be customized by using the [Minimum](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfRangeNavigator.html#Syncfusion_Blazor_Charts_SfRangeNavigator_Minimum), [Maximum](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfRangeNavigator.html#Syncfusion_Blazor_Charts_SfRangeNavigator_Maximum), and [Interval](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfRangeNavigator.html#Syncfusion_Blazor_Charts_SfRangeNavigator_Interval) properties.
|
||||
|
||||
```cshtml
|
||||
|
||||
|
|
@ -536,7 +536,7 @@ The [LabelFormat](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts
|
|||
|
||||
|
||||
|
||||
The following table shows the results of applying some common DateTime formats to the [LabelFormat]((https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfRangeNavigator.html#Syncfusion_Blazor_Charts_SfRangeNavigator_LabelFormat)) property.
|
||||
The following table shows the results of applying some common DateTime formats to the [LabelFormat](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfRangeNavigator.html#Syncfusion_Blazor_Charts_SfRangeNavigator_LabelFormat) property.
|
||||
|
||||
<!-- markdownlint-disable MD033 -->
|
||||
<table>
|
||||
|
|
|
|||
|
|
@ -29,7 +29,6 @@ The rendered Range Selector can be printed directly from the browser by calling
|
|||
</SfButton>
|
||||
|
||||
@code {
|
||||
|
||||
public SfRangeNavigator RangeObj;
|
||||
|
||||
public class StockDetails
|
||||
|
|
@ -82,7 +81,6 @@ The rendered Range Selector can be exported to **JPEG**, **PNG**, **SVG**, or **
|
|||
</SfButton>
|
||||
|
||||
@code {
|
||||
|
||||
public SfRangeNavigator RangeObj;
|
||||
|
||||
public class StockDetails
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ documentation: ug
|
|||
|
||||
## Gridline Customization
|
||||
|
||||
The gridlines indicate axis divisions by drawing the chart plot. Gridlines include helpful cues to the user, particularly for large or complicated charts. The [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartCommonMajorGridLines.html#Syncfusion_Blazor_Charts_ChartCommonMajorGridLines_Width), the [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartCommonMajorGridLines.html#Syncfusion_Blazor_Charts_ChartCommonMajorGridLines_Color), and the [DashArray](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartCommonMajorGridLines.html#Syncfusion_Blazor_Charts_ChartCommonMajorGridLines_DashArray) of the major gridlines can be customized by using the [RangeNavigatorMajorGridLines](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorMajorGridLines.html) setting.
|
||||
The gridlines indicate axis divisions by drawing the chart plot. Gridlines include helpful cues to the user, particularly for large or complicated charts. The [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartCommonMajorGridLines.html#Syncfusion_Blazor_Charts_ChartCommonMajorGridLines_Width), [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartCommonMajorGridLines.html#Syncfusion_Blazor_Charts_ChartCommonMajorGridLines_Color), and [DashArray](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartCommonMajorGridLines.html#Syncfusion_Blazor_Charts_ChartCommonMajorGridLines_DashArray) of the major gridlines can be customized by using the [RangeNavigatorMajorGridLines](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorMajorGridLines.html) setting.
|
||||
|
||||
```cshtml
|
||||
|
||||
|
|
@ -50,7 +50,7 @@ The gridlines indicate axis divisions by drawing the chart plot. Gridlines inclu
|
|||
|
||||
## Tickline Customization
|
||||
|
||||
Ticklines are the small lines which is drawn on the axis line representing the axis labels. Ticklines will be drawn outside the axis by default. The [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartCommonMajorTickLines.html#Syncfusion_Blazor_Charts_ChartCommonMajorTickLines_Width), the [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartCommonMajorTickLines.html#Syncfusion_Blazor_Charts_ChartCommonMajorTickLines_Color), and the [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartCommonMajorTickLines.html#Syncfusion_Blazor_Charts_ChartCommonMajorTickLines_Height) of the major ticklines can be customized by using the [RangeNavigatorMajorTickLines](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorMajorTickLines.html) setting.
|
||||
Ticklines are the small lines which is drawn on the axis line representing the axis labels. Ticklines will be drawn outside the axis by default. The [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartCommonMajorTickLines.html#Syncfusion_Blazor_Charts_ChartCommonMajorTickLines_Width), [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartCommonMajorTickLines.html#Syncfusion_Blazor_Charts_ChartCommonMajorTickLines_Color), and [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartCommonMajorTickLines.html#Syncfusion_Blazor_Charts_ChartCommonMajorTickLines_Height) of the major ticklines can be customized by using the [RangeNavigatorMajorTickLines](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorMajorTickLines.html) setting.
|
||||
|
||||
```cshtml
|
||||
|
||||
|
|
|
|||
|
|
@ -17,13 +17,12 @@ The multi-level labels for the Range Selector can be enabled by setting the [Ena
|
|||
|
||||
@using Syncfusion.Blazor.Charts
|
||||
|
||||
<SfRangeNavigator DataSource="@StockInfo" XName="X" YName="Y" LabelPosition="AxisPosition.Outside"
|
||||
<SfRangeNavigator DataSource="@StockInfo" XName="X" YName="Y" LabelPosition="AxisPosition.Outside"
|
||||
EnableGrouping="true" IntervalType="RangeIntervalType.Quarter" Value="@Value" ValueType="RangeValueType.DateTime">
|
||||
<RangeNavigatorRangeTooltipSettings Enable="true"></RangeNavigatorRangeTooltipSettings>
|
||||
</SfRangeNavigator>
|
||||
|
||||
@code {
|
||||
|
||||
public class StockDetails
|
||||
{
|
||||
public DateTime X { get; set; }
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ documentation: ug
|
|||
|
||||
# Lightweight in Blazor Range Selector Component
|
||||
|
||||
By default, when the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfRangeNavigator.html#Syncfusion_Blazor_Charts_SfRangeNavigator_DataSource) for [RangeNavigatorSeries](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorSeries.html) is empty, a lightweight Range Selector will be shown without Chart. The following code example shows the lightweight Range Selector.
|
||||
By default, when the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfRangeNavigator.html#Syncfusion_Blazor_Charts_SfRangeNavigator_DataSource) for [RangeNavigatorSeries](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorSeries.html) is empty, a lightweight Range Selector will be shown without Chart.
|
||||
|
||||
```cshtml
|
||||
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ The period selector allows to choose a time range with specific periods.
|
|||
|
||||
## Periods
|
||||
|
||||
An array of objects that allows the users to specify pre-defined time intervals. The [Interval](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorPeriod.html#Syncfusion_Blazor_Charts_RangeNavigatorPeriod_Interval) property specifies the count value of the button, the [Selected](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorPeriod.html#Syncfusion_Blazor_Charts_RangeNavigatorPeriod_Selected) property allows the users to select the period button initially, and the [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorPeriod.html#Syncfusion_Blazor_Charts_RangeNavigatorPeriod_Text) property specifies the text to be displayed on the button. The [IntervalType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorPeriod.html#Syncfusion_Blazor_Charts_RangeNavigatorPeriod_IntervalType) property allows the users to customize the interval type, and it supports the following types:
|
||||
An array of objects that allows the users to specify pre-defined time intervals. The [Interval](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorPeriod.html#Syncfusion_Blazor_Charts_RangeNavigatorPeriod_Interval) property specifies the count value of the button, the [Selected](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorPeriod.html#Syncfusion_Blazor_Charts_RangeNavigatorPeriod_Selected) property allows the users to select the period button initially, and the [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorPeriod.html#Syncfusion_Blazor_Charts_RangeNavigatorPeriod_Text) property specifies the text to be displayed on the button. The [IntervalType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorPeriod.html#Syncfusion_Blazor_Charts_RangeNavigatorPeriod_IntervalType) property allows the users to customize the interval type and it supports the following types:
|
||||
|
||||
* Auto
|
||||
* Years
|
||||
|
|
|
|||
|
|
@ -23,7 +23,6 @@ The Range Selector supports right-to-left (RTL), which can be enabled with the [
|
|||
</SfRangeNavigator>
|
||||
|
||||
@code {
|
||||
|
||||
public class StockDetails
|
||||
{
|
||||
public DateTime Date { get; set; }
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ This section describes how to bind the value to the Range Selector component in
|
|||
* One-way binding
|
||||
* Two-way binding
|
||||
|
||||
**One-way binding**
|
||||
### One-way binding
|
||||
|
||||
As shown in the following example, the [Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfRangeNavigator.html#Syncfusion_Blazor_Charts_SfRangeNavigator_Value) property can be used directly as an object or from code-behind for the Range Selector.
|
||||
|
||||
|
|
@ -67,7 +67,7 @@ As shown in the following example, the [Value](https://help.syncfusion.com/cr/bl
|
|||
|
||||
|
||||
|
||||
**Two-way binding**
|
||||
### Two-way binding
|
||||
|
||||
The **@bind-Value** code-behind attribute in the Range Selector can be used to achieve two-way binding. The following example shows how to achieve two-way binding for the Range Selector.
|
||||
|
||||
|
|
|
|||
|
|
@ -113,7 +113,6 @@ To render a Step line series, use series [Type](https://help.syncfusion.com/cr/b
|
|||
</SfRangeNavigator>
|
||||
|
||||
@code {
|
||||
|
||||
public class StockDetails
|
||||
{
|
||||
public DateTime Date { get; set; }
|
||||
|
|
|
|||
|
|
@ -302,4 +302,124 @@ We can customize the day header cells and month header cells in the TimelineYear
|
|||
public Nullable<int> RecurrenceID { get; set; }
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Customizing header indent cells
|
||||
|
||||
It is possible to customize the header indent cells using the `HeaderIndentTemplate` option and change the look and appearance in both the vertical and timeline views. In vertical views, You can customize the header indent cells at the hierarchy level and you can customize the resource header left indent cell in timeline views using the template option.
|
||||
|
||||
**Example:** To customize the header left indent cell to display resources text, refer to the below code example.
|
||||
|
||||
```cshtml
|
||||
@using Syncfusion.Blazor.Schedule
|
||||
|
||||
<SfSchedule TValue="AppointmentData" Height="550px" @bind-SelectedDate="@CurrentDate">
|
||||
<ScheduleGroup Resources="@Resources"></ScheduleGroup>
|
||||
<ScheduleResources>
|
||||
<ScheduleResource TItem="ResourceData" TValue="int[]" DataSource="@OwnersData" Field="OwnerId" Title="Owner" Name="Owners" TextField="OwnerText" IdField="Id" GroupIDField="OwnerGroupId" ColorField="OwnerColor" AllowMultiple="true"></ScheduleResource>
|
||||
</ScheduleResources>
|
||||
<ScheduleEventSettings DataSource="@DataSource"></ScheduleEventSettings>
|
||||
<ScheduleTemplates>
|
||||
<HeaderIndentTemplate>
|
||||
<div class='e-resource-text'>
|
||||
<div class="text">Resources</div>
|
||||
</div>
|
||||
</HeaderIndentTemplate>
|
||||
</ScheduleTemplates>
|
||||
<ScheduleViews>
|
||||
<ScheduleView Option="View.Day"></ScheduleView>
|
||||
<ScheduleView Option="View.Week"></ScheduleView>
|
||||
<ScheduleView Option="View.WorkWeek"></ScheduleView>
|
||||
<ScheduleView Option="View.TimelineWeek"></ScheduleView>
|
||||
<ScheduleView Option="View.TimelineMonth"></ScheduleView>
|
||||
</ScheduleViews>
|
||||
</SfSchedule>
|
||||
|
||||
<style>
|
||||
.e-schedule .e-timeline-view .e-resource-left-td {
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
.e-schedule .e-timeline-view .e-resource-left-td .e-resource-text,
|
||||
.e-schedule .e-timeline-month-view .e-resource-left-td .e-resource-text {
|
||||
font-weight: 500;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.e-schedule .e-timeline-view .e-resource-left-td .e-resource-text > div {
|
||||
border-right: 1px solid rgba(0, 0, 0, 0.12);
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.12);
|
||||
flex: 0 0 33.3%;
|
||||
font-weight: 500;
|
||||
height: 36px;
|
||||
line-height: 34px;
|
||||
padding-left: 50px;
|
||||
}
|
||||
|
||||
.e-schedule .e-timeline-month-view .e-resource-left-td .e-resource-text > div {
|
||||
border-right: 1px solid rgba(0, 0, 0, 0.12);
|
||||
flex: 0 0 33.3%;
|
||||
font-weight: 500;
|
||||
height: 38px;
|
||||
line-height: 34px;
|
||||
padding-left: 50px;
|
||||
}
|
||||
|
||||
.e-schedule .e-vertical-view .e-left-indent-wrap table tbody td.e-resource-cells {
|
||||
border-bottom-color: rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.e-schedule .e-vertical-view .e-left-indent-wrap table tbody td.e-resource-cells .e-resource-text {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.e-schedule .e-vertical-view .e-left-indent-wrap table tbody td.e-header-cells .e-resource-text,
|
||||
.e-schedule .e-vertical-view .e-left-indent-wrap table tbody td.e-all-day-cells .e-resource-text {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
@code{
|
||||
DateTime CurrentDate = new DateTime(2020, 1, 31);
|
||||
public string[] Resources { get; set; } = { "Rooms", "Owners" };
|
||||
public List<ResourceData> RoomData { get; set; } = new List<ResourceData>
|
||||
{
|
||||
new ResourceData{ RoomText = "ROOM 1", Id = 1, RoomColor = "#cb6bb2" },
|
||||
new ResourceData{ RoomText = "ROOM 2", Id = 2, RoomColor = "#56ca85" }
|
||||
};
|
||||
public List<ResourceData> OwnersData { get; set; } = new List<ResourceData>
|
||||
{
|
||||
new ResourceData{ OwnerText = "Nancy", Id = 1, OwnerGroupId = 1, OwnerColor = "#ffaa00" },
|
||||
new ResourceData{ OwnerText = "Steven", Id = 2, OwnerGroupId = 2, OwnerColor = "#f8a398" },
|
||||
new ResourceData{ OwnerText = "Michael", Id = 3, OwnerGroupId = 1, OwnerColor = "#7499e1" }
|
||||
};
|
||||
List<AppointmentData> DataSource = new List<AppointmentData>
|
||||
{
|
||||
new AppointmentData { Id = 1, Subject = "Meeting", StartTime = new DateTime(2020, 1, 31, 9, 30, 0) , EndTime = new DateTime(2020, 1, 31, 11, 0, 0), OwnerId = 1, RoomId = 1 }
|
||||
};
|
||||
public class AppointmentData
|
||||
{
|
||||
public int Id { get; set; }
|
||||
public string Subject { get; set; }
|
||||
public string Location { get; set; }
|
||||
public DateTime StartTime { get; set; }
|
||||
public DateTime EndTime { get; set; }
|
||||
public string Description { get; set; }
|
||||
public bool IsAllDay { get; set; }
|
||||
public string RecurrenceRule { get; set; }
|
||||
public string RecurrenceException { get; set; }
|
||||
public Nullable<int> RecurrenceID { get; set; }
|
||||
public int OwnerId { get; set; }
|
||||
public int RoomId { get; set; }
|
||||
}
|
||||
public class ResourceData
|
||||
{
|
||||
public int Id { get; set; }
|
||||
public string RoomText { get; set; }
|
||||
public string RoomColor { get; set; }
|
||||
public string OwnerText { get; set; }
|
||||
public string OwnerColor { get; set; }
|
||||
public int OwnerGroupId { get; set; }
|
||||
}
|
||||
}
|
||||
```
|
||||
|
|
@ -13,10 +13,11 @@ To get started with the Blazor application, it has to be ensured that the follow
|
|||
|
||||
## Integrated Development Environment
|
||||
|
||||
By using the following IDEs, the Blazor applications can be developed.
|
||||
Blazor applications can be developed using one of the following IDEs.
|
||||
|
||||
* [Visual Studio 2019](https://visualstudio.microsoft.com/vs/)
|
||||
* [Visual Studio Code](https://code.visualstudio.com/)
|
||||
* [Visual Studio Code](https://code.visualstudio.com/download)
|
||||
* [JetBrains Rider](https://www.jetbrains.com/rider/)
|
||||
|
||||
## Framework & SDK
|
||||
|
||||
|
|
@ -24,4 +25,4 @@ The following tool is required to run the Blazor application.
|
|||
|
||||
* [.NET Core SDK 3.1.8](https://dotnet.microsoft.com/download/dotnet-core/3.1) / [.NET 5.0 SDK](https://dotnet.microsoft.com/download/dotnet/5.0)
|
||||
|
||||
> .NET Core SDK 3.1.8 requires Visual Studio 2019 16.7 or later. <br /> .NET 5.0 requires Visual Studio 2019 16.8 or later.
|
||||
> .NET Core SDK 3.1.8 requires Visual Studio 2019 16.7 or later. <br /> .NET 5.0 requires Visual Studio 2019 16.8 or later.
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
layout: post
|
||||
title: Accessibility in Blazor TreeGrid Component | Syncfusion
|
||||
description: Checkout and learn here all about Accessibility in Syncfusion Blazor TreeGrid component and much more.
|
||||
description: Checkout and learn here all about accessibility in Syncfusion Blazor TreeGrid component and much more.
|
||||
platform: Blazor
|
||||
control: Tree Grid
|
||||
documentation: ug
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
layout: post
|
||||
title: Aggregate in Blazor TreeGrid Component | Syncfusion
|
||||
description: Checkout and learn here all about Aggregate in Syncfusion Blazor TreeGrid component and much more details.
|
||||
description: Checkout and learn here all about aggregate in Syncfusion Blazor TreeGrid component and much more details.
|
||||
platform: Blazor
|
||||
control: Tree Grid
|
||||
documentation: ug
|
||||
|
|
@ -9,7 +9,7 @@ documentation: ug
|
|||
|
||||
# Aggregate in Blazor TreeGrid Component
|
||||
|
||||
Aggregate values are displayed in the Tree Grid footer and in parent row footer for child row aggregate values. It can be configured through [TreeGridAggregateColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridAggregateColumn.html) property. [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridAggregateColumn~Field.html) and [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridAggregateColumn~Type.html) are the minimum properties required to represent an aggregate column.
|
||||
Aggregate values are displayed in the Tree Grid footer and in parent row footer for child row aggregate values. It can be configured through [TreeGridAggregateColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridAggregateColumn.html) property. The [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridAggregateColumn~Field.html) and [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridAggregateColumn~Type.html) are the minimum properties required to represent an aggregate column.
|
||||
|
||||
By default, the aggregate value can be displayed in the Tree Grid footer, and footer of child rows. To show the aggregate value in one of the cells, use the [FooterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridAggregateColumn~FooterTemplate.html).
|
||||
|
||||
|
|
@ -125,15 +125,13 @@ namespace TreeGridComponent.Data {
|
|||
|
||||
{% endtabs %}
|
||||
|
||||
The following output is displayed as a result of the above code example.
|
||||
|
||||
|
||||
|
||||
> The aggregate values must be accessed inside the template using their corresponding `AggregateType`.
|
||||
|
||||
## How to format aggregate value
|
||||
|
||||
You can format the aggregate value result by using the [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridAggregateColumn~Format.html) property.
|
||||
The aggregate value result can be formatted by using the [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridAggregateColumn~Format.html) property.
|
||||
|
||||
{% tabs %}
|
||||
|
||||
|
|
@ -217,8 +215,6 @@ namespace TreeGridComponent.Data {
|
|||
|
||||
{% endtabs %}
|
||||
|
||||
The following output is displayed as a result of the above code example.
|
||||
|
||||
|
||||
|
||||
<!-- Custom aggregate
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
layout: post
|
||||
title: Cell in Blazor TreeGrid Component | Syncfusion
|
||||
description: Checkout and learn here all about Cell in Syncfusion Blazor TreeGrid component and much more details.
|
||||
description: Checkout and learn here all about cell in Syncfusion Blazor TreeGrid component and much more details.
|
||||
platform: Blazor
|
||||
control: Tree Grid
|
||||
documentation: ug
|
||||
|
|
@ -71,8 +71,6 @@ public class TreeData
|
|||
|
||||
{% endtabs %}
|
||||
|
||||
The following output is displayed as a result of the above code example.
|
||||
|
||||
|
||||
|
||||
## Customize cell styles
|
||||
|
|
@ -169,8 +167,6 @@ public class TreeData
|
|||
|
||||
{% endtabs %}
|
||||
|
||||
The following output is displayed as a result of the above code example.
|
||||
|
||||
|
||||
|
||||
## Auto wrap
|
||||
|
|
@ -240,8 +236,6 @@ public class TreeData
|
|||
|
||||
{% endtabs %}
|
||||
|
||||
The following output is displayed as a result of the above code example.
|
||||
|
||||
|
||||
|
||||
## Grid lines
|
||||
|
|
@ -319,8 +313,6 @@ public class TreeData
|
|||
|
||||
{% endtabs %}
|
||||
|
||||
The following output is displayed as a result of the above code example.
|
||||
|
||||
|
||||
|
||||
> By default, the tree grid renders with **Default** mode.
|
||||
|
|
@ -396,7 +388,6 @@ public class TreeData
|
|||
|
||||
{% endtabs %}
|
||||
|
||||
The following output is displayed as a result of the above code example.
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
layout: post
|
||||
title: Clipboard in Blazor TreeGrid Component | Syncfusion
|
||||
description: Checkout and learn here all about Clipboard in Syncfusion Blazor TreeGrid component and much more details.
|
||||
description: Checkout and learn here all about clipboard in Syncfusion Blazor TreeGrid component and much more details.
|
||||
platform: Blazor
|
||||
control: Tree Grid
|
||||
documentation: ug
|
||||
|
|
@ -83,7 +83,7 @@ namespace TreeGridComponent.Data {
|
|||
|
||||
## Copy to clipboard by external buttons
|
||||
|
||||
To copy selected rows or cells data into the clipboard with help of external buttons, you need to invoke the `copy` method.
|
||||
To copy the data of the selected rows or cells into the clipboard with help of external buttons, invoke the `copy` method.
|
||||
|
||||
{% tabs %}
|
||||
|
||||
|
|
@ -167,15 +167,15 @@ namespace TreeGridComponent.Data {
|
|||
|
||||
## Copy Hierarchy Modes
|
||||
|
||||
Tree Grid provides support for a set of copy modes with `CopyHierarchyMode` property. The below are the type of filter mode available in Tree Grid.
|
||||
Tree Grid provides support for a set of copy modes with `CopyHierarchyMode` property. The below are the type of filter mode available in the Tree Grid.
|
||||
|
||||
* **Parent** : This is the default copy hierarchy mode in Tree Grid. Clipboard value will have the selected records with its parent records, if the selected records not have any parent record then the selected record will be in clipboard.
|
||||
* **Parent** : This is the default copy hierarchy mode in the Tree Grid. Clipboard value will have the selected records with its parent records, if the selected records does not have any parent record then the selected record will be in clipboard.
|
||||
|
||||
* **Child** : Clipboard value will have the selected records with its child record. If the selected records do not have any child record then the selected records will be in clipboard.
|
||||
|
||||
* **Both** : Clipboard value will have the selected records with its both parent and child record. If the selected records do not have any parent and child record then the selected records alone are copied to clipboard.
|
||||
* **Both** : Clipboard value will have the selected records with its both parent and child record. If the selected records do not have any parent and child record then the selected records alone are copied to the clipboard.
|
||||
|
||||
* **None** : Only the Selected records will be in clipboard.
|
||||
* **None** : Only the selected records will be in the clipboard.
|
||||
|
||||
{% tabs %}
|
||||
|
||||
|
|
@ -290,7 +290,7 @@ namespace TreeGridComponent.Data {
|
|||
|
||||
## AutoFill
|
||||
|
||||
AutoFill Feature allows you to copy the data of selected cells and paste it to another cells by just dragging the autofill icon of the selected cells up to required cells. This feature is enabled by defining `EnableAutoFill` property as true.
|
||||
AutoFill Feature allows to copy the data of the selected cells and paste it to another cells by just dragging the autofill icon of the selected cells up to the required cells. This feature is enabled by defining `EnableAutoFill` property as true.
|
||||
|
||||
{% tabs %}
|
||||
|
||||
|
|
@ -363,12 +363,12 @@ namespace TreeGridComponent.Data {
|
|||
|
||||
### Limitations of AutoFill
|
||||
|
||||
* Since the string values are not parsed to number and date type, so when the selected string type cells are dragged to number type cells then it will display as **NaN**. For date type cells, when the selected string type cells are dragged to date type cells then it will display as an **empty cell**.
|
||||
* Since the string values are not parsed to number and date type, so when the selected string type cells are dragged to the number type cells then it will be displayed as **NaN**. For date type cells, when the selected string type cells are dragged to date type cells then it will be displayed as an **empty cell**.
|
||||
* Linear series and the sequential data generations are not supported in this autofill feature.
|
||||
|
||||
## Paste
|
||||
|
||||
You can able to copy the content of a cell or a group of cells by selecting the cells and pressing <kbd>Ctrl + C</kbd> shortcut key and paste it to another set of cells by selecting the cells and pressing <kbd>Ctrl + V</kbd> shortcut key.
|
||||
The content of a cell or a group of cells can be copied by selecting the cells and pressing <kbd>Ctrl + C</kbd> shortcut key and paste it to another set of cells by selecting the cells, and pressing <kbd>Ctrl + V</kbd> shortcut key.
|
||||
|
||||
{% tabs %}
|
||||
|
||||
|
|
@ -436,8 +436,8 @@ namespace TreeGridComponent.Data {
|
|||
|
||||
{% endtabs %}
|
||||
|
||||
> To perform paste functionality, it requires the selection `Mode` to be `Cell`, `cellSelectionMode` to be `Box` and also Batch Editing should be enabled.
|
||||
> To perform paste functionality, it requires the selection `Mode` to be `Cell`, `cellSelectionMode` to be `Box` and also Batch Editing should be enabled.
|
||||
|
||||
### Limitations of Paste Functionality
|
||||
|
||||
* Since the string values are not parsed to number and date type, so when the copied string type cells are pasted to number type cells then it will display as **NaN**. For date type cells, when the copied string format cells are pasted to date type cells then it will display as an **empty cell**.
|
||||
* Since the string values are not parsed to number and date type, so when the copied string type cells are pasted to number type cells then it will be displayed as **NaN**. For date type cells, when the copied string format cells are pasted to date type cells then it will be displayed as an **empty cell**.
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
layout: post
|
||||
title: Columns in Blazor TreeGrid Component | Syncfusion
|
||||
description: Checkout and learn here all about Columns in Syncfusion Blazor TreeGrid component and much more details.
|
||||
description: Checkout and learn here all about columns in Syncfusion Blazor TreeGrid component and much more details.
|
||||
platform: Blazor
|
||||
control: Tree Grid
|
||||
documentation: ug
|
||||
|
|
@ -9,13 +9,13 @@ documentation: ug
|
|||
|
||||
# Columns in Blazor TreeGrid Component
|
||||
|
||||
The column definitions are used as the datasource schema in the Tree Grid. This plays a vital role in rendering column values in the required format. The tree grid operations such as sorting, filtering and searching etc. are performed based on column definitions. The [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridColumn~Field.html) property of [TreeGridColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridColumns.html) tag helper is necessary to map the data source values in Tree Grid columns.
|
||||
The column definitions are used as the datasource schema in the Tree Grid. This plays a vital role in rendering column values in the required format. The tree grid operations such as sorting, filtering and searching etc. are performed based on the column definitions. The [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridColumn~Field.html) property of [TreeGridColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridColumns.html) tag helper is necessary to map the data source values in Tree Grid columns.
|
||||
|
||||
> If the column [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridColumn~Field.html) is not specified in the dataSource, the column values will be empty. <br />[TreeColumnIndex](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.SfTreeGrid~TreeColumnIndex.html) property denotes the column that is used to expand and collapse child rows.
|
||||
|
||||
## Complex data binding
|
||||
|
||||
You can achieve the complex data binding in the Tree Grid by using the dot(.) operator in the column.field. In the below examples **Task.TaskName** and **Task.Duration** are complex data.
|
||||
The complex data binding in the Tree Grid can be achieved by using the dot(.) operator in the column.field. In the below examples **Task.TaskName** and **Task.Duration** are complex data.
|
||||
|
||||
```cshtml
|
||||
@using Syncfusion.Blazor.TreeGrid
|
||||
|
|
@ -59,12 +59,11 @@ You can achieve the complex data binding in the Tree Grid by using the dot(.) op
|
|||
}
|
||||
```
|
||||
|
||||
The following image represents complex data binding
|
||||
|
||||
|
||||
### Expando data binding
|
||||
|
||||
Tree Grid supports Complex Data Binding with ExpandoObject. In the below examples **Task.TaskName** and **Task.Duration** are complex data with ExpandoObject
|
||||
Tree Grid supports Complex Data Binding with ExpandoObject. In the below examples **Task.TaskName** and **Task.Duration** are complex data with ExpandoObject.
|
||||
|
||||
```cshtml
|
||||
@using Syncfusion.Blazor.TreeGrid;
|
||||
|
|
@ -130,12 +129,11 @@ Tree Grid supports Complex Data Binding with ExpandoObject. In the below example
|
|||
}
|
||||
```
|
||||
|
||||
The following image represents complex data binding with expandoObject
|
||||
|
||||
|
||||
## Header template
|
||||
|
||||
You can customize the header element by using the [HeaderTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridColumn~HeaderTemplate.html) property.
|
||||
The header element can be customized by using the [HeaderTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridColumn~HeaderTemplate.html) property.
|
||||
|
||||
{% tabs %}
|
||||
|
||||
|
|
@ -224,7 +222,6 @@ public class Employee
|
|||
|
||||
{% endtabs %}
|
||||
|
||||
The following output is displayed as a result of the above code example.
|
||||
|
||||
|
||||
|
||||
|
|
@ -232,7 +229,7 @@ The following output is displayed as a result of the above code example.
|
|||
|
||||
## Header text
|
||||
|
||||
By default, column header title is displayed from column [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridColumn~Field.html) value. To override the default header title, you have to define the [HeaderText](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridColumn~HeaderText.html) value.
|
||||
By default, column header title is displayed from column [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridColumn~Field.html) value. To override the default header title, define the [HeaderText](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridColumn~HeaderText.html) value.
|
||||
|
||||
{% tabs %}
|
||||
|
||||
|
|
@ -299,15 +296,13 @@ public class TreeData
|
|||
|
||||
{% endtabs %}
|
||||
|
||||
The following output is displayed as a result of the above code example.
|
||||
|
||||
|
||||
|
||||
> If both the [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridColumn~Field.html) and [HeaderText](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridColumn~HeaderText.html) are not defined in the column, the column renders with **empty** header text.
|
||||
|
||||
## Format
|
||||
|
||||
To format cell values based on specific culture, use the [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridColumn~Format.html) property of [TreeGridColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridColumns.html) tag helper. The Tree Grid uses **Internalization** library to format the number values.
|
||||
To format cell values based on specific culture, use the [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridColumn~Format.html) property of the[TreeGridColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridColumns.html) tag helper. The Tree Grid uses **Internalization** library to format the number values.
|
||||
|
||||
{% tabs %}
|
||||
|
||||
|
|
@ -388,9 +383,9 @@ P | Denotes percentage type | The percentage format expects the input value to b
|
|||
|
||||
### Date formatting
|
||||
|
||||
You can format date values using built-in date format string.
|
||||
The date values can be formatted using built-in date format string.
|
||||
|
||||
For built-in date format you can specify [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridColumn~Format.html) property as string (Example: *d*).
|
||||
For built-in date format specify the [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridColumn~Format.html) property as string (Example: *d*).
|
||||
<!-- Please refer to the link to know more about [`Date formatting`](../../common/internationalization/#manipulating-datetime). -->
|
||||
|
||||
{% tabs %}
|
||||
|
|
@ -458,13 +453,12 @@ public class TreeDataFormat
|
|||
|
||||
{% endtabs %}
|
||||
|
||||
The following output is displayed as a result of the above code example.
|
||||
|
||||
|
||||
|
||||
## AutoFit specific columns
|
||||
|
||||
The **AutoFitColumns** method resizes the column to fit the widest cell's content without wrapping. You can autofit a specific column at initial rendering by invoking the [AutoFitColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.SfTreeGrid~AutoFitColumns.html) method in [DataBound](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.SfTreeGrid~DataBound.html) event.
|
||||
The **AutoFitColumns** method resizes the column to fit the widest cell's content without wrapping. A specific column can be autofitted at initial rendering by invoking the [AutoFitColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.SfTreeGrid~AutoFitColumns.html) method in [DataBound](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.SfTreeGrid~DataBound.html) event.
|
||||
|
||||
{% tabs %}
|
||||
|
||||
|
|
@ -538,11 +532,9 @@ public class TreeData
|
|||
|
||||
{% endtabs %}
|
||||
|
||||
The following output is displayed as a result of the above code example.
|
||||
|
||||
|
||||
|
||||
> You can autofit all the columns by invoking the **AutoFitColumns** method without column names.
|
||||
> All the columns can be autofitted by invoking the **AutoFitColumns** method without column names.
|
||||
|
||||
## Reorder
|
||||
|
||||
|
|
@ -610,7 +602,7 @@ public class TreeData
|
|||
|
||||
{% endtabs %}
|
||||
|
||||
> You can disable reordering a particular column by setting the [AllowReordering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.SfTreeGrid~AllowReordering.html) property of [TreeGridColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridColumns.html) tag helper to false.
|
||||
> Reordering a particular column can be disabled by setting the [AllowReordering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.SfTreeGrid~AllowReordering.html) property of [TreeGridColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridColumns.html) tag helper to false.
|
||||
|
||||
### Reorder multiple columns
|
||||
|
||||
|
|
@ -689,7 +681,7 @@ public class TreeData
|
|||
|
||||
### Lock columns
|
||||
|
||||
You can lock columns by using [LockColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridColumn~LockColumn.html) property. The locked columns will be moved to the first position. Also you can’t reorder its position.
|
||||
Columns can be locked by using the [LockColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridColumn~LockColumn.html) property. The locked columns will be moved to the first position. Also this position can’t be reordered.
|
||||
|
||||
In the below example, Duration column is locked and its reordering functionality is disabled.
|
||||
|
||||
|
|
@ -757,8 +749,6 @@ public class TreeData
|
|||
|
||||
{% endtabs %}
|
||||
|
||||
The following output is displayed as a result of the above code example.
|
||||
|
||||
|
||||
|
||||
## Column resizing
|
||||
|
|
@ -829,12 +819,12 @@ public class TreeData
|
|||
|
||||
{% endtabs %}
|
||||
|
||||
> * You can disable resizing for a particular column by setting the [AllowResizing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridColumn~AllowResizing.html) property of [TreeGridColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridColumns.html) tag helper to false.
|
||||
> * In RTL mode, you can click and drag the left edge of the header cell to resize the column.
|
||||
> * Resizing for a particular column can be disabled by setting the [AllowResizing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridColumn~AllowResizing.html) property of the [TreeGridColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridColumns.html) tag helper to false.
|
||||
> * In RTL mode, click and drag the left edge of the header cell to resize the column.
|
||||
|
||||
### Min and max width
|
||||
|
||||
Column resize can be restricted between minimum and maximum width by defining the [MinWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridColumn~MinWidth.html) and [MaxWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridColumn~MaxWidth.html) properties of [TreeGridColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridColumns.html) tag helper.
|
||||
Column resize can be restricted between minimum and maximum width by defining the [MinWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridColumn~MinWidth.html) and [MaxWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridColumn~MaxWidth.html) properties of the [TreeGridColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridColumns.html) tag helper.
|
||||
|
||||
In the following sample, minimum and maximum width are defined for **Duration**, and **Task Name** columns.
|
||||
|
||||
|
|
@ -904,7 +894,7 @@ public class TreeData
|
|||
|
||||
### Resize stacked column
|
||||
|
||||
Stacked columns can be resized by clicking and dragging the right edge of the stacked column header. While dragging, the width of the respective child columns will be resized at the same time. You can disable resize for particular stacked column by setting [AllowResizing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridColumn~AllowResizing.html) as **false** to its columns.
|
||||
Stacked columns can be resized by clicking and dragging the right edge of the stacked column header. While dragging, the width of the respective child columns will be resized at the same time. Resize for a particular stacked column can be disabled by setting the [AllowResizing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridColumn~AllowResizing.html) as **false** to its columns.
|
||||
|
||||
{% tabs %}
|
||||
|
||||
|
|
@ -997,8 +987,6 @@ public class ShipmentData
|
|||
|
||||
When the right edge of the header cell is tapped, a floating handler will be visible over the right border of the column. To resize the column, tap and drag the floating handler as needed.
|
||||
|
||||
The following screenshot represents the column resizing in touch device.
|
||||
|
||||
<!-- markdownlint-disable MD033 -->
|
||||
<img src="./images/column-resizing.png" alt="Touch interaction" style="width:320px;height: 620px">
|
||||
<!-- markdownlint-enable MD033 -->
|
||||
|
|
@ -1083,8 +1071,6 @@ public class Employee
|
|||
|
||||
{% endtabs %}
|
||||
|
||||
The following output is displayed as a result of the above code example.
|
||||
|
||||
|
||||
|
||||
> * Tree Grid actions such as editing, filtering and sorting etc. will depend upon the column [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridColumn~Field.html). If the [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridColumn~Field.html) is not specified in the
|
||||
|
|
@ -1093,7 +1079,7 @@ template column, the tree grid actions cannot be performed.
|
|||
|
||||
### Using condition template
|
||||
|
||||
You can render the template elements based on condition.
|
||||
The template elements can be rendered based on condition.
|
||||
|
||||
In the following code, checkbox is rendered based on **Duration** field value.
|
||||
|
||||
|
|
@ -1288,18 +1274,14 @@ public class TreeData
|
|||
|
||||
{% endtabs %}
|
||||
|
||||
The following output is displayed as a result of the above code example.
|
||||
|
||||
|
||||
|
||||
> You can hide the column names in column chooser by defining the [ShowInColumnChooser](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.SfTreeGrid~ShowInColumnChooser.html) property as false.
|
||||
> The column names can be hidden in the column chooser by defining the [ShowInColumnChooser](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.SfTreeGrid~ShowInColumnChooser.html) property as false.
|
||||
|
||||
### Open column chooser by external button
|
||||
|
||||
The column chooser has options to show or hide columns dynamically. It can be enabled by defining the [ShowInColumnChooser](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.SfTreeGrid~ShowInColumnChooser.html) as true.
|
||||
|
||||
In this below example, we have opened column chooser using external button click.
|
||||
|
||||
{% tabs %}
|
||||
|
||||
{% highlight razor %}
|
||||
|
|
@ -1373,15 +1355,13 @@ public class TreeData
|
|||
|
||||
{% endtabs %}
|
||||
|
||||
The following output is displayed as a result of the above code example.
|
||||
|
||||
|
||||
|
||||
> You can hide the column names in column chooser by defining the [ShowInColumnChooser](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.SfTreeGrid~ShowInColumnChooser.html) property as false.
|
||||
> The column names in column chooser can be hidden by defining the [ShowInColumnChooser](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.SfTreeGrid~ShowInColumnChooser.html) property as false.
|
||||
|
||||
## Column menu
|
||||
|
||||
The column menu has options to integrate features like sorting, filtering, and autofit. It will show a menu with the integrated feature when users click on multiple icon of the column. To enable column menu, you need to define the [ShowColumnMenu](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.SfTreeGrid~ShowColumnMenu.html) property as true.
|
||||
The column menu has options to integrate features like sorting, filtering, and autofit. It will show a menu with the integrated feature when users click on multiple icon of the column. To enable column menu, define the [ShowColumnMenu](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.SfTreeGrid~ShowColumnMenu.html) property as true.
|
||||
|
||||
The default items are displayed in following table.
|
||||
|
||||
|
|
@ -1457,17 +1437,15 @@ public class TreeData
|
|||
|
||||
{% endtabs %}
|
||||
|
||||
The following output is displayed as a result of the above code example.
|
||||
|
||||
|
||||
|
||||
> You can disable column menu for a particular column by defining the [ShowColumnMenu](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.SfTreeGrid~ShowColumnMenu.html) property of [TreeGridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridColumn.html) tag helper as false.
|
||||
> The column menu can be disabled for a particular column by defining the [ShowColumnMenu](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.SfTreeGrid~ShowColumnMenu.html) property of the [TreeGridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridColumn.html) tag helper as false.
|
||||
|
||||
## Checkbox column
|
||||
|
||||
To render checkboxes in existing column, you need to set [ShowCheckbox](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridColumn~ShowCheckbox.html) property of [TreeGridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridColumn.html) as **true**.
|
||||
To render checkboxes in the existing column, set the [ShowCheckbox](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridColumn~ShowCheckbox.html) property of the [TreeGridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridColumn.html) as **true**.
|
||||
|
||||
It is also possible to select the rows hierarchically using checkboxes in Tree Grid by enabling [AutoCheckHierarchy](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.SfTreeGrid~AutoCheckHierarchy.html) property. When we check on any parent record checkbox then the child record checkboxes will get checked.
|
||||
It is also possible to select the rows hierarchically using checkboxes in the Tree Grid by enabling [AutoCheckHierarchy](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.SfTreeGrid~AutoCheckHierarchy.html) property. When we check on any parent record checkbox, the child record checkboxes will get checked.
|
||||
|
||||
{% tabs %}
|
||||
|
||||
|
|
@ -1533,13 +1511,11 @@ public class TreeData
|
|||
|
||||
{% endtabs %}
|
||||
|
||||
The following output is displayed as a result of the above code example.
|
||||
|
||||
|
||||
|
||||
## Responsive columns
|
||||
|
||||
You can toggle column visibility based on media queries which are defined at the [HideAtMedia](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridColumn~HideAtMedia.html).
|
||||
The column visibility can be toggled based on the media queries which are defined at the [HideAtMedia](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridColumn~HideAtMedia.html).
|
||||
The [HideAtMedia](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridColumn~HideAtMedia.html) accepts valid [Media Queries]( http://cssmediaqueries.com/what-are-css-media-queries.html).
|
||||
|
||||
{% tabs %}
|
||||
|
|
@ -1604,13 +1580,11 @@ public class TreeData
|
|||
|
||||
{% endtabs %}
|
||||
|
||||
The following output is displayed as a result of the above code example.
|
||||
|
||||
|
||||
|
||||
## Controlling Tree Grid actions
|
||||
|
||||
You can enable or disable tree grid action for a particular column by setting the [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridColumn~AllowFiltering.html), and [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridColumn~AllowSorting.html) properties of [TreeGridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridColumn.html) tag helper.
|
||||
The tree grid action can be enabled or disabled for a particular column by setting the [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridColumn~AllowFiltering.html), and [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridColumn~AllowSorting.html) properties of [TreeGridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridColumn.html) tag helper.
|
||||
|
||||
{% tabs %}
|
||||
|
||||
|
|
@ -1676,7 +1650,7 @@ public class TreeData
|
|||
|
||||
## Show/hide columns by external button
|
||||
|
||||
You can show or hide tree grid columns dynamically using external buttons by invoking the [ShowColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.SfTreeGrid~ShowColumns.html) or [HideColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.SfTreeGrid~HideColumns.html) method.
|
||||
The tree grid columns can be shown or hidden dynamically using the external buttons by invoking the [ShowColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.SfTreeGrid~ShowColumns.html) or [HideColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.SfTreeGrid~HideColumns.html) method.
|
||||
|
||||
{% tabs %}
|
||||
|
||||
|
|
@ -1756,7 +1730,7 @@ public class TreeData
|
|||
|
||||
## How to render boolean values as checkbox
|
||||
|
||||
To render boolean values as checkbox in columns, you need to set [DisplayAsCheckBox](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridColumn~DisplayAsCheckBox.html) property as **true**.
|
||||
To render boolean values as checkbox in columns, set the [DisplayAsCheckBox](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridColumn~DisplayAsCheckBox.html) property as **true**.
|
||||
|
||||
{% tabs %}
|
||||
|
||||
|
|
@ -1824,6 +1798,4 @@ public class TreeData
|
|||
|
||||
{% endtabs %}
|
||||
|
||||
The following output is displayed as a result of the above code example.
|
||||
|
||||
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
layout: post
|
||||
title: Context Menu in Blazor TreeGrid Component | Syncfusion
|
||||
description: Checkout and learn here all about Context Menu in Syncfusion Blazor TreeGrid component and much more.
|
||||
description: Checkout and learn here all about context menu in Syncfusion Blazor TreeGrid component and much more.
|
||||
platform: Blazor
|
||||
control: Tree Grid
|
||||
documentation: ug
|
||||
|
|
@ -9,7 +9,7 @@ documentation: ug
|
|||
|
||||
# Context Menu in Blazor TreeGrid Component
|
||||
|
||||
The Tree Grid has options to show the context menu when right clicked on it. To enable this feature, you need to define either default or custom item in the [ContextMenuItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridModel%601~ContextMenuItems.html) property.
|
||||
The Tree Grid has options to show the context menu when right clicked on it. To enable this feature, define either default or custom item in the [ContextMenuItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridModel%601~ContextMenuItems.html) property.
|
||||
|
||||
The following table lists the default context menu items,
|
||||
|
||||
|
|
@ -80,8 +80,7 @@ The following sample code demonstrates enabling context menu with its default it
|
|||
}
|
||||
```
|
||||
|
||||
The following GIF represents the Tree Grid enabled with default context menu items,
|
||||
|
||||
|
||||
|
||||
## Custom context menu items
|
||||
|
||||
|
|
@ -142,5 +141,4 @@ The following sample code demonstrates defining custom context menu item and its
|
|||
}
|
||||
```
|
||||
|
||||
The following image represents the Tree Grid enabled with custom context menu item,
|
||||
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
layout: post
|
||||
title: Custom Binding in Blazor TreeGrid Component | Syncfusion
|
||||
description: Checkout and learn here all about Custom Binding in Syncfusion Blazor TreeGrid component and much more.
|
||||
description: Checkout and learn here all about custom binding in Syncfusion Blazor TreeGrid component and much more.
|
||||
platform: Blazor
|
||||
control: Tree Grid
|
||||
documentation: ug
|
||||
|
|
@ -9,9 +9,9 @@ documentation: ug
|
|||
|
||||
# Custom Binding in Blazor TreeGrid Component
|
||||
|
||||
The [SfDataManager](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor~Syncfusion.Blazor.Data.SfDataManager.html) has custom adaptor support which allows you to perform manual operations on the data. This can be utilized for implementing custom data binding and editing operations in the Tree Grid component.
|
||||
The [SfDataManager](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor~Syncfusion.Blazor.Data.SfDataManager.html) has custom adaptor support which allows to perform manual operations on the data. This can be utilized for implementing custom data binding and editing operations in the Tree Grid component.
|
||||
|
||||
For implementing custom data binding in Tree Grid, the **DataAdaptor** class is used. This abstract class acts as a base class for the custom adaptor.
|
||||
For implementing custom data binding in the Tree Grid, the **DataAdaptor** class is used. This abstract class acts as a base class for the custom adaptor.
|
||||
|
||||
The **DataAdaptor** abstract class has both synchronous and asynchronous method signatures which can be overridden in the custom adaptor. Following are the method signatures present in this class,
|
||||
|
||||
|
|
@ -215,7 +215,7 @@ public class SelfReferenceData
|
|||
|
||||
If you want to inject some of your service into Custom Adaptor and use the service, then you can achieve your requirement by using below way.
|
||||
|
||||
Initially you need to add CustomAdaptor class as AddScoped in `StartUp.cs` file.
|
||||
Initially, the CustomAdaptor class must be added as AddScoped in `StartUp.cs` file.
|
||||
|
||||
```csharp
|
||||
public void ConfigureServices(IServiceCollection services)
|
||||
|
|
@ -294,7 +294,7 @@ The following sample code demonstrates injecting service into Custom Adaptor,
|
|||
|
||||
## Custom adaptor as Component
|
||||
|
||||
Custom Adaptor can be created as a component when `DataAdaptor` is extended from `OwningComponentBase`. You can create Custom Adaptor from any of the two versions of the class, `DataAdaptor` and `DataAdaptor<T>`.
|
||||
Custom Adaptor can be created as a component when `DataAdaptor` is extended from `OwningComponentBase`. Custom Adaptor can be created from any of the two versions of the class, `DataAdaptor` and `DataAdaptor<T>`.
|
||||
|
||||
Ensure to register your service in **Startup.cs** file.
|
||||
|
||||
|
|
|
|||
|
|
@ -9,24 +9,24 @@ documentation: ug
|
|||
|
||||
# Styling and Appearance in Blazor TreeGrid Component
|
||||
|
||||
To modify the Tree Grid appearance, you need to override the default CSS of Tree Grid. Please find the list of CSS classes and its corresponding section in Tree Grid.
|
||||
To modify the Tree Grid appearance, override the default CSS of Tree Grid. Please find the list of CSS classes and its corresponding section in Tree Grid.
|
||||
|
||||
| Section |CSS class | Purpose of CSS class |
|
||||
| ----- | ----- | ----- |
|
||||
| **Root** | e-treegrid | This classes are in this root element div of the Tree Grid control. |
|
||||
| **Header** | e-gridheader | This class is added in the root element of header element. In this class, You can override thin line between header and content of the Tree Grid. |
|
||||
| | e-table | This class is added at **table** of the Tree Grid header. This CSS class makes table width as 100 %. |
|
||||
| **Header** | e-gridheader | This class is added in the root element of header element. In this class, thin line between header and content of the Tree Grid can be overridden. |
|
||||
| | e-table | This class is added at the **table** of the Tree Grid header. This CSS class makes table width as 100 %. |
|
||||
| | e-columnheader | This class is added at **tr** of the Tree Grid header. |
|
||||
| | e-headercell | This class is added in **th** element of Tree Grid header. You can override background color of header and border color. |
|
||||
| | e-headercelldiv | This class is add in div which present **th** element in the header. we recommend you to use the e-headercelldiv to override skeleton of header. |
|
||||
| **Body** | e-gridcontent | This class is added at root of body content. This is to override background color of the body. |
|
||||
| | e-table | This class is added to table of content. This CSS class makes table width as 100 %. |
|
||||
| | e-altrow | This class is added to alternate rows of Tree Grid. This is to override alternate row color of the Tree Grid. |
|
||||
| | e-headercell | This class is added in **th** element of Tree Grid header. The background color of header and border color can be overridden. |
|
||||
| | e-headercelldiv | This class is added in div which is present in **th** element in the header. Use the e-headercelldiv to override skeleton of header. |
|
||||
| **Body** | e-gridcontent | This class is added at root of the body content. This is to override background color of the body. |
|
||||
| | e-table | This class is added to table of the content. This CSS class makes table width as 100 %. |
|
||||
| | e-altrow | This class is added to the alternate rows of Tree Grid. This is to override alternate row color of the Tree Grid. |
|
||||
| | e-rowcell | This class is added to all cells in the Tree Grid. This is to override cells appearance and styling. |
|
||||
| | e-groupcaption | This class is added to the **td** of group caption which is to change the background color of caption cell. |
|
||||
| | e-selectionbackground | This class is added to rowcell's of the Tree Grid. This is override selection. |
|
||||
| | e-hover | This class adds to row of Tree Grid, while hovering the Tree Grid rows. |
|
||||
| **Pager** | e-pager | This class is added to root element of the pager. This to change appearance of the background color and color of font. |
|
||||
| **Pager** | e-pager | This class is added to root element of the pager. This is to change appearance of the background color and color of font. |
|
||||
| | e-pagercontainer | This class is added to numeric items of the pager. |
|
||||
| | e-parentmsgbar | This class is added to pager info of the pager. |
|
||||
| **Summary** | e-gridfooter | This class is added to root of the summary div. |
|
||||
|
|
|
|||
|
|
@ -23,9 +23,9 @@ Two types of Data binding are possible with the Tree Grid component.
|
|||
* Self-Referential Data binding (Flat Data)
|
||||
* Hierarchical Data binding
|
||||
|
||||
For Self-Referential data binding, you can assign list of business objects to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.SfTreeGrid~DataSource.html) property.
|
||||
For Self-Referential data binding, assign the list of business objects to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.SfTreeGrid~DataSource.html) property.
|
||||
|
||||
For Hierarchy Data binding, the data-source should be assigned as a object array to the **Json** property of the **SfDataManager** and the **Adaptor** property of the SfDataManager should be either **RemoteSaveAdaptor** or **JsonAdaptor**.
|
||||
For Hierarchy Data binding, the data-source should be assigned as an object array to the **Json** property of the **SfDataManager** and the **Adaptor** property of the SfDataManager should be either **RemoteSaveAdaptor** or **JsonAdaptor**.
|
||||
|
||||
### Self-Referential data binding/Flat Data
|
||||
|
||||
|
|
@ -79,7 +79,7 @@ Tree Grid is rendered from Self-Referential data structures by providing two fie
|
|||
|
||||
The [ChildMapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.SfTreeGrid~ChildMapping.html) property is used to map the child records in hierarchy data source.
|
||||
|
||||
The following code example shows you how to bind the hierarchical list data into the Tree Grid component.
|
||||
The following code example shows how to bind the hierarchical list data into the Tree Grid component.
|
||||
|
||||
```cshtml
|
||||
|
||||
|
|
@ -139,7 +139,7 @@ The following code example shows you how to bind the hierarchical list data into
|
|||
|
||||
### DynamicObject binding
|
||||
|
||||
Tree Grid is a generic component which is strongly bound to a model type. There are cases when the model type is unknown during compile type. In such cases you can bind data to the tree grid as list of **DynamicObject**.
|
||||
Tree Grid is a generic component which is strongly bound to a model type. There are cases when the model type is unknown during compile type. In such cases the data can be bound to the tree grid as list of **DynamicObject**.
|
||||
|
||||
**DynamicObject** can be bound to tree grid by assigning to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_DataSource) property. Tree Grid can also perform all kind of supported data operations and editing in DynamicObject.
|
||||
|
||||
|
|
@ -243,7 +243,7 @@ Tree Grid is a generic component which is strongly bound to a model type. There
|
|||
|
||||
### ExpandoObject binding
|
||||
|
||||
Tree Grid is a generic component which is strongly bound to a model type. There are cases when the model type is unknown during compile type. In such cases you can bound data to the tree grid as list of ExpandoObject.
|
||||
Tree Grid is a generic component which is strongly bound to a model type. There are cases when the model type is unknown during compile type. In such cases bind data to the tree grid as list of ExpandoObject.
|
||||
|
||||
ExpandoObject can be bound to Tree grid by assigning to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.SfTreeGrid~DataSource.html) property. Tree Grid can also perform all kind of supported data operations and editing in ExpandoObject.
|
||||
|
||||
|
|
@ -320,7 +320,7 @@ ExpandoObject can be bound to Tree grid by assigning to the [DataSource](https:/
|
|||
|
||||
```
|
||||
|
||||
> Herewith we have provided list of reserved properties and the purpose used in TreeGrid. We recommend to avoid these reserved properties for Internal purpose(To get rid of conflicts).
|
||||
> Herewith the list of reserved properties and the purpose used in TreeGrid are provided. It is recommended to avoid these reserved properties for Internal purpose(To get rid of conflicts).
|
||||
|
||||
Reserved keywords | Purpose
|
||||
-----|-----
|
||||
|
|
@ -393,7 +393,7 @@ Similarly, if the user navigates to a new page, the root nodes of that specific
|
|||
|
||||
> * By default, **SfDataManager** uses **ODataAdaptor** for remote data-binding.
|
||||
> * Based on the RESTful web services, set the corresponding adaptor to SfDataManager. Refer [here](https://ej2.syncfusion.com/documentation/data/adaptors/?no-cache=1) for more details.
|
||||
> * Filtering and searching server-side data operations are not supported in load on demand
|
||||
> * Filtering and searching server-side data operations are not supported in load on demand.
|
||||
|
||||
### Offline mode
|
||||
|
||||
|
|
@ -419,9 +419,9 @@ On remote data binding, all tree grid actions such as paging, loading child on-d
|
|||
|
||||
### LoadChildOnDemand
|
||||
|
||||
Tree Grid provides option to load the child records also during the initial rendering itself for remote data binding by setting [LoadChildOnDemand](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_LoadChildOnDemand) as `true`.
|
||||
Tree Grid provides option to load the child records also during the initial rendering itself for remote data binding by setting the [LoadChildOnDemand](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_LoadChildOnDemand) as `true`.
|
||||
|
||||
When [LoadChildOnDemand](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_LoadChildOnDemand) is enabled parent records are rendered in expanded state.
|
||||
When the [LoadChildOnDemand](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_LoadChildOnDemand) is enabled parent records are rendered in expanded state.
|
||||
|
||||
The following code example describes the behavior of the `LoadChildOnDemand` feature of Tree Grid.
|
||||
|
||||
|
|
@ -701,7 +701,7 @@ To add a custom parameter to the data request, use the **addParams** method of *
|
|||
<!--Handling HTTP error
|
||||
|
||||
During server interaction from the tree grid, some server-side exceptions may occur, and you can acquire those error messages or exception details
|
||||
in client-side using the [`ActionFailure`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridEvents%601~OnActionFailure.html) event.
|
||||
in the client-side using the [`ActionFailure`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridEvents%601~OnActionFailure.html) event.
|
||||
|
||||
The argument passed to the [`ActionFailure`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridEvents%601~OnActionFailure.html) event contains the error details returned from the server.
|
||||
|
||||
|
|
@ -712,7 +712,7 @@ also when there is an exception while processing the tree grid actions.
|
|||
|
||||
## Entity Framework
|
||||
|
||||
You need to follow the below steps to consume data from the **Entity Framework** in the Tree Grid component.
|
||||
Follow the below steps to consume data from the **Entity Framework** in the Tree Grid component.
|
||||
|
||||
### Create DBContext class
|
||||
|
||||
|
|
@ -744,7 +744,7 @@ namespace TreeGridWebApiEFSample.Shared.DataAccess
|
|||
|
||||
### Create data access layer to perform data operation
|
||||
|
||||
Now you need to create a class named **TasksDataAccessLayer**, which act as data access layer for retrieving the records and also insert, update and delete the records from the database table.
|
||||
Now, create a class named **TasksDataAccessLayer**, which act as a data access layer for retrieving the records and also insert, update and delete the records from the database table.
|
||||
|
||||
```csharp
|
||||
using System;
|
||||
|
|
@ -850,7 +850,7 @@ namespace TreeGridWebApiEFSample.Controllers
|
|||
|
||||
### Configure Tree Grid component using Web API adaptor
|
||||
|
||||
Now you can configure the Tree Grid using the **'SfDataManager'** to interact with the created Web API and consume the data appropriately. To interact with web api, you need to use WebApiAdaptor.
|
||||
Now, the Tree Grid can be configured using the **'SfDataManager'** to interact with the created Web API and consume the data appropriately. To interact with web API, use WebApiAdaptor.
|
||||
|
||||
```cshtml
|
||||
@using Syncfusion.Blazor.Grids
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
layout: post
|
||||
title: Editing in Blazor TreeGrid Component | Syncfusion
|
||||
description: Checkout and learn here all about Editing in Syncfusion Blazor TreeGrid component and much more details.
|
||||
description: Checkout and learn here all about editing in Syncfusion Blazor TreeGrid component and much more details.
|
||||
platform: Blazor
|
||||
control: Tree Grid
|
||||
documentation: ug
|
||||
|
|
@ -9,7 +9,7 @@ documentation: ug
|
|||
|
||||
# Editing in Blazor TreeGrid Component
|
||||
|
||||
The Tree Grid component has options to dynamically insert, delete and update records. Editing feature is enabled by using [TreeGridEditSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridEditSettings.html) property and it requires a primary key column for CRUD operations. To define the primary key, set [TreeGridColumn.IsPrimaryKey](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridColumn~IsPrimaryKey.html) to **true** in particular column.
|
||||
The Tree Grid component has options to dynamically insert, delete and update records. Editing feature is enabled by using the [TreeGridEditSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridEditSettings.html) property and it requires a primary key column for CRUD operations. To define the primary key, set the [TreeGridColumn.IsPrimaryKey](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridColumn~IsPrimaryKey.html) to **true** in particular column.
|
||||
|
||||
{% tabs %}
|
||||
|
||||
|
|
@ -76,9 +76,9 @@ public class TreeData
|
|||
|
||||
{% endtabs %}
|
||||
|
||||
You can disable editing for a particular column, by specifying [TreeGridColumn.AllowEditing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridColumn~AllowEditing.html) to **false**.
|
||||
The editing can be disabled for a particular column, by specifying [TreeGridColumn.AllowEditing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridColumn~AllowEditing.html) to **false**.
|
||||
|
||||
> To perform the editing operation in the Blazor Tree Grid, we recommend to mention the respective model class type (List<TreeData.BusinessObject>), in the Tree Grid's dataSource property value.
|
||||
> To perform the editing operation in the Blazor Tree Grid, it is recommended to mention the respective model class type (List<TreeData.BusinessObject>), in the Tree Grid's dataSource property value.
|
||||
|
||||
```csharp
|
||||
|
||||
|
|
@ -94,7 +94,7 @@ You can disable editing for a particular column, by specifying [TreeGridColumn.A
|
|||
|
||||
## Toolbar with edit option
|
||||
|
||||
The tree grid toolbar has the built-in items to execute Editing actions. You can define this by using the [Toolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.SfTreeGrid%601~Toolbar.html) property.
|
||||
The tree grid toolbar has the built-in items to execute Editing actions. It can be defined by using the [Toolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.SfTreeGrid%601~Toolbar.html) property.
|
||||
|
||||
{% tabs %}
|
||||
|
||||
|
|
@ -162,13 +162,12 @@ public class TreeData
|
|||
|
||||
{% endtabs %}
|
||||
|
||||
The following output is displayed as a result of the above code example.
|
||||
|
||||
|
||||
|
||||
## Cell edit type and its params
|
||||
|
||||
The [TreeGridColumn.EditType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridColumn~EditType.html) is used to customize the edit type of the particular column. You can set the [TreeGridColumn.EditType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridColumn~EditType.html) based on data type of the column.
|
||||
The [TreeGridColumn.EditType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridColumn~EditType.html) is used to customize the edit type of the particular column. The [TreeGridColumn.EditType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridColumn~EditType.html) can be set based on the data type of the column.
|
||||
|
||||
* [NumericTextBox](../numerictextbox/getting-started) component for integers, double, and decimal data types.
|
||||
|
||||
|
|
@ -182,7 +181,7 @@ The [TreeGridColumn.EditType](https://help.syncfusion.com/cr/blazor/Syncfusion.B
|
|||
|
||||
* [Checkbox](../check-box/getting-started) component for boolean type.
|
||||
|
||||
Also, you can customize model of the [TreeGridColumn.EditType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridColumn~EditType.html) component through the `TreeGridColumn.Edit.params](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridColumn~Edit.html).
|
||||
Also, the model of the [TreeGridColumn.EditType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridColumn~EditType.html) component can be customized through the [TreeGridColumn.Edit.params](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridColumn~Edit.html).
|
||||
|
||||
The following table describes cell edit type component and their corresponding edit params of the column.
|
||||
|
||||
|
|
@ -273,8 +272,6 @@ public class TreeData
|
|||
|
||||
{% endtabs %}
|
||||
|
||||
The following output is displayed as a result of the above code example.
|
||||
|
||||
|
||||
|
||||
> If edit type is not defined in the column, then it will be considered as the **stringedit** type (Textbox component).
|
||||
|
|
@ -359,8 +356,6 @@ public class TreeData
|
|||
|
||||
{% endtabs %}
|
||||
|
||||
The following output is displayed as a result of the above code example.
|
||||
|
||||
|
||||
|
||||
## Edit Modes
|
||||
|
|
@ -373,7 +368,7 @@ Tree Grid supports the following types of edit modes, they are:
|
|||
|
||||
### Cell
|
||||
|
||||
In Cell edit mode, when you double click on a cell, it is changed to edit state. You can change the cell value and save to the data source. To enable Cell edit, set the [TreeGridEditSettings.Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridEditSettings~Mode.html) as **Cell**.
|
||||
In Cell edit mode, when a cell is double clicked, it is changed to edit state. The cell value can be changed and saved to the data source. To enable Cell edit, set the [TreeGridEditSettings.Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridEditSettings~Mode.html) as **Cell**.
|
||||
|
||||
{% tabs %}
|
||||
|
||||
|
|
@ -441,15 +436,13 @@ public class TreeData
|
|||
|
||||
{% endtabs %}
|
||||
|
||||
The following output is displayed as a result of the above code example.
|
||||
|
||||
|
||||
|
||||
> Cell edit mode is default mode of editing.
|
||||
|
||||
### Row
|
||||
|
||||
In Row edit mode, when you start editing the currently selected record, the entire row is changed to edit state. You can change the cell values of the row and save edited data to the data source. To enable Row edit, set the [TreeGridEditSettings.Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridEditSettings~Mode.html) as **Row**.
|
||||
In Row edit mode, when the currently selected record is edited, the entire row is changed to edit state. The cell values of the row can be changed and save edited data to the data source. To enable Row edit, set the [TreeGridEditSettings.Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridEditSettings~Mode.html) as **Row**.
|
||||
|
||||
{% tabs %}
|
||||
|
||||
|
|
@ -516,13 +509,11 @@ public class TreeData
|
|||
|
||||
{% endtabs %}
|
||||
|
||||
The following output is displayed as a result of the above code example.
|
||||
|
||||
|
||||
|
||||
### Dialog
|
||||
|
||||
In Dialog edit mode, when you start editing the currently selected row, data will be shown on a dialog. You can change the cell values and save edited data to the data source. To enable Dialog edit, set the [TreeGridEditSettings.Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridEditSettings~Mode.html) as **Dialog**.
|
||||
In Dialog edit mode, while editing the currently selected row, data will be shown on a dialog. The cell values and save edited data can be changed to the data source. To enable Dialog edit, set the [TreeGridEditSettings.Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridEditSettings~Mode.html) as **Dialog**.
|
||||
|
||||
{% tabs %}
|
||||
|
||||
|
|
@ -589,14 +580,12 @@ public class TreeData
|
|||
|
||||
{% endtabs %}
|
||||
|
||||
The following output is displayed as a result of the above code example.
|
||||
|
||||
|
||||
|
||||
### Batch
|
||||
|
||||
In Batch edit mode, when you double-click on the tree grid cell, the target cell goes into edit state. You can bulk save (added, changed and deleted data in the single request) to data source by clicking on the toolbar's **Update** button or by externally invoking the [EndEdit](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_EndEdit) method.
|
||||
To enable Batch edit, set the [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridEditSettings~Mode.html) property of `TreeGridEditSettings` as **Batch**.
|
||||
In the Batch edit mode, when the tree grid cell is double-clicked, the target cell goes into edit state. It can be bulk saved (added, changed and deleted data in the single request) to the data source by clicking on the toolbar's **Update** button or by externally invoking the [EndEdit](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_EndEdit) method.
|
||||
To enable Batch edit, set the [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridEditSettings~Mode.html) property of the `TreeGridEditSettings` as **Batch**.
|
||||
|
||||
{% tabs %}
|
||||
|
||||
|
|
@ -665,11 +654,10 @@ namespace TreeGridComponent.Data {
|
|||
|
||||
## Dialog template
|
||||
|
||||
The dialog template editing provides an option to customize the default behavior of dialog editing. Using the dialog template, you can render your own editors by defining the [TreeGridEditSettings.Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridEditSettings~Mode.html) as **Dialog** and [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridEditSettings~Template.html) using the **Template** of the **TreeGridEditSettings**.
|
||||
The dialog template editing provides an option to customize the default behavior of dialog editing. Using the dialog template, render your own editors by defining the [TreeGridEditSettings.Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridEditSettings~Mode.html) as **Dialog** and [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridEditSettings~Template.html) using the **Template** of the **TreeGridEditSettings**.
|
||||
|
||||
In some cases, you need to add the new field editors in the dialog which are not present in the column model. In that situation, the dialog template will help you to customize the default edit dialog.
|
||||
In some cases, the new field editors must be added in the dialog which are not present in the column model. In that situation, the dialog template will help to customize the default edit dialog.
|
||||
|
||||
In the following sample, tree grid enabled with dialog template editing.
|
||||
|
||||
{% tabs %}
|
||||
|
||||
|
|
@ -788,15 +776,13 @@ public class TreeData
|
|||
|
||||
{% endtabs %}
|
||||
|
||||
The following output is displayed as a result of the above code example.
|
||||
|
||||
|
||||
|
||||
> The template form editors should have **name** attribute.
|
||||
|
||||
## Adding row position
|
||||
|
||||
The Tree Grid control provides the support to add the new row in the top, bottom, above selected row, below selected row and child position of tree grid content using [TreeGridEditSettings.NewRowPosition](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridEditSettings~NewRowPosition.html) property. By default, a new row will be added at the top of the tree grid.
|
||||
The Tree Grid control provides the support to add the new row in the top, bottom, above selected row, below selected row and child position of tree grid content using the [TreeGridEditSettings.NewRowPosition](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridEditSettings~NewRowPosition.html) property. By default, a new row will be added at the top of the tree grid.
|
||||
|
||||
{% tabs %}
|
||||
|
||||
|
|
@ -950,8 +936,6 @@ public class TreeData
|
|||
|
||||
{% endtabs %}
|
||||
|
||||
The following output is displayed as a result of the above code example.
|
||||
|
||||
|
||||
|
||||
### Custom command
|
||||
|
|
@ -1092,15 +1076,13 @@ public class TreeData
|
|||
|
||||
{% endtabs %}
|
||||
|
||||
The following output is displayed as a result of the above code example.
|
||||
|
||||
|
||||
|
||||
> The **ShowDeleteConfirmDialog** supports all type of edit modes.
|
||||
|
||||
## Column validation
|
||||
|
||||
Column validation allows you to validate the edited or added row data and it display errors for invalid fields before saving data. Tree Grid uses **Form Validator** component for column validation. You can set validation rules by defining the [TreeGridColumn.ValidationRules](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridColumn~ValidationRules.html).
|
||||
Column validation allows to validate the edited or added row data and it displays errors for invalid fields before saving data. Tree Grid uses **Form Validator** component for column validation. The validation rules can be set by defining the [TreeGridColumn.ValidationRules](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridColumn~ValidationRules.html).
|
||||
|
||||
{% tabs %}
|
||||
|
||||
|
|
@ -1167,8 +1149,6 @@ public class TreeData
|
|||
|
||||
{% endtabs %}
|
||||
|
||||
The following output is displayed as a result of the above code example.
|
||||
|
||||
|
||||
|
||||
<!-- Custom validation
|
||||
|
|
@ -1180,11 +1160,11 @@ In the below demo, custom validation applied for **Priority** column.
|
|||
|
||||
## Entity Framework
|
||||
|
||||
This section uses and follows the code explained in the [Entity Framework data binding](./data-binding/#entity-framework) section hence we recommend you to refer Entity framework data binding section before continue this section.
|
||||
This section uses and follows the code explained in the [Entity Framework data binding](./data-binding/#entity-framework) section hence it is recommended to refer Entity Framework data binding section before continue this section.
|
||||
|
||||
### Handle CRUD in data access layer class
|
||||
|
||||
Now add methods **AddTask**, **UpdateTask**, **DeleteTask** in the **"TasksDataAccessLayer.cs"** to handle the insert, update and remove operations respectively.**CRUD** record details are bound to the **Tasks** parameter. Please refer the following code.
|
||||
Now add methods **AddTask**, **UpdateTask**, **DeleteTask** in the **"TasksDataAccessLayer.cs"** to handle the insert, update and remove operations respectively.**CRUD** record details are bound to the **Tasks** parameter.
|
||||
|
||||
```csharp
|
||||
using System;
|
||||
|
|
@ -1226,7 +1206,7 @@ namespace TreeGridWebApiEFSample.Shared.DataAccess
|
|||
throw;
|
||||
}
|
||||
}
|
||||
//To Update the records of a particluar Tasks
|
||||
//To Update the records of a particular Tasks
|
||||
public void UpdateTask(Shared.Models.Task task)
|
||||
{
|
||||
try
|
||||
|
|
@ -1274,7 +1254,7 @@ namespace TreeGridWebApiEFSample.Shared.DataAccess
|
|||
|
||||
### Enable CRUD in Web API
|
||||
|
||||
Now you have to create a new **Post**, **Put**, **Delete** method in the Web API controller which will perform the CRUD operations and returns the appropriate resultant data. The **'SfDataManager'** will make requests to this action based on route name.
|
||||
Now, create a new **Post**, **Put**, **Delete** method in the Web API controller which will perform the CRUD operations and returns the appropriate resultant data. The **'SfDataManager'** will make requests to this action based on route name.
|
||||
|
||||
```csharp
|
||||
using System;
|
||||
|
|
@ -1354,7 +1334,7 @@ namespace TreeGridWebApiEFSample.Controllers
|
|||
{
|
||||
IQueryable<TreeGridWebApiEFSample.Shared.Models.Task> data1 = db.GetAllRecords().AsQueryable();
|
||||
var i = 0;
|
||||
// For loop for Finding the parent record and setting it's "HasChildMapping"(here it is "IsParent") to true
|
||||
// For loop for finding the parent record and setting its "HasChildMapping"(here it is "IsParent") to true
|
||||
for (; i < data1.ToList().Count; i++)
|
||||
{
|
||||
if (data1.ToList()[i].TaskID == Task.ParentID)
|
||||
|
|
@ -1518,7 +1498,7 @@ public class TreeData
|
|||
|
||||
## Disable editing for particular column
|
||||
|
||||
You can disable editing for particular columns by using the [TreeGridColumn.AllowEditing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridColumn~AllowEditing.html).
|
||||
The editing can be disabled for particular columns by using the [TreeGridColumn.AllowEditing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridColumn~AllowEditing.html).
|
||||
|
||||
In the following demo, editing is disabled for the **Duration** column.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
layout: post
|
||||
title: Events in Blazor TreeGrid Component | Syncfusion
|
||||
description: Checkout and learn here all about Events in Syncfusion Blazor TreeGrid component and much more details.
|
||||
description: Checkout and learn here all about events in Syncfusion Blazor TreeGrid component and much more details.
|
||||
platform: Blazor
|
||||
control: Tree Grid
|
||||
documentation: ug
|
||||
|
|
@ -9,13 +9,13 @@ documentation: ug
|
|||
|
||||
# Events in Blazor TreeGrid Component
|
||||
|
||||
In this section, we have provided the list of events of the Tree Grid component which will be triggered for appropriate Tree Grid actions.
|
||||
In this section, the list of events of the Tree Grid component is provided which will be triggered for appropriate Tree Grid actions.
|
||||
|
||||
The events should be provided to the Tree Grid using **TreeGridEvents** component. When using events of Tree Grid, **TValue** must be provided in the **TreeGridEvents** component.
|
||||
|
||||
## OnActionBegin
|
||||
|
||||
[OnActionBegin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridEvents%601~OnActionBegin.html) event triggers when Tree Grid actions such as sorting, filtering, paging etc., starts.
|
||||
[OnActionBegin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridEvents%601~OnActionBegin.html) event triggers when the Tree Grid actions such as sorting, filtering, paging etc., starts.
|
||||
|
||||
```cshtml
|
||||
@using Syncfusion.Blazor.Grids;
|
||||
|
|
@ -70,7 +70,7 @@ The events should be provided to the Tree Grid using **TreeGridEvents** componen
|
|||
|
||||
## OnActionComplete
|
||||
|
||||
[OnActionComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridEvents%601~OnActionComplete.html) event triggers when Tree Grid actions such as sorting, filtering, paging etc. are completed.
|
||||
[OnActionComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridEvents%601~OnActionComplete.html) event triggers when the Tree Grid actions such as sorting, filtering, paging etc. are completed.
|
||||
|
||||
```cshtml
|
||||
@using Syncfusion.Blazor.Grids
|
||||
|
|
@ -127,7 +127,7 @@ The events should be provided to the Tree Grid using **TreeGridEvents** componen
|
|||
|
||||
## OnActionFailure
|
||||
|
||||
[OnActionFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridEvents%601~OnActionFailure.html) event triggers when any Tree Grid action failed to achieve the desired results. By using this event you can get the error details and its cause. In the below sample we have provided the wrong field name for the IdMapping property. So that it will throw the OnActionFailure event.
|
||||
[OnActionFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridEvents%601~OnActionFailure.html) event triggers when any Tree Grid action fails to achieve the desired results. By using this event the error details and its cause are achieved. In the below sample, the wrong field name is provided for the IdMapping property. So that it will throw the OnActionFailure event.
|
||||
|
||||
```cshtml
|
||||
@using Syncfusion.Blazor.Grids;
|
||||
|
|
@ -182,7 +182,7 @@ The events should be provided to the Tree Grid using **TreeGridEvents** componen
|
|||
|
||||
## Created
|
||||
|
||||
[Created](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridEvents%601~Created.html) event triggers when the Tree Grid component is created. You can able to modify the Tree Grid properties by using this event.
|
||||
[Created](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridEvents%601~Created.html) event triggers when the Tree Grid component is created. The Tree Grid properties can be modified by using this event.
|
||||
|
||||
```cshtml
|
||||
@using Syncfusion.Blazor.TreeGrid;
|
||||
|
|
@ -237,7 +237,7 @@ The events should be provided to the Tree Grid using **TreeGridEvents** componen
|
|||
|
||||
## OnLoad
|
||||
|
||||
[OnLoad](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridEvents%601~OnLoad.html) event triggers before the rendering process starts which allows customization of Tree Grid properties before the Tree Grid rendering.
|
||||
[OnLoad](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridEvents%601~OnLoad.html) event triggers before the rendering process starts which allows customization of the Tree Grid properties before the Tree Grid rendering.
|
||||
|
||||
```cshtml
|
||||
@using Syncfusion.Blazor.TreeGrid;
|
||||
|
|
@ -292,7 +292,7 @@ The events should be provided to the Tree Grid using **TreeGridEvents** componen
|
|||
|
||||
## Destroyed
|
||||
|
||||
[Destroyed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridEvents%601~Destroyed.html) event triggers when the Tree Grid component is destroyed. By using this event you can confirm that the Tree Grid gets completely destroyed.
|
||||
[Destroyed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridEvents%601~Destroyed.html) event triggers when the Tree Grid component is destroyed. By using this event, it is confirmed that the Tree Grid gets completely destroyed.
|
||||
|
||||
```cshtml
|
||||
@using Syncfusion.Blazor.TreeGrid;
|
||||
|
|
@ -347,7 +347,7 @@ The events should be provided to the Tree Grid using **TreeGridEvents** componen
|
|||
|
||||
## OnDataBound
|
||||
|
||||
[OnDataBound](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridEvents%601~DataBound.html) event triggers before data is bound to Tree Grid.
|
||||
[OnDataBound](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridEvents%601~DataBound.html) event triggers before the data is bound to Tree Grid.
|
||||
|
||||
```cshtml
|
||||
@using Syncfusion.Blazor.Grids;
|
||||
|
|
@ -403,7 +403,7 @@ The events should be provided to the Tree Grid using **TreeGridEvents** componen
|
|||
|
||||
## DataBound
|
||||
|
||||
[DataBound](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridEvents%601~DataBound.html) event triggers when data source is populated in the Tree Grid. You can able to customize you code.
|
||||
[DataBound](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridEvents%601~DataBound.html) event triggers when the data source is populated in the Tree Grid. The code can be customized.
|
||||
|
||||
```cshtml
|
||||
@using Syncfusion.Blazor.TreeGrid;
|
||||
|
|
@ -514,7 +514,7 @@ The events should be provided to the Tree Grid using **TreeGridEvents** componen
|
|||
|
||||
## DetailDataBound
|
||||
|
||||
[DetailDataBound](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridEvents%601~DetailDataBound.html) event triggers after detail row expands.
|
||||
The [DetailDataBound](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridEvents%601~DetailDataBound.html) event triggers after detail row expands.
|
||||
|
||||
```cshtml
|
||||
@using Syncfusion.Blazor.TreeGrid
|
||||
|
|
@ -589,7 +589,7 @@ The events should be provided to the Tree Grid using **TreeGridEvents** componen
|
|||
|
||||
## HeaderCellInfo
|
||||
|
||||
[HeaderCellInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridEvents%601~HeaderCellInfo.html) event triggers during the rendering of every header cells in the Tree Grid so that you can able to customize the header cells.
|
||||
[HeaderCellInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridEvents%601~HeaderCellInfo.html) event triggers during the rendering of every header cells in the Tree Grid so that the header cells can be customized.
|
||||
|
||||
```cshtml
|
||||
@using Syncfusion.Blazor.Grids;
|
||||
|
|
@ -758,7 +758,7 @@ The events should be provided to the Tree Grid using **TreeGridEvents** componen
|
|||
|
||||
## OnBatchAdd
|
||||
|
||||
[OnBatchAdd](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridEvents%601~OnBatchAdd.html) event triggers before records are added in batch mode.
|
||||
[OnBatchAdd](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridEvents%601~OnBatchAdd.html) event triggers before the records are added in the batch mode.
|
||||
|
||||
```cshtml
|
||||
@using Syncfusion.Blazor.Grids;
|
||||
|
|
@ -815,7 +815,7 @@ The events should be provided to the Tree Grid using **TreeGridEvents** componen
|
|||
|
||||
## OnBatchSave
|
||||
|
||||
[OnBatchSave](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridEvents%601~OnBatchSave.html) event triggers before records are saved in batch mode.
|
||||
[OnBatchSave](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridEvents%601~OnBatchSave.html) event triggers before the records are saved in the batch mode.
|
||||
|
||||
```cshtml
|
||||
@using Syncfusion.Blazor.Grids;
|
||||
|
|
@ -872,7 +872,7 @@ The events should be provided to the Tree Grid using **TreeGridEvents** componen
|
|||
|
||||
## OnBatchDelete
|
||||
|
||||
[OnBatchDelete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridEvents%601~OnBatchDelete.html) event triggers before records are deleted in batch mode.
|
||||
[OnBatchDelete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridEvents%601~OnBatchDelete.html) event triggers before the records are deleted in the batch mode.
|
||||
|
||||
```cshtml
|
||||
@using Syncfusion.Blazor.Grids;
|
||||
|
|
@ -986,7 +986,7 @@ The events should be provided to the Tree Grid using **TreeGridEvents** componen
|
|||
|
||||
## OnCellSave
|
||||
|
||||
[OnCellSave](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridEvents%601~OnCellSave.html) event triggers when cell is saved.
|
||||
[OnCellSave](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridEvents%601~OnCellSave.html) event triggers when the cell is saved.
|
||||
|
||||
```cshtml
|
||||
@using Syncfusion.Blazor.Grids;
|
||||
|
|
@ -1042,7 +1042,7 @@ The events should be provided to the Tree Grid using **TreeGridEvents** componen
|
|||
|
||||
## CellSaved
|
||||
|
||||
[CellSaved](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridEvents%601~CellSaved.html) event triggers when cell is saved.
|
||||
[CellSaved](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridEvents%601~CellSaved.html) event triggers when the cell is saved.
|
||||
|
||||
```cshtml
|
||||
@using Syncfusion.Blazor.Grids;
|
||||
|
|
@ -1098,7 +1098,7 @@ The events should be provided to the Tree Grid using **TreeGridEvents** componen
|
|||
|
||||
## RowSelecting
|
||||
|
||||
[RowSelecting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridEvents%601~RowSelecting.html) event triggers before row selection occurs.
|
||||
[RowSelecting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridEvents%601~RowSelecting.html) event triggers before the row selection occurs.
|
||||
|
||||
```cshtml
|
||||
@using Syncfusion.Blazor.Grids;
|
||||
|
|
@ -1318,7 +1318,7 @@ The events should be provided to the Tree Grid using **TreeGridEvents** componen
|
|||
|
||||
## CellSelecting
|
||||
|
||||
[CellSelecting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridEvents%601~CellSelecting.html) event triggers before cell selection occurs.
|
||||
[CellSelecting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridEvents%601~CellSelecting.html) event triggers before the cell selection occurs.
|
||||
|
||||
```cshtml
|
||||
@using Syncfusion.Blazor.Grids;
|
||||
|
|
@ -1430,7 +1430,7 @@ The events should be provided to the Tree Grid using **TreeGridEvents** componen
|
|||
|
||||
## CellDeselecting
|
||||
|
||||
[CellDeselecting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridEvents%601~CellDeselecting.html) event triggers before cell is deselected.
|
||||
[CellDeselecting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridEvents%601~CellDeselecting.html) event triggers before a cell is deselected.
|
||||
|
||||
```cshtml
|
||||
@using Syncfusion.Blazor.Grids;
|
||||
|
|
@ -1542,7 +1542,7 @@ The events should be provided to the Tree Grid using **TreeGridEvents** componen
|
|||
|
||||
## OnRecordDoubleClick
|
||||
|
||||
[OnRecordDoubleClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridEvents%601~OnRecordDoubleClick.html) event triggers when record is double clicked.
|
||||
[OnRecordDoubleClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridEvents%601~OnRecordDoubleClick.html) event triggers when a record is double clicked.
|
||||
|
||||
```cshtml
|
||||
@using Syncfusion.Blazor.Grids;
|
||||
|
|
@ -1597,7 +1597,7 @@ The events should be provided to the Tree Grid using **TreeGridEvents** componen
|
|||
|
||||
## OnToolbarClick
|
||||
|
||||
[OnToolbarClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridEvents%601~OnToolbarClick.html) event triggers when toolbar item is clicked.
|
||||
[OnToolbarClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridEvents%601~OnToolbarClick.html) event triggers when a toolbar item is clicked.
|
||||
|
||||
```cshtml
|
||||
@using Syncfusion.Blazor.TreeGrid;
|
||||
|
|
@ -1652,7 +1652,7 @@ The events should be provided to the Tree Grid using **TreeGridEvents** componen
|
|||
|
||||
## CommandClicked
|
||||
|
||||
[CommandClicked](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor~Syncfusion.Blazor.Grids.SfGrid~CommandClicked.html) event triggers when command button is clicked. It provides the row data of the currently clicked row.
|
||||
[CommandClicked](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor~Syncfusion.Blazor.Grids.SfGrid~CommandClicked.html) event triggers when the command button is clicked. It provides the row data of the currently clicked row.
|
||||
|
||||
```cshtml
|
||||
@using Syncfusion.Blazor.TreeGrid;
|
||||
|
|
@ -1715,7 +1715,7 @@ The events should be provided to the Tree Grid using **TreeGridEvents** componen
|
|||
|
||||
## ColumnMenuItemClicked
|
||||
|
||||
[ColumnMenuItemClicked](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridEvents%601~ColumnMenuItemClicked.html) event triggers when click on column menu.
|
||||
[ColumnMenuItemClicked](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridEvents%601~ColumnMenuItemClicked.html) event triggers when the column menu is clicked.
|
||||
|
||||
```cshtml
|
||||
@using Syncfusion.Blazor.Grids;
|
||||
|
|
@ -1769,7 +1769,7 @@ The events should be provided to the Tree Grid using **TreeGridEvents** componen
|
|||
|
||||
## ContextMenuItemClicked
|
||||
|
||||
[ContextMenuItemClicked](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridEvents%601~ContextMenuItemClicked.html) event triggers when click on context menu.
|
||||
[ContextMenuItemClicked](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridEvents%601~ContextMenuItemClicked.html) event triggers when the context menu is clicked.
|
||||
|
||||
```cshtml
|
||||
@using Syncfusion.Blazor.Grids;
|
||||
|
|
@ -1879,7 +1879,7 @@ The events should be provided to the Tree Grid using **TreeGridEvents** componen
|
|||
|
||||
## OnPdfExport
|
||||
|
||||
[OnPdfExport](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridEvents%601~OnPdfExport.html) event triggers before Tree Grid data is exported to PDF document.
|
||||
[OnPdfExport](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridEvents%601~OnPdfExport.html) event triggers before the Tree Grid data is exported to PDF document.
|
||||
|
||||
```cshtml
|
||||
@using Syncfusion.Blazor.Grids;
|
||||
|
|
@ -1941,7 +1941,7 @@ The events should be provided to the Tree Grid using **TreeGridEvents** componen
|
|||
|
||||
## PdfQueryCellInfoEvent
|
||||
|
||||
[PdfQueryCellInfoEvent](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridEvents%601~PdfQueryCellInfoEvent.html) event triggers before Tree Grid data is exported to PDF document. It can be used to customize the Tree Grid content in pdf document.
|
||||
[PdfQueryCellInfoEvent](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridEvents%601~PdfQueryCellInfoEvent.html) event triggers before the Tree Grid data is exported to PDF document. It can be used to customize the Tree Grid content in PDF document.
|
||||
|
||||
```cshtml
|
||||
@using Syncfusion.Blazor.Grids;
|
||||
|
|
@ -2003,7 +2003,7 @@ The events should be provided to the Tree Grid using **TreeGridEvents** componen
|
|||
|
||||
## OnExcelExport
|
||||
|
||||
[OnExcelExport](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridEvents%601~OnExcelExport.html) event triggers before Tree Grid data is exported to excel file.
|
||||
[OnExcelExport](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridEvents%601~OnExcelExport.html) event triggers before the Tree Grid data is exported to the excel file.
|
||||
|
||||
```cshtml
|
||||
@using Syncfusion.Blazor.TreeGrid;
|
||||
|
|
@ -2064,7 +2064,7 @@ The events should be provided to the Tree Grid using **TreeGridEvents** componen
|
|||
|
||||
## ExcelQueryCellInfoEvent
|
||||
|
||||
[ExcelQueryCellInfoEvent](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridEvents%601~ExcelQueryCellInfoEvent.html) event triggers before Tree Grid data is exported to Excel file. It can be used to customize the Tree Grid content in Excel file.
|
||||
[ExcelQueryCellInfoEvent](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridEvents%601~ExcelQueryCellInfoEvent.html) event triggers before the Tree Grid data is exported to the Excel file. It can be used to customize the Tree Grid content in Excel file.
|
||||
|
||||
```cshtml
|
||||
@using Syncfusion.Blazor.Grids;
|
||||
|
|
@ -2126,7 +2126,7 @@ The events should be provided to the Tree Grid using **TreeGridEvents** componen
|
|||
|
||||
## OnResizeStart
|
||||
|
||||
[OnResizeStart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridEvents%601~OnResizeStart.html) event triggers when column resize starts.
|
||||
[OnResizeStart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridEvents%601~OnResizeStart.html) event triggers when the column resize starts.
|
||||
|
||||
```cshtml
|
||||
@using Syncfusion.Blazor.Grids;
|
||||
|
|
@ -2180,7 +2180,7 @@ The events should be provided to the Tree Grid using **TreeGridEvents** componen
|
|||
|
||||
## ResizeStopped
|
||||
|
||||
[ResizeStopped](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridEvents%601~ResizeStopped.html) event triggers when column resize ends.
|
||||
[ResizeStopped](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridEvents%601~ResizeStopped.html) event triggers when the column resize ends.
|
||||
|
||||
```cshtml
|
||||
@using Syncfusion.Blazor.Grids;
|
||||
|
|
@ -2234,7 +2234,7 @@ The events should be provided to the Tree Grid using **TreeGridEvents** componen
|
|||
|
||||
## Expanding
|
||||
|
||||
[Expanding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridEvents%601~Expanding.html) event triggers when row is expanding.
|
||||
[Expanding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridEvents%601~Expanding.html) event triggers when a row is expanding.
|
||||
|
||||
```cshtml
|
||||
@using Syncfusion.Blazor.TreeGrid;
|
||||
|
|
@ -2287,7 +2287,7 @@ The events should be provided to the Tree Grid using **TreeGridEvents** componen
|
|||
|
||||
## Expanded
|
||||
|
||||
[Expanded](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridEvents%601~Expanded.html) event triggers when row is expanded.
|
||||
[Expanded](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridEvents%601~Expanded.html) event triggers when a row is expanded.
|
||||
|
||||
```cshtml
|
||||
@using Syncfusion.Blazor.TreeGrid;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
layout: post
|
||||
title: Excel Export in Blazor TreeGrid Component | Syncfusion
|
||||
description: Checkout and learn here all about Excel Export in Syncfusion Blazor TreeGrid component and much more.
|
||||
description: Checkout and learn here all about excel export in Syncfusion Blazor TreeGrid component and much more.
|
||||
platform: Blazor
|
||||
control: Tree Grid
|
||||
documentation: ug
|
||||
|
|
@ -9,7 +9,7 @@ documentation: ug
|
|||
|
||||
# Excel Export in Blazor TreeGrid Component
|
||||
|
||||
The excel export allows exporting Tree Grid data to Excel document. You need to use the
|
||||
The excel export allows exporting Tree Grid data to Excel document. Use the
|
||||
**ExcelExport** method for exporting. To enable Excel export in the Tree Grid, set the [AllowExcelExport](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.SfTreeGrid%601~AllowExcelExport.html) property as true.
|
||||
|
||||
{% tabs %}
|
||||
|
|
@ -359,7 +359,7 @@ public class TreeData
|
|||
|
||||
### File name for exported document
|
||||
|
||||
You can assign the file name for the exported document by defining **fileName** property in excel export properties.
|
||||
The file name can be assigned for the exported document by defining **fileName** property in excel export properties.
|
||||
|
||||
{% tabs %}
|
||||
|
||||
|
|
@ -402,7 +402,6 @@ You can assign the file name for the exported document by defining **fileName**
|
|||
}
|
||||
|
||||
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
{% highlight c# %}
|
||||
|
|
@ -442,7 +441,7 @@ public class TreeData
|
|||
|
||||
### To persist collapsed state
|
||||
|
||||
You can persist the collapsed state in the exported document by defining **IsCollapsedStatePersist** property as true in **TreeGridExcelExportProperties** parameter of [ExcelExport](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_ExcelExport_Syncfusion_Blazor_Grids_ExcelExportProperties_System_Nullable_System_Boolean__System_Object_System_Nullable_System_Boolean__) method.
|
||||
The collapsed state can be persisted in the exported document by defining **IsCollapsedStatePersist** property as true in the **TreeGridExcelExportProperties** parameter of the [ExcelExport](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_ExcelExport_Syncfusion_Blazor_Grids_ExcelExportProperties_System_Nullable_System_Boolean__System_Object_System_Nullable_System_Boolean__) method.
|
||||
|
||||
{% tabs %}
|
||||
|
||||
|
|
@ -525,4 +524,4 @@ public class TreeData
|
|||
|
||||
### Limitations
|
||||
|
||||
Microsoft Excel permits up to seven nested levels in outlines. So that in the Tree Grid we can able to provide only up to seven nested levels and if it exceeds more than seven levels then the document will be exported without outline option. Please refer the [Microsoft Limitation](https://docs.microsoft.com/en-us/sql/reporting-services/report-builder/exporting-to-microsoft-excel-report-builder-and-ssrs?view=sql-server-2017#ExcelLimitations)
|
||||
Microsoft Excel permits up to seven nested levels in outlines. So that in the Tree Grid we can able to provide only up to seven nested levels and if it exceeds more than seven levels then the document will be exported without outline option. Please refer the [Microsoft Limitation](https://docs.microsoft.com/en-us/sql/reporting-services/report-builder/exporting-to-microsoft-excel-report-builder-and-ssrs?view=sql-server-2017#ExcelLimitations).
|
||||
|
|
@ -1,13 +1,13 @@
|
|||
---
|
||||
layout: post
|
||||
title: Pdf Export in Blazor TreeGrid Component | Syncfusion
|
||||
description: Checkout and learn here all about Pdf Export in Syncfusion Blazor TreeGrid component and much more details.
|
||||
title: PDF Export in Blazor TreeGrid Component | Syncfusion
|
||||
description: Checkout and learn here all about PDF Export in Syncfusion Blazor TreeGrid component and much more details.
|
||||
platform: Blazor
|
||||
control: Tree Grid
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Pdf Export in Blazor TreeGrid Component
|
||||
# PDF Export in Blazor TreeGrid Component
|
||||
|
||||
PDF export allows exporting Tree Grid data to PDF document. You need to use the
|
||||
**PdfExport** method for exporting. To enable PDF export in the Tree Grid, set the [AllowPdfExport](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.Grids.EjsGrid~AllowPdfExport.html) as true.
|
||||
|
|
@ -95,7 +95,7 @@ PDF export provides an option to customize mapping of Tree Grid to exported PDF
|
|||
|
||||
### File name for exported document
|
||||
|
||||
You can assign the file name for the exported document by defining **fileName** property in **PdfExportProperties**.
|
||||
The file name can be assigned for the exported document by defining **fileName** property in **PdfExportProperties**.
|
||||
|
||||
{% tabs %}
|
||||
|
||||
|
|
@ -457,7 +457,7 @@ public class TreeData
|
|||
|
||||
### Export hidden columns
|
||||
|
||||
PDF export provides an option to export hidden columns of Tree Grid by defining the **includeHiddenColumn** as **true**.
|
||||
PDF export provides an option to export hidden columns of the Tree Grid by defining the **includeHiddenColumn** as **true**.
|
||||
|
||||
{% tabs %}
|
||||
|
||||
|
|
|
|||
Некоторые файлы не были показаны из-за слишком большого количества измененных файлов Показать больше
Загрузка…
Ссылка в новой задаче