New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Column Types

Next database reset in 0 hours, 33 minutes, 1 seconds
Image ColumnBound ColumnLinkButton ColumnImageButton ColumnHyperLink ColumnCalculated ColumnTemplate Column
12345678910...
Page size:
 88 items in 30 pages
Christina BerglundOrder AdministratorRemove selectionSearch Google for 'Berglunds snabbköp'Luleå (Sweden) Berguvsvägen 8
Hanna MoosSales RepresentativeRemove selectionSearch Google for 'Blauer See Delikatessen'Mannheim (Germany) Forsterstr. 57
Frédérique CiteauxMarketing ManagerRemove selectionSearch Google for 'Blondesddsl père et fils'Strasbourg (France) 24, place Kléber


EditcolumnHTMLEditor ColumnDropDown ColumnCheckBox ColumnRating columnMasked ColumnNumeric ColumnDateTime ColumnAttachment Column
Page size:
 11 items in 4 pages
Education includes a BA in psy...Seattle(206) 555-9857546705/01/1992ViewState.gif
HTMLEditor Column:
  • Show/Hide Border
  • Table Properties
  • Delete Table
  • Row
    • Insert Row Above
    • Insert Row Below
    • Delete Row
  • Column
    • Insert Column to the Left
    • Insert Column to the Right
    • Delete Column
  • Cell
    • Merge Cells Horizontally
    • Merge Cells Vertically
    • Split Cell Horizontally
    • Split Cell Vertically
    • Delete Cell
  • Cell Properties
  • Table Properties
  • Properties...
  • Image Map Editor
  • Properties...
  • OpenLink
  • Remove Link
  • Insert Select
  • Cut
  • Copy
  • Paste
  • Paste from Word
  • Paste Plain Text
  • Paste As Html
  • Paste Html
Rating column:
Upload File:

 
Andrew received his BTS commer... (206) 555-9482345708/14/1992Appointments.xml
Janet has a BS degree in chemi...Kirkland(206) 555-3412335504/01/1992Sushi.pdf

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 - displays a link or a button for placing the grid in edit mode
  • GridClientSelectColumn - displays a checkbox for selecting / deselecting the rows on the client
  • GridImageColumn - serves to display an image in the grid's cell
  • GridBoundColumn - default column for displaying string values in the control
  • GridCheckBoxColumn - displays a checkbox that represingting a boolean value
  • GridButtonColumn - displays a button optionally with a custom column performing an action
  • GridHyperLinkColumn - displays a hyperlink to perferred URL
  • 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
  • GridAttachmentColumn - provides you an easy way to upload to and download straight from your data source
  • GridRatingColumn - renders RadRating control providing different options for configuration
  • GridDropDownColumn - with option to choose standard MS DropDownList or RadComboBox as editor. To choose the editor type use the DropDownControlType property of the column. 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
  • GridTemplateColumn - provides options for defining the layout of the column cells through ItemTemplate and EditItemTemplate
  • DefaultVB.aspx
  • DefaultVB.aspx.vb
  • scripts.js
  • styles.css
<%@ Page Language="vb" AutoEventWireup="false" Inherits="Telerik.GridExamplesVBNET.GeneralFeatures.ColumnTypes.DefaultVB"CodeFile="DefaultVB.aspx.vb"  %>


<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <telerik:RadCodeBlock ID="RadCodeBlock2" runat="server">
        <script type="text/javascript">
            var manager;
            Sys.Application.add_load(function () {
                manager = $find('<%= RadAjaxManager.GetCurrent(Page).ClientID %>');
            })
        </script>
    </telerik:RadCodeBlock>
    <script type="text/javascript" src="scripts.js"></script>
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadGrid1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="RadGrid2">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid2" LoadingPanelID="RadAjaxLoadingPanel1"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
    </telerik:RadAjaxLoadingPanel>
    <telerik:RadGrid RenderMode="Lightweight" ID="RadGrid1" DataSourceID="SqlDataSource1" AllowPaging="True" Width="100%"
        runat="server" AutoGenerateColumns="False" AllowSorting="True" PageSize="3" AllowMultiRowSelection="true">
        <MasterTableView>
            <Columns>
                <telerik:GridClientSelectColumn UniqueName="ClientSelectColumn1">
                </telerik:GridClientSelectColumn>
                <telerik:GridImageColumn DataType="System.String" DataImageUrlFields="CustomerID"
                    DataImageUrlFormatString="IMG/{0}.jpg" AlternateText="Customer image" DataAlternateTextField="ContactName"
                    ImageAlign="Middle" ImageHeight="100px" ImageWidth="82px" HeaderText="Image Column">
                </telerik:GridImageColumn>
                <telerik:GridBoundColumn UniqueName="ContactTitle"
                    SortExpression="ContactTitle" HeaderText="Bound Column" DataField="ContactTitle">
                </telerik:GridBoundColumn>
                <telerik:GridButtonColumn DataTextFormatString="Remove selection" ButtonType="LinkButton"
                    UniqueName="column1" HeaderText="LinkButton Column" CommandName="Deselect"
                    DataTextField="CustomerID">
                </telerik:GridButtonColumn>
                <telerik:GridButtonColumn DataTextFormatString="Select {0}"
                    ButtonType="ImageButton" UniqueName="column" HeaderText="ImageButton Column"
                    ItemStyle-HorizontalAlign="Center" HeaderStyle-HorizontalAlign="Center" CommandName="Select"
                    DataTextField="CustomerID" ImageUrl="IMG/Product/Grid.png">
                </telerik:GridButtonColumn>
                <telerik:GridHyperLinkColumn SortExpression="CompanyName" 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 Column" DataTextField="CompanyName">
                </telerik:GridHyperLinkColumn>
                <telerik:GridCalculatedColumn UniqueName="CalculatedColumn" HeaderText="Calculated Column"
                    DataFields="City, Country" Expression='{0} + "&nbsp;" + "(" + {1} + ")"'>
                </telerik:GridCalculatedColumn>
                <telerik:GridTemplateColumn SortExpression="Address" UniqueName="TemplateColumn" HeaderText="Template Column">
                    <ItemTemplate>
                        <asp:Label Text='<%# Bind("Address") %>' runat="server" ID="Label1" />
                    </ItemTemplate>
                </telerik:GridTemplateColumn>
            </Columns>
        </MasterTableView>
        <ClientSettings>
            <Selecting AllowRowSelect="true"></Selecting>

        </ClientSettings>
    </telerik:RadGrid>
    <br />
    <br />

    <telerik:RadGrid RenderMode="Lightweight" ID="RadGrid2" DataSourceID="SqlDataSource2" AllowPaging="True" Width="100%"
        runat="server" AutoGenerateColumns="False" AllowSorting="True" PageSize="3"
        AllowAutomaticInserts="true" AllowAutomaticUpdates="true" OnItemDataBound="RadGrid2_ItemDataBound" OnItemCommand="RadGrid2_ItemCommand">
        <MasterTableView DataKeyNames="EmployeeID" AutoGenerateColumns="false" CommandItemDisplay="Top">
            <Columns>
                <telerik:GridEditCommandColumn UniqueName="EditCommandColumn" HeaderText="Editcolumn">
                    <ItemStyle Width="50px"></ItemStyle>
                </telerik:GridEditCommandColumn>
                <telerik:GridHTMLEditorColumn EditFormColumnIndex="0" UniqueName="Notes" SortExpression="Notes" HeaderText="HTMLEditor Column"
                    DataField="Notes" HeaderStyle-Width="200px">
                </telerik:GridHTMLEditorColumn>
                <telerik:GridDropDownColumn EditFormColumnIndex="1" DataSourceID="SqlDataSource4" ListTextField="City" ListValueField="City"
                    UniqueName="City" SortExpression="City" HeaderText="DropDown Column" DataField="City"
                    AllowAutomaticLoadOnDemand="true"
                    AllowVirtualScrolling="true" ShowMoreResultsBox="true" ItemsPerRequest="10">
                </telerik:GridDropDownColumn>
                <telerik:GridCheckBoxColumn EditFormColumnIndex="1" UniqueName="GridCheckBoxColumn" DataField="IsManager" HeaderText="CheckBox Column">
                </telerik:GridCheckBoxColumn>
                <telerik:GridRatingColumn DataField="Rating" UniqueName="Rating" HeaderText="Rating column">
                </telerik:GridRatingColumn>
                <telerik:GridMaskedColumn EditFormColumnIndex="1" Mask="(###) ###-####" UniqueName="HomePhone" SortExpression="HomePhone"
                    HeaderText="Masked Column" DataField="HomePhone">
                    <ItemStyle Width="100px"></ItemStyle>
                </telerik:GridMaskedColumn>
                <telerik:GridNumericColumn EditFormColumnIndex="1" UniqueName="Extension" SortExpression="Extension" HeaderText="Numeric Column"
                    DataField="Extension" ColumnEditorID="GridNumericColumnEditor1">
                </telerik:GridNumericColumn>
                <telerik:GridDateTimeColumn EditFormColumnIndex="1" UniqueName="HireDate" PickerType="DateTimePicker" HeaderText="DateTime Column"
                    DataField="HireDate" DataFormatString="{0:MM/dd/yyyy}"
                    EditDataFormatString="MMMM dd, yyyy hh:mm tt">
                </telerik:GridDateTimeColumn>
                <telerik:GridAttachmentColumn SortExpression="FileName" UploadControlType="RadAsyncUpload" DataSourceID="SqlDataSource5" MaxFileSize="1048576"
                    EditFormHeaderTextFormat="Upload File:" HeaderText="Attachment Column" AttachmentDataField="BinaryData"
                    AttachmentKeyFields="EmployeeID" FileNameTextField="FileName" DataTextField="FileName"
                    UniqueName="AttachmentColumn">
                </telerik:GridAttachmentColumn>
            </Columns>
            <EditFormSettings ColumnNumber="2"></EditFormSettings>
        </MasterTableView>
        <ClientSettings>
            <ClientEvents OnCommand="gridCommand"></ClientEvents>
        </ClientSettings>
    </telerik:RadGrid>
    <telerik:GridNumericColumnEditor ID="GridNumericColumnEditor1" runat="server">
        <NumericTextBox MaxLength="4" EmptyMessage="Ext.">
            <NumberFormat GroupSeparator=""></NumberFormat>
        </NumericTextBox>
    </telerik:GridNumericColumnEditor>
    <br />

    <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:TelerikConnectionString35 %>" OnInserted="SqlDataSource2_Inserted" OnUpdated="SqlDataSource2_Updated"
        InsertCommand="INSERT INTO [CustomizedEmployees] ([LastName], [FirstName], [TitleOfCourtesy], [HireDate], [City], [HomePhone], [Extension], [Notes], [IsManager], [Rating], [BinaryData]) VALUES (@LastName, @FirstName, @TitleOfCourtesy, @HireDate, @City, @HomePhone, @Extension, @Notes, @IsManager, @Rating, @BinaryData) SET @InsertedID = SCOPE_IDENTITY()"
        SelectCommand="SELECT * FROM [CustomizedEmployees]" UpdateCommand="UPDATE [CustomizedEmployees] SET [TitleOfCourtesy] = @TitleOfCourtesy, [HireDate] = @HireDate, [City] = @City, [HomePhone] = @HomePhone, [Extension] = @Extension, [Notes] = @Notes, [IsManager] = @IsManager, [Rating] = @Rating WHERE [EmployeeID] = @EmployeeID">
        <DeleteParameters>
            <asp:Parameter Name="EmployeeID" Type="Int32"></asp:Parameter>
        </DeleteParameters>
        <InsertParameters>
            <asp:Parameter Name="LastName" Type="String" DefaultValue="" ConvertEmptyStringToNull="false"></asp:Parameter>
            <asp:Parameter Name="FirstName" Type="String" DefaultValue="" ConvertEmptyStringToNull="false"></asp:Parameter>
            <asp:Parameter Name="TitleOfCourtesy" Type="String"></asp:Parameter>
            <asp:Parameter Name="HireDate" Type="DateTime"></asp:Parameter>
            <asp:Parameter Name="City" Type="String"></asp:Parameter>
            <asp:Parameter Name="HomePhone" Type="String"></asp:Parameter>
            <asp:Parameter Name="Extension" Type="String"></asp:Parameter>
            <asp:Parameter Name="Notes" Type="String"></asp:Parameter>
            <asp:Parameter Name="IsManager" Type="Boolean"></asp:Parameter>
            <asp:Parameter Name="Rating" Type="Decimal"></asp:Parameter>
            <asp:Parameter Name="BinaryData" Type="Byte"></asp:Parameter>
            <asp:Parameter Name="InsertedID" Type="Int32" Direction="Output"></asp:Parameter>
        </InsertParameters>
        <UpdateParameters>
            <asp:Parameter Name="TitleOfCourtesy" Type="String"></asp:Parameter>
            <asp:Parameter Name="HireDate" Type="DateTime"></asp:Parameter>
            <asp:Parameter Name="City" Type="String"></asp:Parameter>
            <asp:Parameter Name="HomePhone" Type="String"></asp:Parameter>
            <asp:Parameter Name="Extension" Type="String"></asp:Parameter>
            <asp:Parameter Name="Notes" Type="String"></asp:Parameter>
            <asp:Parameter Name="IsManager" Type="Boolean"></asp:Parameter>
            <asp:Parameter Name="Rating" Type="Decimal"></asp:Parameter>
            <asp:Parameter Name="BinaryData" Type="Byte"></asp:Parameter>
        </UpdateParameters>
    </asp:SqlDataSource>
    <asp:SqlDataSource runat="server" ID="SqlDataSource3" ConnectionString="<%$ ConnectionStrings:TelerikConnectionString35  %>"
        SelectCommand="SELECT DISTINCT [TitleOfCourtesy] FROM [CustomizedEmployees]"></asp:SqlDataSource>
    <asp:SqlDataSource runat="server" ID="SqlDataSource4" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString35  %>"
        SelectCommand="SELECT DISTINCT [City] FROM [Customers]"></asp:SqlDataSource>
    <asp:SqlDataSource ID="SqlDataSource5" runat="server" ConnectionString="<%$ ConnectionStrings:TelerikConnectionString35 %>"
        SelectCommand="SELECT [EmployeeID], [BinaryData] FROM [CustomizedEmployees] WHERE [EmployeeID] = @EmployeeID">
        <SelectParameters>
            <asp:Parameter Name="EmployeeID" Type="Int32"></asp:Parameter>
        </SelectParameters>
    </asp:SqlDataSource>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance