Sync with Kendo UI Professional

telerik · Dec 12, 2024 · d61317a · d61317a
1 parent 7c1fcdf
commit d61317a
Show file tree

Hide file tree

Showing 6 changed files with 421 additions and 87 deletions.
diff --git a/docs-aspnet/html-helpers/charts/how-to/binding-to-singalr.md b/docs-aspnet/html-helpers/charts/how-to/binding-to-singalr.md
diff --git a/docs-aspnet/html-helpers/charts/how-to/create-dynamic-series.md b/docs-aspnet/html-helpers/charts/how-to/create-dynamic-series.md
diff --git a/docs-aspnet/html-helpers/charts/how-to/use-chart-in-ajax-grid-column.md b/docs-aspnet/html-helpers/charts/how-to/use-chart-in-ajax-grid-column.md
diff --git a/docs-aspnet/knowledge-base/chart-bind-to-dynamic-series.md b/docs-aspnet/knowledge-base/chart-bind-to-dynamic-series.md
@@ -0,0 +1,131 @@
+---
+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
+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
+```HtmlHelper
+    @model TelerikAspNetCoreApp4.Models.MyViewModel
+ 
+    @(Html.Kendo().Chart()
+          .Name("Chart")
+          .Series(series => {
+              foreach (var def in Model.Series) {
+                  series.Column(def.Data).Name(def.Name).Stack(def.Stack);
+              }
+          })
+          .CategoryAxis(axis => axis
+             .Categories(new string[] { "A", "B", "C" })
+          )
+    )
+```
+
+```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
+    @{ 
+        var categories = new string[] { "A", "B", "C" };
+    }
+
+    @model TelerikAspNetCoreApp4.Models.MyViewModel
+    
+    <kendo-chart name="chart">
+        <category-axis>
+                <category-axis-item name="series-axis">
+                    <line visible="false" />
+                </category-axis-item>
+                <category-axis-item name="label-axis" categories="categories">
+                </category-axis-item>
+            </category-axis>
+        <series>
+            @foreach (var def in Model.Series)
+            {
+                <series-item type="ChartSeriesType.Column"
+                             name="@def.Name"
+                             stack="@def.Stack"
+                             data="@def.Data">
+                    <labels background="transparent" visible="true">
+                    </labels>
+                </series-item>
+            }
+        </series>
+    </kendo-chart>
+
+```
+{% 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).
+
+## More {{ site.framework }} Chart Resources
+
+* [{{ site.framework }} Chart Documentation]({%slug htmlhelpers_charts_aspnetcore%})
+
+* [{{ site.framework }} Chart Demos](https://demos.telerik.com/{{ site.platform }}/charts/index)
+
+{% if site.core %}
+* [{{ site.framework }} Chart Product Page](https://www.telerik.com/aspnet-core-ui/charts)
+
+* [Telerik UI for {{ site.framework }} Video Onboarding Course (Free for trial users and license holders)]({%slug virtualclass_uiforcore%})
+
+* [Telerik UI for {{ site.framework }} Forums](https://www.telerik.com/forums/aspnet-core-ui)
+
+{% else %}
+* [{{ site.framework }} Chart Product Page](https://www.telerik.com/aspnet-mvc/charts)
+
+* [Telerik UI for {{ site.framework }} Video Onboarding Course (Free for trial users and license holders)]({%slug virtualclass_uiformvc%})
+
+* [Telerik UI for {{ site.framework }} Forums](https://www.telerik.com/forums/aspnet-mvc)
+{% endif %}
+
+## See Also
+
+* [Client-Side API Reference of the Chart for {{ site.framework }}](https://docs.telerik.com/kendo-ui/api/javascript/ui/chart)
+* [Server-Side API Reference of the Chart for {{ site.framework }}](https://docs.telerik.com/{{ site.platform }}/api/chart)
+{% if site.core %}
+* [Server-Side TagHelper API Reference of the Chart for {{ site.framework }}](https://docs.telerik.com/{{ site.platform }}/api/taghelpers/chart)
+{% endif %}
+* [Telerik UI for {{ site.framework }} Breaking Changes]({%slug breakingchanges_2023%})
+* [Telerik UI for {{ site.framework }} Knowledge Base](https://docs.telerik.com/{{ site.platform }}/knowledge-base)
diff --git a/docs-aspnet/knowledge-base/chart-bind-to-signalr.md b/docs-aspnet/knowledge-base/chart-bind-to-signalr.md
@@ -0,0 +1,122 @@
+---
+title: Bind Chart to SignalR
+description: Learn how to bind a Telerik UI for {{ site.framework }} Chart to SignalR.
+type: how-to
+page_title: Binding a Chart to SignalR
+previous_url: 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
+```HtmlHelper
+    @(Html.Kendo().Notification()
+      .Name("notification")
+      .Width("100%")
+      .Position(position => position.Top(0).Left(0))
+    )
+    @(Html.Kendo().Chart<TelerikAspNetCoreApp3.Models.ProductViewModel>()
+            .Name("chart")
+            .Legend(false)
+            .DataSource(dataSource => dataSource
+                .SignalR()
+                .AutoSync(true)
+                .Events(events => events.Push(@<text>
+                                                   function(e) {
+                                                        var notification = $("#notification").data("kendoNotification");
+                                                        notification.success(e.type);
+                                                   }
+                                               </text>))
+                .Sort(s => s.Add("CreatedAt").Descending())
+                .Transport(tr => tr
+                    .Promise("hubStart")
+                    .Hub("hub")
+                    .Client(c => c
+                        .Read("read")
+                        .Create("create")
+                        .Update("update")
+                        .Destroy("destroy"))
+                    .Server(s => s
+                        .Read("read")
+                        .Create("create")
+                        .Update("update")
+                    .Destroy("destroy"))
+                )
+                .Schema(schema => schema
+                    .Model(model =>
+                    {
+                        model.Id("ID");
+                        model.Field("ID", typeof(string)).Editable(false);
+                        model.Field("CreatedAt", typeof(DateTime));
+                        model.Field("UnitPrice", typeof(int));
+                    }
+                ))
+            )
+            .Series(series =>
+            {
+                series.Line(
+                    model => model.UnitPrice,
+                    categoryExpression: model => model.ProductName
+                );
+            })
+            .Transitions(false)
+            .CategoryAxis(axis =>
+                axis.Labels(labels => labels.Rotation(-90))
+            )
+    )
+```
+
+```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>
+```
+```Styles
+  <style>
+    .footer:first-of-type {
+        display: none !important;
+    }
+  </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).
+
+## More {{ site.framework }} Chart Resources
+
+* [{{ site.framework }} Chart Documentation]({%slug htmlhelpers_charts_aspnetcore%})
+
+* [{{ site.framework }} Chart Demos](https://demos.telerik.com/{{ site.platform }}/charts/index)
+
+{% if site.core %}
+* [{{ site.framework }} Chart Product Page](https://www.telerik.com/aspnet-core-ui/charts)
+
+* [Telerik UI for {{ site.framework }} Video Onboarding Course (Free for trial users and license holders)]({%slug virtualclass_uiforcore%})
+
+* [Telerik UI for {{ site.framework }} Forums](https://www.telerik.com/forums/aspnet-core-ui)
+
+{% else %}
+* [{{ site.framework }} Chart Product Page](https://www.telerik.com/aspnet-mvc/charts)
+
+* [Telerik UI for {{ site.framework }} Video Onboarding Course (Free for trial users and license holders)]({%slug virtualclass_uiformvc%})
+
+* [Telerik UI for {{ site.framework }} Forums](https://www.telerik.com/forums/aspnet-mvc)
+{% endif %}
+
+## See Also
+
+* [Client-Side API Reference of the Chart for {{ site.framework }}](https://docs.telerik.com/kendo-ui/api/javascript/ui/chart)
+* [Server-Side API Reference of the Chart for {{ site.framework }}](https://docs.telerik.com/{{ site.platform }}/api/chart)
+{% if site.core %}
+* [Server-Side TagHelper API Reference of the Chart for {{ site.framework }}](https://docs.telerik.com/{{ site.platform }}/api/taghelpers/chart)
+{% endif %}
+* [Telerik UI for {{ site.framework }} Breaking Changes]({%slug breakingchanges_2023%})
+* [Telerik UI for {{ site.framework }} Knowledge Base](https://docs.telerik.com/{{ site.platform }}/knowledge-base)