Reading and Displaying Data

In this task, you will learn how to use OpenAccessLinqDataSource to retrieve and manipulate data, and a RadGrid control for ASP.NET to present it on a web page. Using OpenAccessLinqDataSource, you can easily create powerful application for editing data. Generally, you will work with two tables from the SofiaCarRental database - Cars and Categories. You will use a RadGrid control to display all cars. The Car entity has a reference to the Category entity. You will use GridDropDownColumn to display all categories. Thus you will be able to modify each car.

For more information about the OpenAccessLinqDataSource control, please refer to the Working with OpenAccessLinqDataSource chapter.

Adding RadScriptManager

The first step is to add a RadScriptManager. By default each of the RadControls for ASP.NET Ajax serves a set of files (JS code) needed for its proper client-side operation. When loading a page with several controls on it, the number of these files can become very large, often resulting in a reduced page load time and increased traffic. The reason for this problem is that browsers make a separate request to the server for each of these resources. With the newly added RadScriptManager control, RadControls for ASP.NET Ajax suite gives developers the advantage of a simple drag-and-drop to achieve the combination of resources to a single request. All you need is to add a RadScriptManager to your page and the javascript files get combined into a single file.

Open the Default.aspx page in Design mode. Drag a new RadScriptManager component from the Toolbox to the designer. RadScriptManager needs an HttpHandler to be declared in the application configuration file to operate properly. The addition of the handler is made easy by the SmartTags of the control. Right-click the RadScriptManager and select Show Smart Tag. Then select Register Telerik.Web.UI.WebResource.axd.

Using the OpenAccessLinqDataSource Control

Next, you have to add two OpenAccessLinqDataSource controls for the Category and Car entities.

Integrate the Telerik.DataAccess.Web NuGet package with the SofiaCarRentalWebApp project.

Open the Default.aspx page in Source mode, and register the Telerik.OpenAccess.Web.40 assembly:

<%@ Register Assembly="Telerik.OpenAccess.Web.40" 
             Namespace="Telerik.OpenAccess.Web" 
             TagPrefix="telerik" %>

Define a new instance of OpenAccessLinqDataSource, inside the first <div> tag of the page. The ID property should be OpenAccessLinqDataSourceCategory, the ContextTypeName should be the fully qualified name of the context class, i.e. SofiaCarRental.Model.FluentModel, and the ResourceSetName property should be set to a name of an endpoint of the context (the name of an IQueryable<T> property), i.e. Categories. The control should run on the server.
```
<telerik:OpenAccessLinqDataSource 
    ID="OpenAccessLinqDataSourceCategory" 
    runat="server"
    ContextTypeName="SofiaCarRental.Model.FluentModel" 
    ResourceSetName="Categories">
</telerik:OpenAccessLinqDataSource>
```

Add a similar definition for a second OpenAccessLinqDataSource control, which will query the Cars table/entity.

<telerik:OpenAccessLinqDataSource 
    ID="OpenAccessLinqDataSourceCar" 
    runat="server"
    ContextTypeName="SofiaCarRental.Model.FluentModel" 
    ResourceSetName="Cars">
</telerik:OpenAccessLinqDataSource>

Reading and Displaying Data

In the next several steps you will add a new Telerik RadGrid control and populate it with all cars from the SofiaCarRental database. Drag a new RadGrid control from the Toolbox to the opened Default.aspx page.

Select the RadGrid control and press F4 to open the Properties pane:

Set the AllowPaging property to True.
Set the AllowSorting property to True.
Set the AutoGenerateColumns property to False.
Set the AutoGenerateEditColumn property to True.
Set the AutoGenerateDeleteColumn property to True.
Set the DataSourceID to OpenAccessLinqDataSourceCar.
Set the GroupPanelPosition property to Top
Set the AllowAutomaticDeletes property to True.
Set the AllowAutomaticInserts property to True.
Set the AllowAutomaticUpdates property to True.
Set the AllowCustomPaging property to True.

In the Properties pane, expand the MasterTableView section and set the CommandItemDisplay property to TopAndBottom.

Below is the markup for the RadGrid control.

<telerik:RadGrid ID="RadGrid1" runat="server" 
    DataSourceID="OpenAccessLinqDataSourceCar" 
    AllowPaging="True" AllowSorting="True"
    AutoGenerateEditColumn="True" AutoGenerateDeleteColumn="True"
    GroupPanelPosition="Top" AllowAutomaticDeletes="True" 
    AllowAutomaticInserts="True" AllowAutomaticUpdates="True" 
    AllowCustomPaging="True" AutoGenerateColumns="False">
    <MasterTableView DataSourceID="OpenAccessLinqDataSourceCar" 
        CommandItemDisplay="TopAndBottom">
        <RowIndicatorColumn Visible="False">
        </RowIndicatorColumn>
        <ExpandCollapseColumn Created="True">
        </ExpandCollapseColumn>
    </MasterTableView>
</telerik:RadGrid>

Inside the MasterTableView section of the grid, copy-paste the definition of the columns:

<Columns>
       <telerik:GridCheckBoxColumn DataField="ABS" DataType="System.Boolean" 
           FilterControlAltText="Filter ABS column" HeaderText="ABS" 
           SortExpression="ABS" UniqueName="ABS">
       </telerik:GridCheckBoxColumn>
       <telerik:GridCheckBoxColumn DataField="ASR" DataType="System.Boolean" 
           FilterControlAltText="Filter ASR column" HeaderText="ASR" 
           SortExpression="ASR" UniqueName="ASR">
       </telerik:GridCheckBoxColumn>
       <telerik:GridCheckBoxColumn DataField="AirConditioner" DataType="System.Boolean"
           FilterControlAltText="Filter AirConditioner column" HeaderText="AirConditioner"
           SortExpression="AirConditioner" UniqueName="AirConditioner">
       </telerik:GridCheckBoxColumn>
       <telerik:GridCheckBoxColumn DataField="Available" DataType="System.Boolean" 
           FilterControlAltText="Filter Available column" HeaderText="Available" 
           SortExpression="Available" UniqueName="Available">
       </telerik:GridCheckBoxColumn>
       <telerik:GridBoundColumn DataField="CarID" DataType="System.Int32" 
           FilterControlAltText="Filter CarID column" HeaderText="CarID" 
           ReadOnly="True" SortExpression="CarID" UniqueName="CarID">
       </telerik:GridBoundColumn>
       <telerik:GridBoundColumn DataField="CarYear" DataType="System.Int16" 
           FilterControlAltText="Filter CarYear column" HeaderText="CarYear" 
           SortExpression="CarYear" UniqueName="CarYear">
       </telerik:GridBoundColumn>
       <telerik:GridBoundColumn DataField="CategoryID" DataType="System.Int32" 
           FilterControlAltText="Filter CategoryID column" HeaderText="CategoryID" 
           SortExpression="CategoryID" UniqueName="CategoryID">
       </telerik:GridBoundColumn>
       <telerik:GridCheckBoxColumn DataField="DVDPlayer" DataType="System.Boolean"
           FilterControlAltText="Filter DVDPlayer column" HeaderText="DVDPlayer" 
           SortExpression="DVDPlayer" UniqueName="DVDPlayer">
       </telerik:GridCheckBoxColumn>
       <telerik:GridBoundColumn DataField="ImageFileName" FilterControlAltText="Filter ImageFileName column"
           HeaderText="ImageFileName" SortExpression="ImageFileName" UniqueName="ImageFileName">
       </telerik:GridBoundColumn>
       <telerik:GridBoundColumn DataField="Latitude" DataType="System.Double" 
           FilterControlAltText="Filter Latitude column" HeaderText="Latitude" 
           SortExpression="Latitude" UniqueName="Latitude">
       </telerik:GridBoundColumn>
       <telerik:GridBoundColumn DataField="Longitude" DataType="System.Double" 
           FilterControlAltText="Filter Longitude column" HeaderText="Longitude" 
           SortExpression="Longitude" UniqueName="Longitude">
       </telerik:GridBoundColumn>
       <telerik:GridBoundColumn DataField="Make" FilterControlAltText="Filter Make column"
           HeaderText="Make" SortExpression="Make" UniqueName="Make">
       </telerik:GridBoundColumn>
       <telerik:GridBoundColumn DataField="Model" FilterControlAltText="Filter Model column"
           HeaderText="Model" SortExpression="Model" UniqueName="Model">
       </telerik:GridBoundColumn>
       <telerik:GridCheckBoxColumn DataField="Mp3Player" DataType="System.Boolean" 
           FilterControlAltText="Filter Mp3Player column" HeaderText="Mp3Player" 
           SortExpression="Mp3Player" UniqueName="Mp3Player">
       </telerik:GridCheckBoxColumn>
       <telerik:GridCheckBoxColumn DataField="Navigation" DataType="System.Boolean" 
           FilterControlAltText="Filter Navigation column" HeaderText="Navigation" 
           SortExpression="Navigation" UniqueName="Navigation">
       </telerik:GridCheckBoxColumn>
       <telerik:GridBoundColumn DataField="NumberOfRatings" DataType="System.Int32"
           FilterControlAltText="Filter NumberOfRatings column" HeaderText="NumberOfRatings" 
           SortExpression="NumberOfRatings" UniqueName="NumberOfRatings">
       </telerik:GridBoundColumn>
       <telerik:GridBoundColumn DataField="Rating" DataType="System.Decimal" 
           FilterControlAltText="Filter Rating column" HeaderText="Rating" 
           SortExpression="Rating" UniqueName="Rating">
       </telerik:GridBoundColumn>
       <telerik:GridBoundColumn DataField="TagNumber" FilterControlAltText="Filter TagNumber column"
           HeaderText="TagNumber" SortExpression="TagNumber" UniqueName="TagNumber">
       </telerik:GridBoundColumn>
   </Columns>

Run your application and you should see the RadGrid control populated with all cars from the SofiaCarRental database.

In the next task, you will extend the code to enable you to create new Car objects.