Rad Grid + jquery_问答_开发者_运维开发者技术经验分享

I have a rad grid on my page and a rad tab strip th开发者_如何学运维e rquirement is that when the user clicks on any of the row in the rad grid all the details of the particular row must be populated in the rad tab strip. My function for populating the rad tab strip is written in jquery. My problem is how to get the items in the rad grid. I had written

var grid = $find("RadGrid1")

var items = grid.items.count;

It is giving me an error. How can I fix this?

You can access the values for the selected items by using the MasterTableView.ClientDataKeyNames property to specify which keys you want to access. You can access the values during the client-side OnRowSelected event by calling getDataKeyValues("KeyName"). Here's an example:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="RadGridCustomFooter._Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>RadGrid Example</title>
    <script src="Scripts/jquery-1.3.2.js" type="text/javascript"></script>  
</head>
<body>
    <form id="form1" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server" />
        <telerik:RadGrid ID="rgCustomers" runat="server" Skin="Black"
            AllowPaging="true"
            AllowSorting="true"
            PageSize="8">
            <ClientSettings>
                <ClientEvents OnRowSelected="grid_rowSelected" />
                <Selecting AllowRowSelect="true" />
            </ClientSettings>
            <MasterTableView
                ClientDataKeyNames="ID,Name,Address,Sales">
                <Columns>
                    <telerik:GridBoundColumn
                        DataField="ID"
                        UniqueName="ID">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn
                        DataField="Name"
                        UniqueName="Name">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn
                        DataField="Address"
                        UniqueName="Address">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn
                        DataField="Sales"
                        DataFormatString="{0:C}"
                        UniqueName="Sales">
                    </telerik:GridBoundColumn>
                </Columns>
            </MasterTableView>
            <SelectedItemStyle CssClass="none"  />
        </telerik:RadGrid>        
        <div id="results"></div>

        <script type="text/javascript">
            function grid_rowSelected(sender, args) {
                var id = args.getDataKeyValue("ID");
                var name = args.getDataKeyValue("Name");
                var address = args.getDataKeyValue("Address");
                var sales = args.getDataKeyValue("Sales");
                var selectedValues = String.format("ID: {0}, Name: {1}, Address: {2}, Sales: {3}", id, name, address, sales);
                $('#results').html(selectedValues);
            }
        </script>
    </form>
</body>
</html>

And here's the code-behind:

using System;
using Telerik.Web.UI;

namespace RadGridCustomFooter
{
    public partial class _Default : System.Web.UI.Page
    {
        protected override void OnInit(EventArgs e)
        {
            base.OnInit(e);
            rgCustomers.NeedDataSource += new GridNeedDataSourceEventHandler((s, a) =>
            {
                var customers = new[] {
                    new { ID = 1, Name = "Acme Products", Address = "123 Maple Drive", Sales = 23450 },
                    new { ID = 2, Name = "Northwind", Address = "1 First Street", Sales = 11569 },
                    new { ID = 3, Name = "Alverson Utilities", Address = "890 Union Avenue", Sales = 78232 },
                    new { ID = 4, Name = "Creative Solutions", Address = "91223 Texas Drive", Sales = 110058 },
                    new { ID = 5, Name = "Northwind", Address = "1 First Street", Sales = 11569 },
                    new { ID = 6, Name = "Alverson Utilities", Address = "890 Union Avenue", Sales = 78232 },
                    new { ID = 7, Name = "Northwind", Address = "1 First Street", Sales = 11569 },
                    new { ID = 8, Name = "Acme Products", Address = "123 Maple Drive", Sales = 23450 },
                    new { ID = 9, Name = "Creative Solutions", Address = "91223 Texas Drive", Sales = 110058 },
                    new { ID = 10, Name = "Northwind", Address = "1 First Street", Sales = 11569 },
                    new { ID = 11, Name = "Alverson Utilities", Address = "890 Union Avenue", Sales = 78232 },
                    new { ID = 12, Name = "Acme Products", Address = "123 Maple Drive", Sales = 23450 },
                    new { ID = 13, Name = "Creative Solutions", Address = "91223 Texas Drive", Sales = 110058 }
                };
                ((RadGrid)s).DataSource = customers;
            });
        }
    }
}

Check out the documentation here for more details.

try encapsulating your var grid = $find("RadGrid1") inside of $(document).ready() function

$(document).ready(function() {
    var grid = $find("RadGrid1");
});

The client side references to ASP.NET object are created at the very end of the page generation, so you have to wait until that is done before $find can give you the reference you are looking for

Also familiarize with the client API of the Telerik grid from here: http://www.telerik.com/help/aspnet-ajax/grdgettingfamiliarwithclientapi.html

Dick