From c98f8bc92fcd0ac2ebafa6bccd38e504fbd58f17 Mon Sep 17 00:00:00 2001 From: Marin Bratanov Date: Fri, 13 Sep 2019 14:41:22 +0300 Subject: [PATCH 01/46] docs(grid): hierarchy --- components/grid/hierarchy.md | 84 ++++++++++++++++++ .../grid/images/hierarchy-grid-in-grid.png | Bin 0 -> 11724 bytes 2 files changed, 84 insertions(+) create mode 100644 components/grid/hierarchy.md create mode 100644 components/grid/images/hierarchy-grid-in-grid.png diff --git a/components/grid/hierarchy.md b/components/grid/hierarchy.md new file mode 100644 index 0000000000..de2cecc5cb --- /dev/null +++ b/components/grid/hierarchy.md @@ -0,0 +1,84 @@ +--- +title: Hierarchy +page_title: Grid for Blazor | Hierarchy +description: Enable and configure hierarchy and detail records in Grid for Blazor +slug: components/grid/features/hierarchy +tags: telerik,blazor,grid,hierarchy,detail,detail template +published: True +position: 23 +--- + +# Grid Hierarchy + +The Grid component provides options for visualizing the relations between parent and child records by displaying data in a hierarchical manner through a detail template. + +To implement hierarchy in the Grid, define a `DetailTemplate` under the main tag of the grid. In this template, you can access the model for the concrete row through the `context`, and use other components to show detailed data from it (for example, another grid, or any other set of components and HTML). + +When a detail template is defined, an expand/collapse button is rendered at the beginning of the row that the user can click to show and hide the detailed data. + +>caption Define a detail template to show hierarchical data from the model in a nested grid + +````CSHTML + + + @{ + var employee = context as MainModel; + + + + + + + } + + + + + + + +@code { + List salesTeamMembers { get; set; } + + protected override void OnInitialized() + { + salesTeamMembers = GenerateData(); + } + + private List GenerateData() + { + List data = new List(); + for (int i = 0; i < 5; i++) + { + MainModel mdl = new MainModel { Id = i, Name = $"Name {i}" }; + mdl.Orders = Enumerable.Range(1, 15).Select(x => new DetailsModel { OrderId = x, DealSize = x^i }).ToList(); + data.Add(mdl); + } + return data; + } + + public class MainModel + { + public int Id { get; set; } + public string Name { get;set; } + public List Orders { get; set; } + } + + public class DetailsModel + { + public int OrderId { get; set; } + public double DealSize { get; set; } + } +} +```` + +>caption The result of the code snippet above, after expanding the second row + +![](images/hierarchy-grid-in-grid.png) + + +## See Also + + * [Live Demo: Grid Hierarchy](https://demos.telerik.com/blazor-ui/grid/hierarchy) + + \ No newline at end of file diff --git a/components/grid/images/hierarchy-grid-in-grid.png b/components/grid/images/hierarchy-grid-in-grid.png new file mode 100644 index 0000000000000000000000000000000000000000..d66151f9bf53167ae62ed1778d29bc4f1f1d8513 GIT binary patch literal 11724 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 Da>AD% literal 0 HcmV?d00001 From c9bf6e0d593414472e8edad2ee829af5778aeb60 Mon Sep 17 00:00:00 2001 From: Marin Bratanov Date: Fri, 13 Sep 2019 15:05:00 +0300 Subject: [PATCH 02/46] chore(grid): find-replace tag changes --- components/grid/columns/command.md | 26 ++++---- components/grid/editing/incell.md | 28 ++++---- components/grid/editing/inline.md | 32 +++++----- components/grid/editing/overview.md | 32 +++++----- components/grid/editing/popup.md | 32 +++++----- components/grid/filtering.md | 26 ++++---- components/grid/grouping.md | 10 +-- components/grid/manual-operations.md | 49 +++++++------- components/grid/overview.md | 42 ++++++------ components/grid/paging.md | 16 ++--- components/grid/selection/multiple.md | 24 +++---- components/grid/selection/overview.md | 8 +-- components/grid/selection/single.md | 30 ++++----- components/grid/sorting.md | 8 +-- components/grid/templates.md | 43 ++++++------- components/grid/toolbar.md | 46 +++++++------ ...bind-navigation-property-complex-object.md | 12 ++-- ...change-editable-attribute-update-create.md | 64 +++++++++---------- 18 files changed, 253 insertions(+), 275 deletions(-) diff --git a/components/grid/columns/command.md b/components/grid/columns/command.md index e2c8dadf30..56fa395b95 100644 --- a/components/grid/columns/command.md +++ b/components/grid/columns/command.md @@ -49,19 +49,19 @@ The `OnClick` handler of the commands receives an argument of type `GridCommandE Edit will be cancelled for "name 2"
@CustomCommandResult - - - - - - - Edit - Update - Cancel - My Command - - + + + + + + Edit + Update + Cancel + My Command + + @code { @@ -156,4 +156,4 @@ The `OnClick` handler of the commands receives an argument of type `GridCommandE ## See Also - * [Live Demo: Grid Command Column](https://demos.telerik.com/blazor-ui/grid/inlineediting) \ No newline at end of file + * [Live Demo: Grid Command Column](https://demos.telerik.com/blazor-ui/grid/inlineediting) diff --git a/components/grid/editing/incell.md b/components/grid/editing/incell.md index 8a45136b96..d7aafac333 100644 --- a/components/grid/editing/incell.md +++ b/components/grid/editing/incell.md @@ -26,21 +26,19 @@ To enable InCell editing mode, set the `EditMode` property of the grid to `incel Click a cell, edit it and click outside of the cell to see the change. Editing is prevented for the first two items. - - - - - - Add Employee - - - - - - Update - Delete - - + + + Add Employee + + + + + + Update + Delete + + @code { diff --git a/components/grid/editing/inline.md b/components/grid/editing/inline.md index 4a1560cade..f1b85885ad 100644 --- a/components/grid/editing/inline.md +++ b/components/grid/editing/inline.md @@ -28,23 +28,21 @@ To enable Inline editing in the grid, set its `EditMode` property to `inline`, t Editing is cancelled for the first two records. - - - - - - Add Employee - - - - - - Update - Edit - Delete - Cancel - - + + + Add Employee + + + + + + Update + Edit + Delete + Cancel + + @code { diff --git a/components/grid/editing/overview.md b/components/grid/editing/overview.md index cf8d71511d..eb001130fb 100644 --- a/components/grid/editing/overview.md +++ b/components/grid/editing/overview.md @@ -39,23 +39,21 @@ The event handlers receive an argument of type `GridCommandEventArgs` that expos Editing is cancelled for the first two records. - - - - - - Add Employee - - - - - - Update - Edit - Delete - Cancel - - + + + Add Employee + + + + + + Update + Edit + Delete + Cancel + + There is a deliberate delay in the data source operations in this example to mimic real life delays and to showcase the async nature of the calls. diff --git a/components/grid/editing/popup.md b/components/grid/editing/popup.md index 86825189bd..7c4be03ce1 100644 --- a/components/grid/editing/popup.md +++ b/components/grid/editing/popup.md @@ -31,23 +31,21 @@ The PopUp editing mode supports [validation]({%slug common-features/input-valida Editing is cancelled for the first two records. - - - - - - Add Employee - - - - - - Update - Edit - Delete - Cancel - - + + + Add Employee + + + + + + Update + Edit + Delete + Cancel + + @code { diff --git a/components/grid/filtering.md b/components/grid/filtering.md index 1dcad1ef1b..4faa6d41f0 100644 --- a/components/grid/filtering.md +++ b/components/grid/filtering.md @@ -35,12 +35,12 @@ Once a filter is a applied to a column, a button will appear that lets you clear @using Telerik.Blazor.Components.Grid - - - - - - + + + + + + @code { @@ -93,14 +93,14 @@ A key difference in the behavior from the [filter row](#filter-row) is that the ````CSHTML @using Telerik.Blazor.Components.Grid - - - - - - - + + + + + + @code { diff --git a/components/grid/grouping.md b/components/grid/grouping.md index 787466a0e4..bd89d1e1bc 100644 --- a/components/grid/grouping.md +++ b/components/grid/grouping.md @@ -28,11 +28,11 @@ To prevent grouping by a field, set `Groupable="false"` for on its column. This @using Telerik.Blazor.Components.Grid - - - - - + + + + + @code { diff --git a/components/grid/manual-operations.md b/components/grid/manual-operations.md index e976c88a37..09cf4366b6 100644 --- a/components/grid/manual-operations.md +++ b/components/grid/manual-operations.md @@ -30,14 +30,12 @@ The comments in the code provide explanations on what is done and why. @using Telerik.Blazor.Components.Grid - - - - - - - + Pageable=true PageSize=15 + OnRead=@ReadItems> + + + + There is a deliberate delay in the data source operations in this example to mimic real life delays and to showcase the async nature of the calls. @@ -120,25 +118,22 @@ There is a deliberate delay in the data source operations in this example to mim @using Telerik.Blazor.Components.Grid @using Telerik.DataSource.Extensions; - - - - - - - - - - Update - Edit - Delete - Cancel - - - - Add Employee - + + + + + + + Update + Edit + Delete + Cancel + + + + Add Employee + There is a deliberate delay in the data source operations in this example to mimic real life delays and to showcase the async nature of the calls. diff --git a/components/grid/overview.md b/components/grid/overview.md index f48e6d679a..ea403f3f2d 100644 --- a/components/grid/overview.md +++ b/components/grid/overview.md @@ -26,12 +26,12 @@ To create a basic Telerik Grid: - - - - - - + + + + + + @code { @@ -57,7 +57,7 @@ To create a basic Telerik Grid: ![](images/basic-grid.png) ->tip You can also use a string for the field name, using the `nameof` operator is not necessary. For example, the ID column can be defined like this: ``. +>tip You can also use a string for the field name, using the `nameof` operator is not necessary. For example, the ID column can be defined like this: ``. ## Reference @@ -69,12 +69,12 @@ The grid is a generic component, and to store a reference, you must use the mode @using Telerik.Blazor.Components.Grid - - + + - + - + @code { @@ -157,14 +157,14 @@ For example, you can benefit from the elastic design the components expose to ch - - + + - + - + - + original: @@ -172,14 +172,14 @@ original: - - + + - + - + - + @code { diff --git a/components/grid/paging.md b/components/grid/paging.md index ddd6df7889..ec8d12fd13 100644 --- a/components/grid/paging.md +++ b/components/grid/paging.md @@ -24,10 +24,10 @@ You can set the current page of the grid through its integer `Page` property. @using Telerik.Blazor.Components.Grid - - - - + + + + @code { @@ -57,10 +57,10 @@ Here is one way to implement a page size choice that puts all records on one pag - - - - + + + + @code { diff --git a/components/grid/selection/multiple.md b/components/grid/selection/multiple.md index b4d360b465..aadf09ba92 100644 --- a/components/grid/selection/multiple.md +++ b/components/grid/selection/multiple.md @@ -51,11 +51,11 @@ You can add a checkbox column for selection. It is required if the `InCell` edit - + - - - + + + @code { @@ -98,11 +98,11 @@ You can respond to the user action of selecting a new item through the `Selected SelectedItemsChanged="@((IEnumerable employeeList) => OnSelect(employeeList))" Pageable="true" Height="400px"> - + - - - + + + @if (SelectedEmployees != null) @@ -167,11 +167,11 @@ You can predefine the selected items for your users through the two-way binding @bind-SelectedItems="SelectedItems" Pageable="true" Height="400px"> - + - - - + + + @if (SelectedItems != null) diff --git a/components/grid/selection/overview.md b/components/grid/selection/overview.md index 2640e38dfb..4b5b748954 100644 --- a/components/grid/selection/overview.md +++ b/components/grid/selection/overview.md @@ -39,11 +39,11 @@ The [single selection]({%slug components/grid/selection/single%}) and [multiple - + - - - + + + @code { diff --git a/components/grid/selection/single.md b/components/grid/selection/single.md index 103427e0c9..8be45e2a64 100644 --- a/components/grid/selection/single.md +++ b/components/grid/selection/single.md @@ -48,11 +48,11 @@ You can add a checkbox column for single selection. It is required if the `InCel - + - - - + + + @code { @@ -98,19 +98,19 @@ The example below shows how to handle the `SelectedItemsChanged` event to extrac SelectedItemsChanged="@((IEnumerable employeeList) => OnSelect(employeeList))" Pageable="true" Height="300px"> - - - - + + + + @if (TeamMatesList != null) {

@SelectedEmployee.Team
- - - + + + } @@ -176,10 +176,10 @@ Selected item: @SelectedItems.FirstOrDefault().Name @bind-SelectedItems="SelectedItems" Pageable="true" Height="400px"> - - - - + + + + @code { diff --git a/components/grid/sorting.md b/components/grid/sorting.md index 9088556c41..ad1bf61b6f 100644 --- a/components/grid/sorting.md +++ b/components/grid/sorting.md @@ -22,10 +22,10 @@ When the user clicks the column header, the grid will sort the data according to @using Telerik.Blazor.Components.Grid - - - - + + + + @code { diff --git a/components/grid/templates.md b/components/grid/templates.md index e22d48f064..ff9b7b60e2 100644 --- a/components/grid/templates.md +++ b/components/grid/templates.md @@ -39,8 +39,8 @@ The example below shows how to: @using Telerik.Blazor.Components.Grid - - + + - + - + - + - + @code { @@ -111,10 +111,10 @@ You can use the `Context` attribute of the `` tag of the grid to se Hired on: @(String.Format("{0:dd MMM yyyy}", employee.HireDate)) - - - - + + + + @code { @@ -152,11 +152,11 @@ If you need to perform logic more complex than simple data binding, use the chan @using Telerik.Blazor.Components.Grid @using Telerik.Blazor.Components.DropDownList - - - - - + + + + + @{ CurrentlyEditedEmployee = context as SampleData; @@ -164,14 +164,11 @@ If you need to perform logic more complex than simple data binding, use the chan } - - Update - Edit - - - - - + + Update + Edit + + @code { diff --git a/components/grid/toolbar.md b/components/grid/toolbar.md index 1105dba2ef..6fb241cb66 100644 --- a/components/grid/toolbar.md +++ b/components/grid/toolbar.md @@ -31,22 +31,20 @@ The grid offers built-in commands that you can invoke through its toolbar. To us @using Telerik.Blazor @using Telerik.Blazor.Components.Grid - - - Add Employee - - - - - - - - - Edit - Update - Cancel - - + + + Add Employee + + + + + + Edit + Update + Cancel + + @result @@ -104,13 +102,13 @@ You can use the toolbar to add buttons that invoke actions specific to your appl @using Telerik.Blazor.Components.Grid - - Fire My Command - - - - - + + Fire My Command + + + + + @result @@ -150,4 +148,4 @@ You can use the toolbar to add buttons that invoke actions specific to your appl ## See Also - * [Live Demo: Grid Toolbar](https://demos.telerik.com/blazor-ui/grid/inlineediting) \ No newline at end of file + * [Live Demo: Grid Toolbar](https://demos.telerik.com/blazor-ui/grid/inlineediting) diff --git a/knowledge-base/grid-bind-navigation-property-complex-object.md b/knowledge-base/grid-bind-navigation-property-complex-object.md index 7fdb679791..15181397a2 100644 --- a/knowledge-base/grid-bind-navigation-property-complex-object.md +++ b/knowledge-base/grid-bind-navigation-property-complex-object.md @@ -32,21 +32,21 @@ If simple display is sufficient, you can use [Templates]({%slug components/grid/ @using Telerik.Blazor - - - - + + + + - + - + diff --git a/knowledge-base/grid-change-editable-attribute-update-create.md b/knowledge-base/grid-change-editable-attribute-update-create.md index 1c305c72ab..7b54682dcb 100644 --- a/knowledge-base/grid-change-editable-attribute-update-create.md +++ b/knowledge-base/grid-change-editable-attribute-update-create.md @@ -40,11 +40,12 @@ In the two examples below, the `Name` column uses the `Editable` property, and t @CurrentlyEditedEmployee?.ID - - - @* hardcoded editable *@ - @* bound to the currently edited item. Requires at least one editor template so it populates the variable used in the logic *@ - + + + @* hardcoded editable *@ + @* bound to the currently edited item. Requires at least one editor template so it populates the variable used in the logic *@ + @{ CurrentlyEditedEmployee = context as SampleData; @@ -59,18 +60,15 @@ In the two examples below, the `Name` column uses the `Editable` property, and t } - - Update - Cancel - Edit - - - - - - - Add Employee - + + Update + Cancel + Edit + + + + Add Employee + @code { @@ -139,11 +137,12 @@ In the two examples below, the `Name` column uses the `Editable` property, and t
@isEditable - - - - - + + + + + @{ CurrentlyEditedEmployee = context as SampleData; @@ -158,18 +157,15 @@ In the two examples below, the `Name` column uses the `Editable` property, and t } - - Update - Cancel - Edit - - - - - - - Add Employee - + + Update + Cancel + Edit + + + + Add Employee + @code { From 539a7c9e1ee9a2636be92f77bd2e7c10ce8c7b13 Mon Sep 17 00:00:00 2001 From: Marin Bratanov Date: Fri, 13 Sep 2019 15:34:37 +0300 Subject: [PATCH 03/46] chore(common): kb for breaking changes in 2.0 --- knowledge-base/changes-in-2-0-0.md | 56 ++++++++++++++++++++++++++++++ 1 file changed, 56 insertions(+) create mode 100644 knowledge-base/changes-in-2-0-0.md diff --git a/knowledge-base/changes-in-2-0-0.md b/knowledge-base/changes-in-2-0-0.md new file mode 100644 index 0000000000..23c1571751 --- /dev/null +++ b/knowledge-base/changes-in-2-0-0.md @@ -0,0 +1,56 @@ +--- +title: Breaking Changes in 2.0.0 +description: Handle the changes in the 2.0.0 major release of the Telerik UI for Blazor components. +type: how-to +page_title: Changes in 2.0.0 +slug: changes-in-2-0-0 +position: +tags: +ticketid: +res_type: kb +--- + +In the `2.0.0` release, there are some changes in the Telerik Blazor components that have been brewing for a while due to the evolution of the framework. This article explains what they are and what you need to change. + +A shortlist of the changes: +* The component namespaces changed, so now you only need to include `@using Telerik.Blazor.Components` and `@using Telerik.Blazor` in your main `_Imports.razor` file, instead of a per-component statement in each view. +* Some inner tags changed names for brevity. A detailed list with the changes per component is available below. + * Most notably, the `Telerik` prefix is removed from all child tags, only the root-level components are still ``. +* Some methods that manipulated collections or state are now gone. The way to alter collections (like Action buttons on a Window) is to use conditional markup and looping over collections from a view model. When we were initially creating the components, there were indications that there will be programmatic creation options. It seems this is not going to be the case, and conditional markup plus binding is the way to affect markup. + +## Namespace Change + +Until now, you had to include things like `@using Telerik.Blazor.Components.` for every component use used, in every view. + +As of the `2.0.0` version, you only need to add the following to your main **~/_Imports.razor** file, and you have to remove the `@using` statements per component: + +```` +@using Telerik.Blazor +@using Telerik.Blazor.Components +```` + +You can keep `@using Telerik.Blazor.Components` in the views, it simply is not needed anymore. + +## Removed Methods and Properties + +This is a list of the components that had methods removed and the new approach of doing things. + +### Grid + +* The `AddColumn()` and `RemoveColumn()` methods are removed. Use conditional markup instead, like in the [Columns demo](https://demos.telerik.com/blazor-ui/grid/columns). +* The `Filterable` property is removed in favor of `FilterMode`. +* The `EditMode` property is now an enum. Use `EditMode="@GridEditMode.Incell|Inline|Popup"`. + + +## Removed Tags + +This is a list of the components that had their child tags removed. + +### Grid + +Here are the changes in the grid: + +* The `TelerikGridEvents` and `EventsManager` tags are removed. The CRUD events of the grid are now available at its root-level tag, for example ``. + + + From 99a3bdf2253c9c261e752334f0a7de1d882d3b10 Mon Sep 17 00:00:00 2001 From: Marin Bratanov Date: Fri, 13 Sep 2019 16:06:50 +0300 Subject: [PATCH 04/46] chore(common): fill in info in the breaking changes kb --- knowledge-base/changes-in-2-0-0.md | 191 +++++++++++++++++++++++++++-- 1 file changed, 184 insertions(+), 7 deletions(-) diff --git a/knowledge-base/changes-in-2-0-0.md b/knowledge-base/changes-in-2-0-0.md index 23c1571751..2ac3f9970b 100644 --- a/knowledge-base/changes-in-2-0-0.md +++ b/knowledge-base/changes-in-2-0-0.md @@ -14,9 +14,9 @@ In the `2.0.0` release, there are some changes in the Telerik Blazor components A shortlist of the changes: * The component namespaces changed, so now you only need to include `@using Telerik.Blazor.Components` and `@using Telerik.Blazor` in your main `_Imports.razor` file, instead of a per-component statement in each view. -* Some inner tags changed names for brevity. A detailed list with the changes per component is available below. - * Most notably, the `Telerik` prefix is removed from all child tags, only the root-level components are still ``. -* Some methods that manipulated collections or state are now gone. The way to alter collections (like Action buttons on a Window) is to use conditional markup and looping over collections from a view model. When we were initially creating the components, there were indications that there will be programmatic creation options. It seems this is not going to be the case, and conditional markup plus binding is the way to affect markup. +* Some inner tags changed names for brevity and usability. A detailed list with the changes per component is available below. + * Most notably, the `Telerik` prefix is removed from all child tags, only the root-level components are still ``. There are some particular changes for certain components, and they are detailed below. +* Some methods that manipulated collections or state are now gone. The way to alter collections (like Action buttons on a Window) is to use conditional markup and looping over collections from a view model. When we were initially creating the components, there were indications that there will be programmatic creation options. It seems this is not going to be the case, and conditional markup plus binding is the way to affect markup. There are details for each component below. ## Namespace Change @@ -31,26 +31,203 @@ As of the `2.0.0` version, you only need to add the following to your main **~/_ You can keep `@using Telerik.Blazor.Components` in the views, it simply is not needed anymore. +### Moved Enums + +Some enums had to move to different namespaces and/or to have more descriptive names: + +````CSHTML +// Grid +Telerik.Blazor.FilterMode -> Telerik.Blazor.GridFilterMode + +// TabStrip +Telerik.Blazor.Components.TabStrip.TabPosition -> Telerik.Blazor.TabPosition + +// Window +Telerik.Blazor.Size -> Telerik.Blazor.WindowSize +```` + ## Removed Methods and Properties This is a list of the components that had methods removed and the new approach of doing things. +### Calendar + +* The `Navigate()` method is no longer available. Use binding for the `View` and `Date` parameters. + +### DatePicker + +* The `Close()` method is no longer available. The popup closes on clicks outside of it anyway. + ### Grid * The `AddColumn()` and `RemoveColumn()` methods are removed. Use conditional markup instead, like in the [Columns demo](https://demos.telerik.com/blazor-ui/grid/columns). * The `Filterable` property is removed in favor of `FilterMode`. * The `EditMode` property is now an enum. Use `EditMode="@GridEditMode.Incell|Inline|Popup"`. +### TabStrip -## Removed Tags +* The `ActivateTab()` and `DeactivateTab()` methods are no longer available. Use the new `ActiveTabIndex` property and its `ActiveTabIndexChanged` event. +* The `AddTab()` method is no longer available in favor of conditional markup. -This is a list of the components that had their child tags removed. +### TreeView -### Grid +* The `AddBinding()` and `RemoveBinding()` methods are no longer avaialble. + +## Renamed Tags + +This is a list of the components that had their child tags removed or renamed. + +### DropDownList + +* `Header` is now `HeaderTemplate` +* `Footer` is now `FooterTemplate` -Here are the changes in the grid: +````CSHTML +// Old + +
+
+ + + + +// New + + + + + + +```` + +### Grid * The `TelerikGridEvents` and `EventsManager` tags are removed. The CRUD events of the grid are now available at its root-level tag, for example ``. +* All child tags that had `Telerik` as a prefix do not have that prefix anymore. + +```` +// Old + + + + Edit + + + + + + + Text + + +

content

+ + + + + + +// New + + + + Edit + + + + + + + Text + + +

content

+ + +```` + +### TabStrip +* `TelerikTab` is now `TabStripTab` + +````CSHTML +// Old + + +

tab content

+ + + +// New + + +

tab content

+ + +```` + +### TreeView + +* All child tags that had `Telerik` as a prefix do not have that prefix anymore. + +````CSHTML +// Old + + + + +

content

+ + + + + +// New + + + + +

content

+ + + + +```` + +### Window + +* All child tags that had `Telerik` as a prefix do not have that prefix anymore. + +````CSHTML +// Old + + +

Title

+ + + + + +

content

+ + + +// New + + +

Title

+ + + + + +

content

+ + +```` From 08e151174a008f33b65a3a67e194a2cbc7ba38fa Mon Sep 17 00:00:00 2001 From: Marin Bratanov Date: Fri, 13 Sep 2019 16:53:24 +0300 Subject: [PATCH 05/46] chore(common): inputs changes --- knowledge-base/changes-in-2-0-0.md | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/knowledge-base/changes-in-2-0-0.md b/knowledge-base/changes-in-2-0-0.md index 2ac3f9970b..928b19fda9 100644 --- a/knowledge-base/changes-in-2-0-0.md +++ b/knowledge-base/changes-in-2-0-0.md @@ -64,11 +64,20 @@ This is a list of the components that had methods removed and the new approach o * The `Filterable` property is removed in favor of `FilterMode`. * The `EditMode` property is now an enum. Use `EditMode="@GridEditMode.Incell|Inline|Popup"`. +### Inputs + +* All input-type components no longer have the `Height` property. Their height is to be controlled through CSS and the font-size through the themes anyway, and the `Height` property did not always produce expected/proper results. + ### TabStrip * The `ActivateTab()` and `DeactivateTab()` methods are no longer available. Use the new `ActiveTabIndex` property and its `ActiveTabIndexChanged` event. * The `AddTab()` method is no longer available in favor of conditional markup. + +### Textbox + +* The `Pattern`, `MinLength` and `MaxLength` parameters are removed in favor of validation. In the future, they will probably become available through attribute splatting. + ### TreeView * The `AddBinding()` and `RemoveBinding()` methods are no longer avaialble. From cea738fcf1b4ca9d106e1dafaf702708b4cc76e6 Mon Sep 17 00:00:00 2001 From: Marin Bratanov Date: Fri, 13 Sep 2019 16:56:41 +0300 Subject: [PATCH 06/46] chore(grid): find-replace columns change --- components/grid/overview.md | 16 ++++++++-------- components/grid/paging.md | 8 ++++---- components/grid/sorting.md | 5 ++--- components/grid/templates.md | 10 +++++----- knowledge-base/changes-in-2-0-0.md | 2 +- ...id-bind-navigation-property-complex-object.md | 8 ++++---- ...id-change-editable-attribute-update-create.md | 4 ++-- 7 files changed, 26 insertions(+), 27 deletions(-) diff --git a/components/grid/overview.md b/components/grid/overview.md index ea403f3f2d..3e703a4d8e 100644 --- a/components/grid/overview.md +++ b/components/grid/overview.md @@ -71,9 +71,9 @@ The grid is a generic component, and to store a reference, you must use the mode - + - + @@ -159,11 +159,11 @@ For example, you can benefit from the elastic design the components expose to ch Sortable="true" Height="200px"> - + - + - + @@ -174,11 +174,11 @@ original: Sortable="true" Height="200px"> - + - + - + diff --git a/components/grid/paging.md b/components/grid/paging.md index ec8d12fd13..7fb8cd084d 100644 --- a/components/grid/paging.md +++ b/components/grid/paging.md @@ -25,8 +25,8 @@ You can set the current page of the grid through its integer `Page` property. - - + + @@ -58,8 +58,8 @@ Here is one way to implement a page size choice that puts all records on one pag - - + + diff --git a/components/grid/sorting.md b/components/grid/sorting.md index ad1bf61b6f..7586ffd75c 100644 --- a/components/grid/sorting.md +++ b/components/grid/sorting.md @@ -23,8 +23,8 @@ When the user clicks the column header, the grid will sort the data according to - - + + @@ -43,4 +43,3 @@ You can sort this grid on the different columns to see the results. The name col * [Live Demo: Grid Sorting](https://demos.telerik.com/blazor-ui/grid/sorting) - \ No newline at end of file diff --git a/components/grid/templates.md b/components/grid/templates.md index ff9b7b60e2..1161022185 100644 --- a/components/grid/templates.md +++ b/components/grid/templates.md @@ -47,21 +47,21 @@ The example below shows how to: employee photo } - + - + - + - + @@ -163,7 +163,7 @@ If you need to perform logic more complex than simple data binding, use the chan } - + Update Edit diff --git a/knowledge-base/changes-in-2-0-0.md b/knowledge-base/changes-in-2-0-0.md index 928b19fda9..ad7224dece 100644 --- a/knowledge-base/changes-in-2-0-0.md +++ b/knowledge-base/changes-in-2-0-0.md @@ -125,7 +125,7 @@ This is a list of the components that had their child tags removed or renamed. - + Text diff --git a/knowledge-base/grid-bind-navigation-property-complex-object.md b/knowledge-base/grid-bind-navigation-property-complex-object.md index 15181397a2..21e6e7c5e3 100644 --- a/knowledge-base/grid-bind-navigation-property-complex-object.md +++ b/knowledge-base/grid-bind-navigation-property-complex-object.md @@ -33,18 +33,18 @@ If simple display is sufficient, you can use [Templates]({%slug components/grid/ - - + + - + - + diff --git a/knowledge-base/grid-change-editable-attribute-update-create.md b/knowledge-base/grid-change-editable-attribute-update-create.md index 7b54682dcb..fbfa0fe604 100644 --- a/knowledge-base/grid-change-editable-attribute-update-create.md +++ b/knowledge-base/grid-change-editable-attribute-update-create.md @@ -59,7 +59,7 @@ In the two examples below, the `Name` column uses the `Editable` property, and t } } - + Update Cancel @@ -156,7 +156,7 @@ In the two examples below, the `Name` column uses the `Editable` property, and t } } - + Update Cancel From 82bdf6a3f76d8c94d88028566d458f4661d8fc7f Mon Sep 17 00:00:00 2001 From: Marin Bratanov Date: Fri, 13 Sep 2019 17:30:44 +0300 Subject: [PATCH 07/46] chore(icon): icon changes for 2.0.0 --- common-features/font-icons.md | 25 +++++++++--------- .../images/standalone-font-icons.png | Bin 969 -> 1315 bytes knowledge-base/changes-in-2-0-0.md | 6 +++++ 3 files changed, 18 insertions(+), 13 deletions(-) diff --git a/common-features/font-icons.md b/common-features/font-icons.md index 196dbd596d..f6ea615b62 100644 --- a/common-features/font-icons.md +++ b/common-features/font-icons.md @@ -10,7 +10,7 @@ position: 1 # Built-in Icons -The UI for Blazor suite comes with a set of font icons that you can use in various places like in the Button component. +The UI for Blazor suite comes with a set of font icons that you can use in various places like in the Button component, or as a standalone component. To use a predefined font icon, you can set the corresponding property to a member of the `Telerik.Blazor.IconName` static class. The Visual Studio intellisense should provide you with the available options. @@ -36,27 +36,26 @@ You can find the full list of available icons in the [Kendo UI Web Font Icons Li >caption Render a standalone font icon through the TelerikIcon component ````CSHTML -@using Telerik.Blazor -@using Telerik.Blazor.Components - - @* will render the audio speaker icon *@ +@using Telerik.Blazor.Components.Common.Icon - @* home icon from OpenIconic, assuming you have loaded the font on the page *@ + @* will render the audio note icon *@ - @* In this simple example, the built-in Telerik icon font matching the glyph position will be used, unless you provide an actual font icon of your own to override the values *@ + @* home icon from OpenIconic, assuming you have loaded the font on the pag, you can use your own CSS classes and font icon fonts *@ - + @* an image by URL, renders an actual tag *@ ```` >caption The result from the snippet above ![](images/standalone-font-icons.png) +The priority order of the Icon properties, if more than one is defined, is + +1. ImageUrl +2. Icon +3. IconClass +4. SpriteClass + ## See Also diff --git a/common-features/images/standalone-font-icons.png b/common-features/images/standalone-font-icons.png index 49a907876a39e40f934f0607916008ad0f305a35..c0d245c4d0fe23fbed31deacbce66983421bb555 100644 GIT binary patch delta 1281 zcmV+c1^)WU2crrhiBL{Q4GJ0x0000DNk~Le000140000c2nGNE0Iz>HyOAL@e+0Nm zL_t(&L+zSF{J}(#`9pUzcij?K($MZIU6U35S$UcDHp1>a&wX6>-mIB9Gsl+mDV_8D&T~qi z`OWuv&S@eH6CT3=4aD05sD%|FOA(Ww%Ye~qYhRnt;l zUJefr50sXcLa9{Z?CcDOhlkkR-KEzzHa6(d6qx3*`dkamh8hd=vv{RcU}Ab1e;%=G zlspWtJjG{hbR$P<$fYGz>W2hKr0A%YAi#kYOu+K;GCDguF*`d8cXxNh$H&9L!GX%o z%F04uU?7{x4UUpk=+3Ode^0-vp<$JG*ugVIjE8AreD%2?qla?iga zNq;mN4b9~1f-Nj85EmDRj*bo_BqX4+vJyi>L+mOy?sj)!N4iphH!?9R=tsQlHD1be z`D|n>9~~W0(U-Wnf4QNjrw1)9Er^beMngjbGBY#L*w{#=bLDO&>)Y`+VdVXmmX;tX z>Ehx7Pft(m?d{PW#>K@2y-vEiqM`!1xw)8{nxZu>m`Cy-3Ovh>fhg!xL}Wk5FRaWr zMC6A{&i?*BMn^|+a&iJ+Utij({{H?L7#N@ta(#YDNeTM)#+uI{APq$bP52L84 zh|Y6%cBUOnf3|Pr+|(E@`PL{9;mM2V_&Va3}zU;VMMF{GrVprD|Do@=#Q?Ck8&`QF~%^k{0hf5(M^QNTB32a%kdjP~|+3=R&W zu&@w5K0a7jSfKKWaB__h78XX2rpE9mJ`xvCrL>z#6x21|U8fogc^RbAeG4ZhCg|4f za?dOhiRgn!VqzlwAV{6W4Oi~{?=FbQ>FH^j+w=4DI6ps!jg1XlU0rF6^!D~5G&GdW zHjaBQSNS^Y>+7_;CnqQA3!~uRVEXciEQnkXB=Z12`{a9$AejdQ$vhxP<^e%64+xTZ rK#f@B^LB=dkEnFj>PW(W8OQSa5ZZ@<`o00000NkvXXu0mjfJhXF;FV-Aq zDhwLTKO`v)FBtg{2GcH-4NUGsB*?fB?oFQ-4DN%}z1P!nwzYek_q6DIVC^tn)DA@eA3JhJy? zq*D?$H$GrBzKqxJwy>Ka&osKRxZO`(c3OJ`AI^Wj2u9s$HU>`ISW?3Tj($-Ti)g|5*Fbc48dP-JpAO358$~rgCyw}#*W|u zkD(^>L%d|!w20bU{_xg_~vw0VaS+m^{l zA@;By7fD+`oACs8N!u*SK(?AThT(B5BJ+FxiKHxu+ovr^VdY8{eOv+n>LDJJgt-q$FM;j-TWj(+uaz?iP8e4 z-@fuu^7}5|3)f&a9E;Kt7BKCzW#7+b53wMJ0sTLB0Cx|Gs1H@7YX)@Eh~0)t(#+vc zH_{*Eecy)WRtIV8f5+MCGF7ySaoI&vgi^OgCeTF=3YCrk9!9!Rr}gMi)7gtIBW0XY z`rYoVCLQxIC|gMpJ$ErDe${$uQOuufYuy-&CA3XQjD>KemW#+qYdZ$MfgR=jAiZDW@qX&zL z6+9me;BteFoIus9giGieox$70Jhgif71M70jBvCX$yOVLV$c5-=u{&Njk1XB{{2DZ*q^1NaVZ)j|WKXa5fX0000 Date: Fri, 13 Sep 2019 17:58:52 +0300 Subject: [PATCH 08/46] chore(calendar): changes for 2.0.0 --- components/calendar/navigation.md | 38 ++++++++-------- components/calendar/overview.md | 11 ++--- components/calendar/selection.md | 72 +++++++++++++----------------- knowledge-base/changes-in-2-0-0.md | 4 +- 4 files changed, 56 insertions(+), 69 deletions(-) diff --git a/components/calendar/navigation.md b/components/calendar/navigation.md index 6c7f10bc38..03fc8da117 100644 --- a/components/calendar/navigation.md +++ b/components/calendar/navigation.md @@ -21,9 +21,6 @@ You can control how far the user can go by setting the `Min` and `Max` propertie >caption Previous and Next navigation is enabled by default. You can control the min and max range of dates the user can navigate through ````CSHTML -@using Telerik.Blazor.Components.Calendar -@using Telerik.Blazor - The user starts in April 2019 and can navigate between January 2019 and July 2019.
@@ -57,9 +54,6 @@ You can control how much detail the user can go into by setting the `BottomView` >caption Control current view and how deep the user can go ````CSHTML -@using Telerik.Blazor.Components.Calendar -@using Telerik.Blazor - The user starts in the Decade view and can only go down to years.
@@ -88,28 +82,32 @@ The selected date is: @selectedDate ## Programmatic Navigation -You can make the Calendar component move to a certain date and view through its `Navigate` method from your own code. The method takes into account the min and max dates, and the allowed views. If the parameters passed to the method are not allowed by those constraints, navigation will not occur. +You can make the Calendar component move to a certain date and view through its `Date` and `View` parameters that support two-way binding. The constraints of the min/max and bottom view apply to programmatic navigation as well as to user navigation. >caption Navigate the Calendar to a date and view programmatically ````CSHTML -@using Telerik.Blazor.Components.Calendar -@using Telerik.Blazor.Components.Button +Programmatic Calendar navigation
-Go to new date and view - + + +Update View -@code{ - DateTime startDate = new DateTime(2345, 11, 22); - DateTime maxDate = new DateTime(2400, 11, 22); - DateTime minDate = new DateTime(1800, 11, 22); +@code { + CalendarView calendarView { get; set; } = CalendarView.Month; + DateTime startDate { get; set; } = new DateTime(2019, 5, 2); - Telerik.Blazor.Components.Calendar.TelerikCalendar theCalendar; + DateTime min = new DateTime(2015, 1, 1); + DateTime max = new DateTime(2025, 12, 31); - void NavigateCalendarProgrammatically() - { - theCalendar.Navigate(DateTime.Now, Telerik.Blazor.CalendarView.Month); - } + protected void UpdateView() + { + calendarView = CalendarView.Year; + startDate = new DateTime(2018, 5, 2); + } } ```` diff --git a/components/calendar/overview.md b/components/calendar/overview.md index 389ecc70fb..6644aace73 100644 --- a/components/calendar/overview.md +++ b/components/calendar/overview.md @@ -17,8 +17,7 @@ To use a Telerik Calendar for Blazor, add the `TelerikCalendar` tag. >caption Basic calendar with its key features, and ValueChanged event handling ````CSHTML -@using Telerik.Blazor.Components.Calendar -@using Telerik.Blazor +Main Calendar features, ValueChanged event handling.
@@ -38,7 +37,6 @@ The selected date is: @selectedDate StateHasChanged(); } } - ```` >caption The result from the code snippet above @@ -48,13 +46,13 @@ The selected date is: @selectedDate >caption Component namespace and reference ````CSHTML -@using Telerik.Blazor.Components.Calendar +@using Telerik.Blazor.Components @code { - Telerik.Blazor.Components.Calendar.TelerikCalendar myCalendarReference; + Telerik.Blazor.Components.TelerikCalendar myCalendarReference; } ```` The calendar provides a number of features that allow you to control the user experience: @@ -67,9 +65,6 @@ You can also render several instances of the current view next to each other so >caption Render 3 months at a time ````CSHTML -@using Telerik.Blazor.Components.Calendar -@using Telerik.Blazor - ```` diff --git a/components/calendar/selection.md b/components/calendar/selection.md index 423961da9e..89cf293545 100644 --- a/components/calendar/selection.md +++ b/components/calendar/selection.md @@ -38,68 +38,60 @@ To prevent the user from selecting certain dates (for example, holidays), add th >caption Handle calendar date selection and disable certain dates from being selected ````CSHTML -@using Telerik.Blazor.Components.Calendar -@using Telerik.Blazor - The user will not be able to select the first and second of April 2019.

Single Selection

+ DisabledDates="@DisabledDates" Date="@startDate">
-@if(selectedDate != null) +@if (selectedDate != null) { - @selectedDate.Value.ToString("dd MMM yyyy"); + @selectedDate.Value.ToString("dd MMM yyyy"); }

Multiple Selection

+ DisabledDates="@DisabledDates" Date="@startDate" @ref="multipleSelCalendar">
@if (chosenDates != null && chosenDates.Count > 0) { -
    - @foreach (DateTime date in chosenDates) - { -
  • @date.ToString("dd MMM yyyy")
    • - } -
+
    + @foreach (DateTime date in chosenDates) + { +
  • @date.ToString("dd MMM yyyy")
    • + } +
} @code { - private DateTime startDate = new DateTime(2019, 4, 1);//set the initial date of the calendar - - //set dates the user can't select - private List DisabledDates = new List() { new DateTime(2019, 4, 1), new DateTime(2019, 4, 2) }; - - //fields to store and render the user selection - private DateTime? selectedDate { get; set; } = null; - private List chosenDates { get; set; } - - private void SingleSelectionChangeHandler(DateTime newValue) - { - //with single selection, the argument is a single DateTime object with the new selection - selectedDate = newValue; - - StateHasChanged(); - } - - //reference used to obtain the selected dates from a multiple selection calendar - private Telerik.Blazor.Components.Calendar.TelerikCalendar multipleSelCalendar; - private void MultipleSelectionChangeHandler(object newValue) - { - //with multiple selection, get the selected dates from a component reference - chosenDates = multipleSelCalendar.SelectedDates; - - StateHasChanged(); - } + private DateTime startDate = new DateTime(2019, 4, 1);//set the initial date of the calendar + + //set dates the user can't select + private List DisabledDates = new List() { new DateTime(2019, 4, 1), new DateTime(2019, 4, 2) }; + + //fields to store and render the user selection + private DateTime? selectedDate { get; set; } = null; + private List chosenDates { get; set; } + + private void SingleSelectionChangeHandler(DateTime newValue) + { + //with single selection, the argument is a single DateTime object with the new selection + selectedDate = newValue; + } + + //reference used to obtain the selected dates from a multiple selection calendar + private Telerik.Blazor.Components.TelerikCalendar multipleSelCalendar; + private void MultipleSelectionChangeHandler() + { + //with multiple selection, get the selected dates from a component reference + chosenDates = multipleSelCalendar.SelectedDates; + } } - ```` diff --git a/knowledge-base/changes-in-2-0-0.md b/knowledge-base/changes-in-2-0-0.md index 8538011869..4b409cea0a 100644 --- a/knowledge-base/changes-in-2-0-0.md +++ b/knowledge-base/changes-in-2-0-0.md @@ -18,6 +18,8 @@ A shortlist of the changes: * Most notably, the `Telerik` prefix is removed from all child tags, only the root-level components are still ``. There are some particular changes for certain components, and they are detailed below. * Some methods that manipulated collections or state are now gone. The way to alter collections (like Action buttons on a Window) is to use conditional markup and looping over collections from a view model. When we were initially creating the components, there were indications that there will be programmatic creation options. It seems this is not going to be the case, and conditional markup plus binding is the way to affect markup. There are details for each component below. +In case the lists in this article do not suffice, you can go to the concrete component's demos and documentation to see the way it is to be used after these changes. The documentation always reflects the latest version of our components. + ## Namespace Change Until now, you had to include things like `@using Telerik.Blazor.Components.` for every component use used, in every view. @@ -52,7 +54,7 @@ This is a list of the components that had methods removed and the new approach o ### Calendar -* The `Navigate()` method is no longer available. Use binding for the `View` and `Date` parameters. +* The `Navigate()` method is no longer available. Use binding for the `View` and `Date` parameters. An example is avalable in the [Navigate]({%slug components/calendar/navigation%}#programmatic-navigation) article. ### DatePicker From 6a41630278420e206b2f358f100dd725a451d527 Mon Sep 17 00:00:00 2001 From: Marin Bratanov Date: Fri, 13 Sep 2019 18:03:12 +0300 Subject: [PATCH 09/46] chore(button): update for 2.0.0 --- components/button/overview.md | 32 +++++++++++++------------------- 1 file changed, 13 insertions(+), 19 deletions(-) diff --git a/components/button/overview.md b/components/button/overview.md index 1dc2c1e13a..2c5c435cf9 100644 --- a/components/button/overview.md +++ b/components/button/overview.md @@ -14,6 +14,16 @@ This article provides information about the Button component and its core featur The Button component provides styling according to the [chosen theme]({%slug general-information/themes%}), click event and icons. You can also disable the button through a property. +In this article: + +* [Basic Button](#basic-button) +* [Click Handler](#click-handler) +* [Styling](#styling) +* [Icons](#icons) +* [Disabled State](#disabled-state) +* [Button Type](#button-type) + + ## Basic Button To add a Telerik Button to your Blazor app, use the `` tag: @@ -21,8 +31,6 @@ To add a Telerik Button to your Blazor app, use the `` tag: >caption Basic Telerik Button tag ````CSHTML -@using Telerik.Blazor.Components.Button - Hello! ```` @@ -33,12 +41,12 @@ To add a Telerik Button to your Blazor app, use the `` tag: >caption Component namespace and reference ````CSHTML -@using Telerik.Blazor.Components.Button +@using Telerik.Blazor.Components Hello! @code{ - Telerik.Blazor.Components.Button.TelerikButton theButton; + Telerik.Blazor.Components.TelerikButton theButton; } ```` @@ -49,12 +57,10 @@ To attach a click handler, use the `OnClick` attribute and define the method in >caption Click handler for a Telerik Button ````CSHTML -@using Telerik.Blazor.Components.Button +@someVariable Click me! -@someVariable - @code { MarkupString someVariable; @@ -72,8 +78,6 @@ You can style the button through its `Class` attribute to define your own CSS ru >caption Set CSS class to the button and change its appearance ````CSHTML -@using Telerik.Blazor.Components.Button - My text is red. @@ -170,7 +170,7 @@ For example, you can benefit from the elastic design the components expose to ch original: diff --git a/components/grid/selection/overview.md b/components/grid/selection/overview.md index 4b5b748954..bf73a74f2d 100644 --- a/components/grid/selection/overview.md +++ b/components/grid/selection/overview.md @@ -75,7 +75,7 @@ The [single selection]({%slug components/grid/selection/single%}) and [multiple ```` ->note In [Incell EditMode]({%slug components/grid/editing/incell%}) selection can be applied only via a checkbox column. This is required due to the overlapping action that triggers selection and incell editing. +>note In [Incell GridEditMode]({%slug components/grid/editing/incell%}) selection can be applied only via a checkbox column. This is required due to the overlapping action that triggers selection and incell editing. ## See Also diff --git a/components/grid/templates.md b/components/grid/templates.md index 1161022185..b1c28227d0 100644 --- a/components/grid/templates.md +++ b/components/grid/templates.md @@ -152,7 +152,7 @@ If you need to perform logic more complex than simple data binding, use the chan @using Telerik.Blazor.Components.Grid @using Telerik.Blazor.Components.DropDownList - + diff --git a/components/grid/toolbar.md b/components/grid/toolbar.md index 6fb241cb66..7880ba6257 100644 --- a/components/grid/toolbar.md +++ b/components/grid/toolbar.md @@ -31,7 +31,7 @@ The grid offers built-in commands that you can invoke through its toolbar. To us @using Telerik.Blazor @using Telerik.Blazor.Components.Grid - Add Employee From 81a97e232fb70f69148113170b20e7306673c4b7 Mon Sep 17 00:00:00 2001 From: Marin Bratanov Date: Sat, 14 Sep 2019 11:40:54 +0300 Subject: [PATCH 17/46] chore(grid): updates for 2.0.0 --- components/grid/paging.md | 8 ++++---- components/grid/selection/multiple.md | 15 +++++++-------- components/grid/selection/overview.md | 8 ++++---- components/grid/selection/single.md | 11 ++++------- components/grid/sorting.md | 4 ++-- components/grid/templates.md | 9 ++++----- components/grid/toolbar.md | 14 ++++---------- knowledge-base/changes-in-2-0-0.md | 2 +- 8 files changed, 30 insertions(+), 41 deletions(-) diff --git a/components/grid/paging.md b/components/grid/paging.md index 7fb8cd084d..c8e413fefc 100644 --- a/components/grid/paging.md +++ b/components/grid/paging.md @@ -21,7 +21,7 @@ You can set the current page of the grid through its integer `Page` property. >caption Enable paging in Telerik Grid ````CSHTML -@using Telerik.Blazor.Components.Grid +Enable paging and start on the second page. @@ -46,14 +46,14 @@ Here is one way to implement a page size choice that puts all records on one pag >caption Bind Page Size to a variable ````CSHTML -@using Telerik.Blazor.Components.Grid +Dynamic page size change - @for (int i = 1; i < 4; i++) { } - + diff --git a/components/grid/selection/multiple.md b/components/grid/selection/multiple.md index aadf09ba92..a0f9f87ac2 100644 --- a/components/grid/selection/multiple.md +++ b/components/grid/selection/multiple.md @@ -25,7 +25,7 @@ In Multiple SelectionMode, selection could be made using the following approache ## Checkbox Selection -To add checkboxes in each row that the user can use for selection, add a `TelerikGridCheckboxColumn` in the `TelerikGridColumns` collection of the grid. +To add checkboxes in each row that the user can use for selection, add a `GridCheckboxColumn` in the `GridColumns` collection of the grid. The Grid allows selection and deselection of all rows on the current page via the `SelectAll` property. Setting this property to `true` (its default value) will render a checkbox in the grid header that the you can click to select whole pages. @@ -46,13 +46,13 @@ You can add a checkbox column for selection. It is required if the `InCell` edit >caption Multiple Selection and a checkbox column. ````CSHTML -@using Telerik.Blazor.Components.Grid +You can select items by clicking a checkbox, or by clicking the rows. The Ctrl and Shift keys let you select more than one row when clicking it. - + @@ -91,7 +91,7 @@ You can respond to the user action of selecting a new item through the `Selected >caption Multiple Selection and handling the SelectedItemsChanged event ````CSHTML -@using Telerik.Blazor.Components.Grid +Show details for selected items via the selection changed event - + @@ -160,7 +160,7 @@ You can predefine the selected items for your users through the two-way binding >caption Multiple Selection and two-way binding of the `SelectedItems` property ````CSHTML -@using Telerik.Blazor.Components.Grid +Use the selected items collection - + @@ -214,7 +214,6 @@ You can predefine the selected items for your users through the two-way binding public string Team { get; set; } } } - ```` diff --git a/components/grid/selection/overview.md b/components/grid/selection/overview.md index bf73a74f2d..6193479e67 100644 --- a/components/grid/selection/overview.md +++ b/components/grid/selection/overview.md @@ -20,7 +20,7 @@ You can configure the selection behavior by setting `SelectionMode` to a member To select a row, click on it. To select multiple rows, hold down the `Ctrl` or `Shift` key to extend the selection. -You can also use a [checkbox column](#checkbox-support) to select rows. To use it, add a `TelerikGridCheckboxColumn` in the `TelerikGridColumns` collection of the grid. It works with both selection modes. The checkbox in the header selects all items in the current page (if its `SelectAll` parameter is set to `true`). +You can also use a [checkbox column](#checkbox-support) to select rows. To use it, add a `GridCheckboxColumn` in the `GridColumns` collection of the grid. It works with both selection modes. The checkbox in the header selects all items in the current page (if its `SelectAll` parameter is set to `true`). You can get or set the [selected items](#get-or-set-selected-items) through the `SelectedItems` property. It is a collection of items from the Grid's `Data`. You can use two-way binding, or the `SelectedItemsChanged` event to track the user selection. @@ -29,7 +29,7 @@ The [single selection]({%slug components/grid/selection/single%}) and [multiple >caption Enable row selection ````CSHTML -@using Telerik.Blazor.Components.Grid +See how the row selection modes work diff --git a/components/menu/overview.md b/components/menu/overview.md index e731677f3d..5b18ae10f4 100644 --- a/components/menu/overview.md +++ b/components/menu/overview.md @@ -21,7 +21,7 @@ To use a Telerik Menu for Blazor: >caption Basic menu with hierarchical data binding and built-in navigation ````CSHTML -@using Telerik.Blazor.Components.Menu +Use a menu to navigate between views theMenu; + Telerik.Blazor.Components.TelerikMenu theMenu; List menuData = Enumerable.Range(1, 3).Select(x => new MenuItem { Page = $"page{x}" }).ToList(); diff --git a/components/menu/templates.md b/components/menu/templates.md index 3d404ff582..3989954e6b 100644 --- a/components/menu/templates.md +++ b/components/menu/templates.md @@ -21,7 +21,7 @@ You can use the template to render arbitrary content according to your applicati >caption Use templates to implement navigation between views without the UrlField feature ````CSHTML -@using Telerik.Blazor.Components.Menu +Use your own NavLink elements for navigation instead of the built-in feature of the menu @@ -103,7 +103,6 @@ You can use the template to render arbitrary content according to your applicati >caption Use templates to visually distinguish the current page as an item that is styled differently, and to open external links in new tabs ````CSHTML -@using Telerik.Blazor.Components.Menu @inject NavigationManager navigationManager @@ -125,6 +124,7 @@ You can use the template to render arbitrary content according to your applicati } + @code { public List MenuItems { get; set; } From ec98c1879d3a33f32211d2f66773fe6986135c65 Mon Sep 17 00:00:00 2001 From: Marin Bratanov Date: Sat, 14 Sep 2019 14:30:31 +0300 Subject: [PATCH 21/46] chore(numericTextBox): changse for 2.0.0 --- components/numerictextbox/events.md | 28 ++++++++++----------------- components/numerictextbox/overview.md | 6 ++---- 2 files changed, 12 insertions(+), 22 deletions(-) diff --git a/components/numerictextbox/events.md b/components/numerictextbox/events.md index 18fb2b30a2..c23dfae9ee 100644 --- a/components/numerictextbox/events.md +++ b/components/numerictextbox/events.md @@ -24,13 +24,11 @@ The numeric textbox is a generic component, so you must provide either a `Value` >caption Handle OnChange ````CSHTML -@using Telerik.Blazor.Components.NumericTextBox +@result +
-
-@result - @code { string result; @@ -50,14 +48,12 @@ The numeric textbox is a generic component, so you must provide either a `Value` >caption Handle OnChange and use two-way binding ````CSHTML -@using Telerik.Blazor.Components.NumericTextBox - - - -
@result
model value: @theTbValue +
+ + @code { string result; @@ -80,13 +76,11 @@ The `ValueChanged` event fires upon every change (for example, keystroke) in the >caption Handle ValueChanged ````CSHTML -@using Telerik.Blazor.Components.NumericTextBox +@result +
-
-@result - @code { string result; @@ -104,14 +98,12 @@ The `ValueChanged` event fires upon every change (for example, keystroke) in the >caption Handle ValueChanged and provide initial value ````CSHTML -@using Telerik.Blazor.Components.NumericTextBox - - - -
from the handler: @result
from model: @theTbValue +
+ + @code { string result; diff --git a/components/numerictextbox/overview.md b/components/numerictextbox/overview.md index 2202d23e98..dd2664dcd3 100644 --- a/components/numerictextbox/overview.md +++ b/components/numerictextbox/overview.md @@ -17,11 +17,9 @@ To use a Telerik Numeric Textbox for Blazor, add the `TelerikNumericTextBox` tag >caption Basic numeric textbox with its key features ````CSHTML -@using Telerik.Blazor.Components.NumericTextBox +The new value is: @theValue -
-The new value is: @theValue @code { private decimal theValue { get; set; } = 1.234m; @@ -42,7 +40,7 @@ The numeric textbox component is generic, meaning that it takes the type of its private int CurrentValue { get; set; } //the type of the value variable determines the type of the reference - private Telerik.Blazor.Components.NumericTextBox.TelerikNumericTextBox myNumericTextboxRef; + private Telerik.Blazor.Components.TelerikNumericTextBox myNumericTextboxRef; } ```` From 945a96fb70998712b2dd530072516e2037f570dd Mon Sep 17 00:00:00 2001 From: Marin Bratanov Date: Sat, 14 Sep 2019 14:53:30 +0300 Subject: [PATCH 22/46] chore(tabStrip): updates for 2.0.0 --- components/tabstrip/overview.md | 135 ++++++++++++++++++----------- knowledge-base/changes-in-2-0-0.md | 4 +- 2 files changed, 88 insertions(+), 51 deletions(-) diff --git a/components/tabstrip/overview.md b/components/tabstrip/overview.md index 8c49ec7074..ad02576033 100644 --- a/components/tabstrip/overview.md +++ b/components/tabstrip/overview.md @@ -12,11 +12,13 @@ position: 0 This article provides information about the Tab Strip component and its core features. -The Tab Strip is defined through the `` tag that accepts children of type ``. Inside the tabs you can add content like in any other container, including other components. +The Tab Strip is defined through the `` tag that accepts children of type ``. Inside the tabs you can add content like in any other container, including other components. The tab exposes a `Title` attribute that is the text rendered in the heading. It also offers the `Disabled` attribute that allows you to disable its selection. -To control the position of the tab titles, the main tab strip tag exposes the optional `TabPosition` attribute that takes a member of the `Telerik.Blazor.Components.TabStrip.TabPosition` enumeration: +The `ActiveTabIndex` parameter lets you get and set the currently shown tab index through two-way binding, and also provides an event for the tab change. + +To control the position of the tab titles, the main tab strip tag exposes the optional `TabPosition` attribute that takes a member of the `Telerik.Blazor.TabPosition` enumeration: * `Top` (default) * `Left` @@ -28,20 +30,20 @@ To control the position of the tab titles, the main tab strip tag exposes the op ````CSHTML @using Telerik.Blazor.Components.TabStrip - - + + First tab content. - - + + Second tab content. This tab is disabled and you cannot select it. - - + + Third tab content. - + @code { - Telerik.Blazor.Components.TabStrip.TelerikTabStrip myTabStrip; + Telerik.Blazor.Components.TabStripTabStrip myTabStrip; } ```` @@ -49,66 +51,101 @@ To control the position of the tab titles, the main tab strip tag exposes the op ![](images/tabstrip-left.png) ->caption Get selected tab +>caption Get and set the selected tab index ````CSHTML -@using Telerik.Blazor.Components.TabStrip -@using Telerik.Blazor.Components.Button +Active Tab Index: @ActiveTabIndex -Get Active Tab - - - + + First tab content. - - - Second tab content. - - + + + Second tab content. I will be active initially due to the default value of the parameter. +
+ Select Third Tab + + Third tab content. - + @code { - Telerik.Blazor.Components.TabStrip.TelerikTabStrip myTabStrip; + public int ActiveTabIndex { get; set; } = 1; - protected void WriteActiveTab() - { - Console.WriteLine(myTabStrip.ActiveTab.Title); - //the .ActiveTab field of the TabStrip reference exposes the information about the current tab - } + void SelectThirdTab() + { + ActiveTabIndex = 2; + } } ```` ->caption Select Tab programmatically +>caption Handle the tab selection changed event -````CSHTML -@using Telerik.Blazor.Components.TabStrip -@using Telerik.Blazor.Components.Button +````CSHTL +@result - - - First tab content. -
- Select the second tab - - + + + First tab content. Click through the tabs. + + Second tab content. - - + + Third tab content. - + @code { - Telerik.Blazor.Components.TabStrip.TelerikTabStrip myTabStrip; - Telerik.Blazor.Components.TabStrip.TelerikTab chosenTab; + string result {get;set;} + void TabChangedHandler(int newIndex) + { + result = $"current tab {newIndex} selected on {DateTime.Now}"; + } +} +```` + +>caption Extract information for the currently selected tab from your model - void SelectSecondTab() - { - myTabStrip.SetActiveTab(chosenTab); - } +````CSHTML +@result + + + @{ + foreach (MyTabModel item in tabs) + { + + Content for tab @item.Title + + } + } + + +@code { + MarkupString result { get; set; } + void TabChangedHandler(int newIndex) + { + string tempResult = $"current tab {newIndex} selected on {DateTime.Now}"; + MyTabModel currTab = tabs[newIndex]; + tempResult += $"
the new tab has a title {currTab.Title}"; + result = new MarkupString(tempResult); + } + + List tabs = new List() + { + new MyTabModel { Title = "One" }, + new MyTabModel { Title = "Two", Disabled = true }, + new MyTabModel { Title = "Three" } + }; + + public class MyTabModel + { + public string Title { get; set; } + public bool Disabled { get; set; } + } } + ```` ## See Also diff --git a/knowledge-base/changes-in-2-0-0.md b/knowledge-base/changes-in-2-0-0.md index dbfb370586..7de2037808 100644 --- a/knowledge-base/changes-in-2-0-0.md +++ b/knowledge-base/changes-in-2-0-0.md @@ -176,14 +176,14 @@ This is a list of the components that had their child tags removed or renamed. ````CSHTML // Old - +

tab content

 // New - +

tab content

 From 5b4fb53476964b3c9b9a4f96870cb9130a2032f6 Mon Sep 17 00:00:00 2001 From: Marin Bratanov Date: Sat, 14 Sep 2019 15:00:57 +0300 Subject: [PATCH 23/46] chore(textbox): updates for 2.0.0 --- components/textbox/events.md | 28 +++++++------------ components/textbox/overview.md | 44 ++++-------------------------- knowledge-base/changes-in-2-0-0.md | 2 +- 3 files changed, 17 insertions(+), 57 deletions(-) diff --git a/components/textbox/events.md b/components/textbox/events.md index cc92568833..baffa813f1 100644 --- a/components/textbox/events.md +++ b/components/textbox/events.md @@ -22,13 +22,11 @@ The `OnChange` event fires when the new value is commited by the user either by >caption Handle OnChange ````CSHTML -@using Telerik.Blazor.Components.TextBox +@result +
-
-@result - @code { string result; @@ -47,14 +45,12 @@ The `OnChange` event fires when the new value is commited by the user either by >caption Handle OnChange and use two-way binding ````CSHTML -@using Telerik.Blazor.Components.TextBox - - - -
@result
model value: @theTbValue +
+ + @code { string result; @@ -76,13 +72,11 @@ The `ValueChanged` event fires upon every change (for example, keystroke) in the >caption Handle ValueChanged ````CSHTML -@using Telerik.Blazor.Components.TextBox +@result +
-
-@result - @code { string result; @@ -100,14 +94,12 @@ The `ValueChanged` event fires upon every change (for example, keystroke) in the >caption Handle ValueChanged and provide initial value ````CSHTML -@using Telerik.Blazor.Components.TextBox - - - -
from the handler: @result
from model: @theTbValue +
+ + @code { string result; diff --git a/components/textbox/overview.md b/components/textbox/overview.md index e5657d2380..f069253de5 100644 --- a/components/textbox/overview.md +++ b/components/textbox/overview.md @@ -10,24 +10,22 @@ position: 0 # Textbox Overview -The Textbox component allows the user to enter a generic plain text message. The developer can control minimum, maximum length of the text, pattern, and other elements of the UX such as label or class. +The Textbox component allows the user to enter a generic plain text message. You can also add a label or class. To use a Telerik Textbox for Blazor, add the `TelerikTextBox` tag. ->caption Basic textbox with its key features, namespace and reference - +>caption Basic textbox with value binding, namespace and reference ````CSHTML -@using Telerik.Blazor.Components.TextBox - - - @theTbValue +
+ + @code { string theTbValue { get; set; } = "lorem ipsum"; - Telerik.Blazor.Components.TextBox.TelerikTextBox theTextBoxRef; + Telerik.Blazor.Components.TelerikTextBox theTextBoxRef; } ```` @@ -37,40 +35,10 @@ The numeric textbox provides the following features: * `Class` - the CSS class that will be rendered on the `input` element. * `Enabled` - whether the `input` is enabled. * `Label` - the `label` element rendered next to the `input` to provide the user with information on its purpose. -* `MaxLength` - the maximum length of the text input by the user. -* `MinLength` - the minimum length of the text input by the user. -* `Pattern` - the pattern that the user input must match. * `Value` - get/set the value of the input, can be used for binding. * `Width` - the width of the `input`. See the [Dimensions]({%slug common-features/dimensions%}) article. * Validation - see the [Input Validation]({%slug common-features/input-validation%}) article. -The length, enabled and pattern attributes are HTML attributes on the `` element and it is up to the browser to honor them. For example, the `minlength` attribute is rarely taken into account, and the pattern is usually evaluated only upon form submission. - ->caption Example of using a custom pattern for some credit cards - -````CSHTML -@using Telerik.Blazor.Components.TextBox - - - - - - - - - -@code{ - public class Person - { - //you may want to add data annotation here to provide more robust validation - //the pattern can also be moved to the regex validation - public string CardNumber { get; set; } - } - - Person person = new Person(); -} - -```` ## See Also diff --git a/knowledge-base/changes-in-2-0-0.md b/knowledge-base/changes-in-2-0-0.md index 7de2037808..9256aa1799 100644 --- a/knowledge-base/changes-in-2-0-0.md +++ b/knowledge-base/changes-in-2-0-0.md @@ -87,7 +87,7 @@ This is a list of the components that had methods removed and the new approach o ### Textbox -* The `Pattern`, `MinLength` and `MaxLength` parameters are removed in favor of validation. In the future, they will probably become available through attribute splatting. +* The `Pattern`, `MinLength` and `MaxLength` parameters are removed in favor of validation. In the future, they may become available through attribute splatting. ### TreeView From 5fd7de0caa551b6a9d65c67c9baa0bcc4f9c1175 Mon Sep 17 00:00:00 2001 From: Marin Bratanov Date: Sat, 14 Sep 2019 15:09:03 +0300 Subject: [PATCH 24/46] chore(timePicker): updates for 2.0.0 --- components/timepicker/events.md | 28 ++++++++++------------------ components/timepicker/overview.md | 10 ++++------ 2 files changed, 14 insertions(+), 24 deletions(-) diff --git a/components/timepicker/events.md b/components/timepicker/events.md index 28035e9165..af5e8d5fa8 100644 --- a/components/timepicker/events.md +++ b/components/timepicker/events.md @@ -24,13 +24,11 @@ The time picker is a generic component, so you must provide either a `Value`, or >caption Handle OnChange ````CSHTML -@using Telerik.Blazor.Components.TimePicker +@result +
-
-@result - @code { string result; @@ -50,14 +48,12 @@ The time picker is a generic component, so you must provide either a `Value`, or >caption Handle OnChange and use two-way binding ````CSHTML -@using Telerik.Blazor.Components.TimePicker - - - -
@result
model value: @thePickerValue +
+ + @code { string result; @@ -81,13 +77,11 @@ The `ValueChanged` event fires upon every change (for example, keystroke) in the >caption Handle ValueChanged ````CSHTML -@using Telerik.Blazor.Components.TimePicker +@result +
-
-@result - @code { string result; @@ -105,14 +99,12 @@ The `ValueChanged` event fires upon every change (for example, keystroke) in the >caption Handle ValueChanged and provide initial value ````CSHTML -@using Telerik.Blazor.Components.TimePicker - - - -
@result
model value: @thePickerValue +
+ + @code { string result; diff --git a/components/timepicker/overview.md b/components/timepicker/overview.md index d1d0420210..54c84cbdcf 100644 --- a/components/timepicker/overview.md +++ b/components/timepicker/overview.md @@ -17,12 +17,11 @@ To use a Telerik Time Picker for Blazor, add the `TelerikTimePicker` tag. >caption Basic time picker with custom format, min and max ````CSHTML -@using Telerik.Blazor.Components.TimePicker +Selected time: @selectedTime?.ToLongTimeString() +
-Selected time: @selectedTime?.ToLongTimeString() - @code { private DateTime? selectedTime = DateTime.Now; @@ -37,7 +36,7 @@ Selected time: @selectedTime?.ToLongTimeString() >caption Component namespace and reference ````CSHTML -@using Telerik.Blazor.Components.TimePicker +@using Telerik.Blazor.Components @theTimePickerValue @@ -46,14 +45,13 @@ Selected time: @selectedTime?.ToLongTimeString() DateTime? theTimePickerValue { get; set; } // the time picker is a generic component and its type comes from the value field type - Telerik.Blazor.Components.TimePicker.TelerikTimePicker theTimePicker; + Telerik.Blazor.Components.TelerikTimePicker theTimePicker; } ```` The Time Picker component exposes the following features: * `Enabled` - Specifies whether typing in the input and opening the dropdown are allowed. -* `Height` - Defines the height of the TimePicker. Defaults to `28px`. See the [Dimensions]({%slug common-features/dimensions%}) article. * `Format` - Specifies the format of the DateInput of the TimePicker. Defaults to `hh:mm tt` (12 hour time with AM/PM specifiers). Read more in the [Supported Formats]({%slug components/dateinput/supported-formats%}) article. Note that format specifiers for non-time portions will only be editable in the input and will not have a representation in the time picker dropdown. * `Min` - The earliest time that the user can select in the dropdown. * `Max` - The latest time that the user can select in the dropdown. From 1be67df9337de4dc31b524423cce667a1d7fb9e8 Mon Sep 17 00:00:00 2001 From: Marin Bratanov Date: Sat, 14 Sep 2019 15:10:55 +0300 Subject: [PATCH 25/46] chore(common): fix namespaces for 2.0.0 --- components/menu/overview.md | 2 +- components/numerictextbox/overview.md | 2 +- components/tabstrip/overview.md | 4 ++-- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/components/menu/overview.md b/components/menu/overview.md index 5b18ae10f4..ec8089acbe 100644 --- a/components/menu/overview.md +++ b/components/menu/overview.md @@ -96,7 +96,7 @@ Use a menu to navigate between views >caption Component namespace and reference ````CSHTML -@using Telerik.Blazor.Components.Menu +@using Telerik.Blazor.Components diff --git a/components/numerictextbox/overview.md b/components/numerictextbox/overview.md index dd2664dcd3..4c27d09bb8 100644 --- a/components/numerictextbox/overview.md +++ b/components/numerictextbox/overview.md @@ -31,7 +31,7 @@ The numeric textbox component is generic, meaning that it takes the type of its >caption Component namespace and reference ````CSHTML -@using Telerik.Blazor.Components.NumericTextBox +@using Telerik.Blazor.Components diff --git a/components/tabstrip/overview.md b/components/tabstrip/overview.md index ad02576033..668f086cc1 100644 --- a/components/tabstrip/overview.md +++ b/components/tabstrip/overview.md @@ -12,7 +12,7 @@ position: 0 This article provides information about the Tab Strip component and its core features. -The Tab Strip is defined through the `` tag that accepts children of type ``. Inside the tabs you can add content like in any other container, including other components. +The Tab Strip is defined through the `` tag that accepts children of type ``. Inside the tabs you can add content like in any other container, including other components. The tab exposes a `Title` attribute that is the text rendered in the heading. It also offers the `Disabled` attribute that allows you to disable its selection. @@ -28,7 +28,7 @@ To control the position of the tab titles, the main tab strip tag exposes the op >caption A Telerik Tab Strip with example reference, tab position and disabled tab ````CSHTML -@using Telerik.Blazor.Components.TabStrip +@using Telerik.Blazor.Components From a224c311dc4947946c1db2a62697a1bdeb844204 Mon Sep 17 00:00:00 2001 From: Marin Bratanov Date: Sat, 14 Sep 2019 15:28:29 +0300 Subject: [PATCH 26/46] chore(treeview): updates for 2.0.0 --- _contentTemplates/treeview/basic-example.md | 8 +++--- components/treeview/data-binding/flat-data.md | 8 +++--- .../data-binding/hierarchical-data.md | 12 ++++---- .../treeview/data-binding/load-on-demand.md | 11 ++++---- components/treeview/data-binding/overview.md | 20 ++++++------- components/treeview/overview.md | 14 +++++----- components/treeview/templates.md | 28 +++++++++---------- 7 files changed, 49 insertions(+), 52 deletions(-) diff --git a/_contentTemplates/treeview/basic-example.md b/_contentTemplates/treeview/basic-example.md index 1d07af88c6..ce21544fef 100644 --- a/_contentTemplates/treeview/basic-example.md +++ b/_contentTemplates/treeview/basic-example.md @@ -1,12 +1,12 @@ #basic-example ````CSHTML -@using Telerik.Blazor.Components.TreeView +Sample treeview bound to self-referencing flat data. Also uses the built-in icons from the Telerik suite - - - + + + @code { diff --git a/components/treeview/data-binding/flat-data.md b/components/treeview/data-binding/flat-data.md index 2da4cbea6d..39a8c4c3cb 100644 --- a/components/treeview/data-binding/flat-data.md +++ b/components/treeview/data-binding/flat-data.md @@ -23,12 +23,12 @@ You must also provide the correct value for the `HasChildren` field - for items >caption Example of flat data in a treeview ````CSHTML -@using Telerik.Blazor.Components.TreeView +Using self-referencing flat data - - - + + + @code { diff --git a/components/treeview/data-binding/hierarchical-data.md b/components/treeview/data-binding/hierarchical-data.md index 9456f75397..9bd54ac232 100644 --- a/components/treeview/data-binding/hierarchical-data.md +++ b/components/treeview/data-binding/hierarchical-data.md @@ -21,13 +21,13 @@ This approach of providing nodes lets you gather separate collections of data an >caption Example of hierarchical data that uses different models for the parent and the child. Using different models is not required. ````CSHTML -@using Telerik.Blazor.Components.TreeView +Hierarchical data hold collections of the child items - - - - + + + + @code { @@ -60,7 +60,7 @@ This approach of providing nodes lets you gather separate collections of data an List roots = new List(); List firstCategoryProducts = new List() -{ + { new ProductItem { ProductName= "Category 1 - Product 1" }, new ProductItem { ProductName= "Category 1 - Product 2" } }; diff --git a/components/treeview/data-binding/load-on-demand.md b/components/treeview/data-binding/load-on-demand.md index 26d1a8d28a..b54d92cf50 100644 --- a/components/treeview/data-binding/load-on-demand.md +++ b/components/treeview/data-binding/load-on-demand.md @@ -21,14 +21,13 @@ The **example** below shows how you can handle load on demand in detail. It uses >caption Load on Demand in a TreeView with sample handling of the various cases. Review the code comments for details. ````CSHTML -@using Telerik.Blazor.Components.TreeView -@using Telerik.DataSource.Extensions +@using Telerik.DataSource.Extensions //used for the .AddRange() extension method - - - - + + + + @code { diff --git a/components/treeview/data-binding/overview.md b/components/treeview/data-binding/overview.md index 7ab03f6005..b654b40a28 100644 --- a/components/treeview/data-binding/overview.md +++ b/components/treeview/data-binding/overview.md @@ -38,9 +38,9 @@ The treeview items provide the following features that you control through the c ## Data Bindings -The properties of a treeview item match directly to a field of the model the treeview is bound to. You provide that relationship by providing the name of the field from which the corresponding information is present. To do this, under the `TelerikTreeViewBindings` tag, use the `TelerikTreeViewBinding` tag properties. +The properties of a treeview item match directly to a field of the model the treeview is bound to. You provide that relationship by providing the name of the field from which the corresponding information is present. To do this, under the `TreeViewBindings` tag, use the `TreeViewBinding` tag properties. -Each `TelerikTreeViewBinding` tag exposes the following properties that refer to item properties: +Each `TreeViewBinding` tag exposes the following properties that refer to item properties: * IdField => Id * ParentIdField => ParentId @@ -56,7 +56,7 @@ Each `TelerikTreeViewBinding` tag exposes the following properties that refer to >tip There are default values for the field names. If your model names match the defaults, you don't have to define them in the bindings settings. ->caption Default field names for treeview item bindings. If you use these, you don't have to specify them in the `TelerikTreeViewBinding` tag explicitly. +>caption Default field names for treeview item bindings. If you use these, you don't have to specify them in the `TreeViewBinding` tag explicitly. ````CSHTML public class TreeItem @@ -87,22 +87,20 @@ You can define different binding settings for the different levels of nodes in a This also allows you to define a different [`ItemTemplate`]({%slug components/treeview/templates%}) for different levels. -To define multiple bindings, add multiple `TelerikTreeViewBinding` tags and define their `Level`. +To define multiple bindings, add multiple `TreeViewBinding` tags and define their `Level`. If a certain level does not have an explicit data bindings tag, it will use the default one that has no level. >caption How to use per-level data binding settings to change model fields ````CSHTML -@using Telerik.Blazor.Components.TreeView - - The third level will use the main data bindings settings that do not have a level specified +The third level will use the main data bindings settings that do not have a level specified - - - - + + + + @code { diff --git a/components/treeview/overview.md b/components/treeview/overview.md index 559fbb8489..f2c2597307 100644 --- a/components/treeview/overview.md +++ b/components/treeview/overview.md @@ -29,13 +29,13 @@ To use a Telerik TreeView for Blazor: >caption Component namespace and reference ````CSHTML -@using Telerik.Blazor.Components.TreeView +@using Telerik.Blazor.Components @code { - Telerik.Blazor.Components.TreeView.TelerikTreeView theTreeView; + Telerik.Blazor.Components.TelerikTreeView theTreeView; } ```` @@ -50,13 +50,13 @@ A treeview is often used to list pages, views or sections in an application so t >caption Navigation with treeview through the UrlField ````CSHTML -@using Telerik.Blazor.Components.TreeView +Built-in navigation between views - - - - + + + + @code { diff --git a/components/treeview/templates.md b/components/treeview/templates.md index 08a2229768..37f45452ae 100644 --- a/components/treeview/templates.md +++ b/components/treeview/templates.md @@ -12,29 +12,29 @@ position: 5 The Treeview component allows you to define a custom template for its nodes. This article explains how you can use it. -The `ItemTemplate` of a node is defined under the `TelerikTreeViewBinding` tag. +The `ItemTemplate` of a node is defined under the `TreeViewBinding` tag. The template receives the model to which the item is bound as its `context`. You can use it to render the desired content. -You can also define different templates for the different levels in each `TelerikTreeViewBinding` tag. +You can also define different templates for the different levels in each `TreeViewBinding` tag. You can use the template to render arbitrary content according to your application's data and logic. You can use components in it and thus provide rich content instead of plain text. You can also use it to add DOM event handlers like click, doubleclick, mouseover if you need to respond to them. >caption Use templates to implement navigation between views without the usage of the UrlField feature ````CSHTML -@using Telerik.Blazor.Components.TreeView +Implement your own navigation through NavLink elements, instead of using the built-in feature - - + + @((context as TreeItem).Text) - - + + @code { @@ -96,24 +96,24 @@ You can use the template to render arbitrary content according to your applicati >caption Different templates for different node levels ````CSHTML -@using Telerik.Blazor.Components.TreeView +Multiple templates usage. - - + + Section: @((context as ProductCategoryItem).Category) - - + + @{ ProductItem currProduct = context as ProductItem; @(currProduct.ProductName) @(currProduct.ProductName) } - - + + @code { From 172f4d2112dc718b16c2514833a55249bc081962 Mon Sep 17 00:00:00 2001 From: Marin Bratanov Date: Sat, 14 Sep 2019 17:53:15 +0300 Subject: [PATCH 27/46] chore(window): first pass for updates for 2.0.0 --- components/animationcontainer/overview.md | 14 +-- components/window/images/window-overview.png | Bin 3060 -> 3253 bytes components/window/overview.md | 111 ++++++++++++------- knowledge-base/changes-in-2-0-0.md | 19 +++- 4 files changed, 91 insertions(+), 53 deletions(-) diff --git a/components/animationcontainer/overview.md b/components/animationcontainer/overview.md index 695a708289..84a993e554 100644 --- a/components/animationcontainer/overview.md +++ b/components/animationcontainer/overview.md @@ -17,9 +17,7 @@ To use the animation container, add the `TelerikAnimationContainer` tag. >caption How to use the Animation Container ````CSHTML -@using Telerik.Blazor.Components.AnimationContainer -@using Telerik.Blazor.Components.Button -@using Telerik.Blazor +Click the button to toggle the visibility of the customized popup My content goes here. The "k-popup" class adds some background and borders which you can define through your own styles instead. @@ -28,7 +26,7 @@ To use the animation container, add the `TelerikAnimationContainer` tag. Toggle Animation Container @code { - Telerik.Blazor.Components.AnimationContainer.TelerikAnimationContainer myPopupRef; + Telerik.Blazor.Components.TelerikAnimationContainer myPopupRef; public void ToggleContainer() { @@ -39,8 +37,8 @@ To use the animation container, add the `TelerikAnimationContainer` tag. The animation container exposes the following properties and methods: -* `Show()`, `Hide()` and `Toggle()` - to control whether the container is shown. -* `Width` and `Height` - to control its size. +* `Show()`, `Hide()` and `Toggle()`; `ShowAsync()`, `HideAsync()` and `ToggleAsync()` - to control whether the container is shown. +* `Width` and `Height` - to control its [size]({%slug common-features/dimensions%}). * `Top` and `Left` - to control its offset from its parent with special positioning (`relative`, `absolute`, `fixed`). * `AnimationType` and `AnimationDuration` to control the way it is shown and hidden. The animation duration is in milliseconds (defaults to `300`), and the type is of the `Telerik.Blazor.AnimationType` enum with the following options: * SlideUp, @@ -61,9 +59,7 @@ The animation container exposes the following properties and methods: >caption Explore the animation options ````CSHTML -@using Telerik.Blazor.Components.AnimationContainer -@using Telerik.Blazor.Components.Button -@using Telerik.Blazor +Choose a new animation from the dropdown and toggle the container My content goes here.
diff --git a/components/window/images/window-overview.png b/components/window/images/window-overview.png index 39c05953406596de18ca8e5491f66e4c63e6d9fe..9259ac14d9116fb7cd2177f36a4abaefabc0000d 100644 GIT binary patch literal 3253 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 E4`H=SD*ylh literal 3060 zcmbuBYdjMQAIIlN3ges0002m z+1lIy03?9lb=bbW-{+d^%Z2YtBJ##1YXGKCb?&>_<8Nhe1pr{5%I@5i`tJ9K+qy;q z0P>W-kmv||?*jnHKC-j1a*Ba1FfD^sW)62OU%I+iYhOC@M5o>$_1O924oPQxx}SYk ze;;)sMM)~9T}G|0;N!t?gU-%@PmVHek6#@wI3!2+BO|Se8u*0v4MrP^&g5(340?F?`?;(0wofc=mVR3@{b% z_{vz9ed*2AZqFUJ25+j^- z$orwVx2n1WY1#KB2sC60D7HwiTemK;x+WQ8+E&=E?U<$mD1^KiODwsAc_6(MtVyTRk*v2W$5xe#8xaIXCcDhLhTvf6HDfPGn7RpN1AJ6xDJ!q%ta6X&I`8^>g(8#n|`?bm5~ z=}YC=6Ltafk5to~H(DzRV1;~gkdy{%-%#Igmw)Vq#wOFV{bS(U0`kS6W`204VAa^l ze}}Sb)fr1YvJn;&XysWXwpz?tDlUV;JWY=g-<4#pMTb3#qA(tdWLEaOYc&3Z^8e|| zd_=ERZ1Q0XW>J=8p2m*83t%Sszsmae;{KC`7>TNGeg-3T@L8xefnK`2Lc56XZ(*h{^{<2vdMDMUCvrZKGi}l4DIC09jUKU z5A7QHL=0vVs~pjU5L+mcRh@d`b1#uKM9Z1>bDSJ|V&Y7BvnOMltUT`EXez)whCCUH z@)1wxs5bw~IAv^~Woclb1mapGY%B>$f+nzNjS)u4j-)n4#;uCTL))B?C~=Y5rK=sm z^7$^;YD^U}2fA54cetLp zI#jV5LT{SL<$)uS>%RPH%yez8N9X{ziWXO{$(OdLBc_%irI&weP>!>Y5OMHCOQ>p< zLMW;=`d8M4(6O z&grJUvCRdv-~b=BWqR=u12}?SFJcSyEc=K1u~jrM(Wo`ciN3T-bLpT=W!{tAZeG37 zG#-(NI(%HM60g^RYAvoDe&>!YP`mF|IhQ<|Eo$VRCgMLtIDPP9!inA$)h7ehQ|aDs zYiNNVY*;HjW+TEQgg|f%qejq8gM*1kJB3V2JXx|fUR#>^>Ps3DZf{sUhZJ;--s^z` zUD070be>Iqe?{V2i~uf|fdt0DS`fT|wQK|*Xk7E@3^pLkPY<;>4S615KDf>47Px;+$1p$qqn z#O2l{2?tckX>%2T_#)$I@U}NDfQ#dpWjV?^>bd|p7u%ZFFO<#=($H1tU`!zmt zZvTj4bjs(vE1n$VbDgIbrbj^o|RPy^EVA7f5cb?((=mqn*Kmm|{f zN%_(zs;+)jndi>m3u|Y&-gKs|-rT3M9(x}_8+ayLgLot&A)P~oeZz8#B>|1{Bv_UqX| zdjWsRDX%SMnBSW_Y@xv$IS-}Ct$pflt$NHWD4QxatKPJJd#F?obx?6LkKs04Op z3TMK5&OcQ#9x-k0MvLqiR@LodDl+MYnP$F`jvDvTm~&COezuV;z+W}3x&3xu&uZ85S&+fD8*g{Z*-}z zQb-GlXj;U38(IYGe$c&q02F8IHV6D^@;V7sujNLA<6LR_rL^Do0mIxBjz{}7w1;NW zM-cvNeam?zU7OwAi*e`1JgXjK*8lYX_@WD{NHcDC;&@)Se}3RcZjL>@{e=%jmaW(W z!4>u<=-UVQ1k06!TiTOdbDJN!((>ETx+5pq`6C7E(2PEj2-bK@0PUaOUO(%dcKk&n z47x~sIETos#FhH5ecC%rD?s{M=4jDYumd<&8v0YoT0%~loV}B2_Fzje0slVn-F@IT zZ0lf+$Q-j>(=X}2!b)6nj~miBi|q-8Htq@z*t5|y?|{On(ySGOE0i9SKlzDS+1e)a z716uauPh%{IQ9?VF)rCahaE&p7c&;+Nz6cEIk(muNctq5IjEu|xs-`=Z$8w_aKH;f zQxU`4hI*vU&AX{;;~~*zM@&!49woK77JPGmJrKlr9Id6tiJ#pdFJh`Uh|xU{Nc+eo zHpNqHcuyO6FE)*-uJHTxqd86r_!(!5eB^TT0;qIN_d>`hmti6Ggc-{ zm2~KAg2Y&8?%G6G&Ld?7N~-Pp*oMfwdm}`S8p5+6#ZNz#g8cD1xU*j6^ytU%4(;gI z2i31O!tzsH8lk0#<`Cs`-b}ubb7z^mA)0vNs_b>`T=+CM8szKOKwEUbowv;6b|;pV zc&`abE--hvpnz#8_wpRr4eKsC2g@LnjUl~p;Zr{)Jvs4k015m;hM)*$0PggcY53vp%gz?&$df) zK)}=iDCGyObHQV}j!-Q&caption Basic example of showing content in a Window popup +>caption Basic example of showing content in a Window popup and allowing built-in actions ````CSHTML -@using Telerik.Blazor.Components.Window - - - + + The Title - - + + This is my window popup content. - + + + + + + ```` @@ -38,66 +41,90 @@ To create a Telerik Window: ![](images/window-overview.png) -## Reference, Show, Close +>caption Component namespace and reference + +````CSHTML +@using Telerik.Blazor.Components + + + + The Title + + + This is my window popup content. + + + +@code { + Telerik.Blazor.Components.TelerikWindow myWindowRef { get;set; } +} +```` + +## Show and Close -The Window component is of type `Telerik.Blazor.Components.Window.TelerikWindow` and exposes several properties and methods that let you control its state. The most important ones are the `Visible` property that lets you control whether it is shown on the initial view render, and the `Show` and `Close` methods that control its visibility programmatically. +The `Visible` property lets you control whether the window component is shown (and rendered). ->caption Store a reference to a Telerik Window, open and close it programmatically through methods +>caption Bind the visibility of the window ````CSHTML -@using Telerik.Blazor.Components.Window +Use property binding to control the state of the window programmatically - - + + The Title - - + + This is my window popup content. - + @code { - Telerik.Blazor.Components.Window.TelerikWindow myFirstWindow; - + bool isVisible { get; set; } + public void ShowWindow() { - myFirstWindow.Open(); + isVisible = true; } public void CloseWindow() { - myFirstWindow.Close(); + isVisible = false; } - } ```` ->caption Show and close a Window by toggling a single variable +>caption React to the visibility change event ````CSHTML -@using Telerik.Blazor.Components.Window +@result - - + + The Title - - + + This is my window popup content. - + @code { - bool isWindowShown { get; set; } - - public void ToggleWindow() - { - isWindowShown = !isWindowShown; - } + bool isVisible { get; set; } + string result { get; set; } + + void VisibleChangedHandler() + { + result = $"the window is now visible: {isVisible}"; + } + + public void ToggleWindow() + { + isVisible = !isVisible; + } } ```` @@ -108,15 +135,13 @@ The `Class` property lets you define a CSS class that will be rendered on the po >caption Use a Class to change the appearance and style of the Window ````CSHTML -@using Telerik.Blazor.Components.Window - - + The Title - - + + This is my window popup content. - +