Edit this page


This article demonstrates how to scaffold a Kendo UI Chart for ASP.NET MVC by using the Kendo UI Scaffolder Visual Studio extension.


The Kendo UI Scaffolder will not include the required UI for ASP.NET MVC files to the project. To achieve this automatically, use the Telerik UI for ASP.NET MVC Visual Studio extensions. To achieve this manually, refer to this article.

Getting Started

Below are listed the steps for you to follow when scaffolding the Kendo UI Chart for ASP.NET MVC.

Create a New ASP.NET MVC Application

Create a new ASP.NET MVC application. Include an Entity Framework Data Model and add Telerik UI for ASP.NET MVC. If you have already done so, you can move on to next step. Otherwise, follow the steps of the steps described in the Getting Started section of this article.

Generate the Chart Controller

Right-click the location where the Chart Controller should be generated. Select Add > New Scaffolded item... from the displayed menu. In this example, you are going to generate it in the Controllers folder.

Figure 1. A new scaffolded item

New Scaffolded Item

Select the Scaffolder

Select Kendo UI Scaffolder from the list of available Scaffolders.

Figure 2. The Kendo UI Scaffolder

Kendo UI Scaffolder

Select the Chart

Select the Kendo UI Chart from the available widgets to the left to scaffold.

Figure 3. The Kendo UI Chart Scaffolder

Kendo UI Chart Scaffolder

Set Model and Data Context Options

On the next screen, you are presented with the Model and Data Context options.

  1. Enter the Controller and View names.

    **Figure 4. The Grid options**
    ![Grid options](/helpers/grid/images/scaffolding/kendo_ui_grid1.png)
  2. The Model Class DropDownList contains all model types from the active project. In this example, you are going to list products in the Chart. Select the Product entity.

    **Figure 5. The Model class**
    ![Model Class](/helpers/grid/images/scaffolding/model_class.png)
  3. From the Data Context Class DropDownList, select the Entity Framework Data Model class to be used. In this example, it is NorthwindEntities.

    **Figure 6. The Data Context class**
    ![Data Context Class](/helpers/grid/images/scaffolding/data_context_class.png)

Use View Model Objects

(Optional) In some scenarios it is convenient to use view model objects instead of the entities returned by Entity Framework. If this is the case, check the Use an existing ViewModel checkbox. This presents you with a DropDownList similar to the first one, from which select the ViewModel to be used.

  1. If you have not yet created it, add a new class to the ~/Models folder. Name it ProductViewModel.

    ###### Example
                public class ProductViewModel
                    public int ProductID { get; set; }
                    public string ProductName { get; set; }
                    public short? UnitsInStock { get; set; }
  2. Select the ProductViewModel class from the ViewModel Class DropDownList.

    **Figure 7. The ViewModel class**
    ![ViewModel Class](/helpers/grid/images/scaffolding/view_model_class.png)


The names of the properties in the ViewModel have to be exactly the same as the corresponding ones in the Entity. Otherwise, the Kendo UI Scaffolder is not able to link them correctly.

Set Chart Functionalities

  1. Click the Chart options item on the left.

    **Figure 8. The options when setting the Chart functionalities**
    ![Grid options](/helpers/chart/images/scaffolding/kendo_ui_chart2.png)  
    This screen contains the Chart functionalities that you can configure before scaffolding:
    * **Data Binding Type**—Remote or Local.
    * **Title**—Define the `Title` of the Chart.   
    * **Show Tooltip**—Show the tooltip.    
    * **Show Legend**—Show a legend. The available options are `Bottom` and `Top`.
    **Figure 9. The legend options**
    ![Legend options](/helpers/chart/images/scaffolding/legend.png)
    * **Series Type**—Select the series type. Each series type shows different **Series Options** configuration.
            **Figure 10. The series options**
            ![Series options](/helpers/chart/images/scaffolding/series_options_1.png)
    * **Add More Series**—Add one additional configuration panel for a series.

Each field marked with an asterisk * is mandatory and the rest of the fields are optional.

When finished with the Chart configuration, click Add at the bottom. The Chart Controller and the corresponding View are generated.

See Also