New to Telerik UI for ASP.NET MVC? Download free 30-day trial


The Chart HtmlHelper for ASP.NET MVC enables you to use 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 automatically include these files, use the Telerik UI for ASP.NET MVC Visual Studio extensions. To manually include these files, refer to this article.

To scaffold the Chart HtmlHelper for ASP.NET MVC:

  1. 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 from the Getting Started section of this article.
  2. Right-click the location where the Chart Controller has to be generated. Select Add > New Scaffolded item... from the displayed menu. In this example, you are going to generate it in the Controllers folder.

    UI for ASP.NET MVC The new scaffolded iItem

  3. Select Kendo UI Scaffolder from the list of available Scaffolders.

    UI for ASP.NET MVC The Kendo UI scaffolder

  4. Select the Kendo UI Chart to scaffold.

    UI for ASP.NET MVC The Kendo UI Chart scaffolder

  5. On the next screen which renders the Model and Data Context options, enter Controller Name and View Name.

    UI for ASP.NET MVC Chart Scaffolder model options

  6. The Model Class drop-down list contains all model types from the active project—this example will list products in the Chart. Select the Product entity.

    UI for ASP.NET MVC The Model class

  7. From the Data Context Class drop-down, select the Entity Framework Data Model class (NorthwindEntities).

    UI for ASP.NET MVC The Data Context class

  8. (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 which loads a drop-down list similar to the first one. Select the ViewModel.

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

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

    > 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.
    ![UI for ASP.NET MVC The ViewModel class](images/scaffolding/view_model_class.png)
  11. Click the Chart options item on the left. Each field marked with an asterisk * is mandatory. The rest of the fields are optional.

    UI for ASP.NET MVC The options when setting the Chart functionalities

    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,Top, Left, and Right.

      UI for ASP.NET MVC The legend options

    • Series Type—Select the series type. Each series type shows different Series Options configuration.

      UI for ASP.NET MVC The series options

    • Add More Series—Add one additional configuration panel for a series.

  12. When you finish configuring the Chart, click Add at the bottom. As a result, the Chart Controller and the corresponding View are generated.

See Also

In this article