Grid - Client-Side API

Click PostBack to see the state of the grid is preserved.
Customer IDCompany NameContact NameContact TitleAddressPostal Code
Data pager
Data pager
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
  • MS Excel MS Word
Column
Row
Isolate this demo as a stand-alone application

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'.

<%@ Page Language="c#" Inherits="Telerik.GridExamplesCSharp.Client.ClientSideAPI.DefaultCS"CodeFile="DefaultCS.aspx.cs"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.QuickStart" %>
<!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">
    <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 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>
    <telerik:RadGrid 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>
    <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>

Find Assistance

Help Us Improve

Was this example helpful?