Grid

Controls

All Controls

Grid

Rate this demo

Thank you for your post!
Submit a support ticket
If you have an active license or trial, you have access to dedicated support from Telerik’s developers. Response time is 24h for active licenses and 72h for trials, Mon-Fri.
Post in the forums
If you don’t have access to support or would like to help other people by sharing your problem, reach out to our active community in the forums.

RadGrid - Telerik's ASP.NET Grid

 General InformationSpecific InformationBooking Information
Brand NameModelClassificationTransmissionYearFuelPriceBook
 
select
select
select
select
  
Data pager
Data pager
Cars per page:
PageSizeComboBox
select
Currently we have 56 cars matching your search criteria
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

bit.ly/15OFeXF To test the behavior of our controls on mobile devices, scan the QR code.

bit.ly/15OFeXF

About RadGrid for ASP.NET AJAX

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.

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.

About This Demo

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 LinqDataSource control
  • - filter template with RadComboBox containing static (declarative) items

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.


Get Started

  • Use Telerik’s Visual Studio Extensions (which you have installed together with the Telerik controls) to quickly create, upgrade and configure your Telerik UI projects. Save time by using the ready-to-use Visual Studio templates that cover common application scenarios.
  • Find the controls in need in your VS toolbox and use the Design-time surface and rich wizards to configure them quickly.
  • If you’d like to learn more about how to best implement the controls, browse the Telerik folder in your Start menu and use the shortcuts there to access the local demos, online documentation or open the sample examples app in Visual Studio.
  • If you like this particular Grid demo, you can use the following path to find it in the sample website application:
grid/examples/overview

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

Resources

C# VB
Show code in new window Demo isolation steps
<%@ Page Language="c#" Inherits="Telerik.GridExamplesCSharp.Overview.DefaultCS" CodeFile="DefaultCS.aspx.cs" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register Src="~/Grid/Examples/Overview/Info.ascx" TagName="Info" TagPrefix="qsf" %>
<!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>ASP.NET DataGrid Demo | Telerik RadGrid control</title>
    <link href="CarDemoStyles.css" rel="stylesheet" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <script type="text/javascript">
            var radWindow1 = null;
            var radGrid1 = null;
            Sys.Application.add_load(documentReady);
            function documentReady()
            {
                radGrid1 = $find("<%= RadGrid1.ClientID %>");
                radWindow1 = $find("<%= RadWindow1.ClientID %>");
            }
            function openConfirmationWindow(carID)
            {
                radWindow1.set_title(carID);
                radWindow1.show();
            }
            function bookNowCloseClicking(sender, args)
            {
                radWindow1.close();
                togglePanels();
                radGrid1.get_masterTableView().fireCommand("UpdateCount", radWindow1.get_title());
                args.set_cancel(true);
            }
            function bookNowClicking(sender, args)
            {
                togglePanels();
                args.set_cancel(true);
            }
            function cancelClicking(sender, args)
            {
                radWindow1.close();
                args.set_cancel(true);
            }
            function togglePanels()
            {
                var panelStep1 = $get("<%= FirstStepPanel.ClientID %>");
                var panelStep2 = $get("<%= SecondStepPanel.ClientID %>");
                var step1Visible = panelStep1.style.display != "none";
                panelStep1.style.display = step1Visible ? "none" : "";
                panelStep2.style.display = step1Visible ? "" : "none";
            }
        </script>
    </telerik:RadCodeBlock>
    <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>
        <telerik:RadButton ID="SaveSettingsButton" runat="server" Skin="WebBlue" Text="Save"
            CssClass="settingsButton" Width="47px" OnClick="SaveSettingsButton_Click" />
        <telerik:RadButton ID="LoadSettingsButton" runat="server" Skin="WebBlue" Text="Load"
            Width="47px" OnClick="LoadSettingsButton_Click" />
        <div style="max-width: 995px; padding-right: 10px;">
            <telerik:RadGrid ID="RadGrid1" runat="server" AllowPaging="True" AllowSorting="True"
                Skin="WebBlue" OnNeedDataSource="RadGrid1_NeedDataSource" AllowFilteringByColumn="True"
                OnItemCommand="RadGrid1_ItemCommand" CellSpacing="0" GridLines="None">
                <GroupingSettings CaseSensitive="false" />
                <MasterTableView AutoGenerateColumns="false">
                    <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>
                    <Columns>
                        <telerik:GridBoundColumn DataField="BrandName" HeaderText="Brand Name" UniqueName="BrandName"
                            ColumnGroupName="GeneralInformation">
                            <FilterTemplate>
                                <telerik:RadComboBox ID="BrandNameCombo" DataSourceID="LinqDataSource1" DataTextField="BrandName"
                                    Skin="WebBlue" 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" />
                        <telerik:GridBoundColumn DataField="Classification" HeaderText="Classification" UniqueName="Classification"
                            ColumnGroupName="GeneralInformation">
                            <FilterTemplate>
                                <telerik:RadComboBox ID="ClassificationCombo" Width="80px" Skin="WebBlue" 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="100px" Skin="WebBlue" 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" />
                        <telerik:GridBoundColumn DataField="Fuel" HeaderText="Fuel" UniqueName="Fuel" ColumnGroupName="SpecificInformation">
                            <FilterTemplate>
                                <telerik:RadComboBox ID="FuelCombo" Width="100px" Skin="WebBlue" 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" />
                        <telerik:GridTemplateColumn HeaderText="Book" ColumnGroupName="BookingInformation"
                            AllowFiltering="false">
                            <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}.jpg);", Eval("BrandName"))) %>'>
                            <div style="float: left; padding-left: 40px">
                                <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") %>
                                </div>
                                <span style="color: #555555">Rented
                                    <%# Eval("RentedCount") %>
                                    times</span>
                                <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}Currently we have <strong>{5}</strong> cars matching your search criteria"
                        PageSizeLabelText="Cars per page:" />
                </MasterTableView>
                <ClientSettings EnableRowHoverStyle="true" EnablePostBackOnRowClick="true">
                    <Selecting AllowRowSelect="true" EnableDragToSelectRows="false" />
                </ClientSettings>
            </telerik:RadGrid>
        </div>
        <telerik:RadWindow ID="RadWindow1" runat="server" VisibleTitlebar="false" Modal="true"
            Behaviors="None" VisibleStatusbar="false" Width="580px" Height="360px">
            <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" Skin="WebBlue" />
                                </td>
                                <td>
                                    RETURN DATE
                                </td>
                                <td>
                                    <telerik:RadDatePicker ID="ReturnDatePicker" Width="130px" runat="server" Skin="WebBlue" />
                                </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" Skin="WebBlue" /><br />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    LAST NAME
                                </td>
                                <td>
                                    <telerik:RadTextBox ID="LastNameTextBox" runat="server" Width="190px" Skin="WebBlue" /><br />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    EMAIL
                                </td>
                                <td>
                                    <telerik:RadTextBox ID="EmailTextBox" runat="server" Width="190px" Skin="WebBlue" /><br />
                                </td>
                            </tr>
                        </table>
                        <hr class="lineSeparator" style="margin: 12px 0 15px 0" />
                        <telerik:RadButton ID="BookNowButton" runat="server" Skin="WebBlue" Text="Book Now"
                            Width="100px" OnClientClicking="bookNowClicking" UseSubmitBehavior="false" />
                        <telerik:RadButton ID="CancelButton" runat="server" Skin="WebBlue" 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">
                    <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" Skin="WebBlue" Text="Close"
                            Width="100px" OnClientClicking="bookNowCloseClicking" UseSubmitBehavior="false" />
                    </div>
                    <div style="clear: both">
                    </div>
                </asp:Panel>
            </ContentTemplate>
        </telerik:RadWindow>
    </div>
    <div class="qsf-overview-qr">
        <p>
            <asp:Image ID="Image1" runat="server" ImageUrl="~/Common/Images/QrCodesOverview/Grid.png"
                AlternateText="bit.ly/15OFeXF" />
            To test the behavior of our controls on mobile devices, scan the QR code.
        </p>
        <a href="http://bit.ly/15OFeXF">bit.ly/15OFeXF</a>
    </div>
    <asp:LinqDataSource ID="LinqDataSource1" runat="server" ContextTypeName="LinqToSql.TelerikSamplesDataContext"
        TableName="Cars" GroupBy="BrandName" Select="new (key as BrandName, it as Cars)">
    </asp:LinqDataSource>
    </form>
</body>
</html>
Telerik UI for ASP.NET AJAX Q3'14 Release is here