Build the Team Efficiency Dashboard Project

Step 4: Telerik UI Grid

In this chapter you will modify the scaffolded Grid code to further customize the appearance of the Grid. Additionally, you'll be incorporating the Grid into the main view of the Team Efficiency Dashboard.

Configuring Telerik UI Grid Options

Overview

As you may have noticed in the scaffolding wizard, the Grid is a versatile component with many options. The options for the Grid are set using the server-side HTML wrapper. Take a close look at the code generated by the Scaffolder in /Views/Invoices/Index.cshtml. Below is a breakdown with additional comments of what each configuration method is used for. Also, note that the fluent API chain can be extended to include further options and there is no strict order in which the options are defined.

    @(Html.Kendo().Grid<KendoQsBoilerplate.Invoice>() // Telerik UI Grid Wrapper
        // Name, also HTML elements "id" attribute
        .Name("grid")
        // Grid column bindings
        .Columns(columns =>
        {
            columns.Bound(c => c.CustomerName);
            columns.Bound(c => c.OrderDate);
            columns.Bound(c => c.ProductName);
            columns.Bound(c => c.UnitPrice);
            columns.Bound(c => c.Quantity);
            columns.Bound(c => c.Salesperson);
        })
        // Toolbars
        .ToolBar(toolbar => {
                toolbar.Excel();
                toolbar.Pdf();
        })
        // Enable Paging
        .Pageable()
        // Enable Sorting
        .Sortable(sortable => {
            sortable.SortMode(GridSortMode.SingleColumn);
        })
        // Disable Scrolling
        .Scrollable(scrollable => scrollable.Enabled(false))
        // Datasource configuration
        .DataSource(dataSource => dataSource
            .Ajax()
            // Read method action and controller
            .Read(read => read.Action("Invoices_Read", "Invoice"))
        )
    )

If you find the comments above useful, feel free to copy them into your project. Comments are completely valid inside the Fluent API chain.

Exercise: Modify the Grid's Name Property

Change the Grid's Name from "grid" to "EmployeeSales". This is an important step since the Name property of all Telerik UI for MVC wrappers set the id attribute of the rendered Kendo UI widget.

Find the .Name method and change the value from "grid" to "EmployeeSales".

@(Html.Kendo().Grid<KendoQsBoilerplate.Invoice>()
      .Name("grid")
      ...
)

The resulting code should look like the one in the example below.

   @(Html.Kendo().Grid<KendoQsBoilerplate.Invoice>()
          .Name("EmployeeSales")
          ...
    )

Now add the EmployeeSales grid to the Dashboard page /Home/Index.cshtml. To keep things tidy, add the grid to the Dashboard as a child action using Html.Action in the /Home/Index.cshtml view. This will keep the Grid's view and controller code separate and easy to find.

Exercise: Add the Grid to the Dashboard

Ensure the application's layout is not repeated. Set the Layout of the view to null. Skipping this step will result in duplicate scripts which could cause the page to load improperly.
At the top of /Views/Invoices/Index.cshtml, add @{ Layout = null;}.

The resulting code should be like the one in the example below.
```
@{ Layout = null;}
@(Html.Kendo().Grid<KendoQsBoilerplate.Invoice>()
      .Name("EmployeeSales")
      ...
)
```
Add the grid as a child action. Open /Home/Index.cshtml, locate the  placeholder, and replace it with the @Html.Action("Index","Invoice") child action.
```

@Html.Ipsum().table(5, 3, "d,t,n", new { @class = "table table-striped table-bordered" })
```
The resulting code should be like the one in the example below.
```

@Html.Action("Index","Invoice")
```
Run the project and visit the dashboard page /Home/Index in the browser. Take a moment to interact with the grid's sorting, paging, and exporting features.
Currently, the data in the Order Date Grid column is verbose and looks like Mon Aug 25 1997 00:00:00 GMT-0400 (Eastern Daylight Time). This isn't very user-friendly, let's change that. The Grid's data can easily be formatted by adding the .Format property chain to any column. Use the MM/dd/yyyy Date Format on the OrderDate column using the .Format method.

Exercise: Customize the Order Date Column Formatting

You can keep the application running while performing this exercise.

Open /Views/Invoice/Index.cshtml and find the OrderDate column property.
```
columns.Bound(c => c.OrderDate);
```
Set the OrderDate column's Format property to "{0:MM/dd/yyyy}" to apply the format to the column.

The resulting code should be like the one in the example below.
```
columns.Bound(c => c.OrderDate).Format("{0:MM/dd/yyyy}");
```
Refresh the application to see the formatting changes taking place. Notice that the OrderDate column is now much easier on the eye.

While interacting with the Grid, you may have noticed that all of the records are being pulled from the database. Don't worry, as we progress through the next several chapters this will change as you learn how to work with Kendo UI and datasources on the client side. First, let's set up some additional UI elements to provide a source for filtering data.