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.

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 test it by your own and see its benefits in practice you can start a free trial using the button below

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: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

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; }
}
Protected Sub RadGrid1_NeedDataSource(ByVal sender As Object, ByVal e As GridNeedDataSourceEventArgs)
    TryCast(sender, RadGrid).DataSource = MyData
End Sub

Public MyData As IEnumerable(Of SampleData) = Enumerable.Range(1, 30).[Select](Function(x) New SampleData With {
    .Id = x,
    .Name = "Name " & x,
    .Team = "Team " & x Mod 5,
    .HireDate = DateTime.Now.AddDays(-x * 3).Date
})

Public Class SampleData
    Public Property Id As Integer
    Public Property Name As String
    Public Property Team As String
    Public Property HireDate As DateTime
End Class

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

Advanced Grid

List of key functionalites you can find below:

Colorful Grid with built-in Skins

See Skins documentation.

Paging

See Paging documentation.

Filtering

See Filtering documentation.

Sorting

See Sorting documentation.

Grouping

See Grouping documentation.

Hierarchy

See Hierarchical Grid Types documentation.

Create/Read/Update/Delete (CRUD) operations

Server-Side Editing

Edit Form

See Edit Forms documentation.

PopUp

See PopUp Edit Forms documentation.

InPlace (Inline)

See InPlace documentation.

Client-Side Editing

Batch Edit

See Batch Editing documentation.

Get Started with RadGrid

See Also

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