Latest source merged from Syncfusion
|
@ -3104,7 +3104,7 @@
|
|||
</ul>
|
||||
</li>
|
||||
<li>Release Notes
|
||||
<ul><li>2021 volume 3 - 19.3.*<ul><li> Weekly Nuget Release <ul><li><a href="/blazor/release-notes/19.3.44">19.3.44</a></li></ul></li><li><a href="/blazor/release-notes/19.3.43">19.3.43 Main Release</a></li></ul></li><li>2021 Volume 2 - 19.2.*<ul><li> Weekly Nuget Release <ul><li><a href="/blazor/release-notes/19.2.62">19.2.62</a></li><li><a href="/blazor/release-notes/19.2.60">19.2.60</a></li><li><a href="/blazor/release-notes/19.2.59">19.2.59</a></li><li><a href="/blazor/release-notes/19.2.57">19.2.57</a></li><li><a href="/blazor/release-notes/19.2.56">19.2.56</a></li><li><a href="/blazor/release-notes/19.2.51">19.2.51</a></li><li><a href="/blazor/release-notes/19.2.49">19.2.49</a></li><li><a href="/blazor/release-notes/19.2.48">19.2.48</a></li><li><a href="/blazor/release-notes/19.2.47">19.2.47</a></li><li><a href="/blazor/release-notes/19.2.46">19.2.46</a></li></ul></li><li><a href="/blazor/release-notes/19.2.55">19.2.55 Service Pack Release</a></li><li><a href="/blazor/release-notes/19.2.44">19.2.44 Main Release</a></li></ul></li><li>2021 volume 1 - 19.1.*<ul><li> Weekly Nuget Release <ul><li><a href="/blazor/release-notes/19.1.69">19.1.69</a></li><li><a href="/blazor/release-notes/19.1.67">19.1.67</a></li><li><a href="/blazor/release-notes/19.1.66">19.1.66</a></li><li><a href="/blazor/release-notes/19.1.65">19.1.65</a></li><li><a href="/blazor/release-notes/19.1.64">19.1.64</a></li><li><a href="/blazor/release-notes/19.1.59">19.1.59</a></li><li><a href="/blazor/release-notes/19.1.58">19.1.58</a></li><li><a href="/blazor/release-notes/19.1.57">19.1.57</a></li><li><a href="/blazor/release-notes/19.1.56">19.1.56</a></li><li><a href="/blazor/release-notes/19.1.55">19.1.55</a></li></ul></li><li><a href="/blazor/release-notes/19.1.63">19.1.63 Service Pack Release</a></li><li><a href="/blazor/release-notes/19.1.54">19.1.54 Main release</a></li></ul></li>
|
||||
<ul><li>2021 volume 3 - 19.3.*<ul><li> Weekly Nuget Release <ul><li><a href="/blazor/release-notes/19.3.45">19.3.45</a></li><li><a href="/blazor/release-notes/19.3.44">19.3.44</a></li></ul></li><li><a href="/blazor/release-notes/19.3.43">19.3.43 Main Release</a></li></ul></li><li>2021 Volume 2 - 19.2.*<ul><li> Weekly Nuget Release <ul><li><a href="/blazor/release-notes/19.2.62">19.2.62</a></li><li><a href="/blazor/release-notes/19.2.60">19.2.60</a></li><li><a href="/blazor/release-notes/19.2.59">19.2.59</a></li><li><a href="/blazor/release-notes/19.2.57">19.2.57</a></li><li><a href="/blazor/release-notes/19.2.56">19.2.56</a></li><li><a href="/blazor/release-notes/19.2.51">19.2.51</a></li><li><a href="/blazor/release-notes/19.2.49">19.2.49</a></li><li><a href="/blazor/release-notes/19.2.48">19.2.48</a></li><li><a href="/blazor/release-notes/19.2.47">19.2.47</a></li><li><a href="/blazor/release-notes/19.2.46">19.2.46</a></li></ul></li><li><a href="/blazor/release-notes/19.2.55">19.2.55 Service Pack Release</a></li><li><a href="/blazor/release-notes/19.2.44">19.2.44 Main Release</a></li></ul></li><li>2021 volume 1 - 19.1.*<ul><li> Weekly Nuget Release <ul><li><a href="/blazor/release-notes/19.1.69">19.1.69</a></li><li><a href="/blazor/release-notes/19.1.67">19.1.67</a></li><li><a href="/blazor/release-notes/19.1.66">19.1.66</a></li><li><a href="/blazor/release-notes/19.1.65">19.1.65</a></li><li><a href="/blazor/release-notes/19.1.64">19.1.64</a></li><li><a href="/blazor/release-notes/19.1.59">19.1.59</a></li><li><a href="/blazor/release-notes/19.1.58">19.1.58</a></li><li><a href="/blazor/release-notes/19.1.57">19.1.57</a></li><li><a href="/blazor/release-notes/19.1.56">19.1.56</a></li><li><a href="/blazor/release-notes/19.1.55">19.1.55</a></li></ul></li><li><a href="/blazor/release-notes/19.1.63">19.1.63 Service Pack Release</a></li><li><a href="/blazor/release-notes/19.1.54">19.1.54 Main release</a></li></ul></li>
|
||||
<li>2020 volume 4 - 18.4.*<ul><li> Weekly Nuget Release <ul><li><a href="/blazor/release-notes/18.4.49">18.4.49</a></li><li><a href="/blazor/release-notes/18.4.48">18.4.48</a></li><li><a href="/blazor/release-notes/18.4.47">18.4.47</a></li><li><a href="/blazor/release-notes/18.4.46">18.4.46</a></li><li><a href="/blazor/release-notes/18.4.44">18.4.44</a></li><li><a href="/blazor/release-notes/18.4.43">18.4.43</a></li><li><a href="/blazor/release-notes/18.4.42">18.4.42</a></li><li><a href="/blazor/release-notes/18.4.41">18.4.41</a></li><li><a href="/blazor/release-notes/18.4.35">18.4.35</a></li><li><a href="/blazor/release-notes/18.4.34">18.4.34</a></li><li><a href="/blazor/release-notes/18.4.33">18.4.33</a></li><li><a href="/blazor/release-notes/18.4.32">18.4.32</a></li><li><a href="/blazor/release-notes/18.4.31">18.4.31</a></li></ul></li><li><a href="/blazor/release-notes/18.4.39">18.4.39 Service Pack Release</a></li><li><a href="/blazor/release-notes/18.4.30">18.4.30 Main Release</a></li></ul></li>
|
||||
<li>2020 volume 3 - 18.3.*<ul><li> Weekly Nuget Release <ul><li><a href="/blazor/release-notes/18.3.53">18.3.53</a></li><li><a href="/blazor/release-notes/18.3.52">18.3.52</a></li><li><a href="/blazor/release-notes/18.3.51">18.3.51</a></li><li><a href="/blazor/release-notes/18.3.50">18.3.50</a></li><li><a href="/blazor/release-notes/18.3.48">18.3.48</a></li><li><a href="/blazor/release-notes/18.3.44">18.3.44</a></li><li><a href="/blazor/release-notes/18.3.42">18.3.42</a></li><li><a href="/blazor/release-notes/18.3.41">18.3.41</a></li><li><a href="/blazor/release-notes/18.3.40">18.3.40</a></li><li><a href="/blazor/release-notes/18.3.38">18.3.38</a></li></ul></li><li><a href="/blazor/release-notes/18.3.47">18.3.47 Service Pack Release</a></li><li><a href="/blazor/release-notes/18.3.35">18.3.35 Main release</a></li></ul></li>
|
||||
<li>2020 volume 2 - 18.2.*<ul><li> Weekly Nuget Release <ul><li><a href="/blazor/release-notes/18.2.59">18.2.59</a></li><li><a href="/blazor/release-notes/18.2.58">18.2.58</a></li><li><a href="/blazor/release-notes/18.2.57">18.2.57</a></li><li><a href="/blazor/release-notes/18.2.56">18.2.56</a></li><li><a href="/blazor/release-notes/18.2.55">18.2.55</a></li><li><a href="/blazor/release-notes/18.2.54">18.2.54</a></li><li><a href="/blazor/release-notes/18.2.48">18.2.48</a></li><li><a href="/blazor/release-notes/18.2.47">18.2.47</a></li><li><a href="/blazor/release-notes/18.2.46">18.2.46</a></li><li><a href="/blazor/release-notes/18.2.45">18.2.45</a></li></ul></li><li><a href="/blazor/release-notes/18.2.44">18.2.44 Main Release</a></li></ul></li>
|
||||
|
|
|
@ -0,0 +1,17 @@
|
|||
---
|
||||
title: Essential Studio for Blazor Weekly Nuget Release Release Notes
|
||||
description: Essential Studio for Blazor Weekly Nuget Release Release Notes
|
||||
platform: Blazor
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Essential Studio for Blazor Release Notes
|
||||
|
||||
{% include release-info.html date="October 12, 2021" version="v19.3.45" %}
|
||||
|
||||
|
||||
{% directory path: _includes/release-notes/v19.3.0.45 %}
|
||||
|
||||
{% include {{file.url}} %}
|
||||
|
||||
{% enddirectory %}
|
|
@ -7,15 +7,15 @@ control: Splitter
|
|||
documentation: ug
|
||||
---
|
||||
|
||||
# Pane Settings in Blazor Splitter Component
|
||||
# Pane Settings in the Blazor Splitter Component
|
||||
|
||||
This section explain pane settings behaviors.
|
||||
This section explains the pane settings behavior.
|
||||
|
||||
## Pane visibility
|
||||
|
||||
The `Visible` property is enabled by default in the Blazor splitter. By using this property, you can show or hide the panes on initial load and in dynamic use case scenarios.
|
||||
You can show or hide the Splitter panes using the `Visible` property based on the application’s demand like initial load or dynamic cases. The `Visible` property is enabled by default in the Blazor splitter.
|
||||
|
||||
In the following code example, bind the `Visible` property as mentioned below to show/hide the panes on CheckBox state change.
|
||||
In the following code example, the `Visible` property binds to the second `SplitterPane` to show/hide the pane on CheckBox state change.
|
||||
|
||||
```cshtml
|
||||
|
||||
|
|
|
@ -44,4 +44,4 @@ The toast component implements the keyboard navigation support by using the foll
|
|||
|
||||
```
|
||||
|
||||
![Accessibility](./images/accessibility.png)
|
||||
![Accessibility in Blazor Toast](./images/blazor-toast-accessibility.png)
|
|
@ -66,7 +66,7 @@ In the following code, toast buttons are configured using `ToastButton` property
|
|||
|
||||
```
|
||||
|
||||
![Action button](./images/action-button.png)
|
||||
![Blazor Toast with Action button](./images/blazor-toast-action-button.png)
|
||||
|
||||
## See Also
|
||||
|
||||
|
|
|
@ -52,7 +52,7 @@ Toast can be created with the notification message. The message contains `Title`
|
|||
|
||||
```
|
||||
|
||||
![Action button](./images/config-content-title.png)
|
||||
![Blazor Toast with Button](./images/blazor-toast-with-button.png)
|
||||
|
||||
## Specifying custom target
|
||||
|
||||
|
@ -161,7 +161,7 @@ Here, the following sample demonstrates the combination of the `Target`, `ShowCl
|
|||
|
||||
```
|
||||
|
||||
![Custom target](./images/config-custom-target.png)
|
||||
![Blazor Toast with ProgressBar](./images/blazor-toast-with-progressbar.png)
|
||||
|
||||
## Width and height
|
||||
|
||||
|
@ -272,4 +272,4 @@ Both the width and height properties allow setting pixels/numbers/percentage. Th
|
|||
|
||||
```
|
||||
|
||||
![Custom target](./images/width-height.png)
|
||||
![Changing Blazor Toast Size](./images/blazor-toast-size.png)
|
|
@ -133,7 +133,7 @@ The following code explains how to initialize a simple Toast in Razor page.
|
|||
|
||||
After successful compilation of the application, run the application.
|
||||
|
||||
![Toast Sample](./images/toast.png)
|
||||
![Blazor Toast](./images/blazor-toast.png)
|
||||
|
||||
## See Also
|
||||
|
||||
|
|
После Ширина: | Высота: | Размер: 17 KiB |
После Ширина: | Высота: | Размер: 15 KiB |
После Ширина: | Высота: | Размер: 27 KiB |
После Ширина: | Высота: | Размер: 20 KiB |
После Ширина: | Высота: | Размер: 54 KiB |
После Ширина: | Высота: | Размер: 16 KiB |
После Ширина: | Высота: | Размер: 13 KiB |
После Ширина: | Высота: | Размер: 17 KiB |
|
@ -84,7 +84,7 @@ The toast can be expired based on the `Timeout` property. The toast can live til
|
|||
|
||||
```
|
||||
|
||||
![TimeOut](./images/timeout.png)
|
||||
![TimeOut in Blazor Toast](./images/blazor-toast-timeout.png)
|
||||
|
||||
## Static toast
|
||||
|
||||
|
@ -125,4 +125,4 @@ Auto hiding can be prevented in a toast as visible like static by setting zero (
|
|||
|
||||
```
|
||||
|
||||
![TimeOut](./images/timeout-static.png)
|
||||
![TimeOut in Blazor Static Toast](./images/blazor-static-toast-timeout.png)
|
|
@ -103,7 +103,7 @@ Now, add the Syncfusion Blazor Toggle Switch Button component in `razor` page in
|
|||
|
||||
After successful compilation of the application, simply press F5 to run the application. The Blazor Toggle Switch Button component will render in the web browser as shown below.
|
||||
|
||||
![Switch Sample](./images/switch.png)
|
||||
![Blazor Toggle Switch Button](./images/blazor-toggle-switch-button.png)
|
||||
|
||||
## Set text on Switch
|
||||
|
||||
|
@ -119,7 +119,7 @@ This section explains how to set `OnLabel` and `OffLabel` texts on Switch. In th
|
|||
|
||||
> Switch does not have text support for material themes, and does not support long custom text.
|
||||
|
||||
![Switch Sample](./images/switch-label.png)
|
||||
![Blazor Toggle Switch Button With Label](./images/blazor-toggle-switch-button-label.png)
|
||||
|
||||
## See Also
|
||||
|
||||
|
|
|
@ -27,4 +27,4 @@ set the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Butto
|
|||
|
||||
```
|
||||
|
||||
![Switch Sample](./../images/switch-size.png)
|
||||
![Changing Size of Blazor Toggle Switch Button](./../images/blazor-toggle-switch-button-size.png)
|
|
@ -28,6 +28,6 @@ This section explains about how to toggle between the Toggle Switch Button state
|
|||
|
||||
```
|
||||
|
||||
![Switch Sample](./../images/switch-toggle.png)
|
||||
![Changing Blazor Toggle Switch Button State](./../images/blazor-toggle-switch-button-state.png)
|
||||
|
||||
> Switch triggers [OnChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSwitch-1.html) event on every state stage to perform custom operations.
|
|
@ -128,7 +128,7 @@ Toggle Switch Button bar and handle can be customized as per requirement using C
|
|||
</style>
|
||||
```
|
||||
|
||||
![Switch Sample](./../images/switch-custom.png)
|
||||
![Blazor Toggle Switch Button with Custom Bar](./../images/blazor-toggle-switch-button-custom-bar.png)
|
||||
|
||||
## Color the Toggle Switch Button
|
||||
|
||||
|
@ -212,4 +212,4 @@ Toggle Switch Button colors can be customized as per the requirement using CSS r
|
|||
|
||||
```
|
||||
|
||||
![Switch Sample](./../images/switch-color.png)
|
||||
![Blazor Toggle Switch Button with Custom Color](./../images/blazor-toggle-switch-button-custom-color.png)
|
|
@ -24,4 +24,4 @@ The following example illustrates how to enable right-to-left support in Toggle
|
|||
|
||||
```
|
||||
|
||||
![Switch Sample](./../images/switch-rtl.png)
|
||||
![Right to Left in Blazor Toggle Switch Button](./../images/blazor-toggle-switch-button-in-right-to-left.png)
|
|
@ -24,4 +24,4 @@ The following example illustrates how to disable support in Toggle Switch Button
|
|||
|
||||
```
|
||||
|
||||
![Switch Sample](./../images/switch-disabled.png)
|
||||
![Blazor Toggle Switch Button in Disable State](./../images/blazor-toggle-switch-button-disable-state.png)
|
|
@ -44,4 +44,4 @@ In this sample, first check the option and click the submit button to post the s
|
|||
|
||||
```
|
||||
|
||||
![Switch Sample](./../images/switch-form.png)
|
||||
![Model Binding in Blazor Toggle Switch Button](./../images/blazor-toggle-switch-button-model-binding.png)
|
Двоичные данные
blazor/toggle-switch-button/images/blazor-toggle-switch-button-custom-bar.png
Normal file
После Ширина: | Высота: | Размер: 1.5 KiB |
Двоичные данные
blazor/toggle-switch-button/images/blazor-toggle-switch-button-custom-color.png
Normal file
После Ширина: | Высота: | Размер: 1.9 KiB |
Двоичные данные
blazor/toggle-switch-button/images/blazor-toggle-switch-button-disable-state.png
Normal file
После Ширина: | Высота: | Размер: 2.0 KiB |
Двоичные данные
blazor/toggle-switch-button/images/blazor-toggle-switch-button-in-right-to-left.png
Normal file
После Ширина: | Высота: | Размер: 3.1 KiB |
Двоичные данные
blazor/toggle-switch-button/images/blazor-toggle-switch-button-label.png
Normal file
После Ширина: | Высота: | Размер: 1.6 KiB |
Двоичные данные
blazor/toggle-switch-button/images/blazor-toggle-switch-button-model-binding.png
Normal file
После Ширина: | Высота: | Размер: 13 KiB |
После Ширина: | Высота: | Размер: 6.4 KiB |
Двоичные данные
blazor/toggle-switch-button/images/blazor-toggle-switch-button-state.png
Normal file
После Ширина: | Высота: | Размер: 2.1 KiB |
После Ширина: | Высота: | Размер: 3.4 KiB |
|
@ -123,7 +123,7 @@ Now, add the Syncfusion Blazor Toolbar component in any web page (razor) in the
|
|||
|
||||
After successful compilation of the application, simply press `F5` to run the application.
|
||||
|
||||
![Default Toolbar](./images/browser-output.png)
|
||||
![Blazor Toolbar](./images/blazor-toolbar.png)
|
||||
|
||||
## See Also
|
||||
|
||||
|
|
|
@ -92,4 +92,4 @@ In the following demo, initially there are five toolbar as the **ToolbarItems**
|
|||
|
||||
```
|
||||
|
||||
![Dynamic Add/Remove ToolbarItems](../images/addRemoveItem.gif)
|
||||
![Adding or Removing Blazor Toolbar Items](../images/blazor-toolbar-add-or-remove-item.gif)
|
|
@ -203,4 +203,4 @@ On clicking the toggle Button, change the required icon and content based on cur
|
|||
|
||||
```
|
||||
|
||||
![Toolbar Item Toggle Button](../images/item_toggle_button.gif)
|
||||
![Blazor Toolbar Item with Toggle Button](../images/blazor-toolbar-item-with-toggle-button.gif)
|
|
@ -51,4 +51,4 @@ The toolbar `ScrollStep` property supports to customize the scrolling distance,
|
|||
```
|
||||
|
||||
|
||||
![Toolbar ScrollStep](../images/toolbar_ScrollStep.png)
|
||||
![Custominzing Scroll Step in Blazor Toolbar](../images/blazor-toolbar-custom-scroll-step.png)
|
|
@ -41,4 +41,4 @@ The `Disabled` property of the toolbar item is used to enable or disable the ite
|
|||
```
|
||||
|
||||
|
||||
![Enable/Disable item](../images/disable_item.gif)
|
||||
![Enabling or Disabling Blazor Toolbar Item](../images/blazor-toolbar-disable-item.gif)
|
|
@ -49,4 +49,4 @@ Single or multiple CSS classes can be added to the Toolbar commands using the To
|
|||
|
||||
```
|
||||
|
||||
![Toolbar command customization](../images/toolbar_command.png)
|
||||
![Blazor Toolbar with Custom Command](../images/blazor-toolbar-custom-command.png)
|
|
@ -39,4 +39,4 @@ The Toolbar supports adding template commands using the `Template` property. Te
|
|||
|
||||
```
|
||||
|
||||
![Toolbar Item Custom Template](../images/toolbar_custom_template.png)
|
||||
![Blazor Toolbar Item with Custom Template](../images/blazor-toolbar-item-custom-template.png)
|
|
@ -32,4 +32,4 @@ Initialize the Tooltip with the Toolbar target.
|
|||
|
||||
```
|
||||
|
||||
![Tooltip](../images/toolbar_tooltip.png)
|
||||
![Blazor Toolbar with Tooltip](../images/blazor-toolbar-with-tooltip.png)
|
|
@ -40,4 +40,4 @@ The `Visible` property of the Toolbar item is used to show or hide the item by s
|
|||
}
|
||||
```
|
||||
|
||||
![Dynamic Show/Hide ToolbarItems](../images/showHideItem.png)
|
||||
![Showing or Hiding Blazor Toolbar Items](../images/blazor-toolbar-show-or-hide-item.png)
|
После Ширина: | Высота: | Размер: 131 KiB |
После Ширина: | Высота: | Размер: 2.9 KiB |
После Ширина: | Высота: | Размер: 4.6 KiB |
После Ширина: | Высота: | Размер: 46 KiB |
После Ширина: | Высота: | Размер: 48 KiB |
После Ширина: | Высота: | Размер: 2.4 KiB |
После Ширина: | Высота: | Размер: 4.6 KiB |
После Ширина: | Высота: | Размер: 2.4 KiB |
После Ширина: | Высота: | Размер: 2.7 KiB |
После Ширина: | Высота: | Размер: 37 KiB |
После Ширина: | Высота: | Размер: 5.2 KiB |
После Ширина: | Высота: | Размер: 9.5 KiB |
После Ширина: | Высота: | Размер: 9.3 KiB |
После Ширина: | Высота: | Размер: 2.7 KiB |
После Ширина: | Высота: | Размер: 3.9 KiB |
После Ширина: | Высота: | Размер: 7.4 KiB |
После Ширина: | Высота: | Размер: 4.0 KiB |
После Ширина: | Высота: | Размер: 305 KiB |
После Ширина: | Высота: | Размер: 91 KiB |
После Ширина: | Высота: | Размер: 143 KiB |
После Ширина: | Высота: | Размер: 4.5 KiB |
После Ширина: | Высота: | Размер: 95 KiB |
После Ширина: | Высота: | Размер: 3.0 KiB |
После Ширина: | Высота: | Размер: 3.5 KiB |
|
@ -53,7 +53,7 @@ It specifies the location for aligning Toolbar items on the Toolbar. Each comman
|
|||
|
||||
```
|
||||
|
||||
![Item Align](./images/item_align.png)
|
||||
![Aligning Blazor Toolbar Item](./images/blazor-toolbar-align-item.png)
|
||||
|
||||
## CssClass
|
||||
|
||||
|
@ -86,7 +86,7 @@ It specifies the unique ID to be used with button or input element of the Toolba
|
|||
|
||||
```
|
||||
|
||||
![Item Id](./images/item_align.png)
|
||||
![Blazor Toolbar Item with Id](./images/blazor-toolbar-align-item.png)
|
||||
|
||||
## Overflow
|
||||
|
||||
|
@ -132,7 +132,7 @@ It defines the priority of items to display it in popup always. It allows to mai
|
|||
|
||||
```
|
||||
|
||||
![Item ShowAlwaysInPopup](./images/item_alwaysinpopup.png)
|
||||
![Displaying Blazor Toolbar Item in Popup](./images/blazor-toolbar-item-in-popup.png)
|
||||
|
||||
## ShowTextOn
|
||||
|
||||
|
@ -184,7 +184,7 @@ It defines single/multiple classes separated by space used to specify an icon fo
|
|||
</SfToolbar>
|
||||
```
|
||||
|
||||
![Item SuffixIcon](./images/item_suffixicon.png)
|
||||
![Blazor Toolbar displays Icon in Suffix Item](./images/blazor-toolbar-icon-in-suffix-item.png)
|
||||
|
||||
>you can refer [here](https://blazor.syncfusion.com/documentation/appearance/icons#icon-integration-in-button-component) to integrate the syncfusion icons in toolbar component.
|
||||
|
||||
|
@ -220,7 +220,7 @@ It is used to specify the text to be displayed on hovering the Toolbar button.
|
|||
|
||||
```
|
||||
|
||||
![Item TooltipText](./images/item_tooltiptext.png)
|
||||
![Blazor Toolbar Item with Tooltip](./images/blazor-toolbar-item-tooltip.png)
|
||||
|
||||
## Type
|
||||
|
||||
|
@ -269,7 +269,7 @@ The `Separator` type adds a vertical separation between the Toolbar's Single/Mul
|
|||
|
||||
> If `Separator` is added as the first or the last item, it will not be visible.
|
||||
|
||||
![Item Separator](./images/item_separator.png)
|
||||
![Blazor Toolbar Item with Separator](./images/blazor-toolbar-item-separator.png)
|
||||
|
||||
### Input
|
||||
|
||||
|
@ -372,7 +372,7 @@ The following code explains how to add `NumericTextBox`, `DropDownList`, `RadioB
|
|||
}
|
||||
```
|
||||
|
||||
![Toolbar Control with item configuration](./images/toolbar_template.png)
|
||||
![Blazor Toolbar Item with Other Components](./images/blazor-toolbar-item-with-other-components.png)
|
||||
|
||||
## Visible
|
||||
|
||||
|
@ -396,7 +396,7 @@ It specifies whether an item should be hidden or not.
|
|||
|
||||
```
|
||||
|
||||
![Item Visible](./images/item_visible.png)
|
||||
![Hiding Blazor Toolbar Item](./images/blazor-toolbar-hidden-item.png)
|
||||
|
||||
## Width
|
||||
|
||||
|
@ -420,4 +420,4 @@ It specifies the width of the Toolbar button commands.
|
|||
|
||||
```
|
||||
|
||||
![Item Width](./images/item_width.png)
|
||||
![Blazor Toolbar Item with Custom Width](./images/blazor-toolbar-item-custom-width.png)
|
|
@ -27,11 +27,11 @@ The default [OverflowMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blaz
|
|||
* If device navigation icons are not available, touch swipe to see the hidden commands of the Toolbar.
|
||||
* Once the Toolbar reaches the last or first command, the corresponding navigation icon will be disabled and it can be moved to the opposite direction.
|
||||
|
||||
![Touch scroll](images/scrolling_touch.gif)
|
||||
![Blazor Toolbar with Touch Scroll](images/blazor-toolbar-scrolling-touch.gif)
|
||||
|
||||
* The Toolbar content can be continuously scrolled by holding the navigation icon.
|
||||
|
||||
![Long press scroll](images/scrolling_long_press.gif)
|
||||
![Blazor Toolbar with Long Press Scroll](images/blazor-toolbar-long-press-scrolling.gif)
|
||||
|
||||
```cshtml
|
||||
|
||||
|
@ -67,7 +67,7 @@ The default [OverflowMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blaz
|
|||
</SfToolbar>
|
||||
```
|
||||
|
||||
![Toolbar Scrollable Mode](./images/toolbar_scrollable_mode.png)
|
||||
![Scrolling in Blazor Toolbar](./images/blazor-toolbar-scrolling.png)
|
||||
|
||||
## Popup
|
||||
|
||||
|
@ -76,7 +76,7 @@ the viewing area moves to the overflow popup container.
|
|||
|
||||
The commands placed in the popup can be viewed by opening the popup using the drop down icon given at the end of the Toolbar.
|
||||
|
||||
![Blazor Toolbar with overflow dropdown popup](./images/blazor-toolbar-with-overflow-dropdown-popup.png)
|
||||
![Blazor Toolbar with Overflow Dropdown Popup](./images/blazor-toolbar-with-overflow-dropdown-popup.png)
|
||||
|
||||
> If the popup content overflows the height of the page, then the rest of the commands will be hidden.
|
||||
|
||||
|
@ -102,7 +102,7 @@ The commands placed in the popup can be viewed by opening the popup using the dr
|
|||
</SfToolbar>
|
||||
```
|
||||
|
||||
![Toolbar Popup Mode](./images/toolbar_popup_mode.png)
|
||||
![Blazor Toolbar Item in Popup Mode](./images/blazor-toolbar-item-popup-mode.png)
|
||||
|
||||
### Priority of commands
|
||||
|
||||
|
@ -158,7 +158,7 @@ In the following code sample, text is only visible in the popup container and no
|
|||
</SfToolbar>
|
||||
```
|
||||
|
||||
![Toolbar Item Overflow and ShowTextOn](./images/item_overflow_property.png)
|
||||
![Displaying Blazor Toolbar Item in Overflow](./images/blazor-toolbar-item-in-overflow.png)
|
||||
|
||||
## MultiRow
|
||||
|
||||
|
@ -186,7 +186,7 @@ In the following code sample, text is only visible in the popup container and no
|
|||
</SfToolbar>
|
||||
```
|
||||
|
||||
![Toolbar MultiRow Mode](./images/toolbar_multirow_mode.png)
|
||||
![Blazor Toolbar Item with MultiRow](./images/blazor-toolbar-item-with-multirow.png)
|
||||
|
||||
## Extended
|
||||
|
||||
|
@ -214,4 +214,4 @@ In the following code sample, text is only visible in the popup container and no
|
|||
</SfToolbar>
|
||||
```
|
||||
|
||||
![Toolbar Extended Mode](./images/toolbar_extended_mode.gif)
|
||||
![Blazor Toolbar Item with Extended Mode](./images/blazor-toolbar-item-extended-mode.gif)
|
|
@ -38,4 +38,4 @@ Refer to the following code example to add formatted HTML content to the Tooltip
|
|||
}
|
||||
```
|
||||
|
||||
![Blazor - Tooltip - Content](images/content.gif)
|
||||
![Blazor Tooltip with Content](images/blazor-tooltip-with-content.gif)
|
|
@ -90,7 +90,7 @@ Styling the tip pointer's size, background, and border colors can be done using
|
|||
</style>
|
||||
```
|
||||
|
||||
![Tooltip - Tip Pointer Customization](images/tip-pointer-customization.png)
|
||||
![Blazor Tooltip with Custom Tip Pointer](images/blazor-tooltip-custom-tip-pointer.png)
|
||||
|
||||
## Tooltip customization
|
||||
|
||||
|
@ -198,4 +198,4 @@ The complete look and feel of the Tooltip can be customized by changing it's bac
|
|||
</style>
|
||||
```
|
||||
|
||||
![Tooltip - Customization](images/tooltip-customization.png)
|
||||
![Blazor Tooltip Customization](images/blazor-tooltip-customization.png)
|
|
@ -26,11 +26,11 @@ Any one of the below standards can be used to install the Syncfusion Blazor libr
|
|||
|
||||
1. Install **Syncfusion.Blazor.Popups** NuGet package to the application by using the `NuGet Package Manager`. Refer to the [Individual NuGet Packages](https://blazor.syncfusion.com/documentation/nuget-packages/) section for the available NuGet packages.
|
||||
|
||||
![Nuget Explorer](./images/nuget-explorer.png)
|
||||
![Blazor NuGet Explorer](./images/blazor-nuget-explorer.png)
|
||||
|
||||
2. Search **Syncfusion.Blazor.Popups** keyword in the Browse tab and install **Syncfusion.Blazor.Popups** NuGet package in the application.
|
||||
|
||||
![Individual Nuget](./images/individual-nuget.png)
|
||||
![Searching Blazor Tooltip NuGet Package](./images/blazor-tooltip-nuget-package.png)
|
||||
|
||||
3. Once the installation process is completed, the Syncfusion Blazor Popups package will be installed in the project.
|
||||
|
||||
|
@ -52,11 +52,11 @@ W> If you prefer the above new standard (individual NuGet packages), then skip t
|
|||
|
||||
1. Install **Syncfusion.Blazor** NuGet package to the application by using the `NuGet Package Manager`. Right-click the project and then select `Manage NuGet Packages`.
|
||||
|
||||
![Nuget Explorer](./images/nuget-explorer.png)
|
||||
![Blazor NuGet Explorer](./images/blazor-nuget-explorer.png)
|
||||
|
||||
2. Search **Syncfusion.Blazor** keyword in the Browse tab and install **Syncfusion.Blazor** NuGet package in the application.
|
||||
|
||||
![Blazor Nuget](./images/blazor-nuget.png)
|
||||
![Blazor NuGet Package](./images/blazor-nuget.png)
|
||||
|
||||
3. Once the installation process is completed, the Syncfusion Blazor package will be installed in the project.
|
||||
|
||||
|
@ -161,7 +161,7 @@ Now, add the Syncfusion Blazor Tooltip component in any web page `razor` in the
|
|||
|
||||
After successful compilation of your application, simply press `F5` to run the application.
|
||||
|
||||
![Tooltip Sample](./images/Tooltip.gif)
|
||||
![Blazor Tooltip](./images/blazor-tooltip.gif)
|
||||
|
||||
## See Also
|
||||
|
||||
|
|
После Ширина: | Высота: | Размер: 20 KiB |
После Ширина: | Высота: | Размер: 6.2 KiB |
После Ширина: | Высота: | Размер: 6.2 KiB |
После Ширина: | Высота: | Размер: 74 KiB |
После Ширина: | Высота: | Размер: 38 KiB |
После Ширина: | Высота: | Размер: 54 KiB |
После Ширина: | Высота: | Размер: 495 KiB |
После Ширина: | Высота: | Размер: 17 KiB |
После Ширина: | Высота: | Размер: 228 KiB |
После Ширина: | Высота: | Размер: 80 KiB |
После Ширина: | Высота: | Размер: 326 KiB |
После Ширина: | Высота: | Размер: 89 KiB |
После Ширина: | Высота: | Размер: 337 KiB |
После Ширина: | Высота: | Размер: 394 KiB |
После Ширина: | Высота: | Размер: 42 KiB |
|
@ -90,7 +90,7 @@ To open the Tooltip for multiple actions, say while hovering over or clicking on
|
|||
</style>
|
||||
```
|
||||
|
||||
![Tooltip - Open Mode](images/opensOn.gif)
|
||||
![Blazor Tooltip in Open Mode](images/blazor-tooltip-in-open-mode.gif)
|
||||
|
||||
## Sticky mode
|
||||
|
||||
|
@ -122,7 +122,7 @@ With this mode set to `true`, Tooltips can be made to show up on the screen as l
|
|||
|
||||
```
|
||||
|
||||
![Tooltip - Sticky Mode](images/Sticky.gif)
|
||||
![Blazor Tooltip in Sticky Mode](images/blazor-tooltip-sticky-mode.gif)
|
||||
|
||||
## Open or Close tooltip with delay
|
||||
|
||||
|
@ -153,4 +153,4 @@ The Tooltips can be opened or closed after some delay by using the `OpenDelay` a
|
|||
</style>
|
||||
```
|
||||
|
||||
![Tooltip - Delay](images/delay.gif)
|
||||
![Blazor Tooltip with Delay](images/blazor-tooltip-delay.gif)
|
|
@ -40,7 +40,7 @@ Tooltips can be attached to 12 static locations around the target. On initializi
|
|||
}
|
||||
```
|
||||
|
||||
![Tooltip - Position](images/position.gif)
|
||||
![Changing Blazor Tooltip Position](images/blazor-tooltip-position.gif)
|
||||
|
||||
## Mouse trailing
|
||||
|
||||
|
@ -71,7 +71,7 @@ Tooltips can be positioned relative to the mouse pointer. This behavior can be e
|
|||
</style>
|
||||
```
|
||||
|
||||
![Tooltip - Mouse Trail](images/mouse-trail.gif)
|
||||
![Blazor Tooltip with Mouse Trail](images/blazor-tooltip-mouse-trail.gif)
|
||||
|
||||
> When mouse trailing option is enabled, the tip pointer position gets auto adjusted based on the target, and other position values like start, end, and middle are not applied (to prevent the pointer from moving out of target).
|
||||
|
||||
|
@ -108,6 +108,6 @@ Offset values are set to specify the distance between the target and tooltip ele
|
|||
|
||||
```
|
||||
|
||||
![Tooltip - Offset Value](images/Offset.gif)
|
||||
![Blazor Tooltip with Offset Value](images/blazor-tooltip-offset-value.gif)
|
||||
|
||||
> By default, collision is handled automatically and therefore when collision is detected the Tooltip fits horizontally and flips vertically.
|
|
@ -28,7 +28,7 @@ The Tooltip can either be assigned with auto height and width values or specific
|
|||
}
|
||||
```
|
||||
|
||||
![Tooltip - Dimension](images/dimension.gif)
|
||||
![Blazor Tooltip with Dimension](images/blazor-tooltip-dimension.gif)
|
||||
|
||||
### Scroll mode
|
||||
|
||||
|
@ -55,6 +55,6 @@ When `Height` is specified with a certain pixel value and the Tooltip content ov
|
|||
}
|
||||
```
|
||||
|
||||
![Tooltip - Scroll Mode](images/scroll.gif)
|
||||
![Scrolling in Blazor Tooltip](images/blazor-tooltip-scrolling.gif)
|
||||
|
||||
> The scrolling mode can best be seen when the sticky mode of the Tooltip is enabled. To enable sticky mode, set the `IsSticky` property to true.
|
|
@ -64,4 +64,4 @@ Refer to the following code example to add and display a HTML page to the Toolti
|
|||
</style>
|
||||
```
|
||||
|
||||
![Blazor - Tooltip - Template](images/template.gif)
|
||||
![Blazor Tooltip with Template](images/blazor-tooltip-template.gif)
|
|
@ -122,7 +122,7 @@ namespace TreeGridComponent.Data {
|
|||
|
||||
{% endtabs %}
|
||||
|
||||
![Footer Aggregate](images/summary.png)
|
||||
![Footer Aggregate in Blazor TreeGrid](images/blazor-treegrid-footer-aggregate.png)
|
||||
|
||||
> The aggregate values must be accessed inside the template using their corresponding `AggregateType`.
|
||||
|
||||
|
@ -212,7 +212,7 @@ namespace TreeGridComponent.Data {
|
|||
|
||||
{% endtabs %}
|
||||
|
||||
![Format Aggregate](images/aggregateformat.png)
|
||||
![Format Aggregate in Blazor TreeGrid](images/blazor-treegrid-aggregate-format.png)
|
||||
|
||||
<!-- Custom aggregate
|
||||
|
||||
|
|
|
@ -71,7 +71,7 @@ public class TreeData
|
|||
|
||||
{% endtabs %}
|
||||
|
||||
![Display HTML Content](images/disphtml.png)
|
||||
![Displaying HTML Content in Blazor TreeGrid Cell](images/blazor-treegrid-cell-with-html-content.png)
|
||||
|
||||
## Customize cell styles
|
||||
|
||||
|
@ -167,7 +167,7 @@ public class TreeData
|
|||
|
||||
{% endtabs %}
|
||||
|
||||
![Customize cell styles](images/cell-styling.png)
|
||||
![Blazor TreeGrid with Custom Cell Styles](images/blazor-treegrid-custom-cell-style.png)
|
||||
|
||||
## Auto wrap
|
||||
|
||||
|
@ -236,7 +236,7 @@ public class TreeData
|
|||
|
||||
{% endtabs %}
|
||||
|
||||
![Auto Wrap](images/autowrap.png)
|
||||
![Blaor TreeGrid with Auto Wrap](images/blazor-treegrid-auto-wrap.png)
|
||||
|
||||
## Grid lines
|
||||
|
||||
|
@ -313,7 +313,7 @@ public class TreeData
|
|||
|
||||
{% endtabs %}
|
||||
|
||||
![Grid Lines](images/gridlines.png)
|
||||
![Blazor TreeGrid with Grid Lines](images/blazor-treegrid-with-grid-lines.png)
|
||||
|
||||
> By default, the tree grid renders with **Default** mode.
|
||||
|
||||
|
@ -389,6 +389,6 @@ public class TreeData
|
|||
{% endtabs %}
|
||||
|
||||
|
||||
![Clip Mode](images/clipmode.png)
|
||||
![Clip Mode in Blazor TreeGrid](images/blazor-treegrid-clip-mode.png)
|
||||
|
||||
> By default, [ClipMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridColumn~ClipMode.html) value is **Ellipsis**.
|
||||
|
|
|
@ -59,7 +59,7 @@ The complex data binding in the Tree Grid can be achieved by using the dot(.) op
|
|||
}
|
||||
```
|
||||
|
||||
![Complex Data](images/complexdata.png)
|
||||
![Blazor TreeGrid Columns with Data Binding](images/blazor-treegrid-column-data-binding.png)
|
||||
|
||||
### Expando data binding
|
||||
|
||||
|
@ -129,7 +129,7 @@ Tree Grid supports Complex Data Binding with ExpandoObject. In the below example
|
|||
}
|
||||
```
|
||||
|
||||
![Expando Object Complex Data](images/expandocomplexdata.png)
|
||||
![Blazor TreeGrid Columns with Expando Data Binding](images/blazor-treegrid-column-expando-binding.png)
|
||||
|
||||
## Header template
|
||||
|
||||
|
@ -223,7 +223,7 @@ public class Employee
|
|||
{% endtabs %}
|
||||
|
||||
|
||||
![Header Template](images/headertemp.png)
|
||||
![Blazor TreeGrid Column with Header Template](images/blazor-treegrid-column-header-template.png)
|
||||
|
||||
> For Templated Tree Grid component, [ModelType](./templates/#template-modeltype) property of Tree Grid should be defined.
|
||||
|
||||
|
@ -296,7 +296,7 @@ public class TreeData
|
|||
|
||||
{% endtabs %}
|
||||
|
||||
![Header Text](images/headertext.png)
|
||||
![Blazor TreeGrid Column with Header Text](images/blazor-treegrid-column-header-text.png)
|
||||
|
||||
> 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.
|
||||
|
||||
|
@ -454,7 +454,7 @@ public class TreeDataFormat
|
|||
{% endtabs %}
|
||||
|
||||
|
||||
![Date Format](images/dateformat.png)
|
||||
![Date Formatting in Blazor TreeGrid Column](images/blazor-treegrid-column-date-format.png)
|
||||
|
||||
## AutoFit specific columns
|
||||
|
||||
|
@ -532,7 +532,7 @@ public class TreeData
|
|||
|
||||
{% endtabs %}
|
||||
|
||||
![AutoFit Columns](images/autofitcolumn.png)
|
||||
![Blazor TreeGrid with AutoFit Columns](images/blazor-treegrid-autofit-column.png)
|
||||
|
||||
> All the columns can be autofitted by invoking the **AutoFitColumns** method without column names.
|
||||
|
||||
|
@ -988,7 +988,7 @@ 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.
|
||||
|
||||
<!-- markdownlint-disable MD033 -->
|
||||
<img src="./images/column-resizing.png" alt="Touch interaction" style="width:320px;height: 620px">
|
||||
<img src="./images/blazor-treegrid-column-resizing.png" alt="Column Resizing in Blazor TreeGrid" style="width:320px;height: 620px">
|
||||
<!-- markdownlint-enable MD033 -->
|
||||
|
||||
## Column template
|
||||
|
@ -1071,7 +1071,7 @@ public class Employee
|
|||
|
||||
{% endtabs %}
|
||||
|
||||
![Column Template](images/columntemp.png)
|
||||
![Blazor TreeGrid with Column Template](images/blazor-treegrid-column-template.png)
|
||||
|
||||
> * 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
|
||||
template column, the tree grid actions cannot be performed.
|
||||
|
@ -1274,7 +1274,7 @@ public class TreeData
|
|||
|
||||
{% endtabs %}
|
||||
|
||||
![Column Chooser](images/columnchooser.png)
|
||||
![Show or Hide Columns in Blazor TreeGrid](images/blazor-treegrid-show-hide-column.png)
|
||||
|
||||
> 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.
|
||||
|
||||
|
@ -1355,7 +1355,7 @@ public class TreeData
|
|||
|
||||
{% endtabs %}
|
||||
|
||||
![Open Column Chooser](images/opencolumnchooser.png)
|
||||
![Opening Column Chooser in Blazor TreeGrid](images/blazor-treegrid-open-column-chooser.png)
|
||||
|
||||
> 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.
|
||||
|
||||
|
@ -1455,7 +1455,7 @@ namespace TreeGridComponent.Data
|
|||
|
||||
{% endtabs %}
|
||||
|
||||
![Column Chooser Template Image](images/col-chooser-template.png)
|
||||
![Column Chooser Template with Blazor TreeGrid](images/blazor-treegrid-column-chooser-template.png)
|
||||
|
||||
#### Custom component in column chooser template
|
||||
|
||||
|
@ -1682,7 +1682,7 @@ namespace TreeGridComponent.Data
|
|||
|
||||
The following output is displayed as a result of the above code example.
|
||||
|
||||
![Column Chooser Template](images/column-chooser-temp.png)
|
||||
![Column Chooser Template with Blazor TreeGrid](images/blazor-treegrid-column-with-chooser-template.png)
|
||||
|
||||
#### Column Chooser with group template
|
||||
|
||||
|
@ -1787,7 +1787,7 @@ namespace TreeGridComponent.Data
|
|||
|
||||
The following output is displayed as a result of the above code example.
|
||||
|
||||
![Column Chooser Group Template](images/column-chooser-grp-temp.png)
|
||||
![Column Chooser with Group in Blazor TreeGrid](images/blazor-treegrid-column-chooser-group-template.png)
|
||||
|
||||
## Column menu
|
||||
|
||||
|
@ -1867,7 +1867,7 @@ public class TreeData
|
|||
|
||||
{% endtabs %}
|
||||
|
||||
![Column Menu](images/columnmenu.png)
|
||||
![Blazor TreeGrid with Column Menu](images/blazor-treegrid-column-menu.png)
|
||||
|
||||
> 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.
|
||||
|
||||
|
@ -1941,7 +1941,7 @@ public class TreeData
|
|||
|
||||
{% endtabs %}
|
||||
|
||||
![Checkbox Column](images/checkboxcolumn.png)
|
||||
![Blazor TreeGrid with CheckBox Column](images/blazor-treegrid-checkbox-column.png)
|
||||
|
||||
## Responsive columns
|
||||
|
||||
|
@ -2010,7 +2010,7 @@ public class TreeData
|
|||
|
||||
{% endtabs %}
|
||||
|
||||
![Responsive Columns](images/responscolumn.png)
|
||||
![Blazor TreeGrid displays Responsive Columns](images/blazor-treegrid-responsive-column.png)
|
||||
|
||||
## Controlling Tree Grid actions
|
||||
|
||||
|
@ -2228,4 +2228,4 @@ public class TreeData
|
|||
|
||||
{% endtabs %}
|
||||
|
||||
![Checkbox](images/boolcheckbox.png)
|
||||
![Blazor TreeGrid Column with CheckBox](images/blazor-treegrid-column-with-checkbox.png)
|
|
@ -80,7 +80,7 @@ The following sample code demonstrates enabling context menu with its default it
|
|||
}
|
||||
```
|
||||
|
||||
![Tree Grid with context menu](images/context-menu.png)
|
||||
![Blazor TreeGrid with Context Menu](images/blazor-treegrid-context-menu.png)
|
||||
|
||||
## Custom context menu items
|
||||
|
||||
|
@ -141,4 +141,4 @@ The following sample code demonstrates defining custom context menu item and its
|
|||
}
|
||||
```
|
||||
|
||||
![Tree Grid with custom context menu item](images/custom-context.png)
|
||||
![Blazor TreeGrid with Custom Context Menu Item](images/blazor-treegrid-custom-context-menu-item.png)
|
|
@ -306,7 +306,7 @@ namespace TreeGridComponent.Data
|
|||
|
||||
The output will be as follows.
|
||||
|
||||
![Custom Validator](./images/custom-validator.png)
|
||||
![Blazor TreeGrid with Custom Validator](./images/blazor-treegrid-custom-validator.png)
|
||||
|
||||
#### Display validation message using in-built tooltip
|
||||
|
||||
|
@ -349,7 +349,7 @@ protected void HandleValidation(FieldIdentifier identifier)
|
|||
|
||||
The output will be as follows.
|
||||
|
||||
![Custom Validator 2](./images/custom-validator3.png)
|
||||
![Blazor TreeGrid with Custom Validator](./images/blazor-treegrid-with-custom-validator.png)
|
||||
|
||||
#### Disable in-built validator component
|
||||
|
||||
|
|
|
@ -168,7 +168,7 @@ public class TreeData
|
|||
{% endtabs %}
|
||||
|
||||
|
||||
![Toolbar Edit](images/tooledit.png)
|
||||
![Displaying Edit Option in Blazor TreeGrid Toolbar](images/blazor-treegrid-edit-in-toolbar.png)
|
||||
|
||||
## Cell edit type and its params
|
||||
|
||||
|
@ -277,7 +277,7 @@ public class TreeData
|
|||
|
||||
{% endtabs %}
|
||||
|
||||
![Celledit Type](images/celledittype.png)
|
||||
![Cell Editing in Blazor TreeGrid](images/blazor-treegrid-cell-editing.png)
|
||||
|
||||
> If edit type is not defined in the column, then it will be considered as the **stringedit** type (Textbox component).
|
||||
|
||||
|
@ -361,7 +361,7 @@ public class TreeData
|
|||
|
||||
{% endtabs %}
|
||||
|
||||
![CellEdit Template](images/edit-template.png)
|
||||
![Blazor TreeGrid with Cell Edit Template](images/blazor-treegrid-cell-edit-template.png)
|
||||
|
||||
## Edit Modes
|
||||
|
||||
|
@ -441,7 +441,7 @@ public class TreeData
|
|||
|
||||
{% endtabs %}
|
||||
|
||||
![CellEdit Mode](images/celleditmode.png)
|
||||
![Cell Editing in Blazor TreeGrid](images/blazor-treegrid-cell-edit.png)
|
||||
|
||||
> Cell edit mode is default mode of editing.
|
||||
|
||||
|
@ -514,7 +514,7 @@ public class TreeData
|
|||
|
||||
{% endtabs %}
|
||||
|
||||
![RowEdit mode](images/roweditmode.png)
|
||||
![Row Editing in Blazor TreeGrid](images/blazor-treegrid-row-editing.png)
|
||||
|
||||
### Dialog
|
||||
|
||||
|
@ -585,7 +585,7 @@ public class TreeData
|
|||
|
||||
{% endtabs %}
|
||||
|
||||
![DialogEdit Mode](images/dialogeditmode.png)
|
||||
![Dialog Editing in Blazor TreeGrid](images/blazor-treegrid-dialog-editing.png)
|
||||
|
||||
### Batch
|
||||
|
||||
|
@ -784,7 +784,7 @@ public class TreeData
|
|||
|
||||
{% endtabs %}
|
||||
|
||||
![Dialog Template](images/dlg-template.png)
|
||||
![Blazor TreeGrid with Dialog Template](images/blazor-treegrid-dialog-template.png)
|
||||
|
||||
> The template form editors should have **name** attribute.
|
||||
|
||||
|
@ -944,7 +944,7 @@ public class TreeData
|
|||
|
||||
{% endtabs %}
|
||||
|
||||
![Command Column](images/commandcolumn.png)
|
||||
![Blazor TreeGrid with Command Column](images/blazor-treegrid-command-column.png)
|
||||
|
||||
### Custom command
|
||||
|
||||
|
@ -1013,7 +1013,7 @@ The following sample code demonstrates adding custom command in the **Manage Rec
|
|||
```
|
||||
|
||||
The following image represents the custom command added in the **Manage Records** column of the Tree Grid component,
|
||||
![Custom Command](./images/custom-command.png)
|
||||
![Blazor TreeGrid with Custom Command](./images/blazor-treegrid-custom-command.png)
|
||||
|
||||
## Confirmation messages
|
||||
|
||||
|
@ -1084,7 +1084,7 @@ public class TreeData
|
|||
|
||||
{% endtabs %}
|
||||
|
||||
![Delete Confirmation](images/delconfirm.png)
|
||||
![Displaying Delete Confirmation Dialog in Blazor TreeGrid](images/blazor-treegrid-delete-confirmation.png)
|
||||
|
||||
> The **ShowDeleteConfirmDialog** supports all type of edit modes.
|
||||
|
||||
|
@ -1157,7 +1157,7 @@ public class TreeData
|
|||
|
||||
{% endtabs %}
|
||||
|
||||
![Column Validation](images/colval.png)
|
||||
![Column Validation in Blazor TreeGrid](images/blazor-treegrid-column-validation.png)
|
||||
|
||||
<!-- Custom validation
|
||||
|
||||
|
|
|
@ -75,7 +75,7 @@ namespace TreeGridComponent.Data {
|
|||
|
||||
{% endtabs %}
|
||||
|
||||
![Filtering](images/filter.png)
|
||||
![Filtering in Blazor TreeGrid](images/blazor-treegrid-filtering.png)
|
||||
|
||||
> * Apply and clear filtering by using the [FilterByColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.SfTreeGrid~FilterByColumn.html) and [ClearFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.SfTreeGrid~ClearFiltering.html) methods.
|
||||
> * To disable filtering for a particular column, set the [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridColumn~AllowFiltering.html) property of [Column](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridColumn.html) to false.
|
||||
|
@ -171,7 +171,7 @@ namespace TreeGridComponent.Data {
|
|||
|
||||
{% endtabs %}
|
||||
|
||||
![Initial Filter](images/initialfilter.png)
|
||||
![Blazor TreeGrid with Initial Filter](images/blazor-treegrid-initial-filter.png)
|
||||
|
||||
## Filter operators
|
||||
|
||||
|
@ -381,7 +381,7 @@ namespace TreeGridComponent.Data {
|
|||
|
||||
{% endtabs %}
|
||||
|
||||
![Filter Menu](images/filter-template.png)
|
||||
![Blazor TreeGrid with Filter Template](images/blazor-treegrid-filter-template.png)
|
||||
|
||||
## Filter menu
|
||||
|
||||
|
@ -452,7 +452,7 @@ namespace TreeGridComponent.Data {
|
|||
|
||||
{% endtabs %}
|
||||
|
||||
![Filter Menu](images/filtermenu.png)
|
||||
![Displaying Filter Menu in Blazor TreeGrid](images/blazor-treegrid-filter-menu.png)
|
||||
|
||||
> * [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridColumn.html#Syncfusion_Blazor_TreeGrid_TreeGridColumn_AllowFiltering) must be set as true to enable filter menu.
|
||||
> * Setting [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridColumn.html#Syncfusion_Blazor_TreeGrid_TreeGridColumn_AllowFiltering) property of [TreeGridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridColumn.html) as false will prevent filter menu rendering for a particular column.
|
||||
|
@ -539,7 +539,7 @@ namespace TreeGridComponent.Data {
|
|||
|
||||
{% endtabs %}.
|
||||
|
||||
![Filter Menu](images/filter-ui.png)
|
||||
![Blazor TreeGrid with Custom Filter Menu](images/blazor-treegrid-custom-filter-menu.png)
|
||||
|
||||
### Enable different filter for a column
|
||||
|
||||
|
@ -683,4 +683,4 @@ namespace TreeGridComponent.Data {
|
|||
|
||||
{% endtabs %}
|
||||
|
||||
![Excel Filter](images/excelfilter.png)
|
||||
![Displaying Excel Filter in Blazor TreeGrid](images/blazor-treegrid-excel-filter.png)
|
|
@ -231,7 +231,7 @@ The sorting feature enables to order the records. It can be enabled by setting t
|
|||
|
||||
After successful compilation of the application, simply press F5 to run the application. The Blazor Tree Grid component will render in the web browser as shown below.
|
||||
|
||||
![TreeGrid Output](images/treegrid.png)
|
||||
![Blazor TreeGrid](images/blazor-treegrid.png)
|
||||
|
||||
## See also
|
||||
|
||||
|
|
|
@ -519,7 +519,7 @@ public class TreeData
|
|||
{% endtabs %}
|
||||
|
||||
|
||||
![Localization](images/localization.png)
|
||||
![Localization in Blazor TreeGrid](images/blazor-treegrid-localization.png)
|
||||
|
||||
## Internationalization
|
||||
|
||||
|
@ -2751,7 +2751,7 @@ public class TreeData
|
|||
|
||||
{% endtabs %}
|
||||
|
||||
![Internationalization](images/international.png)
|
||||
![Internationalization in Blazor TreeGrid](images/blazor-treegrid-internationalization.png)
|
||||
|
||||
> * In the above sample, **Duration** column is formatted by **NumberFormatOptions**.
|
||||
> * By default, **locale** value is **en-US**. In order to change the **en-US** culture to a different culture, set the **SetCulture** method accordingly.
|
||||
|
@ -2883,4 +2883,4 @@ public class TreeData
|
|||
{% endtabs %}
|
||||
|
||||
|
||||
![RTL](images/rtl.png)
|
||||
![Right to Left in Blazor TreeGrid](images/blazor-treegrid-right-to-left.png)
|
После Ширина: | Высота: | Размер: 32 KiB |
После Ширина: | Высота: | Размер: 25 KiB |