Skip to content

Commit 73bc306

Browse files
author
Kendo Bot
committed
Sync with Kendo UI Professional
1 parent 68f8cc8 commit 73bc306

File tree

15 files changed

+319
-104
lines changed

15 files changed

+319
-104
lines changed

‎docs-aspnet/html-helpers/diagrams-and-maps/map/overview.md

Lines changed: 49 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,26 @@ The following example demonstrates how to define the Map.
5050
```
5151
{% if site.core %}
5252
```TagHelper
53-
<kendo-map name="map" center="new double[] { 30.268107, -97.744821 }" zoom="3"></kendo-map>
53+
@{
54+
var centerCoordinates = new double[] { 35.268107, -95.744821 };
55+
var locationCoordinates = new double[] { 30.268107, -97.744821 };
56+
var subdomains = new string[] { "a", "b", "c" };
57+
}
58+
59+
<kendo-map name="map" center="centerCoordinates" zoom="2">
60+
<layers>
61+
<layer type="MapLayerType.Tile"
62+
url-template="https://#= subdomain #.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png"
63+
subdomains="subdomains"
64+
attribution="&copy; <a href='https://osm.org/copyright'>OpenStreetMap contributors</a>">
65+
</layer>
66+
</layers>
67+
<markers>
68+
<map-marker location="locationCoordinates" shape="MapMarkersShape.PinTarget">
69+
<tooltip content="Austin, TX"></tooltip>
70+
</map-marker>
71+
</markers>
72+
</kendo-map>
5473
```
5574
{% endif %}
5675
```Controller
@@ -91,7 +110,11 @@ The following example demonstrates the basic configuration for the Map component
91110
)
92111
```
93112
```TagHelper
94-
<kendo-map name="map" center="new double[] { 30.268107, -97.744821 }" zoom="3">
113+
@{
114+
var coordinates = new double[] { 30.268107, -97.744821 };
115+
}
116+
117+
<kendo-map name="map" center="coordinates" zoom="3">
95118
<layer-defaults>
96119
<map-marker>
97120
<tooltip>
@@ -102,7 +125,7 @@ The following example demonstrates the basic configuration for the Map component
102125
</map-marker>
103126
</layer-defaults>
104127
<markers>
105-
<map-marker location="new double[] { 30.268107, -97.744821 }" shape="MapMarkersShape.PinTarget">
128+
<map-marker location="coordinates" shape="MapMarkersShape.PinTarget">
106129
<tooltip content="Austin, TX"></tooltip>
107130
</map-marker>
108131
</markers>
@@ -169,6 +192,29 @@ For a complete example on basic Map events, refer to the [demo on using the even
169192
}
170193
</script>
171194
```
195+
{% if site.core %}
196+
```TagHelper
197+
@{
198+
var subdomains = new string[] { "a", "b", "c" };
199+
}
200+
201+
<kendo-map name="map" on-reset="mapReset">
202+
<layers>
203+
<layer type="MapLayerType.Tile"
204+
url-template="https://#= subdomain #.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png"
205+
subdomains="subdomains"
206+
attribution="&copy; <a href='https://osm.org/copyright'>OpenStreetMap contributors</a>">
207+
</layer>
208+
</layers>
209+
</kendo-map>
210+
211+
<script>
212+
function mapReset(e) {
213+
// Handle the reset event.
214+
}
215+
</script>
216+
```
217+
{% endif %}
172218

173219
## See Also
174220

‎docs-aspnet/html-helpers/layout/badge/overview.md

Lines changed: 76 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -28,17 +28,20 @@ It also provides customizing its content through templates, setting different ty
2828
The following example demonstrates how to define the Badge.
2929

3030
```HtmlHelper
31-
<a class="k-button">
32-
@(Html.Kendo().Badge()
33-
.Name("badge")
34-
.Value("42")
35-
.Appearance("rectangle"))
31+
<a class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md">
32+
@(Html.Kendo().Badge()
33+
.Name("badge")
34+
.Text("42")
35+
.Shape(BadgeShape.Rectangle)
36+
)
3637
</a>
3738
```
3839
{% if site.core %}
3940
```TagHelper
40-
<a class="k-button">
41-
<kendo-badge name="badge" value="42" appearance="rectangle">
41+
<a class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md">
42+
<kendo-badge name="badge"
43+
text="42"
44+
shape="BadgeShape.Rectangle">
4245
</kendo-badge>
4346
</a>
4447
```
@@ -49,18 +52,22 @@ The following example demonstrates how to define the Badge.
4952
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.
5053

5154
```HtmlHelper
52-
<a class="k-button k-badge-overlay">
53-
@(Html.Kendo().Badge()
54-
.Name("badge")
55-
.Value("42")
56-
.Type("warning")
57-
.Appearance("rectangle"))
55+
<a class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-badge-overlay">
56+
@(Html.Kendo().Badge()
57+
.Name("badge")
58+
.Text("42")
59+
.ThemeColor(BadgeColor.Warning)
60+
.Shape(BadgeShape.Rectangle)
61+
)
5862
</a>
5963
```
6064
{% if site.core %}
6165
```TagHelper
62-
<a class="k-button k-badge-overlay">
63-
<kendo-badge name="badge" value="42" type="warning" appearance="rectangle">
66+
<a class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-badge-overlay">
67+
<kendo-badge name="badge"
68+
text="42"
69+
theme-color="BadgeColor.Warning"
70+
shape="BadgeShape.Rectangle">
6471
</kendo-badge>
6572
</a>
6673
```
@@ -71,18 +78,22 @@ The badge also provides the choice to be inline or overlay and set its type. To
7178
With the badge you can customize the content using templates.
7279

7380
```HtmlHelper
74-
<a class="k-button k-badge-overlay">
75-
@(Html.Kendo().Badge()
76-
.Name("badge")
77-
.Value("42")
78-
.Template("#= +value > 10 ? '9+' : value #")
79-
.Appearance("rectangle"))
81+
<a class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-badge-overlay">
82+
@(Html.Kendo().Badge()
83+
.Name("badge")
84+
.Text("42")
85+
.Template("#= this._text > 10 ? '9+' : this._text #")
86+
.Shape(BadgeShape.Rectangle)
87+
)
8088
</a>
8189
```
8290
{% if site.core %}
8391
```TagHelper
84-
<a class="k-button k-badge-overlay">
85-
<kendo-badge name="badge" value="42" type="warning" appearance="rectangle" template="#= +value > 10 ? '9+' : value #">
92+
<a class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-badge-overlay">
93+
<kendo-badge name="badge"
94+
text="42"
95+
shape="BadgeShape.Rectangle"
96+
template="#= this._text > 10 ? '9+' : this._text #">
8697
</kendo-badge>
8798
</a>
8899
```
@@ -124,6 +135,41 @@ You can integrate the Badge into other UI components. The following example demo
124135
#}#
125136
</script>
126137
```
138+
{% if site.core %}
139+
```TagHelper.cshtml
140+
141+
@addTagHelper *, Kendo.Mvc
142+
143+
@(Html.Kendo().Grid<OrderViewModel>()
144+
.Name("grid")
145+
.Columns(columns => {
146+
columns.Bound("OrderID").HtmlAttributes(new { @class = "templateCell" }).ClientTemplateId("orderTemplate");
147+
})
148+
.Events(ev => ev.DataBound("initBadges"))
149+
.DataSource(dataSource => dataSource
150+
.Ajax()
151+
.Read(read => read.Action("Orders_Read", "Grid"))
152+
)
153+
)
154+
155+
<script type="text/html" id="orderTemplate">
156+
#if(OrderID <= 10){#
157+
<kendo-badge name="flag#=OrderID#"
158+
theme-color="BadgeColor.Success"
159+
text="New"
160+
is-in-client-template="true">
161+
</kendo-badge>
162+
#}#
163+
#if(OrderID > 10){#
164+
<kendo-badge name="flag#=OrderID#"
165+
theme-color="BadgeColor.Error"
166+
text="Old"
167+
is-in-client-template="true">
168+
</kendo-badge>
169+
#}#
170+
</script>
171+
```
172+
{% endif %}
127173
```JavaScript
128174
function initBadges(e) {
129175
$(".templateCell").each(function(){
@@ -140,9 +186,9 @@ You can access an existing Button instance by using the [`jQuery.data()`](https:
140186
<a class="k-button k-badge-overlay">
141187
@(Html.Kendo().Badge()
142188
.Name("badge")
143-
.Value("42")
144-
.Template("#= +value > 10 ? '9+' : value #")
145-
.Appearance("rectangle"))
189+
.Text("42")
190+
.Template("#= this._text > 10 ? '9+' : this._text #")
191+
.Shape(BadgeShape.Rectangle)
146192
</a>
147193
148194
<script>
@@ -152,7 +198,10 @@ You can access an existing Button instance by using the [`jQuery.data()`](https:
152198
{% if site.core %}
153199
```TagHelper
154200
<a class="k-button k-badge-overlay">
155-
<kendo-badge name="badge" value="42" type="warning" appearance="rectangle">
201+
<kendo-badge name="badge"
202+
text="42"
203+
template="#= this._text > 10 ? '9+' : this._text #"
204+
shape="BadgeShape.Rectangle">
156205
</kendo-badge>
157206
</a>
158207

‎docs-aspnet/html-helpers/layout/expansionpanel/overview.md

Lines changed: 34 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -32,13 +32,13 @@ The following example demonstrates how to define the ExpansionPanel.
3232
.SubTitle("South America")
3333
.Expanded(true)
3434
.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.")
35-
)
35+
)
3636
```
3737
{% if site.core %}
3838
```TagHelper
3939
<kendo-expansionpanel name="brazil" title="Brazil" sub-title="South America" expanded="true">
4040
<content>
41-
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).
41+
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.
4242
</content>
4343
</kendo-expansionpanel>
4444
```
@@ -54,8 +54,8 @@ The following example demonstrates how to get an instance of the ExpansionPanel.
5454
.Title("Brazil")
5555
.SubTitle("South America")
5656
.Expanded(true)
57-
.Content("...")
58-
)
57+
.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.")
58+
)
5959
6060
<script type="text/javascript">
6161
$(function () {
@@ -69,7 +69,7 @@ The following example demonstrates how to get an instance of the ExpansionPanel.
6969
```TagHelper
7070
<kendo-expansionpanel name="brazil" title="Brazil" sub-title="South America" expanded="true">
7171
<content>
72-
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).
72+
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.
7373
</content>
7474
</kendo-expansionpanel>
7575
@@ -88,12 +88,40 @@ The following example demonstrates how to get an instance of the ExpansionPanel.
8888
* [Default State]({% slug state_htmlhelpers_expansionpanel_aspnetcore %})
8989
* [Keyboard Navigation]({% slug keynav_htmlhelpers_expansionpanel_aspnetcore %})
9090

91-
{% if site.core %}
91+
9292

9393
## Event Handling
9494

9595
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.
9696

97+
```HtmlHelper
98+
@(Html.Kendo().ExpansionPanel()
99+
.Name("brazil")
100+
.Title("Brazil")
101+
.SubTitle("South America")
102+
.Expanded(true)
103+
.Events(e => {
104+
e.Collapse("onCollapse");
105+
e.Complete("onComplete");
106+
e.Expand("onExpand")
107+
})
108+
.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.")
109+
)
110+
111+
<script>
112+
function onExpand() {
113+
console.log("Expand");
114+
};
115+
function onCollapse() {
116+
console.log("Collapse");
117+
};
118+
function onComplete() {
119+
console.log("Complete");
120+
};
121+
</script>
122+
```
123+
124+
{% if site.core %}
97125
```TagHelper
98126
<kendo-expansionpanel name="brazil" title="Brazil" sub-title="South America" expanded="true" on-expand="onExpand" on-collapse="onCollapse" on-complete="onComplete">
99127
<content>

‎docs-aspnet/html-helpers/layout/expansionpanel/state.md

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -15,13 +15,13 @@ You can configure the default state of the Telerik UI ExpansionPanel for {{ site
1515
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`.
1616

1717
```HtmlHelper
18-
@(Html.Kendo().ExpansionPanel()
18+
@(Html.Kendo().ExpansionPanel()
1919
.Name("brazil")
2020
.Title("Brazil")
2121
.SubTitle("South America")
2222
.Disabled(true)
23-
.Content("...")
24-
)
23+
.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).")
24+
)
2525
```
2626
{% if site.core %}
2727
```TagHelper
@@ -38,13 +38,13 @@ You can disable the Kendo UI ExpansionPanel component and make the user unable t
3838
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`.
3939

4040
```HtmlHelper
41-
@(Html.Kendo().ExpansionPanel()
42-
.Name("brazil")
43-
.Title("Brazil")
44-
.SubTitle("South America")
45-
.Expanded(true)
46-
.Content("...")
47-
)
41+
@(Html.Kendo().ExpansionPanel()
42+
.Name("brazil")
43+
.Title("Brazil")
44+
.SubTitle("South America")
45+
.Expanded(true)
46+
.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).")
47+
)
4848
```
4949
{% if site.core %}
5050
```TagHelper
@@ -61,13 +61,13 @@ The Kendo UI ExpansionPanel component can be expanded by default. To configure t
6161
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`.
6262

6363
```HtmlHelper
64-
@(Html.Kendo().ExpansionPanel()
64+
@(Html.Kendo().ExpansionPanel()
6565
.Name("brazil")
6666
.Title("Brazil")
6767
.SubTitle("South America")
6868
.Toggleable(false)
69-
.Content("...")
70-
)
69+
.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).")
70+
)
7171
```
7272
{% if site.core %}
7373
```TagHelper
@@ -84,13 +84,13 @@ By default, the user can expand or collapse the ExpansionPanel. To prevent this,
8484
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`.
8585

8686
```HtmlHelper
87-
@(Html.Kendo().ExpansionPanel()
87+
@(Html.Kendo().ExpansionPanel()
8888
.Name("brazil")
8989
.Title("Brazil")
9090
.SubTitle("South America")
91-
Animation(false)
92-
.Content("...")
93-
)
91+
.Animation(false)
92+
.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).")
93+
)
9494
```
9595
{% if site.core %}
9696
```TagHelper

0 commit comments

Comments
 (0)