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

    Client-Side API

    Click PostBack to see the state of the grid is preserved.
    Customer IDCompany NameContact NameContact TitleAddressPostal Code
    123
     Page 1 of 3, items 1 to 10 of 25.
    ALFKIAlfreds FutterkisteMaria AndersSales RepresentativeObere Str. 5712209
    ANATRAna Trujillo Emparedados y heladosAna TrujilloOwnerAvda. de la Constitución 222205021
    ANTONAntonio Moreno TaqueríaAntonio MorenoOwnerMataderos 231205023
    AROUTAround the HornThomas HardySales Representative120 Hanover Sq.WA1 1DP
    BERGSBerglunds snabbköpChristina BerglundOrder AdministratorBerguvsvägen 8S-958 22
    BLAUSBlauer See DelikatessenHanna MoosSales RepresentativeForsterstr. 5768306
    BLONPBlondesddsl père et filsFrédérique CiteauxMarketing Manager24, place Kléber67000
    BOLIDBólido Comidas preparadasMartín SommerOwnerC/ Araquil, 6728023
    BONAPBon app'Laurence LebihanOwner12, rue des Bouchers13008
    BOTTMBottom-Dollar MarketsElizabeth LincolnAccounting Manager23 Tsawassen Blvd.T2F 8M4
    • Demo Configurator
    Column
    Row

    Telerik RadGrid introduces a comprehensive client-side API, which enables you to resize, move, reorder, select and much more. The control exposes a rich client object model with various client events which can be wired to execute custom client code and change the data presentation.

    Note:In the example above the first column is with index '0'.

    • DefaultVB.aspx
    • DefaultVB.aspx.vb
    • scripts.js
    • styles.css
    <%@ Page Language="VB" AutoEventWireup="false" Inherits="Telerik.GridExamplesVBNET.Client.ClientSideAPI.DefaultVB"CodeFile="DefaultVB.aspx.vb"  %>
     
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <%@ Register TagPrefix="telerik" Namespace="Telerik.QuickStart" %>
    <!DOCTYPE html>
    <head runat="server">
        <title>Telerik ASP.NET Example</title>
        <link href="styles.css" rel="stylesheet" type="text/css" />
        <script src="scripts.js"></script>
    </head>
    <body>
        <form id="form1" runat="server">
        <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
        <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
        <div class="demo-container">
            <telerik:RadButton RenderMode="Lightweight" Text="PostBack" runat="server" ID="Button1" style="vertical-align:middle"></telerik:RadButton>
            <span style="vertical-align:middle">Click PostBack to see the state of the grid is preserved.</span>
        </div>
        <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="ConfiguratorPanel1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadGrid1" />
                        <telerik:AjaxUpdatedControl ControlID="ConfiguratorPanel1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
            <ClientEvents OnRequestStart="demo.RequestStart"></ClientEvents>
        </telerik:RadAjaxManager>
        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
        </telerik:RadAjaxLoadingPanel>
        <div class="demo-container no-bg">
        <telerik:RadGrid RenderMode="Lightweight" ID="RadGrid1" DataSourceID="SqlDataSource1" runat="server" AllowPaging="True"
            AllowSorting="True" GridLines="None" PageSize="10" Width="100%">
            <PagerStyle Mode="NumericPages"></PagerStyle>
            <ClientSettings AllowColumnHide="True" AllowRowHide="True" AllowColumnsReorder="True"
                ReorderColumnsOnClient="True">
                <Resizing EnableRealTimeResize="True" ResizeGridOnColumnResize="True" AllowColumnResize="true"
                    ClipCellContentOnResize="false"></Resizing>
                <ClientEvents OnGridCreated="demo.GetGridObject"></ClientEvents>
            </ClientSettings>
        </telerik:RadGrid>
        <asp:SqlDataSource ID="SqlDataSource1" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
            ProviderName="System.Data.SqlClient" SelectCommand="SELECT TOP 25 CustomerID, CompanyName, ContactName, ContactTitle, Address, PostalCode FROM Customers"
            runat="server"></asp:SqlDataSource>
            </div>
         <telerik:ConfiguratorPanel runat="server" ID="ConfiguratorPanel1">
            <Views>
                <qsf:View Title="Swapping/Reordering">
                    <ul class="fb-group">
                        <li>
                            <qsf:NumericTextBox ID="TextBox1" runat="server" Size="Medium" Value="0" MinValue="0" MaxValue="5" NumberFormat-DecimalDigits="0" Label="1st column index:"></qsf:NumericTextBox>
                            <qsf:NumericTextBox ID="TextBox2" runat="server" Size="Medium" Value="1" MinValue="0" MaxValue="5" NumberFormat-DecimalDigits="0" Label="2nd column index:"></qsf:NumericTextBox>
                        </li>
                        <li>
                            <asp:CheckBox ID="CheckBox1" Font-Bold="True" AutoPostBack="True" Text="Reorder columns on client"
                                runat="server" OnCheckedChanged="CheckedChanged"></asp:CheckBox>
                        </li>
                        <li>
                            <qsf:RadioButtonList ID="RadioButtonList1" AutoPostBack="True" runat="server" Orientation="Horizontal"
                                OnSelectedIndexChanged="RadioButtonList1_SelectedIndexChanged">
                                <asp:ListItem Selected="True" Value="Swap">Swap</asp:ListItem>
                                <asp:ListItem Value="Reorder">Reorder</asp:ListItem>
                            </qsf:RadioButtonList>
                        </li>
                        <li>
                            <qsf:Button runat="server" ID="btnReorder" AutoPostBack="false" Visible="false" Text="Reorder columns"
                                OnClientClicked='demo.Reorder'>
                            </qsf:Button>
                            <qsf:Button runat="server" ID="btnSwap" Text="Swap columns" AutoPostBack="false" OnClientClicked='demo.Swap'></qsf:Button>
                        </li>
     
                    </ul>
                </qsf:View>
                <qsf:View Title="Resizing">
                    <ul class="fb-group">
                        <li>
                            <qsf:NumericTextBox ID="TextBox3" MaxLength="1" Size="Narrow" Value="0" NumberFormat-DecimalDigits="0" MinValue="0" MaxValue="5" Type="Number" Label="Column index:" runat="server"></qsf:NumericTextBox>
                            <qsf:NumericTextBox ID="TextBox4" MaxLength="4" Size="Narrow" MinValue="35" MaxValue="300" Value="300" NumberFormat-DecimalDigits="0" Label="Column width:" runat="server"></qsf:NumericTextBox>
                        </li>
                        <li>
                            <asp:CheckBox ID="CheckBox2" Font-Bold="True" AutoPostBack="True" Text="Resize grid on column resize"
                                runat="server" OnCheckedChanged="CheckedChanged"></asp:CheckBox>
                        </li>
                        <li>
                            <asp:CheckBox ID="CheckBox3" Font-Bold="True" AutoPostBack="True" Text="Clip cell content on column resize"
                                runat="server" OnCheckedChanged="CheckedChanged"></asp:CheckBox>
                        </li>
                        <li>
                            <qsf:Button ID="Button2" runat="server" Text="Resize column" AutoPostBack="false" OnClientClicked='demo.ResizeColumn' />
     
                        </li>
                    </ul>
                </qsf:View>
                <qsf:View Title="Exporting">
                    <ul class="fb-group">
                        <li>
                            <qsf:TextBox ID="TextBox7" CssClass="textfield" Label="File name:" Text="RadGridExport" runat="server"></qsf:TextBox>
                        </li>
                        <li>
                            <qsf:Button ID="Button3" runat="server" AutoPostBack="false" Text="MS Excel" OnClientClicked='demo.ExportToExcel' />
                            <qsf:Button ID="Button4" runat="server" AutoPostBack="false" Text="MS Word" OnClientClicked='demo.ExportToWord' />
                        </li>
                    </ul>
                </qsf:View>
                <qsf:View Title="Show/Hide">
                    <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" Title="Column" Size="Medium" runat="server">
                        <ul class="fb-group">
                            <li>
                                <qsf:NumericTextBox ID="TextBox6" MaxLength="1" NumberFormat-DecimalDigits="0" MinValue="0" MaxValue="5" Label="Column index" CssClass="textfield" Value="0" runat="server"></qsf:NumericTextBox>
                            </li>
                            <li>
                                <qsf:Button ID="Button6" runat="server" Text="Hide" AutoPostBack="false" OnClientClicked='demo.HideColumn' />
                                <qsf:Button ID="Button7" runat="server" Text="Show" AutoPostBack="false" OnClientClicked='demo.ShowColumn' />
                            </li>
                        </ul>
                    </qsf:ConfiguratorColumn>
                    <qsf:ConfiguratorColumn ID="ConfiguratorColumn2" Title="Row" Size="Medium" runat="server">
                        <ul class="fb-group">
                            <li>
                                <qsf:NumericTextBox ID="TextBox8" MaxLength="1" NumberFormat-DecimalDigits="0" MinValue="0" MaxValue="9" Label="Row index:" CssClass="textfield" Value="0" runat="server"></qsf:NumericTextBox>
                            </li>
                            <li>
                                <qsf:Button ID="Button5" runat="server" AutoPostBack="false" Text="Hide" OnClientClicked='demo.HideRow' />
                                <qsf:Button ID="Button8" runat="server" AutoPostBack="false" Text="Show" OnClientClicked='demo.ShowRow' />
                            </li>
                        </ul>
                    </qsf:ConfiguratorColumn>
                </qsf:View>
            </Views>
        </telerik:ConfiguratorPanel>
        </form>
    </body>
    </html>

    Support & Learning Resources

    Find Assistance