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 / Keys/Values Client-Side



Customer IDCompany NameContact NameContact TitleAddressPostal Code
12345678910
Page size:
select
 91 items in 10 pages
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





  • To simplify the code logic and make some of the column values easily accessible on the client, Telerik RadGrid can expose them client-side. This way you can extract the respective field value for a row through the getDataKeyValue() function of GridDataItem, GridDataItemEventArgs and GridDataItemCancelEventArgs, passing the unique name of grid column. This way you will not need to have all grid items available client-side.
    Note, that the corresponding column name has to be part of the ClientDataKeyNames array of the MasterTableView/GridTableView.

    You can also use get_dataItems(). It is important, that this method will create all RadGrid client side items, which might lead to a performance penalty if RadGrid displays too many items in one page.

Source Code

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

    <%@ 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="Headtag2"></telerik:HeadTag>
        <!-- custom head section -->
        <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
            <script type="text/javascript">
             <!--
                function RowSelected(sender, args)
                {
                    document.getElementById("<%= Label1.ClientID %>").innerHTML =
                     "<b>CustomerID: </b>" + args.getDataKeyValue("CustomerID") +
                     "<br />" +
                     "<b>CompanyName: </b>" + args.getDataKeyValue("CompanyName");
                }
                
                function GetFirstDataItemKeyValues()
                {
                 var firstDataItem = $find("<%= RadGrid1.MasterTableView.ClientID %>").get_dataItems()[0];
                 var keyValues =
                        'CustomerID: "' + firstDataItem.getDataKeyValue("CustomerID") + '"' +
                     ' \r\n' +
                     'CompanyName: "' + firstDataItem.getDataKeyValue("CompanyName") + '"';
                 alert(keyValues);
                }
                -->
            </script>
            </telerik:RadCodeBlock>
        <!-- end of custom head section -->
    </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 -->
            <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
                <AjaxSettings>
                    <telerik:AjaxSetting AjaxControlID="RadGrid1">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="RadGrid1" />
                        </UpdatedControls>
                    </telerik:AjaxSetting>
                </AjaxSettings>
            </telerik:RadAjaxManager>
            <asp:Button ID="Button1" CssClass="button" Width="220px" Text="Get first GridDataItem key/values" OnClientClick="GetFirstDataItemKeyValues(); return false;" runat="server" />
            <br /><br />
            <telerik:RadGrid ID="RadGrid1" DataSourceID="SqlDataSource1" GridLines="None" ShowStatusBar="true"
                PageSize="10" AllowPaging="true" Width="97%" AllowSorting="true" runat="server" >
                <MasterTableView Width="100%" ClientDataKeyNames="CustomerID,CompanyName" />
                <ClientSettings>
                    <Selecting AllowRowSelect="true" />
                    <ClientEvents OnRowSelected="RowSelected" />
                </ClientSettings>
            </telerik:RadGrid>
            <br />
            <br />
            <asp:Label ID="Label1" runat="server"></asp:Label>
            <br />
             <asp:SqlDataSource ID="SqlDataSource1" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
                ProviderName="System.Data.SqlClient"
                SelectCommand="SELECT CustomerID, CompanyName, ContactName, ContactTitle, Address, PostalCode FROM Customers"
                runat="server"></asp:SqlDataSource>
            <br />
            <!-- 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