Grid Overview

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 — Internet Explorer, all Gecko-based browsers, and Opera.

Basic Grid

Code Snippet

<telerik:RadGrid ID="RadGrid1" runat="server" Skin="Bootstrap" OnNeedDataSource="RadGrid_NeedDataSource">
</telerik:RadGrid>
protected void RadGrid_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
{
    (sender as RadGrid).DataSource = Enumerable.Range(1, 5).Select(x => new
    {
        OrderID = x,
        OrderDate = DateTime.Now.Date.AddHours(x),
        Freight = x + x * 0.1,
        ShipName = "Name " + x,
        ShipCountry = "Country " + x
    });
}
Protected Sub RadGrid_NeedDataSource(ByVal sender As Object, ByVal e As GridNeedDataSourceEventArgs)
    TryCast(sender, RadGrid).DataSource = Enumerable.Range(1, 5).Select(Function(x) New With {
        Key .OrderID = x,
            .OrderDate = DateTime.Now.Date.AddHours(x),
            .Freight = x * 0.1,
            .ShipName = "Name " & x,
            .ShipCountry = "Country " & x
    })
End Sub

Advanced Grid

Code Snippet

<telerik:RadGrid ID="RadGrid2" runat="server" AllowPaging="True" Skin="Bootstrap" PageSize="6" Visible="true"
    AllowFilteringByColumn="true" AllowSorting="true" GroupingEnabled="true" ShowFooter="true"
    OnDetailTableDataBind="RadGrid_DetailTableDataBind"
    OnNeedDataSource="RadGrid_NeedDataSource">
    <MasterTableView CommandItemDisplay="Top" Name="TableLevel1" Caption="Table Level1">
        <GroupByExpressions>
            <telerik:GridGroupByExpression>
                <SelectFields>
                    <telerik:GridGroupByField FieldName="Group" />
                </SelectFields>
                <GroupByFields>
                    <telerik:GridGroupByField FieldName="Group" />
                </GroupByFields>
            </telerik:GridGroupByExpression>
        </GroupByExpressions>
        <CommandItemSettings ShowExportToCsvButton="true" ShowExportToExcelButton="true" ShowExportToPdfButton="true" ShowExportToWordButton="true" ShowPrintButton="true" ShowSaveChangesButton="true" ShowCancelChangesButton="true" />
        <DetailTables>
            <telerik:GridTableView Name="TableLevel2" Caption="Table Level2">
                <DetailTables>
                    <telerik:GridTableView Name="TableLevel3" Caption="Table Level3">
                    </telerik:GridTableView>
                </DetailTables>
            </telerik:GridTableView>
        </DetailTables>
    </MasterTableView>
</telerik:RadGrid>
protected void RadGrid_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
{
    if (!e.IsFromDetailTable)
    {
        (sender as RadGrid).DataSource = Enumerable.Range(1, 5).Select(x => new
        {
            OrderID = x,
            OrderDate = DateTime.Now.Date.AddHours(x),
            Freight = x + x * 0.1,
            ShipName = "Name " + x,
            ShipCountry = "Country " + x,
            Group = x % 2 == 0 ? "G1" : "G2"
        });
    }
}
protected void RadGrid_DetailTableDataBind(object sender, GridDetailTableDataBindEventArgs e)
{
    if (e.DetailTableView.Name == "TableLevel2")
    {
        e.DetailTableView.DataSource = Enumerable.Range(1, 2).Select(x => new
        {
            ID = x,
            Description = "T Level 2 Data " + x
        });
    }
    else if (e.DetailTableView.Name == "TableLevel3")
    {
        e.DetailTableView.DataSource = Enumerable.Range(1, 2).Select(x => new
        {
            ID = x,
            Description = "T Level 3 Data " + x
        });
    }
}
Protected Sub RadGrid_NeedDataSource(ByVal sender As Object, ByVal e As GridNeedDataSourceEventArgs)
    If Not e.IsFromDetailTable Then
        TryCast(sender, RadGrid).DataSource = Enumerable.Range(1, 5).Select(Function(x) New With {
            Key .OrderID = x,
                .OrderDate = DateTime.Now.Date.AddHours(x),
                .Freight = x + x * 0.1,
                .ShipName = "Name " & x,
                .ShipCountry = "Country " & x,
                .Group = If(x Mod 2 = 0, "G1", "G2")
        })
    End If
End Sub

Protected Sub RadGrid_DetailTableDataBind(ByVal sender As Object, ByVal e As GridDetailTableDataBindEventArgs)
    If e.DetailTableView.Name = "TableLevel2" Then
        e.DetailTableView.DataSource = Enumerable.Range(1, 2).Select(Function(x) New With {
            Key .ID = x,
                .Description = "T Level 2 Data " & x
        })
    ElseIf e.DetailTableView.Name = "TableLevel3" Then
        e.DetailTableView.DataSource = Enumerable.Range(1, 2).Select(Function(x) New With {
            Key .ID = x,
                .Description = "T Level 3 Data " & x
        })
    End If
End Sub

Colorful Grid with built-in Skins

Code Snippets to generate a Grid for each Skin and compare them

<asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder>
protected void Page_Init(object sender, EventArgs e)
{
    string[] skins = new string[] {
        "Material", // light
        "Black", // dark
        "Office2007", // blue
        "Silk", // green
        "WebBlue", // blue
        "Simple", // orange
        "Web20", // blue
        "Bootstrap", // light
        "BlackMetroTouch", // dark
        "Outlook", // blue
        "Telerik", // green
        "Sunset", // orange
        "MetroTouch", // light
        "Glow", // dark
        "Windows7", // light
        "Default", // dark
        "Vista", // blue
    };

    foreach (string skin in skins)
    {
        Panel pnl = new Panel();
        pnl.CssClass = "gridwrapper";
        pnl.ID = Guid.NewGuid().ToString();
        pnl.Style.Add("max-width", "1200px");
        pnl.Style.Add("margin", "0 auto 20px auto");

        RadGrid grid = new RadGrid();
        grid.ID = string.Format("Grid{0}", skin);
        grid.Skin = skin;
        grid.NeedDataSource += Grid_NeedDataSource;
        grid.PreRender += Grid_PreRender;

        grid.MasterTableView.SortExpressions.Add(new GridSortExpression() { FieldName = "Freight", SortOrder = GridSortOrder.Descending });

        grid.AllowPaging = true;
        grid.PageSize = 3;
        grid.AllowSorting = true;
        grid.AllowFilteringByColumn = true;
        pnl.Controls.Add(grid);
        PlaceHolder1.Controls.Add(pnl);
    }
}

private void Grid_PreRender(object sender, EventArgs e)
{
    (sender as RadGrid).MasterTableView.GetItems(GridItemType.AlternatingItem).First().Selected = true;
}

private void Grid_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
{
    (sender as RadGrid).DataSource = Enumerable.Range(1, 20).Select(x => new
    {
        OrderID = x,
        OrderDate = DateTime.Now.Date.AddDays(x),
        Freight = x * .1,
        ShipName = "Name " + x,
        ShipCountry = "Country " + x
    });
}
Protected Sub Page_Init(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Init

    Dim skins As String() = New String() {
        "Material",
        "Black",
        "Office2007",
        "Silk",
        "WebBlue",
        "Simple",
        "Web20",
        "Bootstrap",
        "BlackMetroTouch",
        "Outlook",
        "Telerik",
        "Sunset",
        "MetroTouch",
        "Glow",
        "Windows7",
        "Default",
        "Vista"
    }

    For Each skin As String In skins
        Dim pnl As Panel = New Panel()
        pnl.CssClass = "gridwrapper"
        pnl.ID = Guid.NewGuid().ToString()
        pnl.Style.Add("max-width", "1200px")
        pnl.Style.Add("margin", "0 auto 20px auto")
        Dim grid As RadGrid = New RadGrid()
        grid.ID = String.Format("Grid{0}", skin)
        grid.Skin = skin

        AddHandler grid.NeedDataSource, AddressOf Grid_NeedDataSource
        AddHandler grid.PreRender, AddressOf Grid_PreRender

        grid.MasterTableView.SortExpressions.Add(New GridSortExpression() With {
            .FieldName = "Freight",
            .SortOrder = GridSortOrder.Descending
        })

        grid.AllowPaging = True
        grid.PageSize = 3
        grid.AllowSorting = True
        grid.AllowFilteringByColumn = True
        pnl.Controls.Add(grid)
        PlaceHolder1.Controls.Add(pnl)
    Next
End Sub

Private Sub Grid_PreRender(ByVal sender As Object, ByVal e As EventArgs)
    TryCast(sender, RadGrid).MasterTableView.GetItems(GridItemType.AlternatingItem).First().Selected = True
End Sub

Private Sub Grid_NeedDataSource(ByVal sender As Object, ByVal e As GridNeedDataSourceEventArgs)
    TryCast(sender, RadGrid).DataSource = Enumerable.Range(1, 20).Select(Function(x) New With {
        Key .OrderID = x,
            .OrderDate = DateTime.Now.Date.AddDays(x),
            .Freight = x * 0.1,
            .ShipName = "Name " & x,
            .ShipCountry = "Country " & x
    })
End Sub

Setting up the environment

If the Telerik Web UI for ASP.NET AJAX is not installed yet, you can start off by installing it following the First Steps article.

Creating a RadGrid

There are three ways to create a RadGrid:

Binding data

Binding data to RadGrid can also be done in multiple different ways listed in the Telerik RadGrid Data Binding Basics article.

Depending on the Business Requirements, you can bind data to it on:

Features/Functionalities

RadGrid has many top-of-the line features/functionalities that you can benefit of. Check out the complete list of all Features

Commonly used Functionalities are:

Changing the appearance

Optimizing Performance

Troubleshooting

See Also

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