Telerik Data Access

This article demonstrates how to leverage Telerik Data Access on the backend and let Kendo UI take care of the user interface.

Setting Up the Project

To get started, create a new Telerik MVC Web Application.

New Web Project

When asked about the Data Access approach, select Skip Creating a Telerik Data Access Model Library Project. This is going to create an empty Telerik UI for an MVC project.

Building the Model

  1. To build a Data Access data model, select TELERIK > Telerik Data Access > Add Domain Model, as shown below.

    If you do not have Telerik Data Access installed, you are able to get the trial edition on the Free Trials page.

    Build The Model

  2. On the window that opens next, select Populate from database. Click Next.

    Populate From Data

  3. Set up a connection to NorthwindOA, installed with Data Access, by choosing the option from the drop-down list. Click Next.

    Connect To NorthwindOA

  4. Include all tables from the database in the data model by ticking the Tables check box.

    Include All Tables

  5. Click Finish. The data model is now ready to be used. Next, you need to expose this data model through a service layer.

Building the Service Layer

  1. Perform a build on the application. Right-click the .rlinq file in Solution Explorer. Select Add Telerik Data Access Service so that the domain service wizard fires up.

    Generate OpenAccess Domain Model

  2. From the drop-down list of the wizard select EntitiesModel. Click Next.

    Select Northwind OA

  3. The screen that loads next allows you to configure the service that is going to be created. Select WCF Service - OData v3 and click Next.

    Configure The Service

  4. On the next screen you are able to change the name of the service and select which tables to include. Click Finish to create your service.

    Configure The entitites

Connecting oData to the Grid

Now configure the front end. Wire up the Orders to a Kendo UI Grid. Kendo UI is a very rich and powerful framework that provides you with full control over the UI of your project, so make sure you explore it even further.

  1. Edit the Global.asax.cs file and add the following route configuration in the RegisterRoutes method:

    RouteTable.Routes.IgnoreRoute("EntitiesModelService.svc/{*pathInfo}"); // specify the correct service path here

  2. Set up the Grid widget. For detailed information on how to configure data binding, visit the Kendo UI live demo page. Basically, use a div that is going to be applied as the container for the Grid and configure the widget in script.

The following example demonstrates some sample code you need.

<!--Will be turned into a Kendo UI Grid! -->
<div id="grid"></div>

<!-- configure the Grid-->
<script>

    // Document ready fires when the whole page is ready
    // and all elements, scripts, styles have been loaded.
    $(function () {

        // Use regex for some date parsing.
        // Select the div and create the Grid element.
        $("#grid").kendoGrid({
            dataSource: {
                type: "odata",
                transport: {
                    read: "/EntitiesModelService.svc/Orders"
                },
                schema: {
                    data: "value",
                    total: "['odata.count']",
                    model: {
                        fields: {
                            OrderID: { type: "number" },
                            Freight: { type: "number" },
                            ShipName: { type: "string" },
                            OrderDate: { type: "date" },
                            ShipCity: { type: "string" }
                        }
                    }
                },
                pageSize: 10,
                serverPaging: true,
                serverFiltering: true,
                serverSorting: true
            },
            filterable: true,
            sortable: true,
            pageable: true,
            columns: [
                {
                    field: "OrderID",
                    filterable: false
                },
                "Freight",
                {
                    field: "OrderDate"
                },
                "ShipName",
                "ShipCity"
            ]
        });

    });

</script>
  1. Run the application. The following screenshot demonstrates the Grid you are expected to see as a result.

    Grid

See Also

In this article
Not finding the help you need? Improve this article