Skip to content

Latest commit

 

History

History
99 lines (85 loc) · 3.95 KB

remote-binding.md

File metadata and controls

99 lines (85 loc) · 3.95 KB
title page_title description slug position
Remote Binding
Remote Data Binding
Learn how to bind the Telerik UI for {{ site.framework }} Chart Wizard component to a data received from a remote endpoint.
htmlhelpers_remotebinding_chartwizard
3

Remote Binding

The Chart Wizard supports remote data binding that enables you to load the chart data through a remote endpoint.

For a runnable example, refer to the [demo on binding the Chart Wizard to remote data](https://demos.telerik.com/{{ site.platform }}/chartwizard/remote-data-binding).

To configure the Chart Wizard to bind to data received from a remote endpoint, follow the next steps:

  1. Define a Model with the respective properties that must be accessible in the chart (for the axes and series).

        public class Product
    {
        public int ProductID { get; set; }
        public string ProductName { get; set; }
        public int Quantity { get; set; }
        public decimal Price { get; set; }
        public decimal Tax { get; set; }
        public decimal Total { get; set; }
        public decimal TotalTax { get; set; }
    }

  2. Create an Action method and pass data collection to the ToDataSourceResult() extension method to convert the collection to a DataSourceResult object.

        public JsonResult Read([DataSourceRequest] DataSourceRequest request)
    {
        return Json(ProductsData().ToDataSourceResult(request));
    }

    private static List<Product> ProductsData()
    {
        return new List<Product>()
        {
            new Product { ProductID = 216321, ProductName = "Calzone", Quantity = 1 },
            new Product { ProductID = 546897, ProductName = "Margarita", Quantity = 2 },
            new Product { ProductID = 456231, ProductName = "Pollo Formaggio", Quantity = 1 }
        };
    }

  3. Within the Index.cshtml View, configure the Chart Wizard to use DataSource and specify the name of the Action that returns the data in the Read() option. Also, you must define the Model properties in the DataColumns() configuration to make them accessible through the chart configurator.

        @(Html.Kendo().ChartWizard<Product>()
        .Name("chartwizard")
        .DataSource(dataSource => dataSource
            .Read(read => read.Action("Read", "Home"))
        )
        .DataColumns(columns =>
        {
            columns.Add().Field(f => f.ProductName).Title("Product Name");
            columns.Add().Field(f => f.Quantity);
        })
    )

    {% if site.core %}

        @addTagHelper *, Kendo.Mvc

    <kendo-chartwizard name="chartwizard">
        <datasource type="DataSourceTagHelperType.Ajax">
            <schema data="Data" total="Total" errors="Errors">
                <model>
                    <fields>
                        <field name="ProductName" type="string"></field>
                        <field name="Quantity" type="number"></field>
                    </fields>
                </model>
            </schema>
            <transport>
                <read url="@Url.Action("Read", "Home")"/>
            </transport>
        </datasource>
        <data-columns>
            <data-column field="ProductName" title="Product Name"/>
            <data-column field="Quantity" />
        </data-columns>
    </kendo-chartwizard>

    {% endif %}

See Also