Skip to content

Commit

Permalink
Sync with Kendo UI Professional
Browse files Browse the repository at this point in the history
  • Loading branch information
@kendo-bot
kendo-bot committed Jan 6, 2025
1 parent 45691c5 commit 048bd88
Show file tree
Hide file tree
Showing 6 changed files with 453 additions and 109 deletions.
4 changes: 3 additions & 1 deletion docs-aspnet/_config.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,6 @@ html-helpers/navigation/tabstrip/security-trimming.md,
html-helpers/navigation/tabstrip/forms.md,
html-helpers/navigation/treeview/security-trimming.md,
html-helpers/editors/editor/import-export.md,
html-helpers/charts/how-to/*,
html-helpers/data-management/grid/how-to/*,
html-helpers/data-management/treelist/how-to/*,
html-helpers/diagrams-and-maps/map/how-to/*,
Expand All @@ -71,6 +70,9 @@ html-helpers/editors/multiselect/how-to/*,
html-helpers/interactivity/progressbar/how-to/*,
html-helpers/layout/window/how-to/*,
html-helpers/navigation/menu/how-to/*,
html-helpers/navigation/panelbar/how-to/*,
html-helpers/navigation/treeview/how-to/*,
html-helpers/scheduling/scheduler/how-to/*,
tag-helpers/*,
knowledge-base/switch-change-messages-inside-grid.md,
knowledge-base/upload-files-to-database.md,
Expand Down
17 changes: 0 additions & 17 deletions docs-aspnet/html-helpers/layout/window/how-to/update-dialog-ajax-forms.md
View file

This file was deleted.

93 changes: 53 additions & 40 deletions docs-aspnet/knowledge-base/chart-bind-to-dynamic-series.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,29 @@ title: Bind Chart to Dynamic Series
description: Learn how to bind a Telerik UI for {{ site.framework }} Chart to dynamic series.
type: how-to
page_title: Binding a Chart to dynamic series
previous_url: html-helpers/charts/how-to/create-dynamic-series
previous_url: /html-helpers/charts/how-to/create-dynamic-series, /helpers/charts/how-to/create-dynamic-series
slug: chart-bind-to-dynamic-series
tags: chart, databound, dynamic, series
res_type: kb
---

# Description
How can I bind a Telerik UI for {{ site.framework }} Chart to dynamic series?

# Example
## Environment

<table>
<tr>
<td>Product</td>
<td>{{ site.product }} Chart</td>
</tr>
<tr>
<td>Product Version</td>
<td>Created with version 2024.4.1112</td>
</tr>
</table>

## Description
How can I bind the Chart to dynamic series?

## Example
```HtmlHelper
@model TelerikAspNetCoreApp4.Models.MyViewModel
Expand All @@ -29,40 +42,6 @@ How can I bind a Telerik UI for {{ site.framework }} Chart to dynamic series?
)
```

```Controller
public class HomeController : Controller
{
public ActionResult Index()
{
var model = new MyViewModel();
model.Categories.AddRange(new string[] { "A", "B", "C" });
model.Series.Add(new MySeriesData()
{
Name = "Foo",
Stack = "A",
Data = new decimal[] { 1, 2, 3 }
});
model.Series.Add(new MySeriesData()
{
Name = "Bar",
Stack = "A",
Data = new decimal[] { 2, 3, 4 }
});
model.Series.Add(new MySeriesData()
{
Name = "Baz",
Stack = "B",
Data = new decimal[] { 10, 20, 30 }
});
return View(model);
}
}
```

{% if site.core %}
```TagHelper
@addTagHelper *, Kendo.Mvc
Expand Down Expand Up @@ -97,7 +76,41 @@ How can I bind a Telerik UI for {{ site.framework }} Chart to dynamic series?
```
{% endif %}

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).
```Controller
public class HomeController : Controller
{
public ActionResult Index()
{
var model = new MyViewModel();
model.Categories.AddRange(new string[] { "A", "B", "C" });
model.Series.Add(new MySeriesData()
{
Name = "Foo",
Stack = "A",
Data = new decimal[] { 1, 2, 3 }
});
model.Series.Add(new MySeriesData()
{
Name = "Bar",
Stack = "A",
Data = new decimal[] { 2, 3, 4 }
});
model.Series.Add(new MySeriesData()
{
Name = "Baz",
Stack = "B",
Data = new decimal[] { 10, 20, 30 }
});
return View(model);
}
}
```

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 %}

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

Expand Down
42 changes: 27 additions & 15 deletions docs-aspnet/knowledge-base/chart-bind-to-signalr.md
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,33 @@
---
title: Bind Chart to SignalR
description: Learn how to bind a Telerik UI for {{ site.framework }} Chart to SignalR.
description: Learn how to bind a Telerik UI for {{ site.framework }} Chart to a SignalR DataSource.
type: how-to
page_title: Binding a Chart to SignalR
previous_url: html-helpers/charts/how-to/binding-to-singalr
previous_url: /helpers/charts/how-to/binding-to-singalr, /html-helpers/charts/how-to/binding-to-singalr
slug: chart-bind-to-signalr
tags: chart, databound, signalr
res_type: kb
---

# Description
How can I bind a Telerik UI for {{ site.framework }} Chart to SignalR?

# Example
## Environment
<table>
<tr>
<td>Product</td>
<td>{{ site.product }} Chart</td>
</tr>
<tr>
<td>Product Version</td>
<td>Created with version 2024.4.1112</td>
</tr>
</table>

## Description
How can I bind the Chart to a [SignalR](https://dotnet.microsoft.com/en-us/apps/aspnet/signalr) DataSource?

## Solution
```HtmlHelper
<script src="https://cdn.jsdelivr.net/npm/[email protected]/jquery.signalR.min.js"></script>
@(Html.Kendo().Notification()
.Name("notification")
.Width("100%")
Expand Down Expand Up @@ -71,14 +85,12 @@ How can I bind a Telerik UI for {{ site.framework }} Chart to SignalR?
```

```JavaScript
<script src="https://cdn.jsdelivr.net/npm/[email protected]/jquery.signalR.min.js"></script>

<script>
var hubUrl = "https://demos.telerik.com/kendo-ui/service/signalr/hubs";
var connection = $.hubConnection(hubUrl, { useDefaultPath: false });
var hub = connection.createHubProxy("productHub");
var hubStart = connection.start({ jsonp: true });
</script>
<script>
var hubUrl = "https://demos.telerik.com/kendo-ui/service/signalr/hubs";
var connection = $.hubConnection(hubUrl, { useDefaultPath: false });
var hub = connection.createHubProxy("productHub");
var hubStart = connection.start({ jsonp: true });
</script>
```
```Styles
<style>
Expand All @@ -88,7 +100,7 @@ How can I bind a Telerik UI for {{ site.framework }} Chart to SignalR?
</style>
```

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).
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 %}

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

Expand Down
95 changes: 59 additions & 36 deletions docs-aspnet/knowledge-base/chart-in-grid-column.md
View file
Original file line number Diff line number Diff line change
@@ -1,24 +1,36 @@
---
title: Using Chart in column of a Grid
description: Learn how to use a Telerik UI for {{ site.framework }} Chart in a column of a Grid.
title: Displaying Chart in a Column of a Grid
description: Learn how to display a Telerik UI for {{ site.framework }} Chart in a column cell of a Telerik UI for {{ site.framework }} Grid.
type: how-to
page_title: Using a Chart in a column of a Grid
previous_url: /helpers/charts/how-to/use-chart-in-ajax-grid-column, html-helpers/charts/how-to/howto_createchartinajaxgridcolumn_chartaspnetmvc
page_title: Displaying Chart in a Column of a Grid
previous_url: /helpers/charts/how-to/use-chart-in-ajax-grid-column, /html-helpers/charts/how-to/use-chart-in-ajax-grid-column
slug: chart-in-grid-column
tags: chart, grid, column, template
res_type: kb
---

# Description
How can I use a Telerik UI for {{ site.framework }} Chart in a column of a Grid?
## Environment

<table>
<tr>
<td>Product</td>
<td>{{ site.product }} Chart</td>
</tr>
<tr>
<td>Product Version</td>
<td>Created with version 2024.4.1112</td>
</tr>
</table>

# Solution
## Description
How can I initialize a Chart into a specified [Grid]({% slug htmlhelpers_grid_aspnetcore_overview %}) column?

1. Declare the Telerik UI for {{ site.framework }} Grid.
1. Use column [`Templates`](https://docs.telerik.com/aspnet-core/html-helpers/data-management/grid/templates/overview) for the columns of the Grid.
1. Add the declarations for the Charts in the Templates.
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.
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.
## Solution

1. Declare the Grid component.
1. Use the [`Template()`](/api/kendo.mvc.ui.fluent/gridcolumnfactory#templatesystemstring) option of the Grid column to define the Charts.
1. Handle the [`DataBinding`](/api/kendo.mvc.ui.fluent/grideventbuilder#databindingsystemstring) and [`DataBound`](/api/kendo.mvc.ui.fluent/grideventbuilder#databoundsystemstring) events of the Grid.
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..


```HtmlHelper
Expand Down Expand Up @@ -66,42 +78,53 @@ How can I use a Telerik UI for {{ site.framework }} Chart in a column of a Grid?
{% if site.core %}
```TagHelper
@addTagHelper *, Kendo.Mvc
@{
var categories = new string[] { "2000", "2001", "2002", "2003" };
}
<kendo-grid name="grid2" data-binding="onDataBinding" data-bound="onDataBound" >
<datasource type="DataSourceTagHelperType.Ajax" page-size="20" server-operation="false" data="@Model">
<schema>
<model id="ID">
</model>
</schema>
</datasource>
@model IEnumerable<TelerikAspNetCoreApp26.Models.ViewModel>
<kendo-grid name="grid" on-data-binding="onDataBinding" on-data-bound="onDataBound">
<columns>
<column field="ID" title="ID"></column>
<column title="Chart Remote Data">
<column-template>
<kendo-chart name="ID">
<category-axis>
<category-axis-item categories="categories">
</category-axis-item>
</category-axis>
<kendo-chart name="remote${data.ID}">
<series-defaults type="ChartSeriesType.Column">
<stack enabled="true" />
</series-defaults>
<datasource>
<transport>
<read type="post" url="@Url.Action("ReadChartData", "Home", new {id = "${data.ID}"})" />
</transport>
</datasource>
<series>
<series-item type="ChartSeriesType.Bar"
name="Example Series"
data="new double[] { 200, 450, 300, 125 }">
</series-item>
<series-item type="ChartSeriesType.Column" field="Value" category-field="Category" name="Value Series"></series-item>
<series-item type="ChartSeriesType.Column" field="Value1" category-field="Category" name="Value1 Series"></series-item>
</series>
<tooltip template="#:category# - #: value #" visible="true"></tooltip>
</kendo-chart>
</column-template>
</column>
<column title="Chart Local Data">
<column-template>
<kendo-chart name="local${data.ID}" class="chart-local">
<series-defaults type="ChartSeriesType.Column">
<stack enabled="true" />
</series-defaults>
<series>
<series-item type="ChartSeriesType.Column" field="Value" category-field="Category" name="Value Series"></series-item>
<series-item type="ChartSeriesType.Column" field="Value1" category-field="Category" name="Value1 Series"></series-item>
</series>
<chart-legend position="ChartLegendPosition.Bottom">
</chart-legend>
<chart-title text="Kendo Chart Example">
</chart-title>
</kendo-chart>
</column-template>
</column>
</columns>
<datasource type="DataSourceTagHelperType.Ajax" page-size="20" server-operation="false" data="@Model">
<schema>
<model id="ID">
</model>
</schema>
</datasource>
</kendo-grid>
```
{% endif %}
Expand Down Expand Up @@ -133,7 +156,7 @@ How can I use a Telerik UI for {{ site.framework }} Chart in a column of a Grid?
</style>
```

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).
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 %}

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

Expand Down
Loading

0 comments on commit 048bd88

Please sign in to comment.