RadGrid - Telerik ASP.NET Grid

 General InformationSpecific InformationBooking Information
Brand NameModelClassificationTransmissionYearFuelPriceBook
 
select
select
select
select
  
OpelCorsaHatchbackAutomatic2006Gasoline€ 50.22 Book Now
HondaCivicHatchbackManual2007Gasoline€ 60.51 Book Now
AudiA3HatchbackAutomatic2003Gasoline€ 51.05 Book Now
LanciaYpsilonHatchbackManual2007Gasoline€ 66.77 Book Now
OpelCorsaHatchbackManual2005Diesel€ 48.89 Book Now
Alfa Romeo147HatchbackManual2006Diesel€ 55.91 Book Now
HondaCivicHatchbackAutomatic2006Diesel€ 62.11 Book Now
VWGolfHatchbackManual2010Gasoline€ 63.56 Book Now
Alfa Romeo147HatchbackManual2007Gasoline€ 56.22 Book Now
HondaCivicHatchbackAutomatic2011Hybrid€ 66.11 Book Now
Data pager
Data pager
Cars per page:
PageSizeComboBox
select
56 cars matching your search criteria
Isolate this demo as a stand-alone application

This example demonstrates some of the most popular capabilities of RadGrid working together in a rent-a-car scenario. The car details are displayed with the help of the NestedViewTemplate. The booking form resides within a RadWindow control's ContentTemplate and contains two ASP.NET Panels that are switched dynamically at runtime. The columns in this RadGrid use three different filter setups:

  • built-in filter controls
  • filter template with RadComboBox bound to EntityDataSource control
  • filter template with RadComboBox containing static (declarative) items

When working with DataGrids, fast loading of large data while having advanced Excel-like operations has always been a challenge. Having solid experience in web technologies, we designed our AJAX powered ASP.NET Grid to eliminate this tradeoff. Codeless databinding, rich client-side operations, and a myriad of features topped with unbeatable performance is what defines the Telerik RadGrid for ASP.NET AJAX.

About RadGrid for ASP.NET AJAX

RadGrid and 80+ other controls are part of UI for ASP.NET AJAX, a comprehensive toolset taking care of the common functionality of your application, while leaving you with more time to work on its business logic.

The multi-column headers are also demonstrated here. All the columns are grouped within parent groups which help the visitors easily distinguish the information they need.
The Save and Load buttons use the Persistence Framework to save/load the settings for the current user.
The databinding is performed within the NeedDataSource event thus taking advantage of the advanced data-binding capabilities offered by RadGrid.

Key Features

  • Integrated paging, sorting, filtering and grouping functionalities.
  • Insert, Update and Delete operations.
  • Hierarchy and NestedViewTemplate
  • Data-binding – Server-side, Client-side and WebService
  • Scrolling with Static Headers and Frozen Columns
  • Selecting Cells and Rows
  • Export to PDF, MS Word, MS Excel, and CSV
  • Multi-column headers and Keyboard support
  • Column Resize, Reorder and Show/Hide
  • Row Resize and Drag and Drop
<%@ Page Language="c#" Inherits="Telerik.GridExamplesCSharp.Overview.DefaultCS" CodeFile="DefaultCS.aspx.cs" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" rel="stylesheet" />
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <script type="text/javascript">
            var radWindow1 = null;
            var radGrid1 = null;
            var panelStep1 = null;
            var panelStep2 = null;

            function pageLoad() {
                radGrid1 = $find("<%= RadGrid1.ClientID %>");
                radWindow1 = $find("<%= RadWindow1.ClientID %>");
                panelStep1 = $get("<%= FirstStepPanel.ClientID %>");
                panelStep2 = $get("<%= SecondStepPanel.ClientID %>");
            }
        </script>
    </telerik:RadCodeBlock>
    <script type="text/javascript" src="scripts.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container" id="demo-container">
        <div class="gridPositioning">
            <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
                <AjaxSettings>
                    <telerik:AjaxSetting AjaxControlID="BookNowCloseButton">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="RadGrid1" />
                        </UpdatedControls>
                    </telerik:AjaxSetting>
                    <telerik:AjaxSetting AjaxControlID="SaveSettingsButton">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="RadGrid1" />
                        </UpdatedControls>
                    </telerik:AjaxSetting>
                    <telerik:AjaxSetting AjaxControlID="RadGrid1">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="RadGrid1" />
                        </UpdatedControls>
                    </telerik:AjaxSetting>
                </AjaxSettings>
            </telerik:RadAjaxManager>
            <telerik:RadPersistenceManager ID="RadPersistenceManager1" runat="server" StorageProviderKey="OverviewDemoStorage">
                <PersistenceSettings>
                    <telerik:PersistenceSetting ControlID="RadGrid1" />
                </PersistenceSettings>
            </telerik:RadPersistenceManager>
            <div class="gridHeader">
                <div></div>
                <telerik:RadButton ID="SaveSettingsButton" runat="server" Skin="" Text="Save"
                    CssClass="saveButton" OnClick="SaveSettingsButton_Click" />
                <telerik:RadButton ID="LoadSettingsButton" runat="server" Skin="" Text="Load"
                    CssClass="loadButton" OnClick="LoadSettingsButton_Click" />
            </div>
            <div>
                <telerik:RadGrid ID="RadGrid1" runat="server" AllowPaging="True" AllowSorting="True"
                    OnNeedDataSource="RadGrid1_NeedDataSource" AllowFilteringByColumn="True"
                    OnItemCommand="RadGrid1_ItemCommand" CellSpacing="0" GridLines="None">
                    <GroupingSettings CaseSensitive="false" />
                    <MasterTableView AutoGenerateColumns="false" TableLayout="Fixed">
                        <ColumnGroups>
                            <telerik:GridColumnGroup Name="GeneralInformation" HeaderText="General Information"
                                HeaderStyle-HorizontalAlign="Center" />
                            <telerik:GridColumnGroup Name="SpecificInformation" HeaderText="Specific Information"
                                HeaderStyle-HorizontalAlign="Center" />
                            <telerik:GridColumnGroup Name="BookingInformation" HeaderText="Booking Information"
                                HeaderStyle-HorizontalAlign="Center" />
                        </ColumnGroups>
                        <HeaderStyle Width="102px" />
                        <Columns>
                            <telerik:GridBoundColumn DataField="BrandName" HeaderText="Brand Name" UniqueName="BrandName"
                                ColumnGroupName="GeneralInformation">
                                <HeaderStyle Width="170px" />
                                <FilterTemplate>
                                    <telerik:RadComboBox ID="BrandNameCombo" DataSourceID="EntityDataSource1" DataTextField="BrandName"
                                        OnDataBound="BrandNameCombo_DataBound" DataValueField="BrandName"
                                        Height="200px" AppendDataBoundItems="true" SelectedValue='<%# ((GridItem)Container).OwnerTableView.GetColumn("BrandName").CurrentFilterValue %>'
                                        runat="server" OnClientSelectedIndexChanged="BrandNameComboIndexChanged">
                                        <Items>
                                            <telerik:RadComboBoxItem Text="Select a Brand" />
                                        </Items>
                                    </telerik:RadComboBox>
                                    <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
                                        <script type="text/javascript">
                                            function BrandNameComboIndexChanged(sender, args) {
                                                var tableView = $find("<%# ((GridItem)Container).OwnerTableView.ClientID %>");
                                            tableView.filter("BrandName", args.get_item().get_value(), "EqualTo");
                                        }
                                        </script>
                                    </telerik:RadScriptBlock>
                                </FilterTemplate>
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="Model" HeaderText="Model" UniqueName="Model"
                                ColumnGroupName="GeneralInformation" FilterControlWidth="60px">
                                <HeaderStyle Width="115px" />
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="Classification" HeaderText="Classification" UniqueName="Classification"
                                ColumnGroupName="GeneralInformation">
                                <FilterTemplate>
                                    <telerik:RadComboBox ID="ClassificationCombo" Width="90px" SelectedValue='<%# ((GridItem)Container).OwnerTableView.GetColumn("Classification").CurrentFilterValue %>'
                                        runat="server" OnClientSelectedIndexChanged="ClassificationComboIndexChanged">
                                        <Items>
                                            <telerik:RadComboBoxItem Text="All" Value="" />
                                            <telerik:RadComboBoxItem Text="Hatchback" Value="Hatchback" />
                                            <telerik:RadComboBoxItem Text="Sedan" Value="Sedan" />
                                            <telerik:RadComboBoxItem Text="SUV" Value="SUV" />
                                            <telerik:RadComboBoxItem Text="MPV" Value="MPV" />
                                        </Items>
                                    </telerik:RadComboBox>
                                    <telerik:RadScriptBlock ID="RadScriptBlock2" runat="server">
                                        <script type="text/javascript">
                                            function ClassificationComboIndexChanged(sender, args) {
                                                var tableView = $find("<%# ((GridItem)Container).OwnerTableView.ClientID %>");
                                            tableView.filter("Classification", args.get_item().get_value(), "EqualTo");
                                        }
                                        </script>
                                    </telerik:RadScriptBlock>
                                </FilterTemplate>
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="Transmission" HeaderText="Transmission" UniqueName="Transmission"
                                ColumnGroupName="GeneralInformation">
                                <FilterTemplate>
                                    <telerik:RadComboBox ID="TransmissionCombo" Width="90px" SelectedValue='<%# ((GridItem)Container).OwnerTableView.GetColumn("Transmission").CurrentFilterValue %>'
                                        runat="server" OnClientSelectedIndexChanged="TransmissionComboIndexChanged">
                                        <Items>
                                            <telerik:RadComboBoxItem Text="All" Value="" />
                                            <telerik:RadComboBoxItem Text="Manual" Value="Manual" />
                                            <telerik:RadComboBoxItem Text="Automatic" Value="Automatic" />
                                        </Items>
                                    </telerik:RadComboBox>
                                    <telerik:RadScriptBlock ID="RadScriptBlock3" runat="server">
                                        <script type="text/javascript">
                                            function TransmissionComboIndexChanged(sender, args) {
                                                var tableView = $find("<%# ((GridItem)Container).OwnerTableView.ClientID %>");
                                            tableView.filter("Transmission", args.get_item().get_value(), "EqualTo");
                                        }
                                        </script>
                                    </telerik:RadScriptBlock>
                                </FilterTemplate>
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="Year" HeaderText="Year" UniqueName="Year" ColumnGroupName="SpecificInformation" FilterControlWidth="55px">
                                <HeaderStyle Width="110px" />
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="Fuel" HeaderText="Fuel" UniqueName="Fuel" ColumnGroupName="SpecificInformation">
                                <FilterTemplate>
                                    <telerik:RadComboBox ID="FuelCombo" Width="90px" SelectedValue='<%# ((GridItem)Container).OwnerTableView.GetColumn("Fuel").CurrentFilterValue %>'
                                        runat="server" OnClientSelectedIndexChanged="FuelComboIndexChanged">
                                        <Items>
                                            <telerik:RadComboBoxItem Text="All" Value="" />
                                            <telerik:RadComboBoxItem Text="Diesel" Value="Diesel" />
                                            <telerik:RadComboBoxItem Text="Gasoline" Value="Gasoline" />
                                            <telerik:RadComboBoxItem Text="Hybrid" Value="Hybrid" />
                                        </Items>
                                    </telerik:RadComboBox>
                                    <telerik:RadScriptBlock ID="RadScriptBlock4" runat="server">
                                        <script type="text/javascript">
                                            function FuelComboIndexChanged(sender, args) {
                                                var tableView = $find("<%# ((GridItem)Container).OwnerTableView.ClientID %>");
                                            tableView.filter("Fuel", args.get_item().get_value(), "EqualTo");
                                        }
                                        </script>
                                    </telerik:RadScriptBlock>
                                </FilterTemplate>
                            </telerik:GridBoundColumn>
                            <telerik:GridNumericColumn DataField="Price" HeaderText="Price" UniqueName="Price"
                                ColumnGroupName="BookingInformation" DataFormatString="<strong>&#8364; {0}</strong>"
                                AllowFiltering="false" HeaderStyle-Width="80px" />
                            <telerik:GridTemplateColumn HeaderText="Book" ColumnGroupName="BookingInformation"
                                AllowFiltering="false">
                                <HeaderStyle Width="102px" />
                                <ItemTemplate>
                                    <asp:LinkButton ID="BookButton" runat="server" Text="Book Now" OnClientClick='<%# String.Format("openConfirmationWindow({0}); return false;", Eval("CarID")) %>'
                                        CssClass="bookNowLink" />
                                </ItemTemplate>
                            </telerik:GridTemplateColumn>
                        </Columns>
                        <NestedViewTemplate>
                            <div class="carBackground" style='<%# NormalizeValue(String.Format("background-image: url(Images/LargeLogos/{0}.png);", Eval("BrandName"))) %>'>
                                <div style="float: left;">
                                    <asp:Image ID="CarImage" runat="server" AlternateText="Car Image" ImageUrl='<%# GetCarImageUrl(Container)%>' />
                                </div>
                                <div style="float: right; width: 50%">
                                    <div class="carTitle">
                                        <%# Eval("BrandName") %>
                                        <%# Eval("Model") %>
                                        <span style="color: #555555; float: right; font-size: 14px; font-weight: normal;">Rented
                                        <%# Eval("RentedCount") %>
                                        times</span>
                                    </div>
                                    <hr class="lineSeparator" />
                                    <table width="100%" class="carInfo">
                                        <tr>
                                            <td>
                                                <strong>Year:</strong>
                                                <%# Eval("Year") %>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <strong>Classification:</strong>
                                                <%# Eval("Classification") %>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <strong>Transmission:</strong>
                                                <%# Eval("Transmission") %>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <strong>Fuel Type:</strong>
                                                <%# Eval("Fuel") %>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <strong>Price:</strong> &#8364;<%# Eval("Price") %>
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                                <div style="clear: both">
                                </div>
                            </div>
                        </NestedViewTemplate>
                        <PagerStyle PageSizes="5,10" PagerTextFormat="{4}<strong>{5}</strong> cars matching your search criteria"
                            PageSizeLabelText="Cars per page:" />
                    </MasterTableView>
                    <ClientSettings EnableRowHoverStyle="true" EnablePostBackOnRowClick="true">
                        <Selecting AllowRowSelect="true" EnableDragToSelectRows="false" />
                        <Scrolling AllowScroll="true" UseStaticHeaders="true" ScrollHeight="" />
                    </ClientSettings>
                </telerik:RadGrid>
            </div>
            <telerik:RadWindow ID="RadWindow1" runat="server" VisibleTitlebar="false" Modal="true" AutoSize="true"
                Behaviors="None" VisibleStatusbar="false">
                <ContentTemplate>
                    <asp:Panel ID="FirstStepPanel" runat="server">
                        <div class="bookNowFrame">
                            <div class="bookNowTitle">
                                Fill in the form to make your reservation
                            </div>
                            <hr class="lineSeparator" style="margin: 12px 0 12px 0" />
                            <table cellspacing="8">
                                <colgroup>
                                    <col width="90px" />
                                    <col width="150px" />
                                    <col />
                                    <col />
                                </colgroup>
                                <tr>
                                    <td>DATE OF RENT
                                    </td>
                                    <td>
                                        <telerik:RadDatePicker ID="DateOfRentPicker" Width="130px" runat="server" />
                                    </td>
                                    <td>RETURN DATE
                                    </td>
                                    <td>
                                        <telerik:RadDatePicker ID="ReturnDatePicker" Width="130px" runat="server" />
                                    </td>
                                </tr>
                            </table>
                            <hr class="lineSeparator" style="margin: 12px 0 12px 0" />
                            <table cellspacing="8">
                                <colgroup>
                                    <col width="90px" />
                                    <col />
                                </colgroup>
                                <tr>
                                    <td>FIRST NAME
                                    </td>
                                    <td>
                                        <telerik:RadTextBox ID="FirstNameTextBox" runat="server" Width="190px" /><br />
                                    </td>
                                </tr>
                                <tr>
                                    <td>LAST NAME
                                    </td>
                                    <td>
                                        <telerik:RadTextBox ID="LastNameTextBox" runat="server" Width="190px" /><br />
                                    </td>
                                </tr>
                                <tr>
                                    <td>EMAIL
                                    </td>
                                    <td>
                                        <telerik:RadTextBox ID="EmailTextBox" runat="server" Width="190px" /><br />
                                    </td>
                                </tr>
                            </table>
                            <hr class="lineSeparator" style="margin: 12px 0 15px 0" />
                            <telerik:RadButton ID="BookNowButton" runat="server" Text="Book Now"
                                Width="100px" OnClientClicking="bookNowClicking" UseSubmitBehavior="false" />
                            <telerik:RadButton ID="CancelButton" runat="server" Text="Cancel"
                                Width="100px" OnClientClicking="cancelClicking" UseSubmitBehavior="false" />
                        </div>
                    </asp:Panel>
                    <asp:Panel ID="SecondStepPanel" runat="server" Style="display: none; padding: 120px 20px 0 30px; width: 480px;">
                        <div style="float: left;">
                            <img src="Images/Confirmation.png" alt="Confirmation sign" />
                        </div>
                        <div style="float: left; padding: 10px 0 0 20px;">
                            <div class="bookNowComplete">
                                You have successfully made your reservation!
                            </div>
                            <hr class="lineSeparator" style="margin: 10px 10px 20px 0" />
                            <telerik:RadButton ID="BookNowCloseButton" runat="server" Text="Close"
                                Width="100px" OnClientClicking="bookNowCloseClicking" UseSubmitBehavior="false" />
                        </div>
                        <div style="clear: both">
                        </div>
                    </asp:Panel>
                </ContentTemplate>
            </telerik:RadWindow>
        </div>
    </div>
    <asp:EntityDataSource runat="server" ID="EntityDataSource1" ConnectionString="name=TelerikReadWriteEntities" DefaultContainerName="TelerikReadWriteEntities" EnableFlattening="False" EntitySetName="Cars"
        GroupBy="it.BrandName" Select="it.BrandName">
    </asp:EntityDataSource>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?