Grid

Controls

All Controls

Grid

Rate this demo

Thank you for your post!
Submit a support ticket
If you have an active license or trial, you have access to dedicated support from Telerik’s developers. Response time is 24h for active licenses and 72h for trials, Mon-Fri.
Post in the forums
If you don’t have access to support or would like to help other people by sharing your problem, reach out to our active community in the forums.

Grid - Client-Side API

Example Configuration
Working with RadGrid Client-Side API
Columns swapping/reordering
First column index:
Second column index:



Columns reorder method:

Columns resizing
Column index:
Column width:



Exporting
File name:

Columns Hide/Show
Column index:

Rows Hide/Show
Row index:


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
Click PostBack to see the state of the grid is preserved.
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'.
C# VB
Show code in new window Demo isolation steps
<%@ 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="qsf" 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>Client-Side API for ASP.NET AJAX DataGrid | RadGrid demo</title>
    <link href="styles.css" rel="stylesheet" type="text/css" />
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <script type="text/javascript">
            //<![CDATA[
            var RadGrid1;

            function GetGridObject(sender, eventArgs)
            {
                RadGrid1 = sender;
            }

            function Swap()
            {
                SwapColumns(document.getElementById("<%= TextBox1.ClientID %>").value, document.getElementById("<%= TextBox2.ClientID %>").value);
            }

            function SwapColumns(index1, index2)
            {
                var masterTableView = RadGrid1.get_masterTableView();
                var targetUniqueName = masterTableView.get_columns()[index1].get_uniqueName();
                var sourceUniqueName = masterTableView.get_columns()[index2].get_uniqueName();
                RadGrid1.get_masterTableView().swapColumns(targetUniqueName, sourceUniqueName);
            }

            function Reorder()
            {
                ReorderColumns(document.getElementById("<%= TextBox1.ClientID %>").value, document.getElementById("<%= TextBox2.ClientID %>").value);
            }

            function ReorderColumns(index1, index2)
            {
                var masterTableView = RadGrid1.get_masterTableView();
                var targetUniqueName = masterTableView.get_columns()[index1].get_uniqueName();
                var sourceUniqueName = masterTableView.get_columns()[index2].get_uniqueName();
                RadGrid1.get_masterTableView().reorderColumns(targetUniqueName, sourceUniqueName);
            }

            function ResizeColumn(index, width)
            {
                var columnCount = RadGrid1.get_masterTableView().get_columns().length - 1;
                if (index < 0 || index > columnCount)
                {
                    alert("Invalid index! The valid range is: " + 0 + "-" + columnCount);
                }
                else
                {
                    RadGrid1.get_masterTableView().resizeColumn(index, width);
                }
            }

            function HideColumn(index)
            {
                var columnCount = RadGrid1.get_masterTableView().get_columns().length - 1;
                if (index < 0 || index > columnCount)
                {
                    alert("Invalid index! The valid range is: " + 0 + "-" + columnCount);
                }
                else
                {
                    RadGrid1.get_masterTableView().hideColumn(index);
                }
            }

            function ShowColumn(index)
            {
                var columnCount = RadGrid1.get_masterTableView().get_columns().length - 1;
                if (index < 0 || index > columnCount)
                {
                    alert("Invalid index! The valid range is: " + 0 + "-" + columnCount);
                }
                else
                {
                    RadGrid1.get_masterTableView().showColumn(index);
                }
            }

            function HideRow(index)
            {
                RadGrid1.get_masterTableView().hideItem(index);
            }

            function ShowRow(index)
            {
                RadGrid1.get_masterTableView().showItem(index);
            }

            function ExportToExcel(fileName)
            {
                alert(fileName);
                RadGrid1.get_masterTableView().exportToExcel(fileName);
            }

            function ExportToWord(fileName)
            {
                RadGrid1.get_masterTableView().exportToWord(fileName);
            }

            function RequestStart(sender, args)
            {
                if (args.get_eventArgument().indexOf("Export") != -1)
                {
                    args.set_enableAjax(false);
                }
            }
            //]]>
        </script>
    </telerik:RadCodeBlock>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="QsfSkinManager" runat="server" ShowChooser="true" />
    <telerik:RadFormDecorator ID="QsfFromDecorator" runat="server" DecoratedControls="All" EnableRoundedCorners="false" />
    <qsf:ConfiguratorPanel ID="ConfiguratorPanel1" runat="server" Expanded="true">
        <div class="bigModule">
            <div class="bigModuleBottom">
                <div class="title">
                    Working with RadGrid Client-Side API</div>
                <table border="0" width="100%">
                    <tbody>
                        <tr>
                            <td align="left" valign="top">
                                <fieldset>
                                    <legend>Columns swapping/reordering</legend>
                                    <table border="0">
                                        <tbody>
                                            <tr>
                                                <td>
                                                    <asp:Label ID="Label1" Font-Bold="True" runat="Server">First column index:</asp:Label>
                                                </td>
                                                <td>
                                                    <asp:TextBox ID="TextBox1" MaxLength="1" CssClass="textfield" Text="0" runat="server"
                                                        Width="20"></asp:TextBox>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <asp:Label ID="Label2" Font-Bold="True" runat="Server">Second column index:</asp:Label>
                                                </td>
                                                <td>
                                                    <asp:TextBox ID="TextBox2" MaxLength="1" CssClass="textfield" Text="1" runat="server"
                                                        Width="20"></asp:TextBox>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td colspan="2">
                                                    <hr />
                                                    <asp:CheckBox ID="CheckBox1" Font-Bold="True" AutoPostBack="True" Text="Reorder columns on client"
                                                        runat="server" OnCheckedChanged="CheckedChanged"></asp:CheckBox>
                                                    <hr />
                                                    <asp:Button runat="server" ID="btnSwap" Visible="true" Text="Swap columns" OnClientClick='Swap(); return false;'>
                                                    </asp:Button>
                                                    <asp:Button runat="server" ID="btnReorder" Visible="false" Text="Reorder columns"
                                                        OnClientClick='Reorder(); return false;'></asp:Button>
                                                    <hr />
                                                    <asp:Label ID="Label9" runat="server" Text="Columns reorder method:"></asp:Label>
                                                    <asp:RadioButtonList ID="RadioButtonList1" AutoPostBack="True" runat="server" OnSelectedIndexChanged="RadioButtonList1_SelectedIndexChanged">
                                                        <asp:ListItem Selected="True" Value="Swap">Swap</asp:ListItem>
                                                        <asp:ListItem Value="Reorder">Reorder</asp:ListItem>
                                                    </asp:RadioButtonList>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </fieldset>
                            </td>
                            <td align="left" valign="top">
                                <table border="0" width="100%">
                                    <tbody>
                                        <tr>
                                            <td align="left" valign="top">
                                                <fieldset>
                                                    <legend>Columns resizing</legend>
                                                    <table border="0">
                                                        <tbody>
                                                            <tr>
                                                                <td>
                                                                    <asp:Label ID="Label3" Font-Bold="True" runat="Server">Column index:</asp:Label>
                                                                </td>
                                                                <td>
                                                                    <asp:TextBox ID="TextBox3" MaxLength="1" CssClass="textfield" Text="0" runat="server"></asp:TextBox>
                                                                </td>
                                                            </tr>
                                                            <tr>
                                                                <td>
                                                                    <asp:Label ID="Label4" Font-Bold="True" runat="Server">Column width:</asp:Label>
                                                                </td>
                                                                <td>
                                                                    <asp:TextBox ID="TextBox4" MaxLength="4" CssClass="textfield" Text="300" runat="server"></asp:TextBox>
                                                                </td>
                                                            </tr>
                                                            <tr>
                                                                <td colspan="2">
                                                                    <hr />
                                                                    <asp:CheckBox ID="CheckBox2" Font-Bold="True" AutoPostBack="True" Text="Resize grid on column resize"
                                                                        runat="server" OnCheckedChanged="CheckedChanged"></asp:CheckBox>
                                                                    <br />
                                                                    <asp:CheckBox ID="CheckBox3" Font-Bold="True" AutoPostBack="True" Text="Clip cell content on column resize"
                                                                        runat="server" OnCheckedChanged="CheckedChanged"></asp:CheckBox>
                                                                    <hr />
                                                                    <input type="button" value="Resize column" onclick='ResizeColumn($telerik.findElement(document, "TextBox3").value, $telerik.findElement(document, "TextBox4").value)'/>
                                                                </td>
                                                            </tr>
                                                        </tbody>
                                                    </table>
                                                </fieldset>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td align="left" valign="top">
                                                <fieldset>
                                                    <legend>Exporting</legend>
                                                    <table border="0">
                                                        <tbody>
                                                            <tr>
                                                                <td>
                                                                    <asp:Label ID="Label7" Font-Bold="True" runat="Server">File name:</asp:Label>
                                                                </td>
                                                                <td>
                                                                    <asp:TextBox ID="TextBox7" CssClass="textfield" Text="RadGridExport" runat="server"></asp:TextBox>
                                                                </td>
                                                            </tr>
                                                            <tr>
                                                                <td colspan="2">
                                                                    <hr />
                                                                    <input type="button" value="MS Excel" onclick='ExportToExcel($telerik.findElement(document, "TextBox7").value)' />
                                                                    <input type="button" value="MS Word" onclick='ExportToWord($telerik.findElement(document, "TextBox7").value)' />
                                                                </td>
                                                            </tr>
                                                        </tbody>
                                                    </table>
                                                </fieldset>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </td>
                            <td align="left" valign="top">
                                <table border="0" width="100%">
                                    <tbody>
                                        <tr>
                                            <td align="left" valign="top">
                                                <fieldset>
                                                    <legend>Columns Hide/Show</legend>
                                                    <table border="0">
                                                        <tbody>
                                                            <tr>
                                                                <td>
                                                                    <asp:Label ID="Label6" Font-Bold="True" runat="Server">Column index:</asp:Label>
                                                                </td>
                                                                <td>
                                                                    <asp:TextBox ID="TextBox6" MaxLength="1" CssClass="textfield" Text="0" runat="server"></asp:TextBox>
                                                                </td>
                                                            </tr>
                                                            <tr>
                                                                <td colspan="2">
                                                                    <hr />
                                                                    <input type="button" value="Hide column" onclick='HideColumn($telerik.findElement(document, "TextBox6").value)' />
                                                                    <input type="button" value="Show column" onclick='ShowColumn($telerik.findElement(document, "TextBox6").value)' />
                                                                </td>
                                                            </tr>
                                                        </tbody>
                                                    </table>
                                                </fieldset>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td align="left" valign="top">
                                                <fieldset>
                                                    <legend>Rows Hide/Show</legend>
                                                    <table border="0">
                                                        <tbody>
                                                            <tr>
                                                                <td>
                                                                    <asp:Label ID="Label8" Font-Bold="True" runat="Server">Row index:</asp:Label>
                                                                </td>
                                                                <td>
                                                                    <asp:TextBox ID="TextBox8" MaxLength="1" CssClass="textfield" Text="0" runat="server"></asp:TextBox>
                                                                </td>
                                                            </tr>
                                                            <tr>
                                                                <td colspan="2">
                                                                    <hr />
                                                                    <input type="button" value="Hide row" onclick='HideRow($telerik.findElement(document, "TextBox8").value)' />
                                                                    <input type="button" value="Show row" onclick='ShowRow($telerik.findElement(document, "TextBox8").value)' />
                                                                </td>
                                                            </tr>
                                                        </tbody>
                                                    </table>
                                                </fieldset>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </qsf:ConfiguratorPanel>
    <br />
    <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="CheckBox1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1">
                    </telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="CheckBox2">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1">
                    </telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="CheckBox3">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1">
                    </telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="RadioButtonList1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1">
                    </telerik:AjaxUpdatedControl>
                    <telerik:AjaxUpdatedControl ControlID="btnSwap"></telerik:AjaxUpdatedControl>
                    <telerik:AjaxUpdatedControl ControlID="btnReorder"></telerik:AjaxUpdatedControl>
                    <telerik:AjaxUpdatedControl ControlID="RadioButtonList1"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
        <ClientEvents OnRequestStart="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="97%">
        <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="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>
    <asp:Button Text="PostBack" runat="server" ID="Button1"></asp:Button>
    Click PostBack to see the state of the grid is preserved.
    </form>
</body>
</html>
Telerik UI for ASP.NET AJAX Q3'14 Release is here