Skip to content

Commit d148587

Browse files
author
Kendo Bot
committed
Sync with Kendo UI Professional
1 parent e7ca4a7 commit d148587

File tree

44 files changed

+1663
-341
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

44 files changed

+1663
-341
lines changed

‎docs-aspnet/html-helpers/charts/chart-types/line-charts.md‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,32 @@ To configure the axes, use the `CategoryAxis` and `ValueAxis` settings. Multiple
5656
)
5757
)
5858
```
59+
{% if site.core %}
60+
```TagHelper
61+
<kendo-chart name="chart">
62+
<chart-title text="Internet Users"></chart-title>
63+
<chart-legend position="ChartLegendPosition.Bottom"></chart-legend>
64+
<series-defaults type="ChartSeriesType.Line" />
65+
<series>
66+
<series-item data='new double[] { 15.7, 16.7, 20, 23.5, 26.6 }' name="World">
67+
</series-item>
68+
<series-item data='new double[] { 67.96, 68.93, 75, 74, 78}' name="United States">
69+
</series-item>
70+
</series>
71+
<category-axis>
72+
<category-axis-item categories='new string[] { "2005", "2006", "2007", "2008", "2009" }'>
73+
<major-grid-lines visible="false" />
74+
</category-axis-item>
75+
</category-axis>
76+
<value-axis>
77+
<value-axis-item type="numeric">
78+
<labels format="{0}%">
79+
</labels>
80+
</value-axis-item>
81+
</value-axis>
82+
</kendo-chart>
83+
```
84+
{% endif %}
5985

6086
The configuration from the previous example results in the following Line Chart.
6187

@@ -76,6 +102,14 @@ The supported line styles are:
76102
seriesDefaults.Line().Style(ChartLineStyle.Smooth)
77103
)
78104
```
105+
{% if site.core %}
106+
```TagHelper
107+
<series-defaults type="ChartSeriesType.Line"></series-defaults>
108+
<series>
109+
<series-item style="ChartSeriesStyle.Smooth"></series-item>
110+
</series>
111+
```
112+
{% endif %}
79113

80114
You can also set the line style for each Line series individually.
81115

@@ -86,6 +120,22 @@ You can also set the line style for each Line series individually.
86120
series.Line(new double[] { 67.96, 68.93, 75, 54, 78 }).Name("United States").Style(ChartLineStyle.Smooth);
87121
})
88122
```
123+
{% if site.core %}
124+
```TagHelper
125+
<series>
126+
<series-item type="ChartSeriesType.Line"
127+
data='new double[] { 15.7, 16.7, 20, 23.5, 26.6 }'
128+
name="World"
129+
style="ChartSeriesStyle.Smooth">
130+
</series-item>
131+
<series-item type="ChartSeriesType.Line"
132+
data='new double[] { 67.96, 68.93, 75, 74, 78}'
133+
name="United States"
134+
style="ChartSeriesStyle.Smooth">
135+
</series-item>
136+
</series>
137+
```
138+
{% endif %}
89139

90140
![A step-line Line Chart](images/chart-step-line.png)
91141

@@ -104,6 +154,21 @@ By default, the Chart draws its Line series as solid lines. You can configure th
104154
series.Line(new double[] { 67.96, 68.93, 75, 74, 78 }).Name("United States");
105155
})
106156
```
157+
{% if site.core %}
158+
```TagHelper
159+
<series>
160+
<series-item type="ChartSeriesType.Line"
161+
data='new double[] { 15.7, 16.7, 20, 23.5, 26.6 }'
162+
name="World"
163+
dash-type="DashType.Dot">
164+
</series-item>
165+
<series-item type="ChartSeriesType.Line"
166+
data='new double[] { 67.96, 68.93, 75, 74, 78}'
167+
name="United States">
168+
</series-item>
169+
</series>
170+
```
171+
{% endif %}
107172

108173
![A dotted Line Series](images/chart-dotted-line.png)
109174

@@ -119,6 +184,20 @@ The series markers are the visuals that represent the point value in the Line se
119184
.Background("yellow")
120185
);
121186
```
187+
{% if site.core %}
188+
```TagHelper
189+
<series>
190+
<series-item type="ChartSeriesType.Line"
191+
data='new double[] { 15.7, 16.7, 20, 23.5, 26.6 }'
192+
name="World">
193+
<markers type="ChartMarkerShape.Square"
194+
background="yellow"
195+
rotation="45">
196+
</markers>
197+
</series-item>
198+
</series>
199+
```
200+
{% endif %}
122201

123202
![A Line Chart with custom markers](images/chart-line-markers.png)
124203

‎docs-aspnet/html-helpers/charts/chart-types/pie-charts.md‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,25 @@ The following example demonstrates how to define a single series of type `"pie"`
5555
)
5656
)
5757
```
58+
{% if site.core %}
59+
```TagHelper
60+
<kendo-chart name="chart" series-colors='new string[] { "#03a9f4", "#ff9800", "#fad84a", "#4caf50" }'>
61+
<chart-title text="Break-up of Spain Electricity Production for 2008"></chart-title>
62+
<chart-legend position="ChartLegendPosition.Bottom"></chart-legend>
63+
<series-defaults type="ChartSeriesType.Pie"></series-defaults>
64+
<series>
65+
<series-item data='new dynamic[] {
66+
new {category="Hydro",value=22,color="#9de219"},
67+
new {category="Solar",value=2,color="#90cc38"},
68+
new {category="Nuclear",value=49,color="#068c35"},
69+
new {category="Wind",value=27,color="#006634"}}'>
70+
<overlay gradient="ChartSeriesGradient.RoundedBevel" />
71+
</series-item>
72+
</series>
73+
<tooltip visible="true" template="${ category } - ${ value }%"></tooltip>
74+
</kendo-chart>
75+
```
76+
{% endif %}
5877
![A sample Pie Chart](images/pie-chart.png)
5978

6079
## Configuring the Effects Overlay
@@ -68,6 +87,15 @@ Each segment has a transparent effect overlay that adds depth to the two-dimensi
6887
.Overlay(o => o.Gradient(ChartSeriesGradient.None));
6988
})
7089
```
90+
{% if site.core %}
91+
```TagHelper
92+
<series>
93+
<series-item data='new dynamic[] {}'>
94+
<overlay gradient="ChartSeriesGradient.None" />
95+
</series-item>
96+
</series>
97+
```
98+
{% endif %}
7199

72100
The Pie Chart supports the following `ChartSeriesGradient` options:
73101

‎docs-aspnet/html-helpers/charts/data-binding.md‎

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,35 @@ You can specify the data points of the Charts as part of the series definitions.
4646
)
4747
)
4848
```
49+
{% if site.core %}
50+
```TagHelper
51+
<kendo-chart name="chart">
52+
<series-defaults type="ChartSeriesType.Line"></series-defaults>
53+
<series>
54+
<series-item name="India" style="ChartSeriesStyle.Smooth" data="new double[] { 3.907, 7.943, 7.848, 9.284, 9.263, 9.801, 3.890, 8.238, 9.552, 6.855 }">
55+
</series-item>
56+
<series-item name="World" style="ChartSeriesStyle.Smooth" data="new double[] { 1.988, 2.733, 3.994, 3.464, 4.001, 3.939, 1.333, -2.245, 4.339, 2.727 }">
57+
</series-item>
58+
<series-item name="Russian Federation" style="ChartSeriesStyle.Smooth" data="new double[] { 4.743, 7.295, 7.175, 6.376, 8.153, 8.535, 5.247, -7.832, 4.3, 4.3 }">
59+
</series-item>
60+
<series-item name="Haiti" style="ChartSeriesStyle.Smooth" data="new double[] { -0.253, 0.362, -3.519, 1.799, 2.252, 3.343, 0.843, 2.877, -5.416, 5.590 }">
61+
</series-item>
62+
</series>
63+
<category-axis>
64+
<category-axis-item categories='new string[] { "2002", "2003", "2004", "2005", "2006", "2007", "2008", "2009", "20010", "2011", }'>
65+
<major-grid-lines visible="false"/>
66+
</category-axis-item>
67+
</category-axis>
68+
<value-axis>
69+
<value-axis-item type="numeric" axis-crossing-value="new object[] { -10 }">
70+
<labels format="{0}%"></labels>
71+
<line visible="false" />
72+
</value-axis-item>
73+
</value-axis>
74+
<tooltip visible="true" format="{0}%"></tooltip>
75+
</kendo-chart>
76+
```
77+
{% endif %}
4978

5079
### Binding Scatter Series to Inline Data
5180

@@ -123,6 +152,32 @@ A more flexible alternative is to provide the series with an array of objects. T
123152
)
124153
)
125154
```
155+
{% if site.core %}
156+
```TagHelper
157+
<kendo-chart name="chart">
158+
<chart-legend visible="false"></chart-legend>
159+
<series-defaults type="ChartSeriesType.Donut"></series-defaults>
160+
<chart-area background="transparent"></chart-area>
161+
<series>
162+
<series-item start-angle="150" name="2012" data='new dynamic[] {
163+
new {category = "Asia",value = 53.8,color = "#9de219"},
164+
new {category = "Europe",value = 16.1,color = "#90cc38"},
165+
new {category = "Latin America",value = 11.3,color = "#068c35"},
166+
new {category = "Africa",value = 9.6,color = "#006634"},
167+
new {category = "Middle East",value = 5.2,color = "#004d38"},
168+
new {category = "North America",value = 3.6,color = "#033939"}
169+
}'>
170+
<labels visible="true"
171+
position="ChartSeriesLabelsPosition.OutsideEnd"
172+
template="#= category #: \n #= value#%"
173+
background="transparent">
174+
</labels>
175+
</series-item>
176+
</series>
177+
<tooltip visible="true" template="#= category # (#= series.name #): #= value #%"></tooltip>
178+
</kendo-chart>
179+
```
180+
{% endif %}
126181

127182
## Local Data
128183

@@ -188,6 +243,33 @@ You can bind the Chart to a data set in the view model or to items that are stor
188243
)
189244
)
190245
```
246+
{% if site.core %}
247+
```TagHelper
248+
@model IEnumerable<LocalBindingExample.Models.InternetUsers>
249+
250+
<kendo-chart name="chart">
251+
<chart-title text="Internet Users in United States"></chart-title>
252+
<chart-legend visible="false"></chart-legend>
253+
<series-defaults type="ChartSeriesType.Line" />
254+
<series>
255+
<series-item name="United States" field="Value" category-field="Year" data="@Model.ToArray()">
256+
<labels format="{0}%" visible="true"></labels>
257+
</series-item>
258+
</series>
259+
<category-axis>
260+
<category-axis-item>
261+
<major-grid-lines visible="false" />
262+
</category-axis-item>
263+
</category-axis>
264+
<value-axis>
265+
<value-axis-item type="numeric">
266+
<labels format="{0}%"></labels>
267+
<line visible="false" />
268+
</value-axis-item>
269+
</value-axis>
270+
</kendo-chart>
271+
```
272+
{% endif %}
191273

192274
## Remote Data
193275

@@ -274,6 +356,39 @@ To bind to remote data by using the DataSource component:
274356
)
275357
)
276358
```
359+
{% if site.core %}
360+
```TagHelper
361+
<kendo-chart name="chart">
362+
<chart-title text="Spain electricity production (GWh)"></chart-title>
363+
<chart-legend visible="true" position="ChartLegendPosition.Top"></chart-legend>
364+
<datasource>
365+
<transport>
366+
<read type="post" url="@Url.Action("_SpainElectricityProduction","Line_Charts")" />
367+
</transport>
368+
</datasource>
369+
<series-defaults type="ChartSeriesType.Line"></series-defaults>
370+
<series>
371+
<series-item name="Nuclear" field="Nuclear" category-field="Year"></series-item>
372+
<series-item name="Hydro" field="Hydro" category-field="Year"></series-item>
373+
<series-item name="Wind" field="Wind" category-field="Year"></series-item>
374+
</series>
375+
<category-axis>
376+
<category-axis-item>
377+
<labels>
378+
<chart-category-axis-labels-rotation angle="-90" />
379+
</labels>
380+
<crosshair visible="true"></crosshair>
381+
</category-axis-item>
382+
</category-axis>
383+
<value-axis>
384+
<value-axis-item major-unit="10000">
385+
<labels format="{0:N0}"></labels>
386+
</value-axis-item>
387+
</value-axis>
388+
<tooltip visible="true" shared="true" format="{0:N0}"></tooltip>
389+
</kendo-chart>
390+
```
391+
{% endif %}
277392
278393
1. (Optional) Configure a Custom DataSource.
279394

‎docs-aspnet/html-helpers/charts/elements/notes.md‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,25 @@ The following example demonstrates how to add a note for each series point.
3737
)
3838
)
3939
```
40+
{% if site.core %}
41+
```TagHelper
42+
<kendo-chart name="chart">
43+
<series-defaults type="ChartSeriesType.Line" />
44+
<series>
45+
<series-item data='new object[] {
46+
new {value = 1, noteText = "min"},
47+
new {value = 2},
48+
new {value = 3,noteText = "max"}
49+
}'>
50+
<notes position="ChartNotePosition.Bottom">
51+
<chart-series-notes-label position="ChartNoteLabelPosition.Outside">
52+
</chart-series-notes-label>
53+
</notes>
54+
</series-item>
55+
</series>
56+
</kendo-chart>
57+
```
58+
{% endif %}
4059

4160
## Using Templates
4261

@@ -76,6 +95,26 @@ The template provides access to all information that is associated with the poin
7695
)
7796
)
7897
```
98+
{% if site.core %}
99+
```TagHelper
100+
<kendo-chart name="chart">
101+
<series-defaults type="ChartSeriesType.Line" />
102+
<series>
103+
<series-item data='new object[] {
104+
new {value = 1, noteText = "min"},
105+
new { value = 2},
106+
new {value = 3,noteText = "max"}
107+
}'>
108+
<notes position="ChartNotePosition.Bottom">
109+
<chart-series-notes-label position="ChartNoteLabelPosition.Outside"
110+
template="#= dataItem.noteText # of the series">
111+
</chart-series-notes-label>
112+
</notes>
113+
</series-item>
114+
</series>
115+
</kendo-chart>
116+
```
117+
{% endif %}
79118

80119
## See Also
81120

‎docs-aspnet/html-helpers/editors/autocomplete/appearance.md‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -393,6 +393,28 @@ With the new rendering, the AutoComplete input element must be targeted by using
393393

394394
$(".k-input-inner") // Returns a reference to the input element in the new rendering.
395395

396+
The following example showcases how to change the background colors of the input and button elements of the **AutoComplete** in both the new, and the old rendering:
397+
398+
```
399+
<style>
400+
/* Doesn't work BEFORE R1 2022 */
401+
.k-input-inner{ /* change the input field style */
402+
background-color:red;
403+
}
404+
.k-list-item{ /* change the style of the items */
405+
background-color:red;
406+
}
407+
408+
/* Doesn't work AFTER R1 2022 */
409+
.k-input{ /* change the input field style */
410+
background-color:red;
411+
}
412+
.k-item{ /* change the style of the items */
413+
background-color:red;
414+
}
415+
</style>
416+
```
417+
396418
## See Also
397419

398420
* [Appearance Overview Article]({% slug components_rendering_overview %})

0 commit comments

Comments
 (0)