From 73bc3066f6c6949cb4712203562d8a95c2973d4a Mon Sep 17 00:00:00 2001 From: Kendo Bot Date: Wed, 3 Aug 2022 04:58:34 +0300 Subject: [PATCH] Sync with Kendo UI Professional --- .../diagrams-and-maps/map/overview.md | 52 ++++++++- .../html-helpers/layout/badge/overview.md | 103 +++++++++++++----- .../layout/expansionpanel/overview.md | 40 ++++++- .../layout/expansionpanel/state.md | 34 +++--- .../floatingactionbutton/alignment.md | 16 +-- .../floatingactionbutton/appearance.md | 9 +- .../floatingactionbutton/overview.md | 80 ++++++++++---- .../floatingactionbutton/templates.md | 15 +-- .../scheduling/calendar/component-types.md | 6 + .../scheduling/calendar/date-ranges.md | 4 +- .../scheduling/calendar/disabled-dates.md | 8 +- .../calendar/globalization/localization.md | 9 +- .../scheduling/calendar/overview.md | 41 ++++++- .../scheduling/calendar/selection.md | 2 +- .../scheduling/calendar/week-numbers.md | 4 +- 15 files changed, 319 insertions(+), 104 deletions(-) diff --git a/docs-aspnet/html-helpers/diagrams-and-maps/map/overview.md b/docs-aspnet/html-helpers/diagrams-and-maps/map/overview.md index 684bddf3fc1..fb7c13289eb 100644 --- a/docs-aspnet/html-helpers/diagrams-and-maps/map/overview.md +++ b/docs-aspnet/html-helpers/diagrams-and-maps/map/overview.md @@ -50,7 +50,26 @@ The following example demonstrates how to define the Map. ``` {% if site.core %} ```TagHelper - + @{ + var centerCoordinates = new double[] { 35.268107, -95.744821 }; + var locationCoordinates = new double[] { 30.268107, -97.744821 }; + var subdomains = new string[] { "a", "b", "c" }; + } + + + + + + + + + + + + ``` {% endif %} ```Controller @@ -91,7 +110,11 @@ The following example demonstrates the basic configuration for the Map component ) ``` ```TagHelper - + @{ + var coordinates = new double[] { 30.268107, -97.744821 }; + } + + @@ -102,7 +125,7 @@ The following example demonstrates the basic configuration for the Map component - + @@ -169,6 +192,29 @@ For a complete example on basic Map events, refer to the [demo on using the even } ``` +{% if site.core %} +```TagHelper + @{ + var subdomains = new string[] { "a", "b", "c" }; + } + + + + + + + + + +``` +{% endif %} ## See Also diff --git a/docs-aspnet/html-helpers/layout/badge/overview.md b/docs-aspnet/html-helpers/layout/badge/overview.md index 4198c0c548d..5af863d637c 100644 --- a/docs-aspnet/html-helpers/layout/badge/overview.md +++ b/docs-aspnet/html-helpers/layout/badge/overview.md @@ -28,17 +28,20 @@ It also provides customizing its content through templates, setting different ty The following example demonstrates how to define the Badge. ```HtmlHelper - - @(Html.Kendo().Badge() - .Name("badge") - .Value("42") - .Appearance("rectangle")) + + @(Html.Kendo().Badge() + .Name("badge") + .Text("42") + .Shape(BadgeShape.Rectangle) + ) ``` {% if site.core %} ```TagHelper - - + + ``` @@ -49,18 +52,22 @@ The following example demonstrates how to define the Badge. The badge also provides the choice to be inline or overlay and set its type. To make the badge overlay add the `k-badge-overlay` class to the parent parent element. ```HtmlHelper - - @(Html.Kendo().Badge() - .Name("badge") - .Value("42") - .Type("warning") - .Appearance("rectangle")) + + @(Html.Kendo().Badge() + .Name("badge") + .Text("42") + .ThemeColor(BadgeColor.Warning) + .Shape(BadgeShape.Rectangle) + ) ``` {% if site.core %} ```TagHelper - - + + ``` @@ -71,18 +78,22 @@ The badge also provides the choice to be inline or overlay and set its type. To With the badge you can customize the content using templates. ```HtmlHelper - - @(Html.Kendo().Badge() - .Name("badge") - .Value("42") - .Template("#= +value > 10 ? '9+' : value #") - .Appearance("rectangle")) + + @(Html.Kendo().Badge() + .Name("badge") + .Text("42") + .Template("#= this._text > 10 ? '9+' : this._text #") + .Shape(BadgeShape.Rectangle) + ) ``` {% if site.core %} ```TagHelper - - + + ``` @@ -124,6 +135,41 @@ You can integrate the Badge into other UI components. The following example demo #}# ``` +{% if site.core %} +```TagHelper.cshtml + + @addTagHelper *, Kendo.Mvc + + @(Html.Kendo().Grid() + .Name("grid") + .Columns(columns => { + columns.Bound("OrderID").HtmlAttributes(new { @class = "templateCell" }).ClientTemplateId("orderTemplate"); + }) + .Events(ev => ev.DataBound("initBadges")) + .DataSource(dataSource => dataSource + .Ajax() + .Read(read => read.Action("Orders_Read", "Grid")) + ) + ) + + +``` +{% endif %} ```JavaScript function initBadges(e) { $(".templateCell").each(function(){ @@ -140,9 +186,9 @@ You can access an existing Button instance by using the [`jQuery.data()`](https: @(Html.Kendo().Badge() .Name("badge") - .Value("42") - .Template("#= +value > 10 ? '9+' : value #") - .Appearance("rectangle")) + .Text("42") + .Template("#= this._text > 10 ? '9+' : this._text #") + .Shape(BadgeShape.Rectangle) +``` + +{% if site.core %} ```TagHelper diff --git a/docs-aspnet/html-helpers/layout/expansionpanel/state.md b/docs-aspnet/html-helpers/layout/expansionpanel/state.md index 37aaa43aa6f..eaec5d9f57a 100644 --- a/docs-aspnet/html-helpers/layout/expansionpanel/state.md +++ b/docs-aspnet/html-helpers/layout/expansionpanel/state.md @@ -15,13 +15,13 @@ You can configure the default state of the Telerik UI ExpansionPanel for {{ site You can disable the Kendo UI ExpansionPanel component and make the user unable to expand or collapse the panel. To configure this state, set the [`Disabled`](/api/Kendo.Mvc.UI.Fluent/ExpansionPanelBuilder#disabledsystemboolean) property to `true`. ```HtmlHelper -@(Html.Kendo().ExpansionPanel() + @(Html.Kendo().ExpansionPanel() .Name("brazil") .Title("Brazil") .SubTitle("South America") .Disabled(true) - .Content("...") - ) + .Content("The word 'Brazil' likely comes from the Portuguese word for brazilwood, a tree that once grew plentifully along the Brazilian coast. In Portuguese, brazilwood is called pau-brasil, with the word brasil commonly given the etymology 'red like an ember', formed from brasa ('ember') and the suffix -il (from -iculum or -ilium).") + ) ``` {% if site.core %} ```TagHelper @@ -38,13 +38,13 @@ You can disable the Kendo UI ExpansionPanel component and make the user unable t The Kendo UI ExpansionPanel component can be expanded by default. To configure this state, set the [`Expanded`](/api/Kendo.Mvc.UI.Fluent/ExpansionPanelBuilder#expandedsystemboolean) property to `true`. ```HtmlHelper -@(Html.Kendo().ExpansionPanel() - .Name("brazil") - .Title("Brazil") - .SubTitle("South America") - .Expanded(true) - .Content("...") - ) + @(Html.Kendo().ExpansionPanel() + .Name("brazil") + .Title("Brazil") + .SubTitle("South America") + .Expanded(true) + .Content("The word 'Brazil' likely comes from the Portuguese word for brazilwood, a tree that once grew plentifully along the Brazilian coast. In Portuguese, brazilwood is called pau-brasil, with the word brasil commonly given the etymology 'red like an ember', formed from brasa ('ember') and the suffix -il (from -iculum or -ilium).") + ) ``` {% if site.core %} ```TagHelper @@ -61,13 +61,13 @@ The Kendo UI ExpansionPanel component can be expanded by default. To configure t By default, the user can expand or collapse the ExpansionPanel. To prevent this, set the [`Toggleable`](/Kendo.Mvc.UI.Fluent/ExpansionPanelBuilder#toggleablesystemboolean) property to `false`. ```HtmlHelper -@(Html.Kendo().ExpansionPanel() + @(Html.Kendo().ExpansionPanel() .Name("brazil") .Title("Brazil") .SubTitle("South America") .Toggleable(false) - .Content("...") - ) + .Content("The word 'Brazil' likely comes from the Portuguese word for brazilwood, a tree that once grew plentifully along the Brazilian coast. In Portuguese, brazilwood is called pau-brasil, with the word brasil commonly given the etymology 'red like an ember', formed from brasa ('ember') and the suffix -il (from -iculum or -ilium).") + ) ``` {% if site.core %} ```TagHelper @@ -84,13 +84,13 @@ By default, the user can expand or collapse the ExpansionPanel. To prevent this, You can disable the ExpansionPanel visual animations that appear when the user expands or collapses the panel. To disable the animations, set the [`Animation`](/api/Kendo.Mvc.UI.Fluent/ExpansionPanelBuilder#animationsystemboolean) property to `false`. ```HtmlHelper -@(Html.Kendo().ExpansionPanel() + @(Html.Kendo().ExpansionPanel() .Name("brazil") .Title("Brazil") .SubTitle("South America") - Animation(false) - .Content("...") - ) + .Animation(false) + .Content("The word 'Brazil' likely comes from the Portuguese word for brazilwood, a tree that once grew plentifully along the Brazilian coast. In Portuguese, brazilwood is called pau-brasil, with the word brasil commonly given the etymology 'red like an ember', formed from brasa ('ember') and the suffix -il (from -iculum or -ilium).") + ) ``` {% if site.core %} ```TagHelper diff --git a/docs-aspnet/html-helpers/navigation/floatingactionbutton/alignment.md b/docs-aspnet/html-helpers/navigation/floatingactionbutton/alignment.md index 466d6ab5f0e..bdfd43f816e 100644 --- a/docs-aspnet/html-helpers/navigation/floatingactionbutton/alignment.md +++ b/docs-aspnet/html-helpers/navigation/floatingactionbutton/alignment.md @@ -21,12 +21,12 @@ The `Align` configuration option specifies the position of the FloatingActionBut @(Html.Kendo().FloatingActionButton() .Name("fab") .Align(FloatingActionButtonAlign.TopCenter) - ) + ) ``` {% if site.core %} ```TagHelper + align="FloatingActionButtonAlign.TopCenter"> ``` {% endif %} @@ -45,9 +45,9 @@ The `AlignOffset` configuration option specifies the horizontal and vertical off {% if site.core %} ```TagHelper + align="FloatingActionButtonAlign.BottomStart" + align-offset-horizontal="50" + align-offset-vertical="50"> ``` {% endif %} @@ -67,9 +67,9 @@ The `PositionMode` configuration option specifies the CSS position of the Floati {% if site.core %} ```TagHelper //positions the button relative to the viewport ``` diff --git a/docs-aspnet/html-helpers/navigation/floatingactionbutton/appearance.md b/docs-aspnet/html-helpers/navigation/floatingactionbutton/appearance.md index 994160f5fe7..b6eef22bfa3 100644 --- a/docs-aspnet/html-helpers/navigation/floatingactionbutton/appearance.md +++ b/docs-aspnet/html-helpers/navigation/floatingactionbutton/appearance.md @@ -24,7 +24,6 @@ The Material Design guidelines dictate that: .Icon("plus") .Text("Add To Cart") ) - ``` {% if site.core %} ```TagHelper @@ -53,8 +52,12 @@ The `Icon` configuration option specifies the name of an icon. The selected icon - - + + + + ``` diff --git a/docs-aspnet/html-helpers/navigation/floatingactionbutton/overview.md b/docs-aspnet/html-helpers/navigation/floatingactionbutton/overview.md index 8eaa969e67d..4d0d0b7aee9 100644 --- a/docs-aspnet/html-helpers/navigation/floatingactionbutton/overview.md +++ b/docs-aspnet/html-helpers/navigation/floatingactionbutton/overview.md @@ -36,11 +36,11 @@ The following example demonstrates how to initialize the FloatingActionButton. .PositionMode(FloatingActionButtonPositionMode.Absolute) .Size(FloatingActionButtonSize.Medium) .Shape(FloatingActionButtonShape.Pill) - .Icon("plus") + .Icon("share") .Items(items=>{ - items.Add().Icon("star").Label("Rate product").Click(onItemClick); - items.Add().Icon("edit").Label("Leave comment").Click(onItemClick); - items.Add().Icon("cart").Label("Add to cart").Click(onItemClick); + items.Add().Icon("download").Label("Download").Click(onItemClick); + items.Add().Icon("print").Label("Print").Click(onItemClick); + items.Add().Icon("email").Label("Email").Click(onItemClick); }) ) @@ -59,18 +59,27 @@ The following example demonstrates how to initialize the FloatingActionButton. {% if site.core %} ```TagHelper + theme-color="FloatingActionButtonThemeColor.Info"> - - - + + + + + + ``` @@ -90,29 +99,52 @@ You can subscribe to all FloatingActionButton events. For a complete example on The following example demonstrates how to subscribe to the FloatingActionButton click event. ```HtmlHelper -@(Html.Kendo().FloatingActionButton() - .Name("fab") - .Events(e => e - .Click("fab_click") - ) -) - + @(Html.Kendo().FloatingActionButton() + .Name("fab") + .Align(FloatingActionButtonAlign.BottomCenter) + .AlignOffset(ao=>ao.Vertical(50)) + .PositionMode(FloatingActionButtonPositionMode.Fixed) + .Items(items=>{ + items.Add().Icon("download").Label("Download").Click(onItemClick); + items.Add().Icon("print").Label("Print").Click(onItemClick); + items.Add().Icon("email").Label("Email").Click(onItemClick); + }) + .Events(e => + { + e.Click("onClick"); + e.Expand("onExpand"); + e.Collapse("onExpand"); + }) + ) + + ``` {% if site.core %} ```TagHelper - + icon="share"> diff --git a/docs-aspnet/html-helpers/navigation/floatingactionbutton/templates.md b/docs-aspnet/html-helpers/navigation/floatingactionbutton/templates.md index 05dada60fc2..95d8e6c6457 100644 --- a/docs-aspnet/html-helpers/navigation/floatingactionbutton/templates.md +++ b/docs-aspnet/html-helpers/navigation/floatingactionbutton/templates.md @@ -34,15 +34,16 @@ The `Template` and `TemplateId` configuration options allow you to manage the wa {% if site.core %} ```TagHelper - - - + + + + diff --git a/docs-aspnet/html-helpers/scheduling/calendar/component-types.md b/docs-aspnet/html-helpers/scheduling/calendar/component-types.md index ef354eeb2fe..f21a1575025 100644 --- a/docs-aspnet/html-helpers/scheduling/calendar/component-types.md +++ b/docs-aspnet/html-helpers/scheduling/calendar/component-types.md @@ -18,6 +18,12 @@ By default, the Calendar is initialized with the `classic` render mode. In order .ComponentType("modern") ) ``` +{% if site.core %} +```TagHelper + + +``` +{% endif %} As a result, the appearance of the widget is alternated. diff --git a/docs-aspnet/html-helpers/scheduling/calendar/date-ranges.md b/docs-aspnet/html-helpers/scheduling/calendar/date-ranges.md index 22ff0eaea92..d3adc81b6bc 100644 --- a/docs-aspnet/html-helpers/scheduling/calendar/date-ranges.md +++ b/docs-aspnet/html-helpers/scheduling/calendar/date-ranges.md @@ -23,8 +23,8 @@ As a result, the Calendar does not navigate to a date that is earlier than the s ```TagHelper + min="new DateTime(1950, 1, 2)" + max="new DateTime(2049, 12, 31)"> ``` {% endif %} diff --git a/docs-aspnet/html-helpers/scheduling/calendar/disabled-dates.md b/docs-aspnet/html-helpers/scheduling/calendar/disabled-dates.md index b5d98698dbf..7454b2393f3 100644 --- a/docs-aspnet/html-helpers/scheduling/calendar/disabled-dates.md +++ b/docs-aspnet/html-helpers/scheduling/calendar/disabled-dates.md @@ -25,7 +25,11 @@ When you set an array, list the days that will be disabled by using the first le ``` {% if site.core %} ```TagHelper - + @{ + var disabledDates = new DateTime[] { DateTime.Now.AddDays(2), DateTime.Now.AddDays(2) }; + } + + ``` {% endif %} @@ -55,7 +59,7 @@ When you add a function, determine its return value as `true` for the date that {% if site.core %} ```TagHelper
- +
diff --git a/docs-aspnet/html-helpers/scheduling/calendar/globalization/localization.md b/docs-aspnet/html-helpers/scheduling/calendar/globalization/localization.md index 39fcff5aaa6..5f85a4fc041 100644 --- a/docs-aspnet/html-helpers/scheduling/calendar/globalization/localization.md +++ b/docs-aspnet/html-helpers/scheduling/calendar/globalization/localization.md @@ -13,12 +13,19 @@ The Calendar provides options for localizing its user interface by utilizing its To enable the desired culture, add a reference to the script file before the Calendar is initialized and include the desired culture in the settings of the helper. ```HtmlHelper - + @(Html.Kendo().Calendar() .Name("calendar") .Culture("de-DE") ) ``` +{% if site.core %} +```TagHelper + + + +``` +{% endif %} ## See Also diff --git a/docs-aspnet/html-helpers/scheduling/calendar/overview.md b/docs-aspnet/html-helpers/scheduling/calendar/overview.md index 663c77a447d..c74d6bb297b 100644 --- a/docs-aspnet/html-helpers/scheduling/calendar/overview.md +++ b/docs-aspnet/html-helpers/scheduling/calendar/overview.md @@ -36,7 +36,10 @@ The following example demonstrates how to define the Calendar by using the Calen ``` {% if site.core %} ```TagHelper - + ``` {% endif %} @@ -80,6 +83,26 @@ The following example demonstrates how to subscribe to events by a handler name. } ``` +{% if site.core %} +```TagHelper + + + +``` +{% endif %} ### Handling by Template Delegate @@ -104,6 +127,22 @@ The following example demonstrates how to subscribe to events by a template dele ) ) ``` +{% if site.core %} +```TagHelper.cshtml + + +``` +{% endif %} ## Referencing Existing Instances diff --git a/docs-aspnet/html-helpers/scheduling/calendar/selection.md b/docs-aspnet/html-helpers/scheduling/calendar/selection.md index 6a8314acf9c..11000f6349f 100644 --- a/docs-aspnet/html-helpers/scheduling/calendar/selection.md +++ b/docs-aspnet/html-helpers/scheduling/calendar/selection.md @@ -34,7 +34,7 @@ To perform the multiple date selection, the user can also use the keyboard: ``` {% if site.core %} ```TagHelper - + ``` {% endif %} diff --git a/docs-aspnet/html-helpers/scheduling/calendar/week-numbers.md b/docs-aspnet/html-helpers/scheduling/calendar/week-numbers.md index c0fce2b3b10..7eb0e02270b 100644 --- a/docs-aspnet/html-helpers/scheduling/calendar/week-numbers.md +++ b/docs-aspnet/html-helpers/scheduling/calendar/week-numbers.md @@ -21,7 +21,7 @@ The `weekNumber` option enables the Calendar to display the week number on an an ``` {% if site.core %} ```TagHelper - + ``` {% endif %} @@ -46,7 +46,7 @@ You can use these properties in the template to make additional calculations. ``` {% if site.core %} ```TagHelper - + ```