diff --git a/.gitignore b/.gitignore index 39805f834b..97f6cf12fc 100644 --- a/.gitignore +++ b/.gitignore @@ -1,11 +1,11 @@ -.vs .asset-cache/ .dockerignore .DS_Store .editorconfig .jekyll-metadata .ruby-version +.vs /_assets/ /_build/ /_buildApi/ diff --git a/_config.yml b/_config.yml index 49cb53033a..6c200e951a 100644 --- a/_config.yml +++ b/_config.yml @@ -30,6 +30,11 @@ navigation: "common-features": title: "Common Features" position: 15 + "upgrade": + title: "Upgrade" + position: 17 + "upgrade/breaking-changes": + title: "Breaking Changes" "how-to": title: "How To" position: 20 diff --git a/_contentTemplates/chart/link-to-basics.md b/_contentTemplates/chart/link-to-basics.md index c970edeb78..52cbdd8a13 100644 --- a/_contentTemplates/chart/link-to-basics.md +++ b/_contentTemplates/chart/link-to-basics.md @@ -8,20 +8,17 @@ This article assumes you are familiar with the [chart basics]({%slug components/ Bar and Column charts can take the color of the series item from the `ColorField` of the data source. You can pass a valid CSS color (for example, `#abcdef`, `#f00`, or `blue`). ````CSHTML -@using Telerik.Blazor -@using Telerik.Blazor.Components.Chart +Colors per series item - - - - + + + - + - - + @code { @@ -31,8 +28,9 @@ Bar and Column charts can take the color of the series item from the `ColorField public double ItemValue { get; set; } public string Color { get; set; } } + public List theData = new List -{ + { new MyChartDataModel { Category = "Product 1", diff --git a/_contentTemplates/common/general-info.md b/_contentTemplates/common/general-info.md index 851e109123..f9ce904b43 100644 --- a/_contentTemplates/common/general-info.md +++ b/_contentTemplates/common/general-info.md @@ -1,3 +1,7 @@ #event-callback-can-be-async >tip The event is an `EventCallback` and its type can be `void`, or it can also be asynchronous and return `async Task`. +#end + +#ensure-nuget-packge-for-upgrade +Make sure that you have a NuGet feed source with the version you want to upgrade to. This is usually the [Telerik NuGet Feed]({%slug installation/nuget%}), but you can also use a local feed from [our MSI installer]({%slug installation/msi%}) or [ZIP archive]({%slug installation/zip%}). #end \ No newline at end of file diff --git a/_contentTemplates/common/get-started.md b/_contentTemplates/common/get-started.md index cb172245ba..eba3995e0f 100644 --- a/_contentTemplates/common/get-started.md +++ b/_contentTemplates/common/get-started.md @@ -91,8 +91,6 @@ To get access to the UI for Blazor components, follow these steps: **CSHTML** - @using Telerik.Blazor.Components.Button - Say Hello 1. Optionally, hook up a click handler that will show a message. The resulting view should look like this: @@ -100,8 +98,6 @@ To get access to the UI for Blazor components, follow these steps: **CSHTML** @page "/" - - @using Telerik.Blazor.Components.Button Say Hello 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/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 49a907876a..c0d245c4d0 100644 Binary files a/common-features/images/standalone-font-icons.png and b/common-features/images/standalone-font-icons.png differ diff --git a/common-features/input-validation.md b/common-features/input-validation.md index a59f35ba8e..be016533e6 100644 --- a/common-features/input-validation.md +++ b/common-features/input-validation.md @@ -34,12 +34,7 @@ Simple textbox-like inputs do not have any special behavior. You need to bind th >caption How to validate inputs ````CSHTML -@using Telerik.Blazor.Components.TextBox -@using Telerik.Blazor.Components.NumericTextBox -@using Telerik.Blazor.Components.DateInput -@using Telerik.Blazor.Components.DatePicker -@using Telerik.Blazor.Components.TimePicker -@using System.ComponentModel.DataAnnotations +@using System.ComponentModel.DataAnnotations // used for the model class attributes @@ -125,8 +120,7 @@ The DropDownList always has an item selected - the first item from its data sour >caption How to validate a dropdownlist ````CSHTML -@using Telerik.Blazor.Components.DropDownList -@using System.ComponentModel.DataAnnotations +@using System.ComponentModel.DataAnnotations // used for the model class attributes 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/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. - - - - - - - - + + + + + + + + original: - - - - - - - - + + + + + + + + @code { diff --git a/components/grid/paging.md b/components/grid/paging.md index ddd6df7889..9be5fa8ba3 100644 --- a/components/grid/paging.md +++ b/components/grid/paging.md @@ -21,13 +21,13 @@ 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. - - - - + + + + @code { @@ -39,28 +39,28 @@ You can set the current page of the grid through its integer `Page` property. ![](images/paging-overview.png) ->tip You can bind the values of those properties to variables in the `@code {}` section. +>tip You can bind the values of those properties to variables in the `@code {}` section. If you want to bind the page index to a variable, you must use the `@bind-Page="@MyPageIndexVariable"` syntax. Here is one way to implement a page size choice that puts all records on one page. >caption Bind Page Size to a variable ````CSHTML -@using Telerik.Blazor.Components.Grid +Dynamic page size change - @for (int i = 1; i < 4; i++) { } - + - - - - + + + + @code { diff --git a/components/grid/selection/multiple.md b/components/grid/selection/multiple.md index b4d360b465..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,16 +46,16 @@ 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. - - - - - + + + + + @code { @@ -91,18 +91,18 @@ 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 - - - - - + + + + + @if (SelectedEmployees != null) @@ -160,18 +160,18 @@ 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 - - - - - + + + + + @if (SelectedItems != null) @@ -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 2640e38dfb..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..ec8089acbe 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 caption Component namespace and reference ````CSHTML -@using Telerik.Blazor.Components.Menu +@using Telerik.Blazor.Components @code { // the menu is a generic component and its type depends on the model it binds to - Telerik.Blazor.Components.Menu.TelerikMenu 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; } 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..d255f8382b 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; @@ -33,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 @@ -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; } ```` @@ -64,6 +62,9 @@ The numeric textbox provides the following features: ```` +>important The decimal separator is `.` for the time being. When localization features get implemented in the Telerik UI for Blazor suite, it will be possible to take it from the current thread culture. This means that cultures with a differet separator may not funcion correctly. Currency symbols are also rendered by the framework and they come from the current culture as well. + + + ## See Also * [Live Demo: Numeric Textbox](https://demos.telerik.com/blazor-ui/numerictextbox/index) diff --git a/components/tabstrip/overview.md b/components/tabstrip/overview.md index 8c49ec7074..668f086cc1 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` @@ -26,22 +28,22 @@ 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 - - + + 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 - -Get Active Tab +Active Tab Index: @ActiveTabIndex - - + + 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}"; + } +} +```` - void SelectSecondTab() - { - myTabStrip.SetActiveTab(chosenTab); - } +>caption Extract information for the currently selected tab from your model + +````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/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/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. 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 { diff --git a/components/window/actions.md b/components/window/actions.md index 4bd3650df9..a1616bd066 100644 --- a/components/window/actions.md +++ b/components/window/actions.md @@ -18,7 +18,7 @@ The Window offers action buttons in its titlebar: * `Close` * custom action buttons -To define action buttons, populate the `TelerikWindowActions` tag of the Window with `TelerikWindowAction` instances. +To define action buttons, populate the `WindowActions` tag of the Window with `WindowAction` instances. Action buttons expose the following properties: @@ -31,22 +31,20 @@ Action buttons expose the following properties: >caption The built-in actions of a Window ````CSHTML -@using Telerik.Blazor.Components.Window - - - - - - - + + + + + + Optional title - - + + I have action buttons. Try using them, but if you close me, you can't reopen me without a few lines of code, so try that last.
The titlebar will now render even if you don't define a title, because it will show the action buttons. - + ```` @@ -59,17 +57,17 @@ You can create a custom action icon and you must provide its `OnClick` handler. >caption Handling a custom action ````CSHTML -@using Telerik.Blazor.Components.Window +Custom actions can call C# directly - - - - + + + + @result
Even if you do not define a title, the titlebar will render so you can get to the actions. - + @code { @@ -92,19 +90,19 @@ You can mix custom actions with built-in actions, and you do not have to define >caption Mixing built-in actions with custom actions ````CSHTML -@using Telerik.Blazor.Components.Window +You can define any collection of actions - - - - - - + + + + + + @result
You can mix custom actions with the built-in ones in any order. If a custom action is used, its OnClick handler is mandatory. - + @code { diff --git a/components/window/images/window-overview.png b/components/window/images/window-overview.png index 39c0595340..9259ac14d9 100644 Binary files a/components/window/images/window-overview.png and b/components/window/images/window-overview.png differ diff --git a/components/window/modal.md b/components/window/modal.md new file mode 100644 index 0000000000..c1641dfe47 --- /dev/null +++ b/components/window/modal.md @@ -0,0 +1,37 @@ +--- +title: Modal +page_title: Window for Blazor | Modal +description: How to make a modal Window for Blazor +slug: components/window/modal +tags: telerik,blazor,window,modal +published: True +position: 5 +--- + +# Modal Window + +The Window for Blazor can be modal so that the user is unable to interact with the rest of the page until it closes. + +To make a modal window, set its `Modal` property to `true`. + +````CSHTML + + + The Title + + + I am modal so the page behind me is not available to the user. + + + + + + + +```` + +>note A modal window is centered. + +## See Also + + * [Live Demo: Modal Window Size](https://demos.telerik.com/blazor-ui/window/modal) diff --git a/components/window/overview.md b/components/window/overview.md index 124569e22e..770a97319e 100644 --- a/components/window/overview.md +++ b/components/window/overview.md @@ -16,21 +16,25 @@ To create a Telerik Window: 1. use the `TelerikWindow` tag 1. set its `Visible` property to `true` to see it immediately -1. add some content to its `TelerikWindowContent` inner tag -1. optionally, add a title text in its `TelerikWindowTitle` tag +1. add some content to its `WindowContent` inner tag +1. optionally, add a title text in its `WindowTitle` tag +1. optionally, add the built-in [actions]({%slug components/window/actions%}) to its titlebar ->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,69 +42,109 @@ To create a Telerik Window: ![](images/window-overview.png) -## Reference, Show, Close +>caption Component namespace and reference -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. +````CSHTML +@using Telerik.Blazor.Components ->caption Store a reference to a Telerik Window, open and close it programmatically through methods + + + The Title + + + This is my window popup content. + + + +@code { + Telerik.Blazor.Components.TelerikWindow myWindowRef { get;set; } +} +```` + +## Show and Close + +The `Visible` property lets you control whether the window component is shown (and rendered). + +>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. - + + + The Title + + + This is my window popup content. + + + + + + @code { - Telerik.Blazor.Components.Window.TelerikWindow myFirstWindow; - - public void ShowWindow() - { - myFirstWindow.Open(); - } + bool isVisible { get; set; } - public void CloseWindow() - { - myFirstWindow.Close(); - } + public void ShowWindow() + { + isVisible = true; + } + public void CloseWindow() + { + isVisible = false; + } } ```` ->caption Show and close a Window by toggling a single variable +The `Visible` parameter also exposes an event - `VisibleChanged`. You can use it to get notifications when the user tries to close the window. You can effectively cancel the event by not propagating the new visibility state to the variable the `Visible` property is bound to. + +>caption React to the user closing the window ````CSHTML -@using Telerik.Blazor.Components.Window +@result - - - The Title - - - This is my window popup content. - + + + The Title + + + This is my window popup content. + + + + @code { - bool isWindowShown { get; set; } + bool isVisible { get; set; } + string result { get; set; } - public void ToggleWindow() - { - isWindowShown = !isWindowShown; - } + void VisibleChangedHandler(bool currVisible) + { + isVisible = currVisible; // if you don't do this, the window won't close because of the user action + + result = $"the window is now visible: {isVisible}"; + } + + public void ToggleWindow() + { + isVisible = !isVisible; + + result = $"the window is now visible: {isVisible}"; + } } ```` +>tip You may also find useful handling the `StateChanged` event - it provides similar functionality for the minimized/maximized/standard state of the window. + ## Styling The `Class` property lets you define a CSS class that will be rendered on the popup element so you can cascade through it in order to change the appearane of both the content, and the built-in elements of the Window. @@ -108,15 +152,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. - +