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 / Client-Side API

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

Source Code

C# VB.NET
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.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="Headtag1"></telerik:HeadTag>
        <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <style type="text/css">
        .bigModuleBottom td{padding:0}
        </style>
        <script type="text/javascript">
                    <!--
                        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)
                        {
                            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 class="BODY">
        <form runat="server" id="mainForm" method="post">
            <telerik:Header runat="server" ID="Header1" NavigationLanguage="CS">
            </telerik:Header>
            <telerik:RadScriptManager ID="RadScriptManager1" runat="server" />
            <!-- content start -->
            <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 style="width: 190px; padding-top:0">
                                <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="12"></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="12"></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" CssClass="button" Text="Swap columns" onclientclick='Swap(); return false;' />
                                                <asp:Button runat="server" id="btnReorder" visible="false" CssClass="button" Text="Reorder columns" onclientclick='Reorder(); return false;' />
                                                <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 style="width: 250px; padding-top:0">
                                                <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" class="button" value="Resize column" onclick='ResizeColumn(document.getElementById("TextBox3").value, document.getElementById("TextBox4").value)' />
                                                            </td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </fieldset>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td align="left" valign="top">
                                            <fieldset style="width: 250px;">
                                                <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" class="button" value="MS Excel"
                                                                    onclick='ExportToExcel(document.getElementById("TextBox7").value)' />
                                                                <input type="button" class="button" value="MS Word"
                                                                    onclick='ExportToWord(document.getElementById("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 style="width: 200px">
                                                <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" class="button" value="Hide column" onclick='HideColumn(document.getElementById("TextBox6").value)' />
                                                                <input type="button" class="button" value="Show column" onclick='ShowColumn(document.getElementById("TextBox6").value)' />
                                                            </td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </fieldset>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td align="left" valign="top">
                                            <fieldset style="width: 200px;">
                                                <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" class="button" value="Hide row" onclick='HideRow(document.getElementById("TextBox8").value)' />
                                                                <input type="button" class="button" value="Show row" onclick='ShowRow(document.getElementById("TextBox8").value)' />
                                                            </td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </fieldset>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </td>
                    </tr>
                </tbody>
            </table>
            </div>
                 </div>
            <br />
            <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
                <AjaxSettings>
                    <telerik:AjaxSetting AjaxControlID="RadGrid1">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />
                        </UpdatedControls>
                    </telerik:AjaxSetting>
                    <telerik:AjaxSetting AjaxControlID="CheckBox1">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />
                        </UpdatedControls>
                    </telerik:AjaxSetting>
                    <telerik:AjaxSetting AjaxControlID="CheckBox2">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />
                        </UpdatedControls>
                    </telerik:AjaxSetting>
                    <telerik:AjaxSetting AjaxControlID="CheckBox3">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />
                        </UpdatedControls>
                    </telerik:AjaxSetting>
                    <telerik:AjaxSetting AjaxControlID="RadioButtonList1">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />
                            <telerik:AjaxUpdatedControl ControlID="btnSwap" />
                            <telerik:AjaxUpdatedControl ControlID="btnReorder" />
                            <telerik:AjaxUpdatedControl ControlID="RadioButtonList1" />
                        </UpdatedControls>
                    </telerik:AjaxSetting>
                </AjaxSettings>
                <ClientEvents OnRequestStart="RequestStart" />
            </telerik:RadAjaxManager>
          <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" />

            <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" CssClass="button" Style="margin: 10px 22px 10px 0px"></asp:Button>
            Click PostBack to see the state of the grid is preserved.
            <!-- 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