WebForms Grid Overview

This article provides a quick introduction so you can get your AJAX data grid up and running in a few seconds. You can find how to enable key features like paging, sorting, filtering, editing, grouping, exporting and accessibility support, as well as how to bind data.

ninja-iconThe Grid is part of Telerik UI for ASP.NET AJAX, a professional grade UI library with 120+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.Start Free Trial

Telerik RadGrid is designed to eliminate the typical trade-off associated with ASP.NET grid controls — rich functionality at the expense of weight and performance. Thanks to its innovative architecture, RadGrid is extremely fast and generates very little output. Added to this is true cross-browser support — all major/modern browsers, see Browser Support - Telerik UI for ASP.NET AJAX

To create a basic RadGrid:

  1. ensure you have a script manager on the page (use <asp:ScriptManager> tag to declare one)
  2. use the <telerik:RadGrid> tag to declare the grid and to set its global properties
  3. use its DataSource (or DataSourceID) property to reference the variable (or the DataSource component) that will hold your collection of data, see Telerik RadGrid Data Binding Basics
  4. use the <telerik:MasterTableView> to declare your main table and set its properties
  5. use the appropriate grid column tags to declare columns depending on the data type of their content. Set the DataField property to point at the name of the model field, see Column Types

Get started with the grid declaration and enabling some of its features

ASP.NET
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>

<telerik:RadGrid ID="RadGrid1" runat="server" AllowPaging="True" AllowSorting="true" AllowFilteringByColumn="true" OnNeedDataSource="RadGrid1_NeedDataSource">
    <MasterTableView AutoGenerateColumns="False" DataKeyNames="ID">
        <Columns>
            <telerik:GridBoundColumn DataField="ID" DataType="System.Int32" HeaderText="OrderID" ReadOnly="True" UniqueName="ID">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="Name" FilterControlAltText="Filter Name column" SortExpression="Name" HeaderText="Employee Name" UniqueName="Name">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="Team" FilterControlAltText="Filter Team column" SortExpression="Team" HeaderText="Team" UniqueName="Team">
            </telerik:GridBoundColumn>
            <telerik:GridDateTimeColumn DataField="HireDate" DataType="System.DateTime" FilterControlAltText="Filter HireDate column" SortExpression="HireDate" HeaderText="Hire Date" UniqueName="HireDate">
            </telerik:GridDateTimeColumn>
        </Columns>
    </MasterTableView>
</telerik:RadGrid>

Provide the RadGrid with a data collection in the code-behind

C#
protected void RadGrid1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
{
    (sender as RadGrid).DataSource = MyData; 
}

public IEnumerable<SampleData> MyData = Enumerable.Range(1, 30).Select(x => new SampleData
{
    Id = x,
    Name = "Name " + x,
    Team = "Team " + x % 5,
    HireDate = DateTime.Now.AddDays(-x*3).Date
});

public class SampleData
{
    public int Id { get; set; }
    public string Name { get; set; }
    public string Team { get; set; }
    public DateTime HireDate { get; set; }
}

The result from the code snippet above Basic RadGrid Example

Check out the most commonly used key features below, or head directly to the Getting Started section.

Basic Grid

WebForms Basic Grid

Advanced Grid

WebForms Advanced Grid

List of key functionalites you can find below:

Colorful Grid with built-in Skins

See Skins documentation.

WebForms Grid Overview Skins

Paging

See Paging documentation.

WebForms Grid Overview Paging

Filtering

See Filtering documentation.

WebForms Grid Overview Filtering

Sorting

See Sorting documentation.

WebForms Grid Overview Sorting

Grouping

See Grouping documentation.

WebForms Grid Overview Grouping

Hierarchy

See Hierarchical Grid Types documentation.

WebForms Hierarchy Grid Overview

Create/Read/Update/Delete (CRUD) operations

Server-Side Editing

Edit Form

See Edit Forms documentation.

Grid Edit Form

PopUp

See PopUp Edit Forms documentation.

Grid PopUp Edit Form

InPlace (Inline)

See InPlace documentation.

Grid InPlace Edit Form

Client-Side Editing

Batch Edit

See Batch Editing documentation.

Grid Batch Edit Form

Properties & Methods - API Reference

Get Started

Get Started with RadGrid

See Also