From df214a42652af1afa6dee23e40b3c7c2d37337a2 Mon Sep 17 00:00:00 2001 From: Dimo Dimov Date: Tue, 11 Jan 2022 13:25:37 +0200 Subject: [PATCH 01/10] docs: Document GridEditMode.None and TreeListEditMode.None --- components/grid/columns/command.md | 2 ++ components/grid/editing/overview.md | 2 ++ components/grid/overview.md | 1 + components/treelist/columns/command.md | 2 ++ components/treelist/editing/overview.md | 2 ++ components/treelist/overview.md | 3 +-- upgrade/breaking-changes/3-0-0.md | 10 ++++++---- 7 files changed, 16 insertions(+), 6 deletions(-) diff --git a/components/grid/columns/command.md b/components/grid/columns/command.md index 3f5a6683a4..29d6861c8d 100644 --- a/components/grid/columns/command.md +++ b/components/grid/columns/command.md @@ -47,6 +47,8 @@ There are four built-in commands: * `Save` - performs the actual update operation after the data has been changed. Triggers the `OnUpdate` or `OnCreate` event so you can perform the data source operation. Which event is triggered depends on whether the item was created or edited. * `Cancel` - aborts the current operation (edit or insert). +> The `Add` and `Edit` commands require [enabled editing]({%slug components/grid/overview%}#editing). + ### The OnClick handler The `OnClick` handler of the commands receives an argument of type `GridCommandEventArgs` that exposes the following properties: diff --git a/components/grid/editing/overview.md b/components/grid/editing/overview.md index a11723a72c..d0a3edbb67 100644 --- a/components/grid/editing/overview.md +++ b/components/grid/editing/overview.md @@ -12,6 +12,8 @@ position: 0 CRUD operations with the Grid for Blazor support validation and are done through the dedicated CRUD events it exposes for data editing. You can use them to transfer the changes to the underlying data source (for example, call a service that will actually work with the database, and not only with the view data). +To enable Grid editing, set the [`EditMode` attribute]({%slug components/grid/overview%}#editing) to the desired edit mode. + Sections in this article: - [Basics](#basics) diff --git a/components/grid/overview.md b/components/grid/overview.md index f988aac45f..fba691bb2c 100644 --- a/components/grid/overview.md +++ b/components/grid/overview.md @@ -134,6 +134,7 @@ The grid can perform CRUD operations on its current data collection and exposes The grid offers several editing modes with different user experience through the `EditMode` property that is a member of the `GridEditMode` enum: +* `None` - the default `GridEditMode` value. The built-in [`Add` and `Edit` commands]({%slug components/grid/columns/command%}#built-in-commands) don't work in this mode. * `Incell` - editing is done [in the current cell]({%slug components/grid/editing/incell%}) with a double click * `Inline` - editing is done for the [entire row]({%slug components/grid/editing/inline%}) with an [Edit Command Button]({%slug components/grid/columns/command%}) * `Popup` - editing is done in a [popup]({%slug components/grid/editing/popup%}) for the entire row with an [Edit Command Button]({%slug components/grid/columns/command%}) diff --git a/components/treelist/columns/command.md b/components/treelist/columns/command.md index f7436f49a1..2e2ff1edbd 100644 --- a/components/treelist/columns/command.md +++ b/components/treelist/columns/command.md @@ -50,6 +50,8 @@ There are four built-in commands: * `Save` - performs the actual update operation after the data has been changed. Triggers the `OnUpdate` or `OnCreate` event so you can perform the data source operation. Which event is triggered depends on whether the item was created or edited. * `Cancel` - aborts the current operation (edit or insert). +> The `Add` and `Edit` commands require [enabled editing]({%slug treelist-overview%}#editing). + ### Context The command column provides access to the data item via `context`. This may be useful for conditional statements or passing parameters to custom business logic. diff --git a/components/treelist/editing/overview.md b/components/treelist/editing/overview.md index ee1863751e..3dfbfcc31b 100644 --- a/components/treelist/editing/overview.md +++ b/components/treelist/editing/overview.md @@ -13,6 +13,8 @@ position: 0 CRUD operations with the TreeList for Blazor support validation and are done through the dedicated CRUD events it exposes for data editing. You can use them to transfer the changes to the underlying data source (for example, call a service that will actually work with the database, and not only with the view data). +To enable TreeList editing, set the [`EditMode` attribute]({%slug treelist-overview%}#editing) to the desired edit mode. + Sections in this article: * [Basics](#basics) diff --git a/components/treelist/overview.md b/components/treelist/overview.md index f0ea330db4..e7b8321ef3 100644 --- a/components/treelist/overview.md +++ b/components/treelist/overview.md @@ -384,10 +384,9 @@ The treelist can perform CRUD operations on its current data collection and expo The treelist offers several editing modes with different user experience through the `EditMode` property that is a member of the `TreeListEditMode` enum: +* `None` - the default `TreeListEditMode` value. The built-in [`Add` and `Edit` commands]({%slug treelist-columns-command%}#built-in-commands) don't work in this mode. * `Incell` - editing is done [in the current cell]({%slug treelist-editing-incell%}) with a double click - * `Inline` - editing is done for the [entire row]({%slug treelist-editing-inline%}) with an [Edit Command Button]({%slug treelist-columns-command%}) - * `Popup` - editing is done in a [popup]({%slug treelist-editing-popup%}) for the entire row with an [Edit Command Button]({%slug treelist-columns-command%}), and model Validation through Data Annotation attributes is available. diff --git a/upgrade/breaking-changes/3-0-0.md b/upgrade/breaking-changes/3-0-0.md index 22cf73e839..145355de1c 100644 --- a/upgrade/breaking-changes/3-0-0.md +++ b/upgrade/breaking-changes/3-0-0.md @@ -14,6 +14,8 @@ position: 1 - TileLayout - Introduce identifier of the TileLayout item. `OnResize` and `OnReorder` events will receive EventArgs that will point to the resized/reordered item. This feature comes from our [public issue tracker](https://feedback.telerik.com/blazor/1489011) - TreeView - add `ExpandedItems` parameter and remove `ExpandedField` +- TreeList - `TreeListEditMode` enum default value changes from `Inline` to `None`. TreeList editing should be explicitly enabled for the `Add` and `Edit` command buttons to work. +- Grid - `GridEditMode` enum default value changes from `Inline` to `None`. Grid editing should be explicitly enabled for the `Add` and `Edit` command buttons to work. - Grid – change `OnRead` method to return the `Data`. This is an important change that will empower us to deliver more features in the future(like the export of all Grid pages), and the Grid will not rely on component lifecycle for getting the data. - Grid – use `IFilterDescriptor` in GridState instead of `FilterDescriptorBase` - DateInput – remove `ParsingErrorMessage` (obsolete since version 2.8) in favor of `DateInput_ParsingErrorMessage` [localization string]({%slug globalization-localization%}). @@ -32,10 +34,10 @@ Grid EditorTemplates and Keyboard Navigation are in design stage. So, there migh We are making our API naming more consistent. -- `UpdateInterval` Parameter of Editor is changed to `DebounceDelay` -- Drawer `Content` RenderFragment is renamed to `DrawerContent` -- Stepper - `IsCanceled` property in `StepperStepChangeEventArgs` (obsolete since 2.26) is removed in favor of `IsCancelled` -- Drawer `IsSeparatorField` is removed in favor of [`SeparatorField`]({%slug drawer-data-binding%}) +- Editor - `UpdateInterval` parameter is renamed to `DebounceDelay` +- Drawer - `Content` RenderFragment is renamed to `DrawerContent` +- Drawer - `IsSeparatorField` parameter (obsolete since version 2.27) is removed in favor of [`SeparatorField`]({%slug drawer-data-binding%}) +- Stepper - `IsCanceled` property in `StepperStepChangeEventArgs` (obsolete since version 2.26) is removed in favor of `IsCancelled` ## Rendering and Themes From 468ac741a74c81ecb6b3c52d76f5d4ff25351b56 Mon Sep 17 00:00:00 2001 From: Dimo Dimov Date: Tue, 11 Jan 2022 18:12:51 +0200 Subject: [PATCH 02/10] docs: document ContextMenu OnClick and k class changes --- components/contextmenu/events.md | 15 ++++++++------- components/contextmenu/integration.md | 19 ++++++++++--------- components/contextmenu/overview.md | 6 +++--- components/panelbar/events.md | 4 ++-- components/stepper/step-template.md | 2 +- knowledge-base/calendar-disable-weekends.md | 2 +- knowledge-base/drawer-prevent-collapse.md | 2 +- .../dropdowns-custom-item-background.md | 2 +- knowledge-base/dropdowns-get-model.md | 2 +- knowledge-base/editor-invalid-state.md | 6 +++--- knowledge-base/grid-scroll-to-selected-row.md | 2 +- upgrade/breaking-changes/3-0-0.md | 15 +++++++++++++-- 12 files changed, 45 insertions(+), 32 deletions(-) diff --git a/components/contextmenu/events.md b/components/contextmenu/events.md index 043e6806df..38dbebc345 100644 --- a/components/contextmenu/events.md +++ b/components/contextmenu/events.md @@ -16,26 +16,27 @@ This article explains the events available in the Telerik Context Menu for Blazo ## OnClick -The `OnClick` event fires when the user clicks or taps on a menu item. It receives the model of the item as an argument that you can cast to the concrete model type you are using. +The `OnClick` event fires when the user clicks or taps on a menu item. The event handler receives an argument of type `ContextMenuClickEventArgs` with the item model (`args.Item`) and a boolean flag that controls component re-rendering (`args.ShouldRender`) after the event. -You can use the `OnClick` event to react to user choices in a menu without using navigation to load new content automatically. +You can use the `OnClick` event to react to user choices, for example load new content without using navigation. >caption Handle OnClick ````CSHTML -Last clicked item: @ClickedItem?.Text -
right click for context menu
+

Last clicked item: @ClickedItem?.Text

+ +
right-click for context menu
+ OnClick="@((ContextMenuClickEventArgs args) => OnClickHandler(args))"> @code { public MenuItem ClickedItem { get; set; } - protected void OnClickHandler(MenuItem item) + protected void OnClickHandler(ContextMenuClickEventArgs args) { - ClickedItem = item; + ClickedItem = args.Item; } public List MenuItems { get; set; } diff --git a/components/contextmenu/integration.md b/components/contextmenu/integration.md index 0a475e0b2c..28d2dcb561 100644 --- a/components/contextmenu/integration.md +++ b/components/contextmenu/integration.md @@ -43,7 +43,7 @@ Hooking to your own HTML elements' events lets you determine what to do with the + OnClick="@( (ContextMenuClickEventArgs args) => ContextMenuClickHandler(args) )"> @@ -79,8 +79,9 @@ Hooking to your own HTML elements' events lets you determine what to do with the MenuItems[2].Items[0].Disabled = clickedItem.IsSpecial; } - async Task ContextMenuClickHandler(ContextMenuItem clickedItem) + void ContextMenuClickHandler(ContextMenuClickEventArgs args) { + var clickedItem = args.Item; // handle the command from the context menu by using the stored metadata if (!string.IsNullOrEmpty(clickedItem.CommandName) && LastClickedItem != null) { @@ -92,9 +93,8 @@ Hooking to your own HTML elements' events lets you determine what to do with the // generate sample data for the listview and the menu protected override void OnInitialized() { - MenuItems = new List() - { + { new ContextMenuItem { Text = "More Info", @@ -185,7 +185,7 @@ In this example, the context menu is used to select/deselect items, put an item @using System.Collections.ObjectModel + OnClick="@((ContextMenuClickEventArgs args) => ContextMenuClickHandler(args))"> args) { + var item = args.Item; // one way to pass handlers is to use an Action, you don't have to use this if (item.Action != null) { @@ -403,7 +404,7 @@ In this example, the context menu is used to select/deselect items and delete it + OnClick="@((ContextMenuClickEventArgs args) => ContextMenuClickHandler(args))"> args) { - + var item = args.Item; // Use local code to perform a task such as put select/deselect a node or delete it switch (item.CommandName) { diff --git a/components/contextmenu/overview.md b/components/contextmenu/overview.md index ac5767d15c..8273ab8b70 100644 --- a/components/contextmenu/overview.md +++ b/components/contextmenu/overview.md @@ -32,15 +32,15 @@ In addition to built-in [navigation capabilities]({%slug contextmenu-navigation% + OnClick="@( (ContextMenuClickEventArgs args) => ClickHandler(args) )"> - @code { public List MenuItems { get; set; } - async Task ClickHandler(ContextMenuItem clickedItem) + async Task ClickHandler(ContextMenuClickEventArgs args) { + var clickedItem = args.Item; if (!string.IsNullOrEmpty(clickedItem.CommandName)) { Console.WriteLine($"The programm will now perform the {clickedItem.CommandName} operation"); diff --git a/components/panelbar/events.md b/components/panelbar/events.md index 38e69070e0..4de5d352f1 100644 --- a/components/panelbar/events.md +++ b/components/panelbar/events.md @@ -214,8 +214,8 @@ If the item that is customized has children, they will also inherit the styles a .customized-panelbar-item, .k-panelbar-toggle.k-icon, .customized-panelbar-item.k-item .k-link, - .customized-panelbar-item.k-item .k-link.k-state-selected, - .customized-panelbar-item.k-item .k-link.k-state-selected:hover { + .customized-panelbar-item.k-item .k-link.k-selected, + .customized-panelbar-item.k-item .k-link.k-selected:hover { background-color: blue; color: white; text-decoration: underline; diff --git a/components/stepper/step-template.md b/components/stepper/step-template.md index 456f822e69..f5dac52a80 100644 --- a/components/stepper/step-template.md +++ b/components/stepper/step-template.md @@ -60,7 +60,7 @@ You can customize the whole appearance of the steps through their Template. It a top: 18px; } - .custom-stepper .k-progressbar .k-state-selected { + .custom-stepper .k-progressbar .k-selected { background: linear-gradient(to right, #ffc837, #ff8008); } diff --git a/knowledge-base/calendar-disable-weekends.md b/knowledge-base/calendar-disable-weekends.md index fb0db14d96..d5f5124ebe 100644 --- a/knowledge-base/calendar-disable-weekends.md +++ b/knowledge-base/calendar-disable-weekends.md @@ -38,7 +38,7 @@ To achieve that: The example below demonstrates this approach. -> At the time of writing, [k-state-disabled class is not applied to all disabled cells +> At the time of writing, [k-disabled class is not applied to all disabled cells ](https://feedback.telerik.com/blazor/1539828-k-state-disabled-class-is-not-applied-to-all-disabled-cells). So, in case you need to target all the disabled cells and customize them (for example, add some custom CSS to the disabled cells), use the `[aria-disabled="true"]` selector. >caption Pass the weekends to the Disabled Dates collection and disable all weekends between the Min and Max Value of the Calendar. diff --git a/knowledge-base/drawer-prevent-collapse.md b/knowledge-base/drawer-prevent-collapse.md index ea6d0daa1b..f2ca933a45 100644 --- a/knowledge-base/drawer-prevent-collapse.md +++ b/knowledge-base/drawer-prevent-collapse.md @@ -92,7 +92,7 @@ I would like to prevent the Drawer from collapsing when an item from the navigat public string GetSelectedItemClass(DrawerItem item) { if (SelectedItem == null) return string.Empty; - return SelectedItem.Text.ToLowerInvariant().Equals(item.Text.ToLowerInvariant()) ? "k-state-selected" : ""; + return SelectedItem.Text.ToLowerInvariant().Equals(item.Text.ToLowerInvariant()) ? "k-selected" : ""; } public class DrawerItem diff --git a/knowledge-base/dropdowns-custom-item-background.md b/knowledge-base/dropdowns-custom-item-background.md index 32b6e301d9..5175743913 100644 --- a/knowledge-base/dropdowns-custom-item-background.md +++ b/knowledge-base/dropdowns-custom-item-background.md @@ -96,7 +96,7 @@ Here are some additional notes to keep in mind, and an example. } /* (re)apply selected state background */ - .colored-dropdown .k-item.k-state-selected .item-wrapper { + .colored-dropdown .k-item.k-selected .item-wrapper { background: #666 !important; } diff --git a/knowledge-base/dropdowns-get-model.md b/knowledge-base/dropdowns-get-model.md index d026f892bc..3ebb883b5d 100644 --- a/knowledge-base/dropdowns-get-model.md +++ b/knowledge-base/dropdowns-get-model.md @@ -228,7 +228,7 @@ The example below copies the Telerik DropDownList rendering and uses a grid to p }
- + @SelectedItemText diff --git a/knowledge-base/editor-invalid-state.md b/knowledge-base/editor-invalid-state.md index 3351d53dea..c6ae8d546f 100644 --- a/knowledge-base/editor-invalid-state.md +++ b/knowledge-base/editor-invalid-state.md @@ -32,13 +32,13 @@ I would like to set the Editor in invalid state when validation does not pass by ## Solution -The Editor is a composite component and as such, currently, does not support the `k-state-invalid` class. In order to add a red border when the validation set for its value does not pass you can make a custom CSS class that mimics k-state-invalid and add it to the `Class` parameter based on a `bool` expression. +The Editor is a composite component and as such, currently, does not support the `k-invalid` class. In order to add a red border when the validation set for its value does not pass you can make a custom CSS class that mimics k-invalid and add it to the `Class` parameter based on a `bool` expression. You can utilize the capabilities and information provided by the `EditContext` to determine if the validation did not pass for the exact field bound to the Editor and render anew the component to apply the custom CSS class. A step by step explanation and an example of those concepts can be found below. #### Step by step explanation: -1. Create a custom CSS class that mimics the k-state-invalid. +1. Create a custom CSS class that mimics the k-invalid. 1. Pass an `EditContext` to the ``. 1. Instantiate a `FieldIdentifier` and in its constructor pass the data model and the field bound to the Editor. 1. Use a getter-only property to check if there are any validation messages for that `FieldIdentifier`. @@ -48,7 +48,7 @@ You can utilize the capabilities and information provided by the `EditContext` t >caption Set the Editor in invalid state when validation does not pass ````CSHTML -@*This is the custom class that mimics k-state-invalid*@ +@*This is the custom class that mimics k-invalid*@ -```` +Add a reference to the Button instance to use its methods (for example - `FocusAsync()`). ->caption The result from the code snippet above +>caption Component namespace and reference -![](images/red-button.png) +````CSHTML +Hello! +@code{ + Telerik.Blazor.Components.TelerikButton theButton { get; set; } ->caption Change the button size + protected override async Task OnAfterRenderAsync(bool firstRender) + { + await theButton.FocusAsync(); -```` - - -Large button +} ```` ->caption The result from the code snippet above +## Next Steps + +* [Styling the Blazor Button]({%slug button-styling%}) -![use css to change the button size](images/button-size-change.png) +* [Using Button Icons]({%slug button-icons%}) ## See Also * [Live Demo: Button](https://demos.telerik.com/blazor-ui/button/index) * [Events]({%slug button-events%}) - * [Icons]({%slug button-icons%}) * [Type]({%slug button-type%}) * [API Reference](https://docs.telerik.com/blazor-ui/api/Telerik.Blazor.Components.TelerikButton) - + diff --git a/components/button/styling.md b/components/button/styling.md new file mode 100644 index 0000000000..c05a34a971 --- /dev/null +++ b/components/button/styling.md @@ -0,0 +1,46 @@ +--- +title: Styling +page_title: Styling +description: Learn how to apply styles to the Blazor Button component by Telerik UI. +slug: button-styling +tags: telerik,blazor,button,styling, +published: True +position: 10 +--- + +# Styling + +There are a few ways to style the Button component: + +* Set a [primary button](#primary-button) style. +* Use another [built-in theme]({%slug general-information/themes%}). +* Use the [Button `Class`](#button-class) attribute. + +## Primary Button + +Through the primary button styling, you can make the button use a strong color to attract attention. To do that, set its `Primary` property to true. + +>caption Button with the Primary color scheme from the current theme + +````CSHTML +Primary +```` + +## Button Class + +The Class attribute allows you to define custom CSS rules that apply to the HTML rendering of one or several Buttons. + +>caption Set CSS class to the button and change its appearance + +````CSHTML +Large button with red text + + +```` From 8237ef90ca4f75f1bd386a9d3dff222c15ca82c6 Mon Sep 17 00:00:00 2001 From: Dimo Dimov Date: Wed, 12 Jan 2022 15:13:51 +0200 Subject: [PATCH 04/10] docs: Document button style changes --- upgrade/breaking-changes/3-0-0.md | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/upgrade/breaking-changes/3-0-0.md b/upgrade/breaking-changes/3-0-0.md index 1902478a01..17198e6fdb 100644 --- a/upgrade/breaking-changes/3-0-0.md +++ b/upgrade/breaking-changes/3-0-0.md @@ -12,11 +12,12 @@ position: 1 ## Component Changes +- Button - `Primary` parameter is removed in favor of [`ThemeColor`]({%slug components/button/overview%}) of type `string`. There is a new static class `Telerik.Blazor.ThemeConstants.Button.ThemeColor` with a predefined set of theme colors. To get the old primary styling, set `ThemeColor="@(ThemeConstants.Button.ThemeColor.Primary)"` for the Button. - TileLayout - Introduce identifier of the TileLayout item. `OnResize` and `OnReorder` events will receive EventArgs that will point to the resized/reordered item. This feature comes from our [public issue tracker](https://feedback.telerik.com/blazor/1489011) - TreeView - add `ExpandedItems` parameter and remove `ExpandedField` - TreeList - `TreeListEditMode` enum default value changes from `Inline` to `None`. TreeList editing should be explicitly enabled for the `Add` and `Edit` command buttons to work. - Grid - `GridEditMode` enum default value changes from `Inline` to `None`. Grid editing should be explicitly enabled for the `Add` and `Edit` command buttons to work. -- Grid – change `OnRead` method to return the `Data`. This is an important change that will empower us to deliver more features in the future(like the export of all Grid pages), and the Grid will not rely on component lifecycle for getting the data. +- Grid – change `OnRead` method to return the `Data`. This is an important change that will empower us to deliver more features in the future (like export all Grid pages), and the Grid will not rely on component lifecycle for getting the data. - Grid – use `IFilterDescriptor` in GridState instead of `FilterDescriptorBase` - DateInput – remove `ParsingErrorMessage` (obsolete since version 2.8) in favor of `DateInput_ParsingErrorMessage` [localization string]({%slug globalization-localization%}). - ContextMenu – change the type of the [`OnClick` event handler]({%slug contextmenu-events%}#onclick) from `EventCallback` to `EventCallback>` @@ -48,6 +49,21 @@ We are making our API naming more consistent. - `k-state-focused` CSS class is renamed to `k-focus` - `k-state-invalid` CSS class is renamed to `k-invalid` - `k-state-selected` CSS class is renamed to `k-selected` +- ButtonGroup and ToggleButton - the selected state of toggle buttons no longer matches the "primary" style. The goal is to have consistent styling of the active state in all components. To maintain the old behavior, use: + + ````CSHTML + + Toggle + + + Toggle + + @code { + public bool Selected { get; set; } + public string ThemeColor => Selected ? ThemeConstants.Button.ThemeColor.Primary : ThemeConstants.Button.ThemeColor.Base; + } + ```` + - Textbox and dropdown components have new consistent HTML rendering: ````HTML From 714ed340a2f309c42cde7c18431c139e059167ef Mon Sep 17 00:00:00 2001 From: Dimo Dimov Date: Wed, 12 Jan 2022 15:22:33 +0200 Subject: [PATCH 05/10] docs: Document button style changes 2 --- upgrade/breaking-changes/3-0-0.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/upgrade/breaking-changes/3-0-0.md b/upgrade/breaking-changes/3-0-0.md index 17198e6fdb..986dd44259 100644 --- a/upgrade/breaking-changes/3-0-0.md +++ b/upgrade/breaking-changes/3-0-0.md @@ -12,7 +12,7 @@ position: 1 ## Component Changes -- Button - `Primary` parameter is removed in favor of [`ThemeColor`]({%slug components/button/overview%}) of type `string`. There is a new static class `Telerik.Blazor.ThemeConstants.Button.ThemeColor` with a predefined set of theme colors. To get the old primary styling, set `ThemeColor="@(ThemeConstants.Button.ThemeColor.Primary)"` for the Button. +- Button - `Primary` parameter is removed in favor of [`ThemeColor`]({%slug components/button/overview%}) of type `string`. There is a new static class `Telerik.Blazor.ThemeConstants.Button.ThemeColor` with a predefined set of theme colors. To get the old primary Button styling, set `ThemeColor="@(ThemeConstants.Button.ThemeColor.Primary)"`. - TileLayout - Introduce identifier of the TileLayout item. `OnResize` and `OnReorder` events will receive EventArgs that will point to the resized/reordered item. This feature comes from our [public issue tracker](https://feedback.telerik.com/blazor/1489011) - TreeView - add `ExpandedItems` parameter and remove `ExpandedField` - TreeList - `TreeListEditMode` enum default value changes from `Inline` to `None`. TreeList editing should be explicitly enabled for the `Add` and `Edit` command buttons to work. From d8b9702e359bf2937666d2c7ce32c37f323e94c9 Mon Sep 17 00:00:00 2001 From: Dimo Dimov Date: Wed, 12 Jan 2022 15:37:13 +0200 Subject: [PATCH 06/10] docs: Breaking changes language improvements --- upgrade/breaking-changes/3-0-0.md | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/upgrade/breaking-changes/3-0-0.md b/upgrade/breaking-changes/3-0-0.md index 986dd44259..44c684ee7b 100644 --- a/upgrade/breaking-changes/3-0-0.md +++ b/upgrade/breaking-changes/3-0-0.md @@ -12,26 +12,26 @@ position: 1 ## Component Changes -- Button - `Primary` parameter is removed in favor of [`ThemeColor`]({%slug components/button/overview%}) of type `string`. There is a new static class `Telerik.Blazor.ThemeConstants.Button.ThemeColor` with a predefined set of theme colors. To get the old primary Button styling, set `ThemeColor="@(ThemeConstants.Button.ThemeColor.Primary)"`. -- TileLayout - Introduce identifier of the TileLayout item. `OnResize` and `OnReorder` events will receive EventArgs that will point to the resized/reordered item. This feature comes from our [public issue tracker](https://feedback.telerik.com/blazor/1489011) -- TreeView - add `ExpandedItems` parameter and remove `ExpandedField` -- TreeList - `TreeListEditMode` enum default value changes from `Inline` to `None`. TreeList editing should be explicitly enabled for the `Add` and `Edit` command buttons to work. -- Grid - `GridEditMode` enum default value changes from `Inline` to `None`. Grid editing should be explicitly enabled for the `Add` and `Edit` command buttons to work. -- Grid – change `OnRead` method to return the `Data`. This is an important change that will empower us to deliver more features in the future (like export all Grid pages), and the Grid will not rely on component lifecycle for getting the data. +- Button - removed `Primary` parameter in favor of [`ThemeColor`]({%slug components/button/overview%}) of type `string`. There is a new static class `Telerik.Blazor.ThemeConstants.Button.ThemeColor` with a predefined set of theme colors. To get the old primary Button styling, set `ThemeColor="@(ThemeConstants.Button.ThemeColor.Primary)"`. +- TileLayout - introduced identifier of the TileLayout item. `OnResize` and `OnReorder` events will receive EventArgs that will point to the resized/reordered item. This feature comes from a [public feature request](https://feedback.telerik.com/blazor/1489011) +- TreeView - removed `ExpandedField` parameter in favor of `ExpandedItems`. +- TreeList - changed `TreeListEditMode` enum default value from `Inline` to `None`. TreeList editing should be explicitly enabled for the `Add` and `Edit` command buttons to work. +- Grid - changed `GridEditMode` enum default value from `Inline` to `None`. Grid editing should be explicitly enabled for the `Add` and `Edit` command buttons to work. +- Grid – changed `OnRead` method to return the `Data`. This is an important change that will empower us to deliver more features in the future (like export all Grid pages). The Grid will not depend on its lifecycle to get the data. - Grid – use `IFilterDescriptor` in GridState instead of `FilterDescriptorBase` -- DateInput – remove `ParsingErrorMessage` (obsolete since version 2.8) in favor of `DateInput_ParsingErrorMessage` [localization string]({%slug globalization-localization%}). -- ContextMenu – change the type of the [`OnClick` event handler]({%slug contextmenu-events%}#onclick) from `EventCallback` to `EventCallback>` -- Dropdown components – remove default inline style of `width: 300px`. The new default width is `100%` and comes from the theme CSS. Applies to AutoComplete, ComboBox, DropDownList, MultiSelect. -- Textbox components - change default theme width from `12.4em` to `100%`. Applies to DateInput, Date/Time Picker, MaskedTextBox, NumericTextBox, TextArea, TextBox. +- DateInput – removed `ParsingErrorMessage` (obsolete since version 2.8) in favor of `DateInput_ParsingErrorMessage` [localization string]({%slug globalization-localization%}). +- ContextMenu – changed the type of the [`OnClick` event handler]({%slug contextmenu-events%}#onclick) from `EventCallback` to `EventCallback>` +- Dropdown components – removed the default inline style of `width: 300px`. The new default width is `100%` and comes from the theme CSS. Applies to AutoComplete, ComboBox, DropDownList, MultiSelect. +- Textbox components - changed the default theme width from `12.4em` to `100%`. Applies to DateInput, Date/Time Picker, MaskedTextBox, NumericTextBox, TextArea, TextBox. Grid EditorTemplates and Keyboard Navigation are in design stage. So, there might be changes coming from this direction as well. ## Common Changes -- [`Telerik.Blazor.IconName` class]({%slug common-kb-migration-from-iconname%}) ([obsolete since version 2.0]({%slug changes-in-2-0-0%})) is removed. Use the icon names from the [Built-in Icons documentation]({%slug general-information/font-icons%}#icons-list). - [`ToODataString` extension method](https://docs.telerik.com/blazor-ui/api/Telerik.Blazor.Extensions.DataSourceExtensions) is moved to the [`Telerik.Blazor.Extensions` namespace](https://docs.telerik.com/blazor-ui/api/Telerik.Blazor.Extensions). The `Telerik.Blazor.ExtensionMethods` namespace is removed in favor of `Telerik.Blazor.Extensions`. +- [`Telerik.Blazor.IconName` class]({%slug common-kb-migration-from-iconname%}) ([obsolete since version 2.0]({%slug changes-in-2-0-0%})) is removed. Use the icon names from the [Built-in Icons documentation]({%slug general-information/font-icons%}#icons-list). -## Parameter Naming +## Parameter Names We are making our API naming more consistent. From 838662e57ac1f2d8f8c4f5d4e92f9d8ff404323a Mon Sep 17 00:00:00 2001 From: Dimo Dimov Date: Wed, 12 Jan 2022 15:56:10 +0200 Subject: [PATCH 07/10] docs: DrawerContent Breaking change --- components/drawer/data-bind.md | 4 ++-- components/drawer/events.md | 8 ++++---- components/drawer/icons.md | 4 ++-- components/drawer/modes.md | 8 ++++---- components/drawer/navigation.md | 6 +++--- components/drawer/overview.md | 12 ++++++------ components/drawer/refresh-data.md | 4 ++-- components/drawer/selection.md | 4 ++-- components/drawer/templates.md | 10 +++++----- knowledge-base/drawer-add-expand-collapse-handle.md | 4 ++-- knowledge-base/drawer-prevent-collapse.md | 4 ++-- upgrade/breaking-changes/3-0-0.md | 2 +- 12 files changed, 35 insertions(+), 35 deletions(-) diff --git a/components/drawer/data-bind.md b/components/drawer/data-bind.md index c495d7a365..c9a48897fa 100644 --- a/components/drawer/data-bind.md +++ b/components/drawer/data-bind.md @@ -66,9 +66,9 @@ https://docs.telerik.com/blazor-ui/components/drawer/navigation - + @Body - + @code { diff --git a/components/drawer/events.md b/components/drawer/events.md index 388dbc36a2..04c4be043b 100644 --- a/components/drawer/events.md +++ b/components/drawer/events.md @@ -28,11 +28,11 @@ The `SelectedItemChanged` event fires every time the user clicks on a new item f - +
Content for the @selectedItem?.Text
- + @code { @@ -91,11 +91,11 @@ The `ExpandedChanged` event fires every time the component's state is changed - Mode="@DrawerMode.Push" @bind-SelectedItem="@selectedItem" @ref="@DrawerRef"> - +
Content for the @selectedItem?.Text
- + @code { diff --git a/components/drawer/icons.md b/components/drawer/icons.md index c39b055eed..bfb61eff94 100644 --- a/components/drawer/icons.md +++ b/components/drawer/icons.md @@ -32,12 +32,12 @@ The `IconClassField` and `ImageUrlField` are rendered, respectively, as ` - + Toggle drawer
Selected Item: @SelectedItem?.Text
- + @code { diff --git a/components/drawer/modes.md b/components/drawer/modes.md index b13bbf5e74..78b3fc4d0e 100644 --- a/components/drawer/modes.md +++ b/components/drawer/modes.md @@ -43,14 +43,14 @@ The drawer's height is dynamic based on the height of the content (you can chang Mode="@DrawerMode.Push" @bind-SelectedItem="@selectedItem" @ref="@DrawerRef"> - +
Select an item. The drawer is expaned: @Expanded
Content for the @selectedItem?.Text
- +
@@ -94,13 +94,13 @@ You may want to add padding to the left of the content so that it is not overlap Mode="@DrawerMode.Overlay" @bind-SelectedItem="@selectedItem" @ref="@DrawerRef"> - +
The drawer is expanded: @Expanded
Content for the @selectedItem?.Text
- + @code { diff --git a/components/drawer/navigation.md b/components/drawer/navigation.md index f2374e0fb4..2f7d4b02a5 100644 --- a/components/drawer/navigation.md +++ b/components/drawer/navigation.md @@ -15,7 +15,7 @@ The Drawer is a different kind of a [menu]({%slug components/menu/overview%}) th To use the Drawer for navigating between pages: * Add the Drawer to the `MainLayot.razor` of your app. -* Put the `@Body` tag in the `` tag of the drawer. +* Put the `@Body` tag in the `` tag of the drawer. * Provide a collection of models that describe the pages you want the user to navigate to. >tip You can find a runnable sample that showcases this in the [Drawer as Side Navigation](https://github.com/telerik/blazor-ui/tree/master/drawer/sidenav) sample project. @@ -31,9 +31,9 @@ To use the Drawer for navigating between pages: - + @Body - + diff --git a/components/drawer/overview.md b/components/drawer/overview.md index e743499f5a..120d7d29a5 100644 --- a/components/drawer/overview.md +++ b/components/drawer/overview.md @@ -16,7 +16,7 @@ The Blazor Dr 1. Add the `TelerikDrawer` tag. 1. Populate its `Data` property with the collection of items you want the user to see. -1. Place the content of the Drawer in the `` tag. +1. Place the content of the Drawer in the `` tag. * In this example, we keep it simple by using the selected item. See the [Navigation]({%slug drawer-navigation%}) article for a menu-like experience with links. >caption Basic configuration of the Drawer. @@ -29,7 +29,7 @@ The Blazor Dr Mode="DrawerMode.Push" @ref="@DrawerRef" @bind-SelectedItem="@SelectedItem"> - + Toggle drawer @* Place your contents here - it can be as simple as text, it can be conditional components or components that @@ -38,7 +38,7 @@ The Blazor Dr
Selected Item: @SelectedItem?.Text
- + @code { @@ -73,7 +73,7 @@ The Blazor Dr * `Position` - you can control the position of the Drawer, through the `DrawerPosition` enum. The members of the enum are: * `Left` - the default position - * `Right` - the drawer item list will render on the right hand side of the `Content` + * `Right` - the drawer item list will render on the right hand side of the `DrawerContent` * `Expanded` - two-way bindable property that specifies whether the Drawer is expanded or collapsed. If this parameter is used to expand or collapse the component the animations will not be available. To use animations you have to use the Drawer's [Methods](#methods). You can, however, use the value to implement custom layouts in the drawer [templates]({%slug drawer-templates%}) or in your own layout. @@ -85,7 +85,7 @@ The members of the enum are: * `MiniMode` - controls whether there is mini view when the Drawer is collapsed. For more information read the [Mini View]({%slug drawer-mini-mode%}) article. -* `Content` - the `` child tag of `` is a `RenderFragment` where you put a component or custom HTML as the content of the Drawer - this is what the drawer will push or overlay. +* `DrawerContent` - the `` child tag of `` is a `RenderFragment` where you put a component or custom HTML as the content of the Drawer - this is what the drawer will push or overlay. * `SelectedItem` - two-way bindable property that contains the currently selected item in the Drawer. For more information read the [Selection]({%slug drawer-selection%}) article. @@ -117,7 +117,7 @@ The Drawer methods are accessible through it's reference. The reference exposes - lorem ipsum + lorem ipsum @code { diff --git a/components/drawer/refresh-data.md b/components/drawer/refresh-data.md index a93c76f58a..b0abafdb0f 100644 --- a/components/drawer/refresh-data.md +++ b/components/drawer/refresh-data.md @@ -42,12 +42,12 @@ In this article: Mode="DrawerMode.Push" @ref="@DrawerRef" @bind-SelectedItem="@SelectedItem"> - + Toggle drawer
Selected Item: @SelectedItem?.Text
- + @code { diff --git a/components/drawer/selection.md b/components/drawer/selection.md index ea5d0179e2..e43715a137 100644 --- a/components/drawer/selection.md +++ b/components/drawer/selection.md @@ -28,12 +28,12 @@ If you use the drawer for [page navigation]({%slug drawer-navigation%}), the sel Mode="@DrawerMode.Push" @bind-SelectedItem="@selectedItem" @ref="@DrawerRef"> - + Toggle drawer
Content for the @selectedItem?.Text item
- + @code { diff --git a/components/drawer/templates.md b/components/drawer/templates.md index d0fa520b15..f550fc16b9 100644 --- a/components/drawer/templates.md +++ b/components/drawer/templates.md @@ -43,9 +43,9 @@ This template receives a `context` argument that is of the data model type and r } - + @SelectedItem?.Description - + @@ -84,7 +84,7 @@ When using this template all built-in features of the Drawer are disabled and sh The drawer will expand and collapse as usual, but the content has to be controlled by the application entirely. -Make sure that the `` tag is outside of the `