Skip to content

Commit 048bd88

Browse files
kendo-botkendo-bot
committed
Sync with Kendo UI Professional
1 parent 45691c5 commit 048bd88

File tree

6 files changed

+453
-109
lines changed

6 files changed

+453
-109
lines changed

‎docs-aspnet/_config.yml‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,6 @@ html-helpers/navigation/tabstrip/security-trimming.md,
5959
html-helpers/navigation/tabstrip/forms.md,
6060
html-helpers/navigation/treeview/security-trimming.md,
6161
html-helpers/editors/editor/import-export.md,
62-
html-helpers/charts/how-to/*,
6362
html-helpers/data-management/grid/how-to/*,
6463
html-helpers/data-management/treelist/how-to/*,
6564
html-helpers/diagrams-and-maps/map/how-to/*,
@@ -71,6 +70,9 @@ html-helpers/editors/multiselect/how-to/*,
7170
html-helpers/interactivity/progressbar/how-to/*,
7271
html-helpers/layout/window/how-to/*,
7372
html-helpers/navigation/menu/how-to/*,
73+
html-helpers/navigation/panelbar/how-to/*,
74+
html-helpers/navigation/treeview/how-to/*,
75+
html-helpers/scheduling/scheduler/how-to/*,
7476
tag-helpers/*,
7577
knowledge-base/switch-change-messages-inside-grid.md,
7678
knowledge-base/upload-files-to-database.md,

‎docs-aspnet/html-helpers/layout/window/how-to/update-dialog-ajax-forms.md‎

Lines changed: 0 additions & 17 deletions
This file was deleted.

‎docs-aspnet/knowledge-base/chart-bind-to-dynamic-series.md‎

Lines changed: 53 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,29 @@ title: Bind Chart to Dynamic Series
33
description: Learn how to bind a Telerik UI for {{ site.framework }} Chart to dynamic series.
44
type: how-to
55
page_title: Binding a Chart to dynamic series
6-
previous_url: html-helpers/charts/how-to/create-dynamic-series
6+
previous_url: /html-helpers/charts/how-to/create-dynamic-series, /helpers/charts/how-to/create-dynamic-series
77
slug: chart-bind-to-dynamic-series
88
tags: chart, databound, dynamic, series
99
res_type: kb
1010
---
1111

12-
# Description
13-
How can I bind a Telerik UI for {{ site.framework }} Chart to dynamic series?
14-
15-
# Example
12+
## Environment
13+
14+
<table>
15+
<tr>
16+
<td>Product</td>
17+
<td>{{ site.product }} Chart</td>
18+
</tr>
19+
<tr>
20+
<td>Product Version</td>
21+
<td>Created with version 2024.4.1112</td>
22+
</tr>
23+
</table>
24+
25+
## Description
26+
How can I bind the Chart to dynamic series?
27+
28+
## Example
1629
```HtmlHelper
1730
@model TelerikAspNetCoreApp4.Models.MyViewModel
1831
@@ -29,40 +42,6 @@ How can I bind a Telerik UI for {{ site.framework }} Chart to dynamic series?
2942
)
3043
```
3144

32-
```Controller
33-
public class HomeController : Controller
34-
{
35-
public ActionResult Index()
36-
{
37-
var model = new MyViewModel();
38-
model.Categories.AddRange(new string[] { "A", "B", "C" });
39-
40-
model.Series.Add(new MySeriesData()
41-
{
42-
Name = "Foo",
43-
Stack = "A",
44-
Data = new decimal[] { 1, 2, 3 }
45-
});
46-
47-
model.Series.Add(new MySeriesData()
48-
{
49-
Name = "Bar",
50-
Stack = "A",
51-
Data = new decimal[] { 2, 3, 4 }
52-
});
53-
54-
model.Series.Add(new MySeriesData()
55-
{
56-
Name = "Baz",
57-
Stack = "B",
58-
Data = new decimal[] { 10, 20, 30 }
59-
});
60-
61-
return View(model);
62-
}
63-
}
64-
```
65-
6645
{% if site.core %}
6746
```TagHelper
6847
@addTagHelper *, Kendo.Mvc
@@ -97,7 +76,41 @@ How can I bind a Telerik UI for {{ site.framework }} Chart to dynamic series?
9776
```
9877
{% endif %}
9978

100-
To see the full examples, refer to the GitHub repository of the [sample project on dynamic series](https://github.com/telerik/ui-for-aspnet-mvc-examples/tree/master/Telerik.Examples.Mvc/Telerik.Examples.Mvc/Areas/ChartDynamicSeries).
79+
```Controller
80+
public class HomeController : Controller
81+
{
82+
public ActionResult Index()
83+
{
84+
var model = new MyViewModel();
85+
model.Categories.AddRange(new string[] { "A", "B", "C" });
86+
87+
model.Series.Add(new MySeriesData()
88+
{
89+
Name = "Foo",
90+
Stack = "A",
91+
Data = new decimal[] { 1, 2, 3 }
92+
});
93+
94+
model.Series.Add(new MySeriesData()
95+
{
96+
Name = "Bar",
97+
Stack = "A",
98+
Data = new decimal[] { 2, 3, 4 }
99+
});
100+
101+
model.Series.Add(new MySeriesData()
102+
{
103+
Name = "Baz",
104+
Stack = "B",
105+
Data = new decimal[] { 10, 20, 30 }
106+
});
107+
108+
return View(model);
109+
}
110+
}
111+
```
112+
113+
To see the complete example, refer to the [ASP.NET MVC application](https://github.com/telerik/ui-for-aspnet-mvc-examples/tree/master/Telerik.Examples.Mvc/Telerik.Examples.Mvc/Areas/ChartDynamicSeries) in the [UI for ASP.NET MVC Examples repository](https://github.com/telerik/ui-for-aspnet-mvc-examples/tree/master). {% if site.core %}You can use this as a starting point to configure the same setup in an ASP.NET Core project.{% endif %}
101114

102115
## More {{ site.framework }} Chart Resources
103116

‎docs-aspnet/knowledge-base/chart-bind-to-signalr.md‎

Lines changed: 27 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,33 @@
11
---
22
title: Bind Chart to SignalR
3-
description: Learn how to bind a Telerik UI for {{ site.framework }} Chart to SignalR.
3+
description: Learn how to bind a Telerik UI for {{ site.framework }} Chart to a SignalR DataSource.
44
type: how-to
55
page_title: Binding a Chart to SignalR
6-
previous_url: html-helpers/charts/how-to/binding-to-singalr
6+
previous_url: /helpers/charts/how-to/binding-to-singalr, /html-helpers/charts/how-to/binding-to-singalr
77
slug: chart-bind-to-signalr
88
tags: chart, databound, signalr
99
res_type: kb
1010
---
1111

12-
# Description
13-
How can I bind a Telerik UI for {{ site.framework }} Chart to SignalR?
14-
15-
# Example
12+
## Environment
13+
<table>
14+
<tr>
15+
<td>Product</td>
16+
<td>{{ site.product }} Chart</td>
17+
</tr>
18+
<tr>
19+
<td>Product Version</td>
20+
<td>Created with version 2024.4.1112</td>
21+
</tr>
22+
</table>
23+
24+
## Description
25+
How can I bind the Chart to a [SignalR](https://dotnet.microsoft.com/en-us/apps/aspnet/signalr) DataSource?
26+
27+
## Solution
1628
```HtmlHelper
29+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/jquery.signalR.min.js"></script>
30+
1731
@(Html.Kendo().Notification()
1832
.Name("notification")
1933
.Width("100%")
@@ -71,14 +85,12 @@ How can I bind a Telerik UI for {{ site.framework }} Chart to SignalR?
7185
```
7286

7387
```JavaScript
74-
<script src="https://cdn.jsdelivr.net/npm/[email protected]/jquery.signalR.min.js"></script>
75-
76-
<script>
77-
var hubUrl = "https://demos.telerik.com/kendo-ui/service/signalr/hubs";
78-
var connection = $.hubConnection(hubUrl, { useDefaultPath: false });
79-
var hub = connection.createHubProxy("productHub");
80-
var hubStart = connection.start({ jsonp: true });
81-
</script>
88+
<script>
89+
var hubUrl = "https://demos.telerik.com/kendo-ui/service/signalr/hubs";
90+
var connection = $.hubConnection(hubUrl, { useDefaultPath: false });
91+
var hub = connection.createHubProxy("productHub");
92+
var hubStart = connection.start({ jsonp: true });
93+
</script>
8294
```
8395
```Styles
8496
<style>
@@ -88,7 +100,7 @@ How can I bind a Telerik UI for {{ site.framework }} Chart to SignalR?
88100
</style>
89101
```
90102

91-
For the complete implementation refer to the GitHub repo with the [sample project of a SignalR-bound Chart](https://github.com/telerik/ui-for-aspnet-mvc-examples/tree/master/Telerik.Examples.Mvc/Telerik.Examples.Mvc/Areas/ChartSignalR).
103+
For the complete implementation, refer to the [ASP.NET MVC application](https://github.com/telerik/ui-for-aspnet-mvc-examples/tree/master/Telerik.Examples.Mvc/Telerik.Examples.Mvc/Areas/ChartSignalR) in the [UI for ASP.NET MVC Examples repository](https://github.com/telerik/ui-for-aspnet-mvc-examples/tree/master). {% if site.core %}You can use this as a starting point to configure the same behavior in an ASP.NET Core project.{% endif %}
92104

93105
## More {{ site.framework }} Chart Resources
94106

‎docs-aspnet/knowledge-base/chart-in-grid-column.md‎

Lines changed: 59 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,36 @@
11
---
2-
title: Using Chart in column of a Grid
3-
description: Learn how to use a Telerik UI for {{ site.framework }} Chart in a column of a Grid.
2+
title: Displaying Chart in a Column of a Grid
3+
description: Learn how to display a Telerik UI for {{ site.framework }} Chart in a column cell of a Telerik UI for {{ site.framework }} Grid.
44
type: how-to
5-
page_title: Using a Chart in a column of a Grid
6-
previous_url: /helpers/charts/how-to/use-chart-in-ajax-grid-column, html-helpers/charts/how-to/howto_createchartinajaxgridcolumn_chartaspnetmvc
5+
page_title: Displaying Chart in a Column of a Grid
6+
previous_url: /helpers/charts/how-to/use-chart-in-ajax-grid-column, /html-helpers/charts/how-to/use-chart-in-ajax-grid-column
77
slug: chart-in-grid-column
88
tags: chart, grid, column, template
99
res_type: kb
1010
---
1111

12-
# Description
13-
How can I use a Telerik UI for {{ site.framework }} Chart in a column of a Grid?
12+
## Environment
13+
14+
<table>
15+
<tr>
16+
<td>Product</td>
17+
<td>{{ site.product }} Chart</td>
18+
</tr>
19+
<tr>
20+
<td>Product Version</td>
21+
<td>Created with version 2024.4.1112</td>
22+
</tr>
23+
</table>
1424

15-
# Solution
25+
## Description
26+
How can I initialize a Chart into a specified [Grid]({% slug htmlhelpers_grid_aspnetcore_overview %}) column?
1627

17-
1. Declare the Telerik UI for {{ site.framework }} Grid.
18-
1. Use column [`Templates`](https://docs.telerik.com/aspnet-core/html-helpers/data-management/grid/templates/overview) for the columns of the Grid.
19-
1. Add the declarations for the Charts in the Templates.
20-
1. Use the [`DataBinding`](https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/events/databinding) and [`DataBound`](https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/events/databound) Events of the Grid.
21-
1. In the Event handlers, use the [`destroy`](https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/methods/destroy) and [`eval`](https://www.w3schools.com/jsref/jsref_eval.asp#:~:text=The%20eval()%20method%20evaluates,eval()%20executes%20the%20statements.) methods to render the Charts.
28+
## Solution
29+
30+
1. Declare the Grid component.
31+
1. Use the [`Template()`](/api/kendo.mvc.ui.fluent/gridcolumnfactory#templatesystemstring) option of the Grid column to define the Charts.
32+
1. Handle the [`DataBinding`](/api/kendo.mvc.ui.fluent/grideventbuilder#databindingsystemstring) and [`DataBound`](/api/kendo.mvc.ui.fluent/grideventbuilder#databoundsystemstring) events of the Grid.
33+
1. Within the event handlers, call the [`destroy`](https://docs.telerik.com/kendo-ui/api/javascript/kendo/methods/destroy) method and the jQuery [`eval`](https://www.w3schools.com/jsref/jsref_eval.asp#:~:text=The%20eval()%20method%20evaluates,eval()%20executes%20the%20statements.) method to render the Charts. By design, the script tags are not automatically evaluated inside the Grid column template, so the scripts must be evaluated manually in the `DataBound` event of the Grid..
2234

2335

2436
```HtmlHelper
@@ -66,42 +78,53 @@ How can I use a Telerik UI for {{ site.framework }} Chart in a column of a Grid?
6678
{% if site.core %}
6779
```TagHelper
6880
@addTagHelper *, Kendo.Mvc
69-
@{
70-
var categories = new string[] { "2000", "2001", "2002", "2003" };
71-
}
7281
73-
<kendo-grid name="grid2" data-binding="onDataBinding" data-bound="onDataBound" >
74-
<datasource type="DataSourceTagHelperType.Ajax" page-size="20" server-operation="false" data="@Model">
75-
<schema>
76-
<model id="ID">
77-
</model>
78-
</schema>
79-
</datasource>
82+
@model IEnumerable<TelerikAspNetCoreApp26.Models.ViewModel>
8083
84+
<kendo-grid name="grid" on-data-binding="onDataBinding" on-data-bound="onDataBound">
8185
<columns>
8286
<column field="ID" title="ID"></column>
8387
8488
<column title="Chart Remote Data">
8589
<column-template>
86-
<kendo-chart name="ID">
87-
<category-axis>
88-
<category-axis-item categories="categories">
89-
</category-axis-item>
90-
</category-axis>
90+
<kendo-chart name="remote${data.ID}">
91+
<series-defaults type="ChartSeriesType.Column">
92+
<stack enabled="true" />
93+
</series-defaults>
94+
<datasource>
95+
<transport>
96+
<read type="post" url="@Url.Action("ReadChartData", "Home", new {id = "${data.ID}"})" />
97+
</transport>
98+
</datasource>
9199
<series>
92-
<series-item type="ChartSeriesType.Bar"
93-
name="Example Series"
94-
data="new double[] { 200, 450, 300, 125 }">
95-
</series-item>
100+
<series-item type="ChartSeriesType.Column" field="Value" category-field="Category" name="Value Series"></series-item>
101+
<series-item type="ChartSeriesType.Column" field="Value1" category-field="Category" name="Value1 Series"></series-item>
102+
</series>
103+
<tooltip template="#:category# - #: value #" visible="true"></tooltip>
104+
</kendo-chart>
105+
</column-template>
106+
</column>
107+
108+
<column title="Chart Local Data">
109+
<column-template>
110+
<kendo-chart name="local${data.ID}" class="chart-local">
111+
<series-defaults type="ChartSeriesType.Column">
112+
<stack enabled="true" />
113+
</series-defaults>
114+
<series>
115+
<series-item type="ChartSeriesType.Column" field="Value" category-field="Category" name="Value Series"></series-item>
116+
<series-item type="ChartSeriesType.Column" field="Value1" category-field="Category" name="Value1 Series"></series-item>
96117
</series>
97-
<chart-legend position="ChartLegendPosition.Bottom">
98-
</chart-legend>
99-
<chart-title text="Kendo Chart Example">
100-
</chart-title>
101118
</kendo-chart>
102119
</column-template>
103120
</column>
104121
</columns>
122+
<datasource type="DataSourceTagHelperType.Ajax" page-size="20" server-operation="false" data="@Model">
123+
<schema>
124+
<model id="ID">
125+
</model>
126+
</schema>
127+
</datasource>
105128
</kendo-grid>
106129
```
107130
{% endif %}
@@ -133,7 +156,7 @@ How can I use a Telerik UI for {{ site.framework }} Chart in a column of a Grid?
133156
</style>
134157
```
135158

136-
For the complete implementation of the suggested approach [refer to the project on how to use a Chart in the ClientTemplate of a Grid column and bind the Chart based on the row data](https://github.com/telerik/ui-for-aspnet-mvc-examples/tree/master/Telerik.Examples.Mvc/Telerik.Examples.Mvc/Areas/ChartInGrid).
159+
For the complete implementation of the suggested approach, refer to [the project on how to use a Chart in the ClientTemplate of a Grid column and bind the Chart based on the row data](https://github.com/telerik/ui-for-aspnet-mvc-examples/tree/master/Telerik.Examples.Mvc/Telerik.Examples.Mvc/Areas/ChartInGrid). {% if site.core %}You can use this as a starting point to configure the same setup in an ASP.NET Core project.{% endif %}
137160

138161
## More {{ site.framework }} Chart Resources
139162

0 commit comments

Comments
 (0)