зеркало из https://github.com/telerik/blazor-docs.git
docs: apply spelling fixes from ReDox report (#2010)
* Fix "It is" to "This is" Reported by retext_simplify * Update wcag-section-508-wai-aria.md * Fix typo * Fix typos * Update telerik-datasource-package.md * Update encoding.md * Update buttons.md * Update selection.md * Update overview.md * Update actions.md * Update building-blocks.md * Update overview.md * Update trendlines.md * Update candlestick.md * Update donut.md * Update heatmap.md * Update pie.md * Update selection.md * Update overview.md * Update wai-aria-support.md * Update custom-colors.md * Update presets.md * Update data-bind.md * Update keyboard-typing.md * Update overview.md * Update supported-formats.md * Update events.md * Update spreadsheet.md * Update spreadstream.md * Update templates.md * Update data-bind.md * Update context-menu.md * Update events.md * Update overview.md * Update preview-pane.md * Update search.md * Update sort.md * Update views.md * Update overview.md * Update overview.md * Update validation.md * Update events.md * Update formitemstemplate.md * Update state.md * Update editing.md * Update visible.md * Update width.md * Update editor.md * Update labels.md * Update pointers.md * Update labels.md * Update pointers.md * Update labels.md * Update scale.md * Update overview.md * Update labels.md * Update data-binding.md * Update refresh-data.md * Update sizing.md * Update overview.md * Update single.md * Update editor.md * Update filter.md * Update overview.md * Update events.md * Update selection.md * Update selection.md * Update appearance.md * Update templates.md * Update overview.md * Update mask-prompt.md * Update overview.md * Update navigation.md * Update templates.md * Update overview.md * Update overview.md * Update templates.md * Update refresh-data.md * Update overview.md * Update wai-aria-support.md * Update overview.md * Update data-binding.md * Update overview.md * Update data-bind.md * Update data-bind.md * Update events.md * Update edit-appointments.md * Update appearance.md * Update overview.md * Update overview.md * Update orientation.md * Update indicators.md * Update navigator.md * Update overview.md * Update candlestick.md * Update ohlc.md * Update overview.md * Update wai-aria-support.md * Update icons.md * Update built-in-tools.md * Update position.md * Update template.md * Update overview.md * Update row-drag-drop.md * Update checkbox.md * Update visible.md * Update incell.md * Update checkboxlist.md * Update single.md * Update editor.md * Update filter.md * Update drag-drop.md * Update overview.md * Update multiple.md * Update single.md * Update events.md * Update overview.md * Update buttons.md * Update stepper.md * Update ci-cd-build-server.md * Update troubleshooting.md * Update convert-project-wizard.md * Update localization.md * Update fiddler-jam.md * Update cdn-fallback.md * Update chart-performance-optimization.md * Update combo-debounce-onread.md * Update combobox-clear-button-click.md * Update combobox-not-closing.md * Update common-connection-closed.md * Update common-kb-render-fragment-parameter-null.md * Update common-newtonsoft-breaks-datasourcerequest-serialization.md * Update common-theme-customization-options.md * Update common-wasm-prerendering.md * Update date-input-picker-datetimeoffset.md * Update drawer-add-tooltip.md * Update dropdown-kb-bind-to-enum.md * Update dropdowns-get-model.md * Update editor-add-text-templates.md * Update form-dirty-fields.md * Update grid-aggregates-and-datatable.md * Update grid-bootstrap-flex-width-issue.md * Update grid-conditional-cell-background.md * Update grid-customize-delete-confirmation-dialog.md * Update grid-datasourcerequest-on-server.md * Update grid-detailtemplate-renders.md * Update grid-expand-button-tooltip.md * Update grid-filter-operator-dropdown.md * Update grid-force-refresh.md * Update grid-get-filtered-data.md * Update grid-multiselect-editor.md * Update grid-number-formatting-of-the-csv-export.md * Update grid-persist-selection-across-pages.md * Update grid-sort-descending.md * Update grid-static-group.md * Update grid-wrap-and-center-column-text.md * Update grids-foreign-key.md * Update listview-searchbox.md * Update menu-authorize-view.md * Update multiselect-selected-items-order.md * Update nest-render-fragment.md * Update numerictextbox-scientific-format-small-numbers.md * Update pdfviewer-sign-pdfs.md * Update textarea-autosize-max-height.md * Update textbox-validate-on-change.md * Update treeview-disabled-readonly.md * Update treeview-horizontal-scrollbar.md * Update typescript-exports-error.md * Update window-custom-css-styling.md * Update swatch-distribution.md * Update old-version-support-policy.md * Update 2-0-0.md * Update 3-0-0.md * Update 3-6-0.md * Update 4-3-0.md * Update components/pivotgrid/data-binding.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> * Update knowledge-base/dropdowns-get-model.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> --------- Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com>
This commit is contained in:
Родитель
690aca3fc2
Коммит
1a737f69b7
|
@ -18,7 +18,7 @@ In this article you will find information on the general topics of accessibility
|
|||
* [Standards and Policies](#standards-and-policies)
|
||||
* [Section 508](#section-508)
|
||||
* [W3C Web Content Accessibility Guidelines (WCAG) 2.2](#w3c-web-content-accessibility-guidelines-wcag-22)
|
||||
* [Technical Specificatns](#technical-specifications)
|
||||
* [Technical Specifications](#technical-specifications)
|
||||
* [WAI-ARIA](#wai-aria)
|
||||
* [Keyboard Navigation](#keyboard-navigation)
|
||||
* [Accessibility Compliance Components Table](#accessibility-compliance-components-table)
|
||||
|
|
|
@ -643,7 +643,7 @@ The MultiSelect has a value that is a `List` and the validation attributes must
|
|||
|
||||
### RadioGroup
|
||||
|
||||
The radio group acts in a way similar to a dropdownlist - there is a collection of items that have values, and those values are used to populate a field in the model that is being validated. This lets you define the necessary data annottation attributes on the validated class. Note that required field validation needs nullable fields.
|
||||
The radio group acts in a way similar to a dropdownlist - there is a collection of items that have values, and those values are used to populate a field in the model that is being validated. This lets you define the necessary data annotation attributes on the validated class. Note that required field validation needs nullable fields.
|
||||
|
||||
>caption Sample required and range validation in the RadioGroup
|
||||
|
||||
|
|
|
@ -16,7 +16,7 @@ The Telerik components use the Telerik [Loader]({%slug loader-overview%}) and [L
|
|||
|
||||
There are three patterns for showing a loading indicator:
|
||||
|
||||
* Some components add a large busy indicator that covers the entire data portion of the comopnent when they detect a slow-running `async` **data operation** (when it takes more than 600ms). For example, when the user inserts a record in the grid and the data service operation takes longer than that, there will be a loading indicator over the grid.
|
||||
* Some components add a large busy indicator that covers the entire data portion of the component when they detect a slow-running `async` **data operation** (when it takes more than 600ms). For example, when the user inserts a record in the grid and the data service operation takes longer than that, there will be a loading indicator over the grid.
|
||||
|
||||
* Some components and scenarios show placeholder items until the actual items are fetched/rendered. For example, virtualized rows in a grid, or dropdowns while being filtered. At the moment, these placeholders do not have any delay and show up immediately.
|
||||
|
||||
|
@ -501,7 +501,7 @@ Make sure to have the proper cascade so that you do not break other components o
|
|||
|
||||
### Loading Sign Does Not Hide
|
||||
|
||||
In some situations, peforming a certain action will show a loading indicator that will appear to never hide. There are two common reasons for such behavior:
|
||||
In some situations, performing a certain action will show a loading indicator that will appear to never hide. There are two common reasons for such behavior:
|
||||
|
||||
* **Reason**: The operation is actually very slow, it may take minutes to return the data in some complex scenarios.
|
||||
|
||||
|
|
|
@ -41,7 +41,7 @@ The following classes and extension methods are the key components to the packag
|
|||
|
||||
* The `ToDataSourceResult` method generates a LINQ expressions based on the `DataSourceRequest` and passes them to the `IQueryable.Provider`. It is up to the provider (collection) to resolve it and execute it against the database (for example, an `IQueryable` coming from an EntityFrameworkCore context will create and run an SQL query for you).
|
||||
|
||||
* [`DataSourceRequest`](/blazor-ui/api/Telerik.DataSource.DataSourceRequest) - the class that describes the request for data - what page index, page size, filters and sorts, groups and aggregates are required by the client. You can receive it from Telerik components (such as the [Blazor grid in its manual data operations mode]({%slug components/grid/manual-operations%})), or over the wire and deserialize it (such as for requests coming from widgets like the [UI for ASP.NET Core Grid with remote data](https://demos.telerik.com/aspnet-core/grid/remote-data-binding)). You can even create a `new` instance of the object and populate its fields according to some other business logic (like an OData querystring or some other case). This object is in the `Telerik.DataSource` namespace.
|
||||
* [`DataSourceRequest`](/blazor-ui/api/Telerik.DataSource.DataSourceRequest) - the class that describes the request for data - what page index, page size, filters and sorts, groups and aggregates are required by the client. You can receive it from Telerik components (such as the [Blazor grid in its manual data operations mode]({%slug components/grid/manual-operations%})), or over the wire and deserialize it (such as for requests coming from widgets like the [UI for ASP.NET Core Grid with remote data](https://demos.telerik.com/aspnet-core/grid/remote-data-binding)). You can even create a `new` instance of the object and populate its fields according to some other business logic (like an OData query string or some other case). This object is in the `Telerik.DataSource` namespace.
|
||||
|
||||
* When you receive such an object from a Telerik component, you can iterate over the information it provides and implement you own data source operations, you are not obliged to use the `ToDataSourceResult` method (but it helps shape the data accordingly, so you may want to examine its `DataSourceResult` from a simple run to see what it contains).
|
||||
|
||||
|
|
|
@ -12,7 +12,7 @@ position: 3
|
|||
|
||||
Encoding (symbology) represents the mapping between messages and barcodes.
|
||||
|
||||
You can choose which supported encoding to use by setting the `Type` paramater of the component. The following table lists the available symbologies and their specifications supported by the Barcode.
|
||||
You can choose which supported encoding to use by setting the `Type` parameter of the component. The following table lists the available symbologies and their specifications supported by the Barcode.
|
||||
|
||||
>important If the value of a particular encoding does not meet the expected length or character set, the barcode will **not** be shown.
|
||||
|
||||
|
|
|
@ -15,11 +15,11 @@ The ButtonGroup component supports two types of buttons that have different beha
|
|||
* [`ButtonGroupToggleButton`](#buttongroup-togglebutton)
|
||||
* [`ButtonGroupButton`](#buttongroup-button)
|
||||
|
||||
You can add the desired button instances by declaring the dedicated button tags. Additionally, you can individually confire their [appearance]({%slug buttongroup-appearance%}), [enabled/disabled state](#disabled-state) and [visibility](#visibility) through the paramaters each button tag exposes.
|
||||
You can add the desired button instances by declaring the dedicated button tags. Additionally, you can individually configure their [appearance]({%slug buttongroup-appearance%}), [enabled/disabled state](#disabled-state) and [visibility](#visibility) through the parameters each button tag exposes.
|
||||
|
||||
## ButtonGroup ToggleButton
|
||||
|
||||
The `ButtonGroupToggleButton` becomes selected when clicked and de-selects when another one is clicked. If multiple selection is enabled, the user can select more than one `ButtonGroupToggleButton` at a time. Clicking on a selected button in this case will de-select it. Read more in the [Selection]({%slug buttongroup-selection%}) article.
|
||||
The `ButtonGroupToggleButton` becomes selected when clicked and deselects when another one is clicked. If multiple selection is enabled, the user can select more than one `ButtonGroupToggleButton` at a time. Clicking on a selected button in this case will deselect it. Read more in the [Selection]({%slug buttongroup-selection%}) article.
|
||||
|
||||
The `ButtonGroupToggleButton` inherits the parameters and behavior of the [`TelerikToggleButton`]({%slug togglebutton-overview%}) component.
|
||||
|
||||
|
@ -27,7 +27,7 @@ The `ButtonGroupToggleButton` inherits the parameters and behavior of the [`Tele
|
|||
|
||||
The `ButtonGroupButton` does not change its visual state when clicked. It behaves as a regular button and does not support selection.
|
||||
|
||||
The `ButtonGroupButton` iherits the parameters and behavior of the [`TelerikButton`]({%slug components/button/overview%}) component.
|
||||
The `ButtonGroupButton` inherits the parameters and behavior of the [`TelerikButton`]({%slug components/button/overview%}) component.
|
||||
|
||||
## Disabled State
|
||||
|
||||
|
|
|
@ -20,7 +20,7 @@ You can control whether a button is selected (it is in its `Primary` state) thro
|
|||
|
||||
## Single Selection
|
||||
|
||||
When you click a button, it becomes selected. When you click another button, the first one will become de-selected and the second one will be selected.
|
||||
When you click a button, it becomes selected. When you click another button, the first one will become deselected and the second one will be selected.
|
||||
|
||||
>caption Single Selection in the ButtonGroup
|
||||
|
||||
|
|
|
@ -67,7 +67,7 @@ You can display a wider range of dates by rendering multiple instances of the Ca
|
|||
|
||||
## Events
|
||||
|
||||
The Calendar generates events that you can handle and further customize ist behavior. [Read more about the Blazor Calendar events...]({%slug components/calendar/events%}).
|
||||
The Calendar generates events that you can handle and further customize its behavior. [Read more about the Blazor Calendar events...]({%slug components/calendar/events%}).
|
||||
|
||||
## Week Numbers
|
||||
|
||||
|
|
|
@ -39,7 +39,7 @@ You can define the orientation of the buttons through the `Orientation` paramete
|
|||
|
||||
>caption Change the orientation of the action buttons. The result from the snippet below.
|
||||
|
||||
![Verical orientation of the action buttons](images/buttons-orientation-example.png)
|
||||
![Vertical orientation of the action buttons](images/buttons-orientation-example.png)
|
||||
|
||||
````CSHTML
|
||||
@* Change the orientation of the action buttons *@
|
||||
|
|
|
@ -203,7 +203,7 @@ Use the `CardTitle` tag to render a title (heading). Although the header area is
|
|||
|
||||
## CardSubTitle
|
||||
|
||||
Use the `CardSubTitle` tag to render sub title. Although the header area is suitable for placing title and sub title, it is not required and you can use the `CardSubTitle` as desired. It can also be used along with the `CardTitle` or as a standalone element. The below sample demontstrates both approaches.
|
||||
Use the `CardSubTitle` tag to render sub title. Although the header area is suitable for placing title and sub title, it is not required and you can use the `CardSubTitle` as desired. It can also be used along with the `CardTitle` or as a standalone element. The below sample demonstrates both approaches.
|
||||
|
||||
>caption Use `CardSubTitle` in the Card component. The result from the snippet below.
|
||||
|
||||
|
|
|
@ -94,7 +94,7 @@ You can add a descriptive text that enriches the [Title](#title) by adding the `
|
|||
|
||||
To control the chart size, use its `Width` and `Height` properties. You can read more on how they work in the [Dimensions]({%slug common-features/dimensions%}) article.
|
||||
|
||||
You can also set the chart size in percentage values so it occupies its container when it renderes. If the parent container size changes, you must call the chart's `Refresh()` C# method after the DOM has been redrawn and the new container dimensions are rendered. You can do this when you explicitly change container sizes (like in the example below), or from code that gets called by events like `window.resize`. You can find an example of making charts redraw on `window.resize` in the [Responsive Chart](https://github.com/telerik/blazor-ui/tree/master/chart/responsive-chart) sample.
|
||||
You can also set the chart size in percentage values so it occupies its container when it renders. If the parent container size changes, you must call the chart's `Refresh()` C# method after the DOM has been redrawn and the new container dimensions are rendered. You can do this when you explicitly change container sizes (like in the example below), or from code that gets called by events like `window.resize`. You can find an example of making charts redraw on `window.resize` in the [Responsive Chart](https://github.com/telerik/blazor-ui/tree/master/chart/responsive-chart) sample.
|
||||
|
||||
|
||||
>caption Change the 100% chart size dynamically to have a responsive chart
|
||||
|
|
|
@ -212,7 +212,7 @@ Use the Linear Trendline to visualize the rise or decline of a specific quantity
|
|||
|
||||
### Moving Average Trendline
|
||||
|
||||
Use the Moving Average Trendline to smoothen out data fluctuations. This trendline computes and visualizes an average of all data points over a specified period. By default, this period is set to two chart intervals.
|
||||
Use the Moving Average Trendline to smooth out data fluctuations. This trendline computes and visualizes an average of all data points over a specified period. By default, this period is set to two chart intervals.
|
||||
|
||||
>caption Line Chart with a moving average trendline
|
||||
|
||||
|
|
|
@ -120,7 +120,7 @@ The <a href="https://www.telerik.com/blazor-ui/candlestick-chart" target="_blank
|
|||
|
||||
### DownColor
|
||||
|
||||
Set the color - a valid CSS, RGB, RGBA color - of the series when the `OpenField` is greater than the `CloseField` by setting the `DownColor` property of the `ChartSeries`. This can be passed throught the data model and bound to the `DownColorField`.
|
||||
Set the color - a valid CSS, RGB, RGBA color - of the series when the `OpenField` is greater than the `CloseField` by setting the `DownColor` property of the `ChartSeries`. This can be passed through the data model and bound to the `DownColorField`.
|
||||
|
||||
@[template](/_contentTemplates/stockchart/link-to-basics.md#color-field-column-ohlc-candlestick)
|
||||
|
||||
|
|
|
@ -74,7 +74,7 @@ Donut series
|
|||
|
||||
## Donut Chart Specific Appearance Settings
|
||||
|
||||
The following sections explain speciifc configuration options to the donut charts:
|
||||
The following sections explain specific configuration options to the donut charts:
|
||||
|
||||
* [Rotation](#rotation)
|
||||
* [Color Field](#color-field)
|
||||
|
@ -86,7 +86,7 @@ The following sections explain speciifc configuration options to the donut chart
|
|||
|
||||
### Rotation
|
||||
|
||||
By default, the firt segment starts at the top. You can change that by using the `StartAngle` property of the series.
|
||||
By default, the first segment starts at the top. You can change that by using the `StartAngle` property of the series.
|
||||
|
||||
### Color Field
|
||||
|
||||
|
|
|
@ -272,7 +272,7 @@ To change the marker type you should set the `Type` parameter, exposed on the `C
|
|||
|
||||
### Color
|
||||
|
||||
The `Color` parameter controls the general color pallete for the markers of the Heatmap. The invidual marker color set to the markers depends the value bound to the `Field` - the higher the value the darker the color.
|
||||
The `Color` parameter controls the general color palette for the markers of the Heatmap. The individual marker color set to the markers depends the value bound to the `Field` - the higher the value the darker the color.
|
||||
|
||||
>caption Change the Color of the Heatmap.
|
||||
|
||||
|
|
|
@ -77,7 +77,7 @@ Pie series
|
|||
|
||||
### Rotation
|
||||
|
||||
By default, the firt segment starts at the top. You can change that by using the `StartAngle` property of the series.
|
||||
By default, the first segment starts at the top. You can change that by using the `StartAngle` property of the series.
|
||||
|
||||
### Color Field
|
||||
|
||||
|
|
|
@ -67,7 +67,7 @@ Use the `SelectedItems` parameter together with the `SelectedItemsChanged` event
|
|||
|
||||
## Two way Binding
|
||||
|
||||
When you use the `@bind-SelectedItems` syntx, the ChipList will automatically update the `SelectedItems` collection when the user change the selection.
|
||||
When you use the `@bind-SelectedItems` syntax, the ChipList will automatically update the `SelectedItems` collection when the user change the selection.
|
||||
|
||||
````CSHTML
|
||||
<TelerikChipList Data="@ChipListSource"
|
||||
|
|
|
@ -36,7 +36,7 @@ This section explains the connection between the [ChunkCount, Value, and MaxValu
|
|||
|
||||
### Matching Values
|
||||
|
||||
When the `Max` and `ChunkCount` parameters match in value, the `Value` parameter represents the number of chunks that are hightlighted.
|
||||
When the `Max` and `ChunkCount` parameters match in value, the `Value` parameter represents the number of chunks that are highlighted.
|
||||
|
||||
````CSHTML
|
||||
<TelerikChunkProgressBar Value="2"
|
||||
|
|
|
@ -57,7 +57,7 @@ The Numeric inputs must implement the **NumericTextBox** specification.
|
|||
[NumericTextBox accessibility specification]({{numerictextbox_a11y_link}})
|
||||
|
||||
|
||||
Here is one additional requirement for those numerics as their visible labels have only a single letter as a tex:
|
||||
Here is one additional requirement for those numerics as their visible labels have only a single letter as a text:
|
||||
|
||||
| Selector | Attribute | Usage |
|
||||
| -------- | --------- | ----- |
|
||||
|
|
|
@ -36,5 +36,5 @@ You can provide your own set of colors to the Blazor Color Palette component. Yo
|
|||
|
||||
## See Also
|
||||
|
||||
* [Color Paletter Overview]({%slug colorpalette-overview%})
|
||||
* [Color Palette Overview]({%slug colorpalette-overview%})
|
||||
* [Predefined Color Lists]({%slug colorpalette-presets%})
|
||||
|
|
|
@ -45,5 +45,5 @@ The Telerik Blazor Color Palette component comes with a set of predefined color
|
|||
|
||||
## See Also
|
||||
|
||||
* [Color Paletter Overview]({%slug colorpalette-overview%})
|
||||
* [Color Palette Overview]({%slug colorpalette-overview%})
|
||||
* [Custom Color Lists]({%slug colorpalette-custom-colors%})
|
||||
|
|
|
@ -64,7 +64,7 @@ To bind the ComboBox to a model:
|
|||
|
||||
1. Populate its `Data` parameter with the collection of items you want in the dropdown.
|
||||
1. Set the `TextField` and `ValueField` parameters to point to the corresponding property names of the model.
|
||||
1. Set the `Value` property to the intial value of the component (optional).
|
||||
1. Set the `Value` property to the initial value of the component (optional).
|
||||
|
||||
> The `TextField` and `ValueField` parameters must point to model properties, which are of **primitive** type (`int`, `string`, etc.). The `Value` and `ValueField` types must match and also be primitive.
|
||||
|
||||
|
|
|
@ -88,7 +88,7 @@ This setting applies only to scenarios with a **two-digit year `Format` (`yy`)**
|
|||
|
||||
`TwoDigitYearMax` defines the maximum year value that is considered part of the **current century**. The default value is `68`.
|
||||
|
||||
For example, a user input of `68` will be treated as `2068`, but `69` will be treated as `1969`. The paremeter supports both two-digit or four-digit integers.
|
||||
For example, a user input of `68` will be treated as `2068`, but `69` will be treated as `1969`. The parameter supports both two-digit or four-digit integers.
|
||||
|
||||
* To allow only years from the *current century*, set to `100`.
|
||||
* To allow only years from the *previous century*, set to `0`.
|
||||
|
|
|
@ -10,7 +10,7 @@ position: 0
|
|||
|
||||
# Blazor DateInput Overview
|
||||
|
||||
The <a href="https://www.telerik.com/blazor-ui/date-input" target="_blank">Blazor Date Input component</a> allows the user to type a date in a more convenient and user-friendly way, compared to a regular textbox. The DateInput can display its value with a specific date format and hin the user to follow it during typing. The component also provides multiple settings that are related to the typing and auto-correction user experience. The DateInput is a base for other components such as the [DatePicker]({%slug components/datepicker/overview%}), [DateTimePicker]({%slug components/datetimepicker/overview%}) and [DateRangePicker]({%slug daterangepicker-overview%}).
|
||||
The <a href="https://www.telerik.com/blazor-ui/date-input" target="_blank">Blazor Date Input component</a> allows the user to type a date in a more convenient and user-friendly way, compared to a regular textbox. The DateInput can display its value with a specific date format and hint the user to follow it during typing. The component also provides multiple settings that are related to the typing and auto-correction user experience. The DateInput is a base for other components such as the [DatePicker]({%slug components/datepicker/overview%}), [DateTimePicker]({%slug components/datetimepicker/overview%}) and [DateRangePicker]({%slug daterangepicker-overview%}).
|
||||
|
||||
|
||||
## Creating Blazor DateInput
|
||||
|
|
|
@ -64,7 +64,7 @@ The format strings are culture aware (see [Globalization - Overview]({%slug glob
|
|||
|
||||
>caption AM, PM and 12/24 Hour Formats
|
||||
|
||||
The AM/PM desginators and 12/24 formats are also taken into account as explained in the table below, and they also affect the rendering of the time pickers.
|
||||
The AM/PM designators and 12/24 formats are also taken into account as explained in the table below, and they also affect the rendering of the time pickers.
|
||||
|
||||
|
||||
| Custom Format Contains | Culture Does Not Support AM/PM | Culture Supports AM/PM |
|
||||
|
|
|
@ -142,7 +142,7 @@ model value: @DateTimePickerValue
|
|||
|
||||
The `OnClose` event fires before the DateTimePicker popup closes.
|
||||
|
||||
As an artgument, the event handler receives a [`DateTimePickerCloseEventArgs` object](/blazor-ui/api/telerik.blazor.components.datetimepickercloseeventargs), which contains the following properties:
|
||||
As an argument, the event handler receives a [`DateTimePickerCloseEventArgs` object](/blazor-ui/api/telerik.blazor.components.datetimepickercloseeventargs), which contains the following properties:
|
||||
|
||||
| Property | Description |
|
||||
| --- | --- |
|
||||
|
|
|
@ -11,7 +11,7 @@ position: 1
|
|||
# Telerik SpreadProcessing
|
||||
|
||||
|
||||
>note <a href = "https://www.telerik.com/blazor-ui/spreadprocessing" target="_blank">RadSpreadProcessing</a> is part of the **Telerik Document Processing** libraries. The full documentation for this component is available at [https://docs.telerik.com/devtools/document-processing/libraries/radspreadsprocessing](https://docs.telerik.com/devtools/document-processing/libraries/radspreadprocessing/overview).
|
||||
>note <a href = "https://www.telerik.com/blazor-ui/spreadprocessing" target="_blank">RadSpreadProcessing</a> is part of the **Telerik Document Processing** libraries. The full documentation for this component is available at [https://docs.telerik.com/devtools/document-processing/libraries/radspreadprocessing/overview](https://docs.telerik.com/devtools/document-processing/libraries/radspreadprocessing/overview).
|
||||
|
||||
This library enables you to work with spreadsheet documents – create ones from scratch, modify existing documents or convert between the most common spreadsheet formats. You can save the generated workbook to a local file, stream, or stream it to the client browser.
|
||||
|
||||
|
|
|
@ -12,7 +12,7 @@ position: 1
|
|||
|
||||
This article briefly explains the specifics of <a href = "https://www.telerik.com/blazor-ui/spreadstreamprocessing" target="_blank">RadSpreadStreamProcessing</a> - what is spread streaming, how it works compared to the RadSpreadProcessing library and when to use it.
|
||||
|
||||
>note <a href = "https://www.telerik.com/blazor-ui/spreadstreamprocessing" target="_blank">RadSpreadStreamProcessing</a> is part of the **Telerik Document Processing** libraries. The full documentation for this component is available at [https://docs.telerik.com/devtools/document-processing/libraries/radspreadstreamsprocessing](https://docs.telerik.com/devtools/document-processing/libraries/radspreadstreamprocessing/overview).
|
||||
>note <a href = "https://www.telerik.com/blazor-ui/spreadstreamprocessing" target="_blank">RadSpreadStreamProcessing</a> is part of the **Telerik Document Processing** libraries. The full documentation for this component is available at [https://docs.telerik.com/devtools/document-processing/libraries/radspreadstreamprocessing](https://docs.telerik.com/devtools/document-processing/libraries/radspreadstreamprocessing/overview).
|
||||
|
||||
|
||||
![SpreadStreamProcessing Fast Export image](images/SpreadStreamProcessing-Overview_01.png)
|
||||
|
|
|
@ -21,7 +21,7 @@ The `<ItemTemplate>` controls the rendering of the [data bound items]({%slug dra
|
|||
|
||||
This template receives a `context` argument that is of the data model type and represents the current item.
|
||||
|
||||
When using an `ItemTemplate`, the Drawer can still [navigate automatically if the `UrlField` parameter is set, or if the Drawer data items have a popuplated `Url` property]({%slug drawer-navigation%}).
|
||||
When using an `ItemTemplate`, the Drawer can still [navigate automatically if the `UrlField` parameter is set, or if the Drawer data items have a populated `Url` property]({%slug drawer-navigation%}).
|
||||
|
||||
>caption Use ItemTemplate to control the rendering of the items in the Drawer.
|
||||
|
||||
|
|
|
@ -64,7 +64,7 @@ To bind the DropDownList to a model:
|
|||
|
||||
1. Populate its `Data` parameter with the collection of items you want in the dropdown.
|
||||
1. Set the `TextField` and `ValueField` parameters to point to the corresponding property names of the model.
|
||||
1. Set the `Value` property to the intial value of the component (optional).
|
||||
1. Set the `Value` property to the initial value of the component (optional).
|
||||
|
||||
> The `TextField` and `ValueField` parameters must point to model properties, which are of **primitive** type (`int`, `string`, etc.). The `Value` and `ValueField` types must match and also be primitive.
|
||||
|
||||
|
|
|
@ -23,7 +23,7 @@ The component uses the Telerik UI for Blazor ContextMenu and provides the follow
|
|||
|
||||
The `Rename` command of the FileManager ContextMenu allows renaming the selected file or folder. Users can rename one item at a time - the one they open the ContextMenu for.
|
||||
|
||||
Clicking the command will fire the [`OnEdit`]({%slug filemanager-events%}#onedit) event. An input with the file/folder name will be rendered, so the user can edit it. Pressing `Enter` or bluring the input will fire the [`OnUpdate`]({%slug filemanager-events%}#onupdate) event allowing you can handle the name update of the actual item in your data source.
|
||||
Clicking the command will fire the [`OnEdit`]({%slug filemanager-events%}#onedit) event. An input with the file/folder name will be rendered, so the user can edit it. Pressing `Enter` or blurring the input will fire the [`OnUpdate`]({%slug filemanager-events%}#onupdate) event allowing you can handle the name update of the actual item in your data source.
|
||||
|
||||
When an item is renamed, make sure to also update its `Path`. Renaming a directory that has children will require updating their `Path` as well. If the actual file system is modified, then this will be handled out of the box.
|
||||
|
||||
|
@ -44,7 +44,7 @@ In addition, you can also provide a custom file name through the `FileName` fiel
|
|||
|
||||
The `Delete` command of the FileManager ContextMenu allows deleting of the selected files. Multiple file deletion is supported. It does not matter which item the ContextMenu for, the `Delete` command will handle the deletion of all selected files.
|
||||
|
||||
Clicking the command will open a delete confirmation dialog. Pressing the `OK` button wil fire the [`OnDelete`]({%slug filemanager-events%}#ondelete) event, so you can handle the deletion of the actual files in the data source. Plessing the `Cancel` button will close the dialog and prevent the deletion.
|
||||
Clicking the command will open a delete confirmation dialog. Pressing the `OK` button will fire the [`OnDelete`]({%slug filemanager-events%}#ondelete) event, so you can handle the deletion of the actual files in the data source. Pressing the `Cancel` button will close the dialog and prevent the deletion.
|
||||
|
||||
# Example
|
||||
|
||||
|
|
|
@ -14,9 +14,9 @@ This article explains how to bind the FileManager for Blazor to hierarchical dat
|
|||
|
||||
Hierarchical data means that the collection of child items is provided in a field of its parent's model:
|
||||
|
||||
* The `Items` field contains a collection of all children icluding sub-folders and files. They will be rendered in the [Preview Pane]({%slug filemanager-preview-pane%}) when the parent folder is selected.
|
||||
* The `Items` field contains a collection of all children including sub-folders and files. They will be rendered in the [Preview Pane]({%slug filemanager-preview-pane%}) when the parent folder is selected.
|
||||
|
||||
* The `Directories` field contains a collection of the subolders of a directory. They will be rendered in the TreeView navigation pane. If there are `Directories` for a specific folder it will have an expand icon. The `HasDirectories` field can override this, however, but it is not required for hierarchical data binding.
|
||||
* The `Directories` field contains a collection of the subfolders of a directory. They will be rendered in the TreeView navigation pane. If there are `Directories` for a specific folder it will have an expand icon. The `HasDirectories` field can override this, however, but it is not required for hierarchical data binding.
|
||||
|
||||
This approach of providing items lets you gather separate collections of data that may even come from different sources.
|
||||
|
||||
|
|
|
@ -244,7 +244,7 @@ The above model properties have the following meaning for the FileManager:
|
|||
| `DateModifiedUtc` | The modification date of the file in UTC. Required.
|
||||
| **Item relations** | |
|
||||
| `Id `| The unique identifier of the file. Required for [**binding to flat data**]({%slug filemanager-data-binding-flat-data%}).
|
||||
| `ParentId` | Identifies the file's parent. Required for [**binding to flat data**]({%slug filemanager-data-binding-flat-data%}). Set to `null` for root items. Do *not* use `ParentId` with hierarhical data.
|
||||
| `ParentId` | Identifies the file's parent. Required for [**binding to flat data**]({%slug filemanager-data-binding-flat-data%}). Set to `null` for root items. Do *not* use `ParentId` with hierarchical data.
|
||||
| `HasDirectories` | Determines whether the item has subdirectories. Required for binding to [**flat data**]({%slug filemanager-data-binding-flat-data%}) If `true`, the directory will show an expand arrow. With [**hierarchical data**]({%slug filemanager-data-binding-hierarchical-data%}), the FileManager renders expand icons based on `Directories`, but `HasDirectories` will take precedence.
|
||||
| `Directories` | Defines the item subdirectories. Required for [binding to **hierarchical data**]({%slug filemanager-data-binding-hierarchical-data%}).
|
||||
| `Items` | Defines all the subitems (directories and files) of the item.
|
||||
|
@ -272,7 +272,7 @@ All [FileManager item features](#fileManager-item-features) map to model propert
|
|||
| `DirectoriesField`| `"Directories"`
|
||||
| `EntriesField`| `"Entries"`
|
||||
|
||||
>important Do not use `ParentId` with hierarhical data. This will confuse the FileManager that it is bound to flat data and the component may not render any items. If the model must have a `ParentId` property, set `ParentIdField` to a non-existent property.
|
||||
>important Do not use `ParentId` with hierarchical data. This will confuse the FileManager that it is bound to flat data and the component may not render any items. If the model must have a `ParentId` property, set `ParentIdField` to a non-existent property.
|
||||
|
||||
## Next Steps
|
||||
|
||||
|
|
|
@ -333,7 +333,7 @@ The `OnDownload` event fires before a file download starts. The event is cancell
|
|||
|
||||
The files are downloaded with the help of a Base64 data URL, which is sent to the browser through `JSInterop`. JavaScript code generates an `<a>` tag with an [object URL](https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL_static) on the web page and the tag is clicked programmatically, so that the browser shows its **Save File** dialog.
|
||||
|
||||
Large files (tens or hundreds of megabytes) may hit the browser's max data URL length or some memory threshold. In such cases, perfom the following steps:
|
||||
Large files (tens or hundreds of megabytes) may hit the browser's max data URL length or some memory threshold. In such cases, perform the following steps:
|
||||
|
||||
* Use the [Microsoft JSInterop approach and serve the file directly from the server to the user](https://learn.microsoft.com/en-us/aspnet/core/blazor/file-downloads?view=aspnetcore-6.0#download-from-a-url).
|
||||
* Start the Microsoft JSInterop algorithm from the FileManager's `OnDownload` handler, but cancel the event to prevent duplicate downloads.
|
||||
|
|
|
@ -353,16 +353,16 @@ The FileManger allows navigating through the file system in a couple ways - Tree
|
|||
|
||||
## Preview Pane
|
||||
|
||||
A dedicated Preview Pane can be toggled to display details for the selected file or folder. Its visibility is controlled via a Switch in the Toolbar. [Read more abot the FileManager Preview Pane...]({%slug filemanager-preview-pane%})
|
||||
A dedicated Preview Pane can be toggled to display details for the selected file or folder. Its visibility is controlled via a Switch in the Toolbar. [Read more about the FileManager Preview Pane...]({%slug filemanager-preview-pane%})
|
||||
|
||||
## Context Menu
|
||||
|
||||
The FileManaged displays a Context Menu on right click of an item. The menu provides several built-in commands. [Read more about the Context Menu options...]({%slug filemanager-context-menu%})
|
||||
The FileManager displays a Context Menu on right click of an item. The menu provides several built-in commands. [Read more about the Context Menu options...]({%slug filemanager-context-menu%})
|
||||
|
||||
|
||||
## Reference and Methods
|
||||
|
||||
To use the FileManager methods, define a reference to the component instance with the `@ref` attribute (example below). The Filemanager is a generic component and its type comes from the model it is bound to.
|
||||
To use the FileManager methods, define a reference to the component instance with the `@ref` attribute (example below). The FileManager is a generic component and its type comes from the model it is bound to.
|
||||
|
||||
The available FileManager methods are:
|
||||
|
||||
|
|
|
@ -22,7 +22,7 @@ The preview pane visibility toggles by the Switch Tool in the FileManager Toolba
|
|||
|
||||
>caption Toggle Preview Pane using the Switch.
|
||||
|
||||
![Blazor Filemanager Preview Pane](images/filemanager-preview-pane.png)
|
||||
![Blazor FileManager Preview Pane](images/filemanager-preview-pane.png)
|
||||
|
||||
````CSHTML
|
||||
@using System.IO
|
||||
|
|
|
@ -14,7 +14,7 @@ The `FileManager` provides an inbuilt Search functionality that allows you to fi
|
|||
|
||||
>caption Search for a file in the FileManager Toolbar input box.
|
||||
|
||||
![Blazor Filemanager Search](images/filemanager-search.png)
|
||||
![Blazor FileManager Search](images/filemanager-search.png)
|
||||
|
||||
````CSHTML
|
||||
@using System.IO
|
||||
|
|
|
@ -22,7 +22,7 @@ The dropdown in the toolbar exposes several more options to sort by:
|
|||
|
||||
>caption Choose a Sort option from the toolbar dropdown.
|
||||
|
||||
![Blazor Filemanager Sort](images/filemanager-sort.png)
|
||||
![Blazor FileManager Sort](images/filemanager-sort.png)
|
||||
|
||||
````CSHTML
|
||||
@using System.IO
|
||||
|
|
|
@ -26,7 +26,7 @@ The List view uses the [Blazor ListView]({%slug listview-overview%}) component.
|
|||
|
||||
>caption FileManager change views using the Toolbar buttons.
|
||||
|
||||
![Blazor Filemanager Views](images/filemanager-views.png)
|
||||
![Blazor FileManager Views](images/filemanager-views.png)
|
||||
|
||||
````CSHTML
|
||||
@using System.IO
|
||||
|
|
|
@ -20,7 +20,7 @@ This article describes how to create custom Form layouts with components and HTM
|
|||
The `<FormItems>` tag is a standard Blazor `RenderFragment`, which expects only [Form groups]({%slug form-formgroups%}) and [Form items]({%slug form-formitems%}). The Blazor framework does not support tag restrictions inside `RenderFragment`s. As a result, `<FormItems>` allows non-Form child components and arbitrary markup. However, such setup with custom markup was never officially supported before version 4.2.0. Here is the relevant Form behavior timeline:
|
||||
|
||||
1. Until **version 4.0.1** Form items and groups could be mixed with arbitrary content. This worked without explicit intent or support.
|
||||
1. **Version 4.1.0** added the ability to [combine auto-generated and declared Form items]({%slug form-formitems%}#add-form-fields-to-autogenerated-ones). The feature required changes in the Form implementation. As a result, custom components inside `<FormItems>` caused unexpected Form item reodering.
|
||||
1. **Version 4.1.0** added the ability to [combine auto-generated and declared Form items]({%slug form-formitems%}#add-form-fields-to-autogenerated-ones). The feature required changes in the Form implementation. As a result, custom components inside `<FormItems>` caused unexpected Form item reordering.
|
||||
1. **Version 4.2.0** added official support for custom markup and components inside the Form.
|
||||
|
||||
|
||||
|
|
|
@ -150,7 +150,7 @@ You can use the built-in `DataAnnotationsValidator` that comes with the Blazor f
|
|||
|
||||
You can use the <a href="https://learn.microsoft.com/en-us/aspnet/core/blazor/forms/validation?view=aspnetcore-8.0#nested-models-collection-types-and-complex-types" target="_blank">ObjectGraphDataAnnotationsValidator</a> inside the Telerik Form for Blazor to validate a nested model.
|
||||
|
||||
When using a model with nested objects and fields, specify their `Field` setings as a dot-separate string, do *not* use the `nameof` operator, it does not return the full name of the model.
|
||||
When using a model with nested objects and fields, specify their `Field` settings as a dot-separate string, do *not* use the `nameof` operator, it does not return the full name of the model.
|
||||
|
||||
````CSHTML
|
||||
@using System.Dynamic
|
||||
|
|
|
@ -20,7 +20,7 @@ Sections in this article:
|
|||
|
||||
## Basics
|
||||
|
||||
This section explains the available events that you need to use for creating and deleting the Gannt dependencies. After that, you will find a code example.
|
||||
This section explains the available events that you need to use for creating and deleting the Gantt dependencies. After that, you will find a code example.
|
||||
|
||||
List of the available events:
|
||||
|
||||
|
|
|
@ -29,13 +29,13 @@ The `TreeListWidthChanged` event fires as a response to the user changing the wi
|
|||
|
||||
## OnExpand and OnCollapse
|
||||
|
||||
The `OnExpand` and `OnCollapse` events fire as a response to the user expanding and collapsing an item of the Gant Tree.
|
||||
The `OnExpand` and `OnCollapse` events fire as a response to the user expanding and collapsing an item of the Gantt Tree.
|
||||
|
||||
The event handlers receive arguments of type `GanttExpandEventArgs` and `GanttCollapseEventArgs` respectively which exposes the following fields:
|
||||
* `Item` - an object you can cast to your model class to obtain the current data item.
|
||||
* `ShouldRender` - a boolean field indicating whether the component will re-render.
|
||||
|
||||
The `OnCollapse` event fires as a response to the user collapsing an item of the Gant Tree.
|
||||
The `OnCollapse` event fires as a response to the user collapsing an item of the Gantt Tree.
|
||||
|
||||
|
||||
>caption Handle OnExpand and OnCollapse events
|
||||
|
|
|
@ -10,7 +10,7 @@ position: 15
|
|||
|
||||
# Visible Columns
|
||||
|
||||
The TreeList allows you to programatically hide some of its columns.
|
||||
The TreeList allows you to programmatically hide some of its columns.
|
||||
|
||||
In this article:
|
||||
* [Basics](#basics)
|
||||
|
|
|
@ -12,15 +12,15 @@ position: 4
|
|||
|
||||
This article explains how the Gantt column width behaves depending on the settings applied by the developer.
|
||||
|
||||
With regard to the widths of its columns, the scrollable (default) gantt chart typically behaves as any regular HTML table with a `table-layout: fixed`.
|
||||
With regard to the widths of its columns, the scrollable (default) Gantt chart typically behaves as any regular HTML table with a `table-layout: fixed`.
|
||||
|
||||
* When all column widths are explicitly set and the cumulative column width is greater than the available gantt chart width, a horizontal scrollbar appears and all set column widths are respected.
|
||||
* When all column widths are explicitly set and the cumulative column width is greater than the available Gantt chart width, a horizontal scrollbar appears and all set column widths are respected.
|
||||
|
||||
* When all column widths are explicitly set and the cumulative column width is less than the available gantt chart width, the remaining width is distributed evenly between all columns.
|
||||
* When all column widths are explicitly set and the cumulative column width is less than the available Gantt chart width, the remaining width is distributed evenly between all columns.
|
||||
|
||||
* When only some column widths are set and the cumulative width of the columns with set widths is greater than the available gantt chart width, a horizontal scrollbar appears and all set column widths are respected. Columns with no set width are invisible as their width is `0`.
|
||||
* When only some column widths are set and the cumulative width of the columns with set widths is greater than the available Gantt chart width, a horizontal scrollbar appears and all set column widths are respected. Columns with no set width are invisible as their width is `0`.
|
||||
|
||||
* When only some column widths are set and the cumulative width of columns with set widths is less than the available gantt chart width, the widths of the columns with a set width are respected and the remaining width is distributed evenly between the other columns.
|
||||
* When only some column widths are set and the cumulative width of columns with set widths is less than the available Gantt chart width, the widths of the columns with a set width are respected and the remaining width is distributed evenly between the other columns.
|
||||
|
||||
* When no column widths are set, the available width is distributed evenly between all gantt chart columns.
|
||||
* When no column widths are set, the available width is distributed evenly between all Gantt chart columns.
|
||||
|
||||
|
|
|
@ -10,7 +10,7 @@ position: 15
|
|||
|
||||
# Editor Template
|
||||
|
||||
The column's `EditorTemplate` defines the inline template or component that will be rendered when the user is [editing]({%slug gantt-tree-editing%}) the field. It is also used when inserting a new item. The template receives a copy of the model, so that changes can be cancelled with the `Cancel` command.
|
||||
The column's `EditorTemplate` defines the inline template or component that will be rendered when the user is [editing]({%slug gantt-tree-editing%}) the field. It is also used when inserting a new item. The template receives a copy of the model, so that changes can be canceled with the `Cancel` command.
|
||||
|
||||
In the Editor Template, you can data bind components to the current context, which is an instance to the model the Gantt is bound to.
|
||||
|
||||
|
|
|
@ -536,7 +536,7 @@ The [knowledge base article for saving the Gantt state in a WASM application] ex
|
|||
|
||||
### Set Gantt Options Through State
|
||||
|
||||
The Gantt state allows you to control the behavior of the Gantt programmatically - you can, for example, set sorts, filteres, expand hierarhical items.
|
||||
The Gantt state allows you to control the behavior of the Gantt programmatically - you can, for example, set sorts, filteres, expand hierarchical items.
|
||||
|
||||
>tip The individual tabs below show how you can use the state to programmatically set the Gantt filtering, sorting and other features.
|
||||
|
||||
|
|
|
@ -122,7 +122,7 @@ The `Color` (`string`) parameter controls the color of the labels. It accepts **
|
|||
|
||||
## Visible
|
||||
|
||||
The `Visible` (`bool`) parameter controls wether the labels will be rendered. By default the labels would not be rendered.
|
||||
The `Visible` (`bool`) parameter controls whether the labels will be rendered. By default the labels would not be rendered.
|
||||
|
||||
>caption Show the labels by using the Visible parameter. The result from the code snippet below
|
||||
|
||||
|
|
|
@ -53,7 +53,7 @@ The `LineCap` parameter controls the shape of the scale ending and takes a membe
|
|||
|
||||
## PlaceholderColor
|
||||
|
||||
The `PlaceholderColor` (`string`) parameter controls the background color of the ponter. It accepts **CSS**, **HEX** and **RGB** colors.
|
||||
The `PlaceholderColor` (`string`) parameter controls the background color of the pointer. It accepts **CSS**, **HEX** and **RGB** colors.
|
||||
|
||||
>caption Change the background color of the pointer. The result from the code snippet below:
|
||||
|
||||
|
|
|
@ -124,7 +124,7 @@ The `Color` (`string`) parameter controls the color of the labels. It accepts **
|
|||
|
||||
## Visible
|
||||
|
||||
The `Visible` (`bool`) parameter controls wether the labels will be rendered. Its default value is `false`. If you want to display the labels include the `<CircularGaugeScaleLabels>` tag in the `<CircularGaugeScale>` and set its `Visible` parameter to `true`.
|
||||
The `Visible` (`bool`) parameter controls whether the labels will be rendered. Its default value is `false`. If you want to display the labels include the `<CircularGaugeScaleLabels>` tag in the `<CircularGaugeScale>` and set its `Visible` parameter to `true`.
|
||||
|
||||
>caption Show the labels by using the Visible parameter. The result from the code snippet below
|
||||
|
||||
|
|
|
@ -55,7 +55,7 @@ The `LineCap` parameter controls the shape of the scale ending and takes a membe
|
|||
|
||||
## PlaceholderColor
|
||||
|
||||
The `PlaceholderColor` (`string`) parameter controls the background color of the ponter. It accepts **CSS**, **HEX** and **RGB** colors.
|
||||
The `PlaceholderColor` (`string`) parameter controls the background color of the pointer. It accepts **CSS**, **HEX** and **RGB** colors.
|
||||
|
||||
>caption Change the background color of the pointer. The result from the code snippet below:
|
||||
|
||||
|
|
|
@ -90,7 +90,7 @@ The `Color` (`string`) parameter controls the color of the labels. It accepts **
|
|||
|
||||
## Visible
|
||||
|
||||
The `Visible` (`bool`) parameter controls wether the labels will be rendered.
|
||||
The `Visible` (`bool`) parameter controls whether the labels will be rendered.
|
||||
|
||||
>caption Hide the labels by using the Visible parameter. The result from the code snippet below
|
||||
|
||||
|
|
|
@ -89,7 +89,7 @@ The scale of the linear gauge renders the values, pointers and labels. You can c
|
|||
|
||||
## Mirror
|
||||
|
||||
If you set the `Mirror` (`bool`) parameter to `true` the scale will render the labels and the unit divisions to the right of the scale. By default the labels and unit divisions are rendered to the left side of the scale for a verical gauge and to the botton if the gauge is [horizontal](#reverse).
|
||||
If you set the `Mirror` (`bool`) parameter to `true` the scale will render the labels and the unit divisions to the right of the scale. By default the labels and unit divisions are rendered to the left side of the scale for a vertical gauge and to the bottom if the gauge is [horizontal](#reverse).
|
||||
|
||||
>caption Render the labels and the ticks of the scale to the right. The result from the code snippet below
|
||||
|
||||
|
|
|
@ -80,7 +80,7 @@ The `Color` (`string`) parameter controls the color of the labels. It accepts **
|
|||
|
||||
## Visible
|
||||
|
||||
The `Visible` (`bool`) parameter controls wether the labels will be rendered.
|
||||
The `Visible` (`bool`) parameter controls whether the labels will be rendered.
|
||||
|
||||
>caption Hide the labels by using the Visible parameter. The result from the code snippet below
|
||||
|
||||
|
|
|
@ -47,7 +47,7 @@ You can use the ranges to visually distinguish multiple pointers from the others
|
|||
|
||||
## Labels
|
||||
|
||||
The labels are rendered on the scale of the Radial Gauge to give inforation to the users about the value of the pointers. [See the Labels article for more information...]({%slug radial-gauge-labels%})
|
||||
The labels are rendered on the scale of the Radial Gauge to give information to the users about the value of the pointers. [See the Labels article for more information...]({%slug radial-gauge-labels%})
|
||||
|
||||
## Radial Gauge Parameters
|
||||
|
||||
|
|
|
@ -33,7 +33,7 @@ The following list of resources provides examples for data binding a grid in var
|
|||
|
||||
* **Optimizing the data source queries** - see the [Notes]({%slug components/grid/columns/bound%}#notes) section in the article above. In a server-side app, an `IQueryable` that ties to an appropriate context (such as EntityFramework) that can optimize the LINQ queries the grid generates is a quick option. For full control, use the [OnRead event]({%slug components/grid/manual-operations%}).
|
||||
|
||||
* **SQL** (or any other) **database** - you can find examples in our [online demos](https://demos.telerik.com/blazor-ui/grid/overview). You can see an offline version of the demos project in the `demos` folder of your installation ([automated]({%slug installation/msi%}) or [archive]({%slug installation/zip%})). They showcase an EntityFramework context using an SQL database that provides data to a grid through a service, which is a common architecture for decouping the front-end from the actual data source that you can apply to any database.
|
||||
* **SQL** (or any other) **database** - you can find examples in our [online demos](https://demos.telerik.com/blazor-ui/grid/overview). You can see an offline version of the demos project in the `demos` folder of your installation ([automated]({%slug installation/msi%}) or [archive]({%slug installation/zip%})). They showcase an EntityFramework context using an SQL database that provides data to a grid through a service, which is a common architecture for decoupling the front-end from the actual data source that you can apply to any database.
|
||||
|
||||
* The **CRUD sample project** our extensions for [Visual Studio]({%slug getting-started-vs-integration-new-project%}) and [Visual Studio Code]({%slug getting-started-vs-code-integration-overview%}) can generate for you showcases a similar architecture that you can use as a starting point.
|
||||
|
||||
|
|
|
@ -172,7 +172,7 @@ You can refresh the Grid data by using the `Rebind` method exposed to the refere
|
|||
|
||||
@[template](/_contentTemplates/common/observable-data.md#tip-for-new-collection)
|
||||
|
||||
>note If you are using the [OnRead event to implement the data operations manually](manual-operations), you must not use the `.Add()`, `.Remove()` or `.Clear()` method of an observable collection - the grid monitors that collection and it fires the `OnRead` event when it changes, so calling those methods will result in an infinte loop. Either create a new collection, or use a simple List, or do not use OnRead with observable data.
|
||||
>note If you are using the [OnRead event to implement the data operations manually](manual-operations), you must not use the `.Add()`, `.Remove()` or `.Clear()` method of an observable collection - the grid monitors that collection and it fires the `OnRead` event when it changes, so calling those methods will result in an infinite loop. Either create a new collection, or use a simple List, or do not use OnRead with observable data.
|
||||
|
||||
## New Collection Reference
|
||||
|
||||
|
|
|
@ -191,7 +191,7 @@ When the grid `Data` collection changes, the `SelectedItems` collection has the
|
|||
|
||||
### Selection in Grid with virtualized rows
|
||||
|
||||
When the Grid has [virtualized rows]({%slug components/grid/virtual-scrolling%}) and the `SelectionMode` is set to [`Multiple`]({%slug components/grid/selection/multiple%}) the selectable items will be the one in the current set of items (page). If you select an item and scroll down to some of the ones that are not rendered yet (virtualiation kicks in) and you want to select that range with the `Shift` button, the selection will start from the position of the first item of the current set (page) to the last selected item.
|
||||
When the Grid has [virtualized rows]({%slug components/grid/virtual-scrolling%}) and the `SelectionMode` is set to [`Multiple`]({%slug components/grid/selection/multiple%}) the selectable items will be the one in the current set of items (page). If you select an item and scroll down to some of the ones that are not rendered yet (virtualization kicks in) and you want to select that range with the `Shift` button, the selection will start from the position of the first item of the current set (page) to the last selected item.
|
||||
|
||||
### Row Drag and Drop
|
||||
|
||||
|
|
|
@ -28,7 +28,7 @@ In this article:
|
|||
|
||||
To use **single** row selection, set the `SelectionMode` property to `Telerik.Blazor.GridSelectionMode.Single`.
|
||||
|
||||
To un-select the item, click its checkbox again, or hold the `Ctrl` key and click/tap the row.
|
||||
To deselect the item, click its checkbox again, or hold the `Ctrl` key and click/tap the row.
|
||||
|
||||
>tip The [Examples](#examples) section showcases how you can use the grid features together.
|
||||
|
||||
|
|
|
@ -54,7 +54,7 @@ You can increase or decrease the size of the Grid by setting the `Size` attribut
|
|||
|
||||
## Notes
|
||||
|
||||
1. The `Size` option does not affect elements displayed inside a Popup (such as [Filter Menu]({%slug grid-filter-menu%}), [Column Menu]({%slug grid-column-menu%}), etc.). By design, all Popup elements are rendered on root level, so they are not technically inside the Grid. Thus, the `Size` option cannot propagate to them. Тo change the `Size` options of the elements inside Popups, you can use a template(where available), so you can override the built-in rendering. You can then add custom elements and explicitly specify their `Size`.
|
||||
1. The `Size` option does not affect elements displayed inside a Popup (such as [Filter Menu]({%slug grid-filter-menu%}), [Column Menu]({%slug grid-column-menu%}), etc.). By design, all Popup elements are rendered on root level, so they are not technically inside the Grid. Thus, the `Size` option cannot propagate to them. To change the `Size` options of the elements inside Popups, you can use a template(where available), so you can override the built-in rendering. You can then add custom elements and explicitly specify their `Size`.
|
||||
|
||||
1. The `Size` option does not propagate to components rendered inside templates (this includes elements in [GridToolBar]({%slug components/grid/features/toolbar%}), [CommandColumn]({%slug components/grid/columns/command%}), etc.). To change the size of the elements in those components you have to set it explicitly.
|
||||
|
||||
|
|
|
@ -14,7 +14,7 @@ The column's `EditorTemplate` defines the inline template or component that will
|
|||
|
||||
You can data bind components in the editor template to the current `context`. This is the data item instance, which is bound to the currently edited Grid ow. Cast `context` to the data item type and store it in a global or local variable. Then, use this variable for one-way or two-way binding in the `EditorTemplate`.
|
||||
|
||||
The template receives a **copy** of the original model, so that changes can be cancelled with the `Cancel` command. See the [**Notes** section in the Grid Editing Overview]({%slug components/grid/editing/overview%}#notes) for more details on how and when that copy is created.
|
||||
The template receives a **copy** of the original model, so that changes can be canceled with the `Cancel` command. See the [**Notes** section in the Grid Editing Overview]({%slug components/grid/editing/overview%}#notes) for more details on how and when that copy is created.
|
||||
|
||||
If you need more complex logic inside the editor template, compared to simple data binding, use the `change` event of the custom editor component. You can also use a [custom Grid edit form]({%slug grid-kb-custom-edit-form%}).
|
||||
|
||||
|
|
|
@ -169,7 +169,7 @@ The template receives a `context` of type `FilterMenuTemplateContext` that provi
|
|||
* `FilterAsync` - applies the defined filters in the Filter Menu to the Grid component.
|
||||
* `ClearFilterAsync` - clears the applied filters.
|
||||
|
||||
You can store a reference to each column's context in a field in the view-model, so you can reference it from event handlers in the standard C# code, instead of passing it as a nargument to lambdas in the markup only. You can also pass the context as a Parameter to your own separate filter component to reduce clutter in the main grid markup and code.
|
||||
You can store a reference to each column's context in a field in the view-model, so you can reference it from event handlers in the standard C# code, instead of passing it as an argument to lambdas in the markup only. You can also pass the context as a Parameter to your own separate filter component to reduce clutter in the main grid markup and code.
|
||||
|
||||
### Examples
|
||||
|
||||
|
|
|
@ -65,11 +65,11 @@ The <a href="https://www.telerik.com/blazor-ui/gridlayout" target="_blank">Blazo
|
|||
|
||||
## Rows
|
||||
|
||||
Defining a new `GridLayoutRow` tag to the GridLayout renders a new row in the component. You can set their heights by using the `Height` paramter exposed on the `<GridLayoutRow>` tag.
|
||||
Defining a new `GridLayoutRow` tag to the GridLayout renders a new row in the component. You can set their heights by using the `Height` parameter exposed on the `<GridLayoutRow>` tag.
|
||||
|
||||
## Columns
|
||||
|
||||
Defining a new `GridLayoutColumn` tag to the GridLayout renders a new column in the component. You can set their widths by using the `Width` paramter exposed on the `<GridLayoutColumn>`.
|
||||
Defining a new `GridLayoutColumn` tag to the GridLayout renders a new column in the component. You can set their widths by using the `Width` parameter exposed on the `<GridLayoutColumn>`.
|
||||
|
||||
## Items
|
||||
|
||||
|
|
|
@ -125,7 +125,7 @@ The event handler receives an argument of type [`ListBoxTransferEventArgs<T>`](/
|
|||
|
||||
## SelectedItemsChanged
|
||||
|
||||
The `SelectedItemsChanged` event fires when the user selects or unselects ListBox item(s). Use the event to update the ListBox selection when the `SelectedItems` parameter is set with one-way binding, otherwise the user action will be ignored.
|
||||
The `SelectedItemsChanged` event fires when the user selects or deselects ListBox item(s). Use the event to update the ListBox selection when the `SelectedItems` parameter is set with one-way binding, otherwise the user action will be ignored.
|
||||
|
||||
The event argument is of type `IEnumerable<T>`. See the example below.
|
||||
|
||||
|
|
|
@ -21,7 +21,7 @@ The ListBox component provides users two ways to select items. This depends on t
|
|||
|
||||
| Selection Mode | Description |
|
||||
| --- | --- |
|
||||
| `Single` | Users can select only one ListBox item. They can change the selected item, but cannot unselect the selected one. You can [use a custom toolbar button]({%slug listbox-toolbar%}#custom-tools) to clear the selection. See the [example below](#example). |
|
||||
| `Single` | Users can select only one ListBox item. They can change the selected item, but cannot deselect the selected one. You can [use a custom toolbar button]({%slug listbox-toolbar%}#custom-tools) to clear the selection. See the [example below](#example). |
|
||||
| `Multiple` | Users can select any number of items. The ListBox supports selection of adjacent items with `Shift` or non-adjacent items with `Ctrl` (`Cmd` on a Mac). Use mouse clicks or the arrow keys, as described on the [ListBox Keyboard Navigation demo](https://demos.telerik.com/blazor-ui/listbox/keyboard-navigation). |
|
||||
|
||||
|
||||
|
@ -34,7 +34,7 @@ The `SelectedItems` parameter of the ListBox supports two-way binding. In this c
|
|||
|
||||
## Example
|
||||
|
||||
>caption Using ListBox SelectionMode and Custom Unselect Tool
|
||||
>caption Using ListBox SelectionMode and Custom Deselect Tool
|
||||
|
||||
````CSHTML
|
||||
@* Resetting ListBoxSelectedItems on SelectionMode change is optional *@
|
||||
|
@ -57,7 +57,7 @@ The `SelectedItems` parameter of the ListBox supports two-way binding. In this c
|
|||
<ListBoxToolBar>
|
||||
<ListBoxToolBarCustomTool>
|
||||
<TelerikButton Icon="@SvgIcon.StripAllFormatting"
|
||||
Title="Unselect All"
|
||||
Title="Deselect All"
|
||||
OnClick="@( () => ListBoxSelectedItems = new List<ListBoxModel>() )"
|
||||
Enabled="@( ListBoxSelectedItems.Count() > 0 )" />
|
||||
</ListBoxToolBarCustomTool>
|
||||
|
|
|
@ -133,7 +133,7 @@ This piece of code renders just above the items, but within the main listview wr
|
|||
}
|
||||
````
|
||||
|
||||
>caption The result from the code snippe above
|
||||
>caption The result from the code snippet above
|
||||
|
||||
![listview header template](images/listview-header-template.png)
|
||||
|
||||
|
|
|
@ -17,7 +17,7 @@ The LoaderContainer component provides multiple parameters that control its appe
|
|||
* [OverlayThemeColor](#overlaythemecolor)
|
||||
* [LoaderPosition](#loaderposition)
|
||||
|
||||
The LoaderContainer uses a nested internal [Loader component]({%slug loader-overview%}) to show the animated indicator. The LoaderContainer exposes parameters, which directly control the Loader's apparance:
|
||||
The LoaderContainer uses a nested internal [Loader component]({%slug loader-overview%}) to show the animated indicator. The LoaderContainer exposes parameters, which directly control the Loader's appearance:
|
||||
|
||||
* [LoaderType](#loadertype)
|
||||
* [Size](#size)
|
||||
|
@ -167,4 +167,4 @@ The following example shows [how to override the CSS styles in the theme]({%slug
|
|||
|
||||
## See Also
|
||||
|
||||
* [Live Demo: LoaderContainer Apprearance](https://demos.telerik.com/blazor-ui/loadercontainer/appearance)
|
||||
* [Live Demo: LoaderContainer Appearance](https://demos.telerik.com/blazor-ui/loadercontainer/appearance)
|
||||
|
|
|
@ -50,7 +50,7 @@ The component provides [tile layers]({%slug components/map/layers/tile%}), [shap
|
|||
|
||||
## Layers
|
||||
|
||||
Tha layers are responsible for organizing the Map information. [Read more about the supported Blazor Map layers...]({%slug components/map/layers%})
|
||||
The layers are responsible for organizing the Map information. [Read more about the supported Blazor Map layers...]({%slug components/map/layers%})
|
||||
|
||||
## Markers
|
||||
|
||||
|
|
|
@ -171,7 +171,7 @@ The `PromptPlaceholder` is useful when you need to process the user input at a l
|
|||
|
||||
>important You should not set the `PromptPlaceholder` to a character that can be valid for the user input in the current mask. Doing so can result in those characters showing up in the user input without the user writing them.
|
||||
>
|
||||
>For example, if you have a mask `00-00` and `PromptPlaceholder` is `4`, when the user writes `1` in the input, the actual `Value` will become `14-44` even though the user sees `1_-__`, and when the component re-renders (for example, because an `EventCallback` fired), the user wil see `14-44` which is not what they entered or expected.
|
||||
>For example, if you have a mask `00-00` and `PromptPlaceholder` is `4`, when the user writes `1` in the input, the actual `Value` will become `14-44` even though the user sees `1_-__`, and when the component re-renders (for example, because an `EventCallback` fired), the user will see `14-44` which is not what they entered or expected.
|
||||
|
||||
## See Also
|
||||
|
||||
|
|
|
@ -131,7 +131,7 @@ The examples below demonstrates how to create a few [masks]({%slug maskedtextbox
|
|||
|
||||
* **ZIP code** - Uses rules for numbers.
|
||||
|
||||
* **ZIP+4 code** - Riteral for the dash between the rules for numbers.
|
||||
* **ZIP+4 code** - Literal for the dash between the rules for numbers.
|
||||
|
||||
* **percentage** - Rules for numbers with a literal for the decimal separator taken from the current culture and a literal for the percentage sign. The example also shows how you can parse that to a `double` value.
|
||||
|
||||
|
|
|
@ -10,7 +10,7 @@ position: 3
|
|||
|
||||
# Menu for Navigation
|
||||
|
||||
The Menu can be used to navigate between different pages in the applicaiton. It can generate the needed links for you through its `UrlField` when [data binding]({%slug components/menu/data-binding/overview%}).
|
||||
The Menu can be used to navigate between different pages in the application. It can generate the needed links for you through its `UrlField` when [data binding]({%slug components/menu/data-binding/overview%}).
|
||||
|
||||
## Basics
|
||||
|
||||
|
|
|
@ -209,11 +209,11 @@ Use your own NavLink elements for navigation instead of the built-in feature of
|
|||
}
|
||||
````
|
||||
|
||||
>caption The result from the snippet above, asuming the current page URL is `/counter`
|
||||
>caption The result from the snippet above, assuming the current page URL is `/counter`
|
||||
|
||||
![Blazor Menu Template Distinguish Item](images/menu-template-distinguish-item.png)
|
||||
|
||||
## See Also
|
||||
|
||||
* [Data Binding a Menu]({%slug components/menu/data-binding/overview%})
|
||||
* [Live Demo: Menu Temlate](https://demos.telerik.com/blazor-ui/menu/template)
|
||||
* [Live Demo: Menu Template](https://demos.telerik.com/blazor-ui/menu/template)
|
||||
|
|
|
@ -25,7 +25,7 @@ To bind data to the `<MultiColumnComboBoxColumn>` you can use the `Field`. This
|
|||
| Parameter | Type | Description |
|
||||
| --- | --- | --- |
|
||||
| `Field` | `string` | Points to the name of field in the data source that the column will render as a string (case-sensitive). |
|
||||
| `Width` | `string` | Defines the width of the MultiColumnComboBoxColumn. |
|
||||
| `Width` | `string` | Defines the width of the MultiColumnComboBox column. |
|
||||
| `Class` | `string` | The CSS class that will be rendered on the column's content cells. |
|
||||
| `HeaderClass` | `string` | The CSS class that will be rendered on the column's header cell. |
|
||||
| `Title` | `string` | The string title rendered in the column header. If it is not explicitly declared the value of the `Field` will be rendered. |
|
||||
|
|
|
@ -19,7 +19,7 @@ This article explains the available templates for the Columns of the MultiColumn
|
|||
|
||||
## HeaderTemplate
|
||||
|
||||
The `HeaderTemplate` allows you to control the rendering of the column's header. You can define it for each of the columns of the MultiColumnCombobox.
|
||||
The `HeaderTemplate` allows you to control the rendering of the column's header. You can define it for each of the columns of the MultiColumnComboBox.
|
||||
|
||||
>caption Use the HeaderTemplate to add an icon to the header cells
|
||||
|
||||
|
@ -64,7 +64,7 @@ The `HeaderTemplate` allows you to control the rendering of the column's header.
|
|||
|
||||
## Template
|
||||
|
||||
The `Template` (Cell Template) allows you to control the rendering of the cells in the MultiComboBoxColumn. You can access the `context` object and cast it to the bound model to employ some custom business logic. The `contenxt` represents the current data item in the cell.
|
||||
The `Template` (Cell Template) allows you to control the rendering of the cells in the MultiColumnComboBox column. You can access the `context` object and cast it to the bound model to employ some custom business logic. The `contenxt` represents the current data item in the cell.
|
||||
|
||||
>caption Use the Template to visually distinguish some Ids
|
||||
|
||||
|
|
|
@ -77,7 +77,7 @@ The MultiColumnComboBox renders its dropdown items in a grid-like column layout.
|
|||
|
||||
## Filtering
|
||||
|
||||
The MultiColumnComboBox @[template](/_contentTemplates/dropdowns/features.md#filtering) [Read more about the Blazor MultiComboBoxComboBox filtering...]({% slug multicolumncombobox-filter %}).
|
||||
The MultiColumnComboBox @[template](/_contentTemplates/dropdowns/features.md#filtering) [Read more about the Blazor MultiColumnComboBox filtering...]({% slug multicolumncombobox-filter %}).
|
||||
|
||||
## Grouping
|
||||
|
||||
|
|
|
@ -218,7 +218,7 @@ You can refresh the data of the MultiSelect by using the `Rebind` method exposed
|
|||
|
||||
The `Value` parameter also accepts a collection but it does not support observable data. If you want to change the Value, make sure you are providing a collection of items that are included in the data source (not random ones).
|
||||
|
||||
>caption Set/change the selected values or clear the selection programatically.
|
||||
>caption Set/change the selected values or clear the selection programmatically.
|
||||
|
||||
````CSHTML
|
||||
<h4>Set or change selected values</h4>
|
||||
|
|
|
@ -138,7 +138,7 @@ The Numeric TextBox has a `FocusAsync` method that enables programmatic focus. T
|
|||
|
||||
## Notes
|
||||
|
||||
* If you want to use a currency format, you must specify the culture for your app thread, so .NET knows what symbol to render. If you don't do that, you may see an unexpected/incorrect symbol or format. The Telerik Numeric Textbox uses the thread culture for currency signs and decimalr separators (more on [globalization in the Telerik components]({%slug globalization-overview%})).
|
||||
* If you want to use a currency format, you must specify the culture for your app thread, so .NET knows what symbol to render. If you don't do that, you may see an unexpected/incorrect symbol or format. The Telerik Numeric Textbox uses the thread culture for currency signs and decimal separators (more on [globalization in the Telerik components]({%slug globalization-overview%})).
|
||||
|
||||
* You may want to match the decimal places available in the `Format` and in the `Decimals` parameters. This will unify the rounding of the numbers when the input is focused and when it is not. For example, if you start with a value `12.3m` and `Step=0.1m` it will render as `12.3` due to the `Math.Round()` behavior in .NET. Changing the value with the spinner icons up and then down will result in `12.30` because the value had had a second decimal digit at some point and that precision is added to the number already.
|
||||
|
||||
|
|
|
@ -27,7 +27,7 @@ This section lists the selectors, attributes, and behavior patterns supported by
|
|||
The `PageSize` select must be implemented either as a DropDownList component with no filtering or through a native `<select>` element.
|
||||
|
||||
|
||||
The `Page` select, which is present for mobile devices and smaller screens with kimited space for page links, must be a native `<select>` element.
|
||||
The `Page` select, which is present for mobile devices and smaller screens with limited space for page links, must be a native `<select>` element.
|
||||
|
||||
| Selector | Attribute | Usage |
|
||||
| -------- | --------- | ----- |
|
||||
|
|
|
@ -118,7 +118,7 @@ To show any items, the Blazor PanelBar requires a data source that you can provi
|
|||
|
||||
Each item in the PanelBar consists of a `Header` and `Content`. The image below illustrates the concept.
|
||||
|
||||
The `Header` contains the Text of the correponding data item (model). The `Content` represents the items in the hierarchy that do not have children.
|
||||
The `Header` contains the Text of the corresponding data item (model). The `Content` represents the items in the hierarchy that do not have children.
|
||||
|
||||
![panelbar parts](images/panelbar-parts-overview.png)
|
||||
|
||||
|
|
|
@ -84,7 +84,7 @@ When bound to local data, the Pivot Grid requires its `Data` parameter to provid
|
|||
````
|
||||
|
||||
|
||||
## Xmla
|
||||
## XMLA
|
||||
|
||||
The PivotGrid supports binding to [XML for Analysis](https://learn.microsoft.com/en-us/analysis-services/xmla/xml-for-analysis-xmla-reference) data, for example an [OLAP cube](https://en.wikipedia.org/wiki/OLAP_cube). For more information about OLAP cubes, check [Just What Are Cubes Anyway? A Painless Introduction to OLAP Technology](https://learn.microsoft.com/en-us/previous-versions/office/developer/office-xp/aa140038(v=office.10)) by Microsoft.
|
||||
|
||||
|
|
|
@ -15,7 +15,7 @@ The <a href="https://www.telerik.com/blazor-ui/pivotgrid" target="_blank">Blazor
|
|||
|
||||
## Definitions
|
||||
|
||||
The PivotGrid component and this documentation use terms *row*, *column*, and *measure*. Each of these terms signifes one field in the data source:
|
||||
The PivotGrid component and this documentation use terms *row*, *column*, and *measure*. Each of these terms signifies one field in the data source:
|
||||
|
||||
* The *rows* and *columns* represent categories or date periods.
|
||||
* The *distinct* values of a *row* field display in *rows headers*. The number of rendered rows will match the number of distinct values of the *row* field.
|
||||
|
@ -129,7 +129,7 @@ The PivotGrid component supports different [data binding options and data provid
|
|||
|
||||
## Configurator
|
||||
|
||||
In the simpler case, the PivotGrid supports fixed configuraton of its rows, columns, and measures. However, most scenarios and users may require greater flexibility where one can [use the PivotGrid Configurator to change, filter and sort the displayed fields and aggregations]({%slug pivotgrid-configurator%}).
|
||||
In the simpler case, the PivotGrid supports fixed configuration of its rows, columns, and measures. However, most scenarios and users may require greater flexibility where one can [use the PivotGrid Configurator to change, filter and sort the displayed fields and aggregations]({%slug pivotgrid-configurator%}).
|
||||
|
||||
|
||||
## Templates
|
||||
|
|
|
@ -100,7 +100,7 @@ Handling such "unexpected" values is up to the application - for example, throug
|
|||
|
||||
The RadioGroup component will not select an item by default if the initial value of the `Value` field in the view-model does not match any of the values in its data source.
|
||||
|
||||
You should avoide values in the data that match the `default` of their type (such as `0` for an `int`) because that can result in an item being selected by default even if you do not intend that, or in validation passing without the user choosing a correct option.
|
||||
You should avoid values in the data that match the `default` of their type (such as `0` for an `int`) because that can result in an item being selected by default even if you do not intend that, or in validation passing without the user choosing a correct option.
|
||||
|
||||
### Component Reference
|
||||
|
||||
|
|
|
@ -47,7 +47,7 @@ The following table lists the default property names and explains how the Schedu
|
|||
| `RecurrenceExceptions` | `List<DateTime>` | A list of exceptions for a recurring appointment. It tells the Scheduler when to skip rendering a recurring appointment because its instance is explicitly changed or removed (deleted), and so it is an exception to the recurrence rule. **Also see the note below.** |
|
||||
| `RecurrenceId` | `object` | The unique identifier of the recurring appointment to which the current appointment is an exception. Must be of the same type as the `Id` field (e.g., a `Guid`). Present only for an exception from a recurrence, but not for the recurring appointment itself. |
|
||||
|
||||
> Exception dates are relative to the start time of the recurring appointment, and changing the start time of a recurring appointment (either through the edit form, or by dragging any recurring event) will update the exception dates to match the new start time. This does not affect exception instances that are already created, because they are separate appointments. For example, let's say we have an event that recurs every day - from Monday to Sunday, uncluding. If we create an exception for Tuesday, and change the start time of the entire recurring event to begin on the Wednesday after that, we will have the exception appointment on Tuesday and a gap on Thursday, because the exception date that was initially Tuesday actually matches the second occurrence of the appointment, which is now on Thursday.
|
||||
> Exception dates are relative to the start time of the recurring appointment, and changing the start time of a recurring appointment (either through the edit form, or by dragging any recurring event) will update the exception dates to match the new start time. This does not affect exception instances that are already created, because they are separate appointments. For example, let's say we have an event that recurs every day - from Monday to Sunday, including. If we create an exception for Tuesday, and change the start time of the entire recurring event to begin on the Wednesday after that, we will have the exception appointment on Tuesday and a gap on Thursday, because the exception date that was initially Tuesday actually matches the second occurrence of the appointment, which is now on Thursday.
|
||||
|
||||
|
||||
## Built-in Validation
|
||||
|
|
|
@ -50,7 +50,7 @@ There are two other events that you are not required to handle - you can use the
|
|||
|
||||
>caption Some examples of the UX related to appointments, read more in the list after the figure
|
||||
|
||||
![scheduler event handling ux explanation](../images/ux-explanations.png)
|
||||
![scheduler event handling UX explanation](../images/ux-explanations.png)
|
||||
|
||||
>caption Recurring appointments appearance and indicators
|
||||
|
||||
|
@ -65,13 +65,13 @@ The UI for the scheduler provides the following options for interacting with the
|
|||
* An appointment that starts at 12AM on one day and ends at 12AM on the next day is considered an all-day appointment and so it will also render in the all-day slot.
|
||||
* To create an all-day appointment for a single day, the start and end dates must be the same. Selecting the next day in the end-time picker will result in a two-day appointment.
|
||||
* Double click (or double tap) on an appointment opens it for editing. The user can cancel the changes through the Cancel button or the [x] close button on the window.
|
||||
* Changing a recurring appointment can create an exception or alter the entire series. The user is given a propmpt to choose which one to edit.
|
||||
* Editing an exception to an occurence does not provide the recurrence rules editor becaues an exception cannot have its own recurrence.
|
||||
* Changing a recurring appointment can create an exception or alter the entire series. The user is given a prompt to choose which one to edit.
|
||||
* Editing an exception to an occurrence does not provide the recurrence rules editor because an exception cannot have its own recurrence.
|
||||
* Dragging an appointment to another slot (or day, or the all-day row) fires the `OnUpdate` event with the new times.
|
||||
* The duration is preserved when dragging across the area of origin (for example, from the all-day slot to another day in the all-day slot).
|
||||
* When dragging between different areas (for example, from the all-day slot to a particular day), the new duration is the default duration for the area (for example, one day for the all-day slot, or one `TimeSlot` for the time table).
|
||||
* If you drag the all-day portion of an appointment that has specific start and end times (that is, it is _not_ an all-day appointment), it will not become an all-day appointment.
|
||||
* Changing a recurring appointment can create an exception or alter the entire series. The user is given a propmpt to choose which one to edit. Dragging a recurring appointment to a new date/time will offset the entire series.
|
||||
* Changing a recurring appointment can create an exception or alter the entire series. The user is given a prompt to choose which one to edit. Dragging a recurring appointment to a new date/time will offset the entire series.
|
||||
* Hovering an appointment shows resize handles that you can drag to change the appointment duration.
|
||||
* Resizing is allowed in directions where the appointment has a clear end. For example, if an all-day event continues after the current scheduler view, you won't be able to resize it in that direction. If an appointment starts or ends in a different day, or before/after the shown hours in the scheduler, resizing in that direction is not allowed.
|
||||
* Clicking (or tapping) the [x] button on the appointment itself deletes it. The [x] button is shown when the appointment is hovered to conserve space.
|
||||
|
@ -308,7 +308,7 @@ The example below shows the signature of the event handlers so you can copy the
|
|||
## Notes
|
||||
|
||||
* While editing, the Scheduler creates a copy of your original object. The copy has a different reference than the original object. You receive that copy in the `OnUpdate` event handler. The `OnEdit` event receives the original item from the pristine `Data` collection because it is a cancellable event and fires before the Scheduler logic creates the copy.
|
||||
* For the Scheduler to successfully create a copy of the original object, all properties must have а setter and must not be `readonly`. Otherwise, editing may stop working.
|
||||
* For the Scheduler to successfully create a copy of the original object, all properties must have a setter and must not be `readonly`. Otherwise, editing may stop working.
|
||||
|
||||
|
||||
## See Also
|
||||
|
|
|
@ -1215,6 +1215,6 @@ The `ViewChanged` event fires when the user chooses a new [View]({%slug schedule
|
|||
|
||||
* [Scheduler Overview]({%slug scheduler-overview%})
|
||||
* [Views Overview]({%slug scheduler-views-overview%})
|
||||
* [Scheduler Naviation]({%slug scheduler-navigation%})
|
||||
* [Scheduler Navigation]({%slug scheduler-navigation%})
|
||||
* [Data Binding]({%slug scheduler-appointments-databinding%})
|
||||
* [Appointments Editing]({%slug scheduler-appointments-edit%})
|
||||
|
|
|
@ -86,4 +86,4 @@ The `AnimationType` parameter controls the type of animation for the Skeleton. T
|
|||
|
||||
## See Also
|
||||
|
||||
* [Live Demo: Skeleton Apprearance](https://demos.telerik.com/blazor-ui/skeleton/appearance)
|
||||
* [Live Demo: Skeleton Appearance](https://demos.telerik.com/blazor-ui/skeleton/appearance)
|
||||
|
|
|
@ -63,7 +63,7 @@ Last action: <strong> @LastAction </strong>
|
|||
The primary SplitButton action and each secondary item in the dropdown can [display a font icon or an image]({%slug splitbutton-icons%}) for better looks and user experience.
|
||||
|
||||
|
||||
## Apperance
|
||||
## Appearance
|
||||
|
||||
The SplitButton provides a [variety of settings to control its visual appearance]({%slug splitbutton-appearance%}), for example the colors, borders, and size. This spares the need to use custom CSS code.
|
||||
|
||||
|
|
|
@ -65,7 +65,7 @@ This example shows how the splitter can fill up the entire container (marked wit
|
|||
|
||||
## Size
|
||||
|
||||
You can control the Splitter size through its `Width` and `Height` parameters. Additioanlly, the component allows you specify the desired size for each pane. [Read about for the Splitter sizing specifics...]({%slug splitter-size%})
|
||||
You can control the Splitter size through its `Width` and `Height` parameters. Additionally, the component allows you specify the desired size for each pane. [Read about for the Splitter sizing specifics...]({%slug splitter-size%})
|
||||
|
||||
## Orientation
|
||||
|
||||
|
|
|
@ -40,7 +40,7 @@ Since `horizontal` is the default value for the Stepper `Orientation` parameter,
|
|||
|
||||
## Vertical Stepper
|
||||
|
||||
Set the `Orientation` parameter of the Stepper to `vertical` to change its default orioentation.
|
||||
Set the `Orientation` parameter of the Stepper to `vertical` to change its default orientation.
|
||||
|
||||
>caption Vertical Stepper. The result from the snippet below.
|
||||
|
||||
|
|
|
@ -42,7 +42,7 @@ Stepper component allows you to use text for its step indicators. You can define
|
|||
|
||||
## Indicator Icon
|
||||
|
||||
Stepper component allows you to use Font and Svg icons for its step indicators. You can define the desired visual content through the following parameters of the `StepperStep`:
|
||||
Stepper component allows you to use Font and SVG icons for its step indicators. You can define the desired visual content through the following parameters of the `StepperStep`:
|
||||
|
||||
* `Icon` - defines the name of the desired Telerik font icon.
|
||||
|
||||
|
|
|
@ -161,7 +161,7 @@ To enable data navigation you have to:
|
|||
|
||||
The Navigator is defined closely to the way the charts are. As such you can use the nested tags settings to apply different customizations.
|
||||
|
||||
To programatically set a time interval to the `Navigator` upon initialization use the `From` and `To` parameters of the `<StockChartNavigatorSelect>` and pass valid `DateTime` values according to your data.
|
||||
To programmatically set a time interval to the `Navigator` upon initialization use the `From` and `To` parameters of the `<StockChartNavigatorSelect>` and pass valid `DateTime` values according to your data.
|
||||
|
||||
To control whether the Navigator renders below or on top of the Stock Chart, set the `Position` parameter to a member of the `StockChartNavigatorPosition` enum.
|
||||
|
||||
|
|
|
@ -118,7 +118,7 @@ The Telerik Stock Chart provides a [Navigator]({%slug stockchart-navigator%}) to
|
|||
|
||||
To control the size of the StockChart, use the `Width` and the `Height` parameters.
|
||||
|
||||
You can also set the chart size in percentage values so it occupies its container when it renderes. If the parent container size changes, you must call the chart's `Refresh()` C# method after the DOM has been redrawn and the new container dimensions are rendered. You can do this when you explicitly change container sizes (like in the example below), or from code that gets called by events like `window.resize`. You can find an example of making charts redraw on `window.resize` in the [Responsive Chart](https://github.com/telerik/blazor-ui/tree/master/chart/responsive-chart) sample.
|
||||
You can also set the chart size in percentage values so it occupies its container when it renders. If the parent container size changes, you must call the chart's `Refresh()` C# method after the DOM has been redrawn and the new container dimensions are rendered. You can do this when you explicitly change container sizes (like in the example below), or from code that gets called by events like `window.resize`. You can find an example of making charts redraw on `window.resize` in the [Responsive Chart](https://github.com/telerik/blazor-ui/tree/master/chart/responsive-chart) sample.
|
||||
|
||||
>caption Change the 100% chart size dynamically to have a responsive chart
|
||||
|
||||
|
|
|
@ -119,7 +119,7 @@ To add a `Candlestick` chart to a stock chart component::
|
|||
|
||||
### DownColor
|
||||
|
||||
Set the color - a valid CSS, RGB, RGBA color - of the series when the `OpenField` is greater than the `CloseField` by setting the `DownColor` property of the `StockChartSeries`. This can be passed throught the data model and bound to the `DownColorField`.
|
||||
Set the color - a valid CSS, RGB, RGBA color - of the series when the `OpenField` is greater than the `CloseField` by setting the `DownColor` property of the `StockChartSeries`. This can be passed through the data model and bound to the `DownColorField`.
|
||||
|
||||
@[template](/_contentTemplates/stockchart/link-to-basics.md##color-field-column-ohlc-candlestick)
|
||||
|
||||
|
|
|
@ -14,7 +14,7 @@ The **OHLC** (open-high-low-close) chart is typically used to illustrate movemen
|
|||
|
||||
>caption OHLC series in a stock chart. Results from the first code snippet below.
|
||||
|
||||
![Blazor Basic Ohlc Chart](images/basic-ohlc-chart.png)
|
||||
![Blazor Basic OHLC Chart](images/basic-ohlc-chart.png)
|
||||
|
||||
@[template](/_contentTemplates/stockchart/link-to-basics.md#understand-basics-and-databinding-first)
|
||||
|
||||
|
|
|
@ -42,7 +42,7 @@ By default, the initially selected tab is the first one. You can programmaticall
|
|||
|
||||
## Tabs Configuration
|
||||
|
||||
The Tabs are the building blocks of the TabStrip. The component allows individual configuration of the declared `<TabStripTab>` tags - you can set their title and visibiity or put them in disabled state. [Read more about the available Tabs configuration options...]({%slug tabstrip-tabs-configuration%})
|
||||
The Tabs are the building blocks of the TabStrip. The component allows individual configuration of the declared `<TabStripTab>` tags - you can set their title and visibility or put them in disabled state. [Read more about the available Tabs configuration options...]({%slug tabstrip-tabs-configuration%})
|
||||
|
||||
## Position of the Tabs
|
||||
|
||||
|
@ -54,7 +54,7 @@ The Blazor TabStrip component can persist the content of the tabs. When the user
|
|||
|
||||
## Scrollable Tabs
|
||||
|
||||
The Blazor TabStrip allows you to scroll only its tabs. This is useful for scenarious where a lot of tabs are defined. [Read more about the Scrollable Tabs...]({%slug tabstrip-scroll-tabs%})
|
||||
The Blazor TabStrip allows you to scroll only its tabs. This is useful for scenarios where a lot of tabs are defined. [Read more about the Scrollable Tabs...]({%slug tabstrip-scroll-tabs%})
|
||||
|
||||
## Events
|
||||
|
||||
|
|
|
@ -24,7 +24,7 @@ The TextBox is compliant with the [Web Content Accessibility Guidelines (WCAG) 2
|
|||
This section lists the selectors, attributes, and behavior patterns supported by the component and its composite elements, if any.
|
||||
|
||||
|
||||
No role attribute is implemented as the `html input type="text"` element is sufficient for definining the purpose of the component.
|
||||
No role attribute is implemented as the `html input type="text"` element is sufficient for defining the purpose of the component.
|
||||
|
||||
| Selector | Attribute | Usage |
|
||||
| -------- | --------- | ----- |
|
||||
|
|
|
@ -18,7 +18,7 @@ You can put a Font or Svg Icon in the toggle button to illustrate its purpose fo
|
|||
|
||||
| Parameter | Type and Default Value | Description |
|
||||
|---|---|---|
|
||||
| `Icon`| `object` | Use it to display a [Telerik Font and Svg Icons]({%slug common-features-icons%}). |
|
||||
| `Icon`| `object` | Use it to display a [Telerik Font and SVG Icons]({%slug common-features-icons%}). |
|
||||
|
||||
The following example shows how to use SVG and Font icons. If you don't add text to the button, the button will center the icon on all sides.
|
||||
|
||||
|
|
|
@ -127,7 +127,7 @@ The nested `ToolBarToggleButton` tag exposes parameters that allow you to custom
|
|||
|
||||
## ToolBarButtonGroup
|
||||
|
||||
The button group is a container for one or more buttons that renders them together and spaces them out from the adacent buttons or groups.
|
||||
The button group is a container for one or more buttons that renders them together and spaces them out from the adjacent buttons or groups.
|
||||
|
||||
You can add one or more group of buttons to the Toolbar. To do that you should add the `<ToolBarButtonGroup>` to the `<TelerikToolBar>`. In the button group you can place either the `ToolBarButton` or the `ToolBarToggleButton`.
|
||||
|
||||
|
|
|
@ -22,7 +22,7 @@ You can control it through the `Position` parameter, which takes a member of the
|
|||
|
||||
![tooltip positions](images/tooltip-positions.png)
|
||||
|
||||
>caption Exlore the possible tooltip positions
|
||||
>caption Explore the possible tooltip positions
|
||||
|
||||
````CSHTML
|
||||
@* Setting a position is not mandatory, it defaults to Top *@
|
||||
|
|
|
@ -22,7 +22,7 @@ This article contains the following examples for generating the tooltip content:
|
|||
|
||||
* [Markup generated from a string through a method](#markup-from-generated-string). Shows how you can loop over all the keys in the metadata and render markup from a function call.
|
||||
|
||||
* [Separate component consumes the metadata and can even load content on demand](#separate-component-and-load-on-demand) from a database or other service. Load on demand is not mantadory, you can simply use the metadata in a fashion similar to the two other examples.
|
||||
* [Separate component consumes the metadata and can even load content on demand](#separate-component-and-load-on-demand) from a database or other service. Load on demand is not mandatory, you can simply use the metadata in a fashion similar to the two other examples.
|
||||
|
||||
## Basic Example - Inline Markup
|
||||
|
||||
|
@ -97,7 +97,7 @@ This article contains the following examples for generating the tooltip content:
|
|||
|
||||
## Separate Component and Load on Demand
|
||||
|
||||
This examle shows how you can use a standalone component to generate the tooltip contents. It can also be used to load content on demand and you can find a more complete example in the [Tooltips with Load-on-demand in a Grid Row](https://github.com/telerik/blazor-ui/tree/master/tooltip/in-grid) sample project.
|
||||
This example shows how you can use a standalone component to generate the tooltip contents. It can also be used to load content on demand and you can find a more complete example in the [Tooltips with Load-on-demand in a Grid Row](https://github.com/telerik/blazor-ui/tree/master/tooltip/in-grid) sample project.
|
||||
|
||||
>caption Generate tooltip content through a separate component
|
||||
|
||||
|
|
Некоторые файлы не были показаны из-за слишком большого количества измененных файлов Показать больше
Загрузка…
Ссылка в новой задаче