Edit this page

Scaffolding

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

Important

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

Getting Started

Configuration

Below are listed the steps for you to follow when scaffolding the Kendo UI Grid.

  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, move on to the next step. Otherwise, follow the first four steps described in this article.

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

    Figure 1. Add a new scaffolded item

    New Scaffolded Item

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

    Figure 2. Choose the Kendo UI Scaffolder

    Kendo UI Scaffolder

  4. On the next screen, you are presented with the Model and Data Context options. Enter the Controller and View names.

    Figure 3. Provide the controller name

    Grid options

    The Model Class DropDownList contains all model types from the active project. In this example, you list products in the Grid. Select the Product entity.

    Figure 4. Choose the Model class

    Model Class

    From the Data Context Class DropDownList, select the Entity Framework Data Model class to be used. In this example it is NorthwindEntities.

    Figure 5. Choose the Data Context class

    Data Context Class

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

    If you have not created it yet, 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; }
            }
    

    Select the ProductViewModel class from the ViewModel Class DropDownList.

    Figure 6. Select the ViewModel class

    ViewModel Class

    Important

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

  6. Click the Grid options item on the left.

    Figure 7. Pick Grid options

    Grid options

    This screen contains the Grid functionalities that can be configured before scaffolding:

    • DataSource Type—Ajax, Server, or WebApi.
    • Editable—Enable the editing, configure the edit mode—InLine, InCell, or PopUp—and the operations to be included—Create, Update, Destroy.

      Figure 8. Choose the editable options

      Editable options

    • Filterable—Enable the filtering of the Grid and select the filter mode.

      Figure 9. Select the filterable options

      Filterable options

    • Column Menu—Enable the column menu.

    • Navigatable—Enable the keyboard navigation.
    • Pageable—Enable the paging of the Grid.
    • Reorderable—Enable the column reordering.
    • Scrollable—Enable the scrolling of the Grid table.
    • Selectable—Enable the selection and specify the selection mode and type.

      Figure 10. Pick the selectable options

      Selectable options

    • Sortable—Enable the sorting and specify the sorting mode.

      Figure 11. The sortable options

      Sortable options

    • Excel Export—Enable the Excel export functionality.

    • PDF Export—Enable the PDF export functionality.
  7. Click the Events item on the left.

    Figure 12. The Events item in the Grid options

    Grid options

    From this screen you could select the Grid events that you would like to attach handlers to.

    Important

    Not all events are supported in the server-binding mode. To see the complete list, refer to this article.

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

See Also

Other articles on the Kendo UI Grid for ASP.NET MVC:

Articles on Telerik UI for ASP.NET MVC: