Telerik is a leading vendor of ASP.NET AJAX, ASP.NET MVC, Silverlight, WinForms and WPF controls and components, as well as .NET Reporting, .NET ORM , .NET CMS, Code Analysis, Mocking, Team Productivity and Automated Testing Tools. Building on its expertise in interface development and Microsoft technologies, Telerik helps customers build applications with unparalleled richness, responsiveness and interactivity. Telerik products help thousands of companies to be more productive and deliver reliable applications under budget and on time.
Version Q1 2012 released 04/11/2012
select

Grid / Column Types

Next database reset in 0 hours, 41 minutes, 45 seconds
Image ColumnBound
Column		LinkButton
Column		ImageButton
Column		HyperLink
Column		CheckBox column
Contact details
Contact name Contact title
CheckBoxSelect footerImageColumn footerBoundColumn footerLinkButtonColumn footerImageButtonColumn
footer		HyperLinkColumn footerCheckBox column footer Template column footer
12345678910...
Page size:
select
 88 items in 30 pages
Ana TrujilloOwnerRemove selectionSearch Google for 'Ana Trujillo Emparedados y helados'
Ana Trujillo Owner
Antonio MorenoOwnerRemove selectionSearch Google for 'Antonio Moreno Taquería'
Antonio Moreno Owner
Thomas HardySales RepresentativeRemove selectionSearch Google for 'Around the Horn'
Thomas Hardy Sales Representative

New built-in column types for RadGrid for ASP.NET AJAX
Add new recordRefresh
Edit columnHTMLEditorColumnDropDown ColumnRadComboBox ColumnMasked ColumnNumeric ColumnDateTime ColumnCalculated Column
 HTMLEditorColumn footerDropDown column footerRadComboBox column footerMaskedColumn footerNumericColumn footerDateTimeColumn footerCalculatedColumn footer
123
Page size:
select
 8 items in 3 pages
EditAndrew received his BTS commercial in 1974 and a Ph.D. in international marketing from the University of Dallas in 1981. He is fluent in French and Italian and reads German. He joined the company as a sales representative, was promoted to sales manager in January 1992 and to vice president of sales in March 1993. Andrew is a member of the Sales Management Roundtable, the Seattle Chamber of Commerce, and the Pacific Rim Importers Association.Dr. (206) 555-9482345708/14/1992Andrew Fuller
HTMLEditorColumn:
   
 
 
 
 
   
Update Cancel
EditJanet has a BS degree in chemistry from Boston College (1984). She has also completed a certificate program in food retailing management. Janet was hired as a sales associate in 1991 and promoted to sales representative in February 1992.Ms.Kirkland(206) 555-3412335504/01/1992Janet Leverling
EditMargaret holds a BA in English literature from Concordia College (1958) and an MA from the American Institute of Culinary Arts (1966). She was assigned to the London office temporarily from July through November 1992.Mrs. (206) 555-8122517605/03/1993Margaret Peacock

  • Telerik RadGrid supports all widely used column types as well as Template columns, which give you complete freedom over the data layout and formatting. The supported column types are listed below:
    • GridEditCommandColumn
    • GridClientSelectColumn
    • GridImageColumn
    • GridBoundColumn
    • GridCheckBoxColumn
    • GridButtonColumn
    • GridHyperLinkColumn
    • GridTemplateColumn
    • GridCalculatedColumn - as its name hints, it is being used to calculate specified fields. They are added manually through the DataFields property
    • GridDateTimeColumn - with option to choose RadDatePicker, RadDateTimePicker, RadTimePicker or simply RadDateInput as editor. To choose the editor type use the PickerType property of the column
    • GridDropDownColumn - with option to choose standard MS DropDownList or RadComboBox as editor. To choose the editor type use the DropDownControlType property of the column. NEW: As of version 2010.Q2, the GridDropDownColumn supports automatic load-on-demand for the RadComboBox editor.
    • GridNumericColumn - with RadNumericTextBox as editor
    • GridMaskedColumn - with RadMaskedTextBox as editor
    • GridHTMLEditorColumn - with RadEditor control for editing

Source Code

C# VB.NET
Show code in new window Demo isolation steps
  • <%@ Page Language="vb" AutoEventWireup="false" Inherits="Telerik.GridExamplesVBNET.GeneralFeatures.ColumnTypes.DefaultVB"
        CodeFile="DefaultVB.aspx.vb" %>

    <%@ Register TagPrefix="telerik" Namespace="Telerik.QuickStart" %>
    <%@ Register TagPrefix="telerik" TagName="Header" Src="~/Common/Header.ascx" %>
    <%@ Register TagPrefix="telerik" TagName="HeadTag" Src="~/Common/HeadTag.ascx" %>
    <%@ Register TagPrefix="telerik" TagName="Footer" Src="~/Common/Footer.ascx" %>
    <%@ 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">
        <telerik:HeadTag runat="server" ID="Headtag2"></telerik:HeadTag>
        <style type="text/css">
            div.RadGrid .myTable, div.RadGrid .myTable td
            {
                border: 0;
                padding: 0;
                text-align: center;
            }
        </style>
    </head>
    <body class="BODY">
        <form runat="server" id="mainForm" method="post" style="width:1300px">
        <telerik:Header runat="server" ID="Header1" NavigationLanguage="VB" XhtmlCompliant="false" ShowDbResetTimer="true"></telerik:Header>
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        </telerik:RadScriptManager>
        <!-- content start -->
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="RadGrid1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="RadGrid2">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadGrid2" LoadingPanelID="RadAjaxLoadingPanel1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
        </telerik:RadAjaxLoadingPanel>
        <telerik:RadGrid ID="RadGrid1" DataSourceID="SqlDataSource1" AllowPaging="True" ShowFooter="True"
            runat="server" AutoGenerateColumns="False" AllowSorting="True" PageSize="3"
            GridLines="None" CellPadding="0" AllowMultiRowSelection="true">
            <MasterTableView ShowFooter="True">
                <Columns>
                    <telerik:GridClientSelectColumn UniqueName="CheckboxSelectColumn" FooterText="CheckBoxSelect footer" />
                    <telerik:GridImageColumn DataType="System.String" DataImageUrlFields="CustomerID"
                        DataImageUrlFormatString="IMG/{0}.jpg" AlternateText="Customer image" DataAlternateTextField="ContactName"
                        ImageAlign="Middle" ImageHeight="110px" ImageWidth="90px"
                        HeaderText="Image Column" FooterText="ImageColumn footer" />
                    <telerik:GridBoundColumn FooterText="BoundColumn footer" UniqueName="ContactTitle"
                        SortExpression="ContactTitle" HeaderText="Bound<br/>Column" DataField="ContactTitle">
                    </telerik:GridBoundColumn>
                    <telerik:GridButtonColumn FooterText="LinkButtonColumn footer" DataTextFormatString="Remove selection"
                        UniqueName="column1" HeaderText="LinkButton<br/>Column" CommandName="Deselect"
                        DataTextField="CustomerID">
                    </telerik:GridButtonColumn>
                    <telerik:GridButtonColumn FooterText="ImageButtonColumn<br/>footer" DataTextFormatString="Select {0}"
                        ButtonType="ImageButton" UniqueName="column" HeaderText="ImageButton<br/>Column"
                        ItemStyle-HorizontalAlign="Center" HeaderStyle-HorizontalAlign="Center" CommandName="Select"
                        DataTextField="CustomerID" ImageUrl="~/Common/ProductInfo/Grid.gif">
                    </telerik:GridButtonColumn>
                    <telerik:GridHyperLinkColumn FooterText="HyperLinkColumn footer" DataTextFormatString="Search Google for '{0}'"
                        DataNavigateUrlFields="CompanyName" UniqueName="CompanyName" DataNavigateUrlFormatString="http://www.google.com/search?hl=en&amp;q={0}&amp;btnG=Google+Search"
                        HeaderText="HyperLink<br/>Column" DataTextField="CompanyName">
                    </telerik:GridHyperLinkColumn>
                    <telerik:GridCheckBoxColumn UniqueName="GridCheckBoxColumn" DataField="Bool" HeaderText="CheckBox column"
                        FooterText="CheckBox column footer" />
                    <telerik:GridTemplateColumn UniqueName="TemplateColumn" SortExpression="CompanyName"
                        InitializeTemplatesFirst="false">
                        <FooterTemplate>
                            Template column footer</FooterTemplate>
                        <FooterStyle VerticalAlign="Middle" HorizontalAlign="Center" />
                        <HeaderTemplate>
                            <table id="Table1" cellspacing="0" style="width: 240px;" class="myTable">
                                <tr>
                                    <td colspan="2" align="center">
                                        <b>Contact details</b>
                                    </td>
                                </tr>
                                <tr>
                                    <td style="width: 50%">
    <asp:LinkButton CssClass="Button" ID="btnContName" Text="Contact name" ToolTip="Sort by ContactName"
    CommandName='Sort' CommandArgument='ContactName' runat="server" />
                                    </td>
                                    <td style="width: 50%">
    <asp:LinkButton CssClass="Button" ID="btnContTitle" Text="Contact title" ToolTip="Sort by ContactTitle"
    CommandName='Sort' CommandArgument='ContactTitle' runat="server" />
                                    </td>
                                </tr>
                            </table>
                        </HeaderTemplate>
                        <ItemTemplate>
                            <table cellspacing="0" width="100%" class="myTable">
                                <tr>
                                    <td style="width: 50%">
                                        <%# Eval("ContactName") %>
                                    </td>
                                    <td style="width: 50%">
                                        <%# Eval("ContactTitle") %>
                                    </td>
                                </tr>
                            </table>
                        </ItemTemplate>
                        <ItemStyle HorizontalAlign="Center" />
                    </telerik:GridTemplateColumn>
                </Columns>
            </MasterTableView>
            <ClientSettings>
                <Selecting AllowRowSelect="true" />
            </ClientSettings>
        </telerik:RadGrid>
        <br />
        New built-in column types for RadGrid for ASP.NET AJAX
        <br />
        <telerik:RadGrid ID="RadGrid2" DataSourceID="SqlDataSource2" AllowPaging="True"
            ShowFooter="true" runat="server" AutoGenerateColumns="False" AllowSorting="True"
            PageSize="3" GridLines="None" CellPadding="0" AllowAutomaticInserts="true"
            AllowAutomaticUpdates="true">
            <MasterTableView DataKeyNames="EmployeeID" AutoGenerateColumns="false" CommandItemDisplay="Top">
                <Columns>
                    <telerik:GridEditCommandColumn UniqueName="EditCommandColumn" HeaderText="Edit column">
                        <ItemStyle Width="50px" />
                    </telerik:GridEditCommandColumn>
                    <telerik:GridHTMLEditorColumn UniqueName="Notes" SortExpression="Notes" HeaderText="HTMLEditorColumn"
                        DataField="Notes" FooterText="HTMLEditorColumn footer" HeaderStyle-Width="200px">
                    </telerik:GridHTMLEditorColumn>
                    <telerik:GridDropDownColumn DataSourceID="SqlDataSource3" ListTextField="TitleOfCourtesy"
                        ListValueField="TitleOfCourtesy" UniqueName="GridDropDownColumn" SortExpression="TitleOfCourtesy"
                        HeaderText="DropDown Column" DropDownControlType="DropDownList" DataField="TitleOfCourtesy"
                        FooterText="DropDown column footer">
                    </telerik:GridDropDownColumn>
                    <telerik:GridDropDownColumn DataSourceID="SqlDataSource4" ListTextField="City" ListValueField="City"
                        UniqueName="City" SortExpression="City" HeaderText="RadComboBox Column" DataField="City"
                        DropDownControlType="RadComboBox" FooterText="RadComboBox column footer"
                        AllowAutomaticLoadOnDemand="true" AllowVirtualScrolling="true" ShowMoreResultsBox="true"
                        ItemsPerRequest="10">
                    </telerik:GridDropDownColumn>
                    <telerik:GridMaskedColumn Mask="(###) ###-####" UniqueName="HomePhone" SortExpression="HomePhone"
                        HeaderText="Masked Column" DataField="HomePhone" FooterText="MaskedColumn footer">
                        <ItemStyle Width="100px" />
                    </telerik:GridMaskedColumn>
                    <telerik:GridNumericColumn UniqueName="Extension" SortExpression="Extension" HeaderText="Numeric Column"
                        DataField="Extension" ColumnEditorID="GridNumericColumnEditor1" FooterText="NumericColumn footer">
                    </telerik:GridNumericColumn>
                    <telerik:GridDateTimeColumn UniqueName="HireDate" PickerType="DateTimePicker" HeaderText="DateTime Column"
                        DataField="HireDate" FooterText="DateTimeColumn footer" DataFormatString="{0:MM/dd/yyyy}"
                        EditDataFormatString="MMMM dd, yyyy hh:mm tt">
                        <ItemStyle Width="120px" />
                    </telerik:GridDateTimeColumn>
                    <telerik:GridCalculatedColumn UniqueName="Name" SortExpression="LastName" HeaderText="Calculated Column"
                        DataFields="FirstName, LastName" Expression='{0} + "&nbsp;" + {1}' FooterText="CalculatedColumn footer">
                    </telerik:GridCalculatedColumn>
                </Columns>
            </MasterTableView>
            <ClientSettings>
                <Resizing AllowColumnResize="true" />
            </ClientSettings>
        </telerik:RadGrid>
        <telerik:GridNumericColumnEditor ID="GridNumericColumnEditor1" runat="server">
            <NumericTextBox MaxLength="4" EmptyMessage="Ext.">
                <NumberFormat GroupSeparator="" />
            </NumericTextBox>
        </telerik:GridNumericColumnEditor>
        <asp:SqlDataSource ID="SqlDataSource1" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString35 %>"
            ProviderName="System.Data.SqlClient" SelectCommand="SELECT * FROM Customers"
            runat="server"></asp:SqlDataSource>
    <asp:SqlDataSource ID="SqlDataSource2" runat="server"
    ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString35 %>"
                InsertCommand="INSERT INTO [Employees] ([LastName], [FirstName], [TitleOfCourtesy], [HireDate], [City], [HomePhone], [Extension], [Notes]) VALUES (@LastName, @FirstName, @TitleOfCourtesy, @HireDate, @City, @HomePhone, @Extension, @Notes)"
                SelectCommand="SELECT * FROM [Employees]"
                UpdateCommand="UPDATE [Employees] SET [TitleOfCourtesy] = @TitleOfCourtesy, [HireDate] = @HireDate, [City] = @City, [HomePhone] = @HomePhone, [Extension] = @Extension, [Notes] = @Notes WHERE [EmployeeID] = @EmployeeID">
                <DeleteParameters>
                    <asp:Parameter Name="EmployeeID" Type="Int32" />
                </DeleteParameters>
                <InsertParameters>
                    <asp:Parameter Name="LastName" Type="String" DefaultValue="" ConvertEmptyStringToNull="false" />
                    <asp:Parameter Name="FirstName" Type="String" DefaultValue="" ConvertEmptyStringToNull="false" />
                    <asp:Parameter Name="TitleOfCourtesy" Type="String" />
                    <asp:Parameter Name="HireDate" Type="DateTime" />
                    <asp:Parameter Name="City" Type="String" />
                    <asp:Parameter Name="HomePhone" Type="String" />
                    <asp:Parameter Name="Extension" Type="String" />
                    <asp:Parameter Name="Notes" Type="String" />
                </InsertParameters>
                <UpdateParameters>
                    <asp:Parameter Name="TitleOfCourtesy" Type="String" />
                    <asp:Parameter Name="HireDate" Type="DateTime" />
                    <asp:Parameter Name="City" Type="String" />
                    <asp:Parameter Name="HomePhone" Type="String" />
                    <asp:Parameter Name="Extension" Type="String" />
                    <asp:Parameter Name="Notes" Type="String" />
                </UpdateParameters>
            </asp:SqlDataSource>
        <asp:SqlDataSource runat="server" ID="SqlDataSource3" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString35 %>"
            SelectCommand="SELECT DISTINCT [TitleOfCourtesy] FROM [Employees]"></asp:SqlDataSource>
        <asp:SqlDataSource runat="server" ID="SqlDataSource4" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString35 %>"
            SelectCommand="SELECT DISTINCT [City] FROM [Customers]"></asp:SqlDataSource>
        <!-- content end -->
        <telerik:Footer runat="server" ID="Footer1"></telerik:Footer>
        </form>
    </body>
    </html>

Get more than expected!

Take your time to truly experience the power of RadControls for ASP.NET AJAX with a free 60-day trial backed up by Telerik’s unlimited dedicated support.

Download your RadControls for ASP.NET AJAX trial and jumpstart your development with the available Getting Started resources.

If you have any questions, do not hesitate to contact us at sales@telerik.com.

Copyright 2002-2012 © Telerik. All right reserved
Telerik Inc, 201 Jones Rd, Waltham, MA 02451