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 Objects and Events

Last event:

 Customer IDCompany NameContact NameContact Title
123
 Page 1 of 3, items 1 to 10 of 25.
 ALFKIAlfreds FutterkisteMaria AndersSales Representative
 ANATRAna Trujillo Emparedados y heladosAna TrujilloOwner
 ANTONAntonio Moreno TaqueríaAntonio MorenoOwner
 AROUTAround the HornThomas HardySales Representative
 BERGSBerglunds snabbköpChristina BerglundOrder Administrator
 BLAUSBlauer See DelikatessenHanna MoosSales Representative
 BLONPBlondesddsl père et filsFrédérique CiteauxMarketing Manager
 BOLIDBólido Comidas preparadasMartín SommerOwner
 BONAPBon app'Laurence LebihanOwner
 BOTTMBottom-Dollar MarketsElizabeth LincolnAccounting Manager

  • There are two possible means to reference the client grid object:
    1. Using the $find(id) method (shortcut for the findComponent() method) of the ASP.NET AJAX framework
    2. Subscribing to the GridCreated client event of the control. In its handler the first argument passed (sender) will reference the client grid object
    Telerik RadGrid exposes rich client side API with various client events which can be wired to execute custom client code and change the data presentation. In this example we demonstrate the usage of the following client-side events:
    • OnGridCreated
    • OnColumnResized
    • OnColumnSwapping
    • OnColumnSwapped
    • OnColumnClick
    • OnColumnDblClick
    • OnColumnMouseOver
    • OnColumnMouseOut
    • OnRowResized
    • OnRowClick
    • OnRowDblClick
    • OnRowMouseOver
    • OnRowMouseOut
    • OnRowSelected
    • OnRowDeselected
    • OnRowContextMenu
    • OnColumnContextMenu

Source Code

C# VB.NET
Show code in new window Demo isolation steps
  • <%@ Page Language="VB" AutoEventWireup="false" Inherits="Telerik.GridExamplesVBNET.Client.ClientSideEvents.DefaultVB"
        CodeFile="DefaultVB.aspx.vb" %>

    <%@ 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">
          <script type="text/javascript">
                <!--
                    function log(message)
                 {
                     var log = document.getElementById("log");
                     log.innerHTML += message + "<br/>";
                 }
                    function GridCreated(sender, eventArgs)
                    {
                     var grid = $find("<%=RadGrid1.ClientID %>");
                     //you can also use the sender argument keyword to reference the client grid object
                        log("ClientID of server-side grid object is: " + grid.get_element().id);
                    }

                    function RowResized(sender, eventArgs)
                    {
                        var text = "";
                        text += "Row was resized";
                        text += ", Index: " + eventArgs.get_itemIndexHierarchical();
                        text += ", Height: " + $get(eventArgs.get_id()).offsetHeight;
                        document.getElementById("OutPut").innerHTML = text;
                    }

                    function RowClick(sender, eventArgs)
                    {
                        var text = "";
                        text += "Row was clicked";
                        text += ", Index: " + eventArgs.get_itemIndexHierarchical();
                        document.getElementById("OutPut").innerHTML = text;
                    }

                    function RowDblClick(sender, eventArgs)
                    {
                        var text = "";
                        text += "Row was double clicked";
                        text += ", Index: " + eventArgs.get_itemIndexHierarchical();
                        document.getElementById("OutPut").innerHTML = text;
                    }

                    function RowMouseOver(sender, eventArgs)
                    {
                        var text = "";
                        text += "Mouse is over row";
                        text += ", Index: " + eventArgs.get_itemIndexHierarchical();
                        document.getElementById("OutPut").innerHTML = text;
                    }

                    function RowMouseOut(sender, eventArgs)
                    {
                        var text = "";
                        text += "Mouse is out row";
                        text += ", Index: " + eventArgs.get_itemIndexHierarchical();
                        document.getElementById("OutPut").innerHTML = text;
                    }

                    function RowSelected(sender, eventArgs)
                    {
                        var text = "";
                        text += "Row with index: " + eventArgs.get_itemIndexHierarchical() + " was selected";
                        document.getElementById("OutPut").innerHTML = text;
                    }
                    
                    function RowDeselected(sender, eventArgs)
                    {
                        var text = "";
                        text += "Row with index: " + eventArgs.get_itemIndexHierarchical() + " was deselected";
                        document.getElementById("OutPut").innerHTML = text;
                    }

                    function ColumnMouseOut(sender, eventArgs)
                    {
                        var text = "";
                        text += "Mouse is out column";
                        text += ", Index: " + eventArgs.get_gridColumn().get_element().cellIndex;
                        document.getElementById("OutPut").innerHTML = text;
                    }

                    function ColumnMouseOver(sender, eventArgs)
                    {
                        var text = "";
                        text += "Mouse is over column";
                        text += ", Index: " + eventArgs.get_gridColumn().get_element().cellIndex;
                        document.getElementById("OutPut").innerHTML = text;
                    }


                    function ColumnClick(sender, eventArgs)
                    {
                        var text = "";
                        text += "Column was clicked";
                        text += ", Index: " + eventArgs.get_gridColumn().get_element().cellIndex;
                        document.getElementById("OutPut").innerHTML = text;
                    }

                    function ColumnDblClick(sender, eventArgs)
                    {
                        var text = "";
                        text += "Column was double clicked";
                        text += ", Index: " + eventArgs.get_gridColumn().get_element().cellIndex;
                        document.getElementById("OutPut").innerHTML = text;
                    }

                    function ColumnResized(sender, eventArgs)
                    {
                        var text = "";
                        text += "Column was resized";
                        text += ", Index: " + eventArgs.get_gridColumn().get_element().cellIndex;
                        text += ", Width: " + eventArgs.get_gridColumn().get_element().offsetWidth;
                        document.getElementById("OutPut").innerHTML = text;
                    }

                    function ColumnSwapping(sender, eventArgs)
                    {
                        var text = "Swapping columns with unique names: " + eventArgs.get_gridSourceColumn().get_uniqueName() + " and " + eventArgs.get_gridTargetColumn().get_uniqueName();
                        document.getElementById("OutPut").innerHTML = text;
                    }

                    function ColumnSwapped(sender, eventArgs)
                    {
                        var text = "Columns with unique names: " + eventArgs.get_gridSourceColumn().get_uniqueName() + " and " + eventArgs.get_gridTargetColumn().get_uniqueName() + " were swapped";
                        document.getElementById("OutPut").innerHTML = text;
                    }

                    function ColumnContextMenu(sender, eventArgs)
                    {
                        var text = "Context menu on column with index: " + eventArgs.get_gridColumn().get_element().cellIndex;
                        document.getElementById("OutPut").innerHTML = text;
                    }

                    function RowContextMenu(sender, eventArgs)
                    {
                        var text = "Context menu on row with index: " + eventArgs.get_itemIndexHierarchical();
                        document.getElementById("OutPut").innerHTML = text;
                    }
                -->
        </script>
      </telerik:RadCodeBlock>
    </head>
    <body class="BODY">
        <form runat="server" id="mainForm" method="post">
            <telerik:Header runat="server" ID="Header1" NavigationLanguage="VB"></telerik:Header>
            <telerik:RadScriptManager ID="RadScriptManager1" runat="server" />
            <!-- content start -->
            <div id="log" class="module" style="width: 350px; margin-bottom: 20px; font-weight: bold;
                height: 20px;" runat="server">
            </div>
            <div class="module" style="height: 20px; width: 350px;">
                <span style="font-weight: bold;">Last event: </span><span id="OutPut" style="font-weight: bold;
                    color: navy;"></span>
            </div>
            <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
                <AjaxSettings>
                    <telerik:AjaxSetting AjaxControlID="RadGrid1">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="RadGrid1" />
                            <telerik:AjaxUpdatedControl ControlID="log" />
                        </UpdatedControls>
                    </telerik:AjaxSetting>
                </AjaxSettings>
            </telerik:RadAjaxManager>
            <br />
            <!--[if lte IE 6]> <div style="width:740px;overflow:auto"> <![endif]-->
            <telerik:RadGrid ID="RadGrid1" DataSourceID="SqlDataSource1" runat="server"
                AllowPaging="True" AllowSorting="True" GridLines="None" PageSize="10" Width="95%" ShowStatusBar="true">
                <PagerStyle Mode="NumericPages" />
                <MasterTableView Width="100%">
                </MasterTableView>
                <ClientSettings ReorderColumnsOnClient="True" AllowColumnsReorder="True" EnableRowHoverStyle="true">
                    <ClientEvents OnGridCreated="GridCreated" OnColumnResized="ColumnResized" OnColumnSwapping="ColumnSwapping"
                        OnColumnSwapped="ColumnSwapped" OnColumnClick="ColumnClick" OnColumnDblClick="ColumnDblClick"
                        OnColumnMouseOver="ColumnMouseOver" OnColumnMouseOut="ColumnMouseOut" OnRowResized="RowResized"
                        OnRowClick="RowClick" OnRowDblClick="RowDblClick" OnRowMouseOver="RowMouseOver"
                        OnRowMouseOut="RowMouseOut" OnRowSelected="RowSelected" OnRowDeselected="RowDeselected"
                        OnRowContextMenu="RowContextMenu" OnColumnContextMenu="ColumnContextMenu"></ClientEvents>
                    <Selecting AllowRowSelect="True"></Selecting>
                    <Resizing AllowRowResize="True" EnableRealTimeResize="True" ResizeGridOnColumnResize="True"
                        AllowColumnResize="True"></Resizing>
                </ClientSettings>
            </telerik:RadGrid>
            <!--[if lte IE 6]> </div> <![endif]-->
           <asp:SqlDataSource ID="SqlDataSource1" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
                ProviderName="System.Data.SqlClient"
                SelectCommand="SELECT TOP 25 CustomerID, CompanyName, ContactName, ContactTitle FROM Customers"
                runat="server"></asp:SqlDataSource>
            <!-- 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