Sync with Kendo UI Professional

telerik · Aug 3, 2022 · 73bc306 · 73bc306
1 parent 68f8cc8
commit 73bc306
Show file tree

Hide file tree

Showing 15 changed files with 319 additions and 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
@@ -50,7 +50,26 @@ The following example demonstrates how to define the Map.
 ```
 {% if site.core %}
 ```TagHelper
-    <kendo-map name="map" center="new double[] { 30.268107, -97.744821 }" zoom="3"></kendo-map>
+    @{
+        var centerCoordinates = new double[] { 35.268107, -95.744821 };
+        var locationCoordinates = new double[] { 30.268107, -97.744821 };
+        var subdomains = new string[] { "a", "b", "c" };
+    }
+
+    <kendo-map name="map" center="centerCoordinates" zoom="2">
+        <layers>
+            <layer type="MapLayerType.Tile"
+                   url-template="https://#= subdomain #.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png"
+                   subdomains="subdomains"
+                   attribution="&copy; <a href='https://osm.org/copyright'>OpenStreetMap contributors</a>">
+            </layer>
+        </layers>
+        <markers>
+            <map-marker location="locationCoordinates" shape="MapMarkersShape.PinTarget">
+                <tooltip content="Austin, TX"></tooltip>
+            </map-marker>
+        </markers>
+    </kendo-map>
 ```
 {% endif %}
 ```Controller
@@ -91,7 +110,11 @@ The following example demonstrates the basic configuration for the Map component
     )
 ```
 ```TagHelper
-    <kendo-map name="map" center="new double[] { 30.268107, -97.744821 }"              zoom="3">
+    @{
+        var coordinates = new double[] { 30.268107, -97.744821 };
+    }
+
+    <kendo-map name="map" center="coordinates" zoom="3">
         <layer-defaults>
             <map-marker>
                 <tooltip>
@@ -102,7 +125,7 @@ The following example demonstrates the basic configuration for the Map component
             </map-marker>
         </layer-defaults>
         <markers>
-            <map-marker location="new double[] { 30.268107, -97.744821 }"  shape="MapMarkersShape.PinTarget">
+            <map-marker location="coordinates"  shape="MapMarkersShape.PinTarget">
                 <tooltip content="Austin, TX"></tooltip>
             </map-marker>
         </markers>
@@ -169,6 +192,29 @@ For a complete example on basic Map events, refer to the [demo on using the even
         }
     </script>
 ```
+{% if site.core %}
+```TagHelper
+    @{
+        var subdomains = new string[] { "a", "b", "c" };
+    }
+
+    <kendo-map name="map" on-reset="mapReset">
+        <layers>
+            <layer type="MapLayerType.Tile"
+                   url-template="https://#= subdomain #.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png"
+                   subdomains="subdomains"
+                   attribution="&copy; <a href='https://osm.org/copyright'>OpenStreetMap contributors</a>">
+            </layer>
+        </layers>
+    </kendo-map>
+    
+    <script>
+        function mapReset(e) {
+            // Handle the reset event.
+        }
+    </script>
+```
+{% endif %}
 
 ## See Also
 

diff --git 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
-    <a class="k-button">
-    @(Html.Kendo().Badge()
-        .Name("badge")
-        .Value("42")
-        .Appearance("rectangle"))
+    <a class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md">
+        @(Html.Kendo().Badge()
+            .Name("badge")
+            .Text("42")
+            .Shape(BadgeShape.Rectangle)
+        )
     </a>
 ```
 {% if site.core %}
 ```TagHelper
-    <a class="k-button">
-        <kendo-badge name="badge" value="42" appearance="rectangle">
+    <a class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md">
+        <kendo-badge name="badge" 
+                     text="42" 
+                     shape="BadgeShape.Rectangle">
         </kendo-badge>
     </a>
 ```
@@ -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
-    <a class="k-button k-badge-overlay">
-    @(Html.Kendo().Badge()
-        .Name("badge")
-        .Value("42")
-        .Type("warning")
-        .Appearance("rectangle"))
+    <a class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-badge-overlay">
+        @(Html.Kendo().Badge()
+            .Name("badge")
+            .Text("42")
+            .ThemeColor(BadgeColor.Warning)
+            .Shape(BadgeShape.Rectangle)
+        )
     </a>
 ```
 {% if site.core %}
 ```TagHelper
-    <a class="k-button k-badge-overlay">
-        <kendo-badge name="badge" value="42" type="warning" appearance="rectangle">
+    <a class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-badge-overlay">
+        <kendo-badge name="badge" 
+                     text="42" 
+                     theme-color="BadgeColor.Warning" 
+                     shape="BadgeShape.Rectangle">
         </kendo-badge>
     </a>
 ```
@@ -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
-    <a class="k-button k-badge-overlay">
-    @(Html.Kendo().Badge()
-        .Name("badge")
-        .Value("42")
-        .Template("#= +value > 10 ? '9+' : value #")
-        .Appearance("rectangle"))
+    <a class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-badge-overlay">
+        @(Html.Kendo().Badge()
+            .Name("badge")
+            .Text("42")
+            .Template("#= this._text > 10 ? '9+' : this._text #")
+            .Shape(BadgeShape.Rectangle)
+        )
     </a>
 ```
 {% if site.core %}
 ```TagHelper
-    <a class="k-button k-badge-overlay">
-        <kendo-badge name="badge" value="42" type="warning" appearance="rectangle" template="#= +value > 10 ? '9+' : value #">
+    <a class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-badge-overlay">
+        <kendo-badge name="badge" 
+                     text="42" 
+                     shape="BadgeShape.Rectangle" 
+                     template="#= this._text > 10 ? '9+' : this._text #">
         </kendo-badge>
     </a>
 ```
@@ -124,6 +135,41 @@ You can integrate the Badge into other UI components. The following example demo
         #}#
     </script>
 ```
+{% if site.core %}
+```TagHelper.cshtml
+
+    @addTagHelper *, Kendo.Mvc
+
+    @(Html.Kendo().Grid<OrderViewModel>()
+        .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"))
+       )
+    )
+
+    <script type="text/html" id="orderTemplate">
+        #if(OrderID <= 10){#
+            <kendo-badge name="flag#=OrderID#"
+                         theme-color="BadgeColor.Success"
+                         text="New"
+                         is-in-client-template="true">
+            </kendo-badge>                         
+        #}#
+        #if(OrderID > 10){#
+            <kendo-badge name="flag#=OrderID#"
+                         theme-color="BadgeColor.Error"
+                         text="Old"
+                         is-in-client-template="true">
+            </kendo-badge>
+        #}#
+    </script>
+```
+{% 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:
     <a class="k-button k-badge-overlay">
     @(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)
     </a>
 
     <script>
@@ -152,7 +198,10 @@ You can access an existing Button instance by using the [`jQuery.data()`](https:
 {% if site.core %}
 ```TagHelper
     <a class="k-button k-badge-overlay">
-        <kendo-badge name="badge" value="42" type="warning" appearance="rectangle">
+        <kendo-badge name="badge" 
+                     text="42"
+                     template="#= this._text > 10 ? '9+' : this._text #"
+                     shape="BadgeShape.Rectangle">
         </kendo-badge>
     </a>
 

diff --git a/docs-aspnet/html-helpers/layout/expansionpanel/overview.md b/docs-aspnet/html-helpers/layout/expansionpanel/overview.md
@@ -32,13 +32,13 @@ The following example demonstrates how to define the ExpansionPanel.
             .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). As brazilwood produces a deep red dye, it was highly valued by the European textile industry and was the earliest commercially exploited product from Brazil.")
-            )
+     )
 ```
 {% if site.core %}
 ```TagHelper
 	<kendo-expansionpanel name="brazil" title="Brazil" sub-title="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).
+            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). As brazilwood produces a deep red dye, it was highly valued by the European textile industry and was the earliest commercially exploited product from Brazil.
         </content>
     </kendo-expansionpanel>
 ```
@@ -54,8 +54,8 @@ The following example demonstrates how to get an instance of the ExpansionPanel.
             .Title("Brazil")
             .SubTitle("South America")
             .Expanded(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). As brazilwood produces a deep red dye, it was highly valued by the European textile industry and was the earliest commercially exploited product from Brazil.")
+    )
 
     <script type="text/javascript">
         $(function () {
@@ -69,7 +69,7 @@ The following example demonstrates how to get an instance of the ExpansionPanel.
 ```TagHelper
     <kendo-expansionpanel name="brazil" title="Brazil" sub-title="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).
+            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). As brazilwood produces a deep red dye, it was highly valued by the European textile industry and was the earliest commercially exploited product from Brazil.
         </content>
     </kendo-expansionpanel>
 
@@ -88,12 +88,40 @@ The following example demonstrates how to get an instance of the ExpansionPanel.
 * [Default State]({% slug state_htmlhelpers_expansionpanel_aspnetcore %})
 * [Keyboard Navigation]({% slug keynav_htmlhelpers_expansionpanel_aspnetcore %})
 
-{% if site.core %}
+
 
 ## Event Handling
 
 The below example demonstrates how the the `Expand`, `Collapse` and `Complete` events of the ExpansionPanel can be intercepted to output messages in the console when these events are raised. They can also be hooked for customizations or to execute custom logic, if necessary.
 
+```HtmlHelper
+    @(Html.Kendo().ExpansionPanel()
+            .Name("brazil")
+            .Title("Brazil")
+            .SubTitle("South America")
+            .Expanded(true)
+            .Events(e => {
+                e.Collapse("onCollapse");
+                e.Complete("onComplete");
+                e.Expand("onExpand")
+            })
+            .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). As brazilwood produces a deep red dye, it was highly valued by the European textile industry and was the earliest commercially exploited product from Brazil.")
+     )
+     
+     <script>
+        function onExpand() {
+            console.log("Expand");
+        };
+        function onCollapse() {
+             console.log("Collapse");
+        };
+        function onComplete() {
+            console.log("Complete");
+        };
+    </script>
+```
+
+{% if site.core %}
 ```TagHelper
 	<kendo-expansionpanel name="brazil" title="Brazil" sub-title="South America" expanded="true" on-expand="onExpand" on-collapse="onCollapse" on-complete="onComplete">
         <content>

diff --git 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