I am having a rad grid on my page and a rad tab strip the 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 error.
Please tell me the solution.
Thanks in advance
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
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.