This is a migrated thread and some comments may be shown as answers.

RadGrid in jquery

5 Answers 480 Views

Grid

This is a migrated thread and some comments may be shown as answers.

Mahita Ande asked on 30 Apr 2012, 07:51 PM

Hi,
I have a RadGrid within a asp:Tablecell. When I try to use the get_masterTableView(), I get the error Object property not defined. Given below is the structure of my RadGrid.

<asp:Table ID="MainContainer" style="width:99%; height:92%; margin-left:1%; margin-right:0%;" runat="server">

<asp:TableRow>

<asp:TableCell ColumnSpan="2">

</asp:TableCell>

</asp:TableRow>

<asp:TableRow>

<asp:TableCell id="tdTimelineCell" CssClass="TimelineCell" runat="server"></asp:TableCell>

<asp:TableCell id="tdSummaryCell" CssClass="SummaryCell" runat="server">

<telerik:RadGrid ID="SummaryRadGrid" runat="server">

<telerik:GridBoundColumn DataField="Id" Visible="false"></telerik:GridBoundColumn>

<telerik:GridTemplateColumn HeaderStyle-CssClass="HeaderEpisodeMarginLeft"></telerik:GridTemplateColumn>

<telerik:GridBoundColumn DataField="Remote_Index" visible="false"></telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Time_Effective" Visible="false"></telerik:GridBoundColumn>

<telerik:GridTemplateColumn HeaderStyle-CssClass="HeaderEpisodeMarginRight"></telerik:GridTemplateColumn>

</Columns>

</MasterTableView>

</telerik:RadGrid>

<asp:label id="lblNoRecords" runat="server" visible="false" CssClass="NoRecords">

<asp:Literal id="litNoRecords" runat="server" enableviewstate="false">No records</asp:Literal>

</asp:label>

</div>

</asp:TableCell>

</asp:TableRow>

</asp:Table>

</div>

I tried getting the master view of the radgrid in the followig ways

var

grid = $("#MainContainer tdSummaryCell").find("SummaryRadGrid").get_masterTableView();

var dgrSummary = $find('<%=SummaryRadGrid.ClientID %>').get_masterTableView();

and many other ways but none of them worked.

Could you please suggest how I can load the RagGrid into a jquey object so I can assign its datasource and bind the grid in jquery.

Thank you,
Mahita

5 Answers, 1 is accepted

answered on 01 May 2012, 10:23 AM

Hello Mahita,

You are binding your grid with jquery so issue is RADGRID is not rendered in client or not created any html code.

You must have to assign dummy record to generate the Grid's UI then after you can assign New datasource to Radgrid.

For more information please check below code / demo.

Note : Please check page_load event's code in below demo/code snippet.

Default.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_1734880_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></title>

<script src="../Scripts/jquery-1.6.2.min.js" type="text/javascript"></script>

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

<script type="text/javascript">

var GridData;

function OnbuttonClient() {

jQuery.ajax({

type: 'POST',

contentType: 'application/json; charset=utf-8',

data: '',

dataType: 'JSON',

url: 'Default.aspx/BindGrid',

success: function (result) {

GridData = result.d;

if (GridData.length > 0) {

var divGridContainer = document.getElementById('divGridContainer');

divGridContainer.style.display = "";

var tableView = $find("<%= RadGrid1.ClientID %>").get_masterTableView();

tableView.set_dataSource(GridData);

tableView.dataBind();

}

else {

var divGridContainer = document.getElementById('divGridContainer');

divGridContainer.style.display = "none";

}

},

error: function () {

alert('Error on binding the data');

}

});

return false;

}

</script>

</telerik:RadCodeBlock>

</head>

<body>

<form id="form1" runat="server">

<div>

<telerik:RadScriptManager ID="RadScriptManager1" EnablePageMethods="true" runat="server">

</telerik:RadScriptManager>

<asp:Button ID="Button1" Text="Bind Grid" runat="server" OnClientClick="return OnbuttonClient();" />

<div id="divGridContainer" style="display: none;">

<telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="false">

<MasterTableView HierarchyLoadMode="Client" DataKeyNames="ID,ParentID" ClientDataKeyNames="ID,ParentID">

<Columns>

<telerik:GridBoundColumn DataField="ID" UniqueName="ID" HeaderText="ID">

</telerik:GridBoundColumn>

</Columns>

</MasterTableView>

</telerik:RadGrid>

</div>

</form>

</body>

</html>

Default.aspx.cs

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.Services;

using System.Runtime.Serialization.Json;

using System.IO;

using System.Text;

using Telerik.Web.UI;

public partial class _1734880_Default : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

if (!IsPostBack)

{

dynamic data = new[] {

new { ID = "1", Name ="Name11",ParentID = "0"}

};

RadGrid1.MasterTableView.DataSource = data;

RadGrid1.DataBind();

}

[WebMethod]

public static List<Employee> BindGrid()

{

List<Employee> list = new List<Employee>(); ;

Employee obj = new Employee();

obj.ID = "1";

obj.ParentID = "0";

obj.Name = "Name1";

list.Add(obj);

obj = new Employee();

obj.ID = "2";

obj.ParentID = "0";

obj.Name = "Name2";

list.Add(obj);

obj = new Employee();

obj.ID = "4";

obj.ParentID = "1";

obj.Name = "Name2";

list.Add(obj);

obj = new Employee();

obj.ID = "5";

obj.ParentID = "1";

obj.Name = "Name2";

list.Add(obj);

obj = new Employee();

obj.ID = "6";

obj.ParentID = "2";

obj.Name = "Name2";

list.Add(obj);

obj = new Employee();

obj.ID = "11";

obj.ParentID = "2";

obj.Name = "Name2";

list.Add(obj);

obj = new Employee();

obj.ID = "12";

obj.ParentID = "2";

obj.Name = "Name2";

list.Add(obj);

obj = new Employee();

obj.ID = "7";

obj.ParentID = "2";

obj.Name = "Name2";

list.Add(obj);

obj = new Employee();

obj.ID = "13";

obj.ParentID = "2";

obj.Name = "Name2";

list.Add(obj);

obj = new Employee();

obj.ID = "9";

obj.ParentID = "0";

obj.Name = "Name2";

list.Add(obj);

obj = new Employee();

obj.ID = "3";

obj.ParentID = "1";

obj.Name = "Name2";

list.Add(obj);

obj = new Employee();

obj.ID = "8";

obj.ParentID = "0";

obj.Name = "Name2";

list.Add(obj);

return list;

}

public class Employee

{

public string ID { get; set; }

public string Name { get; set; }

public string ParentID { get; set; }

}

Thanks,
Jayesh Goyani

answered on 01 May 2012, 05:01 PM

Thank you for the reply Jayesh.

I suppose the problem here is the location of the RadGrid. If it is contained only by a div something like what you have in your example, I have no problem accessing it in the Jquery using var grid = $find("SummaryRadGrid").get_masterTableView. But when it is contained in a table cell like in what I mentioned i.e.

<asp:Table ID="MainContainer" style="width:99%; height:92%; margin-left:1%; margin-right:0%;" runat="server">

<asp:TableRow>

<asp:TableCell ColumnSpan="2">

<telerik:RadGrid ID="SummaryRadGrid" runat="server">

</Columns>

</MasterTableView>

</telerik:RadGrid>

</div></asp:TableCell></asp:TableRow></asp:Table></div>

that is when get_masterTableView does not work. I suppose it is because it is not able to locate the radgrid which is within a table cell. And I cannot change the structure of the page. The RadGrid should be contained withing the table cell. I would like to know a way I can refer to the radgrid within the table cell to use the get_masterTableView method.

Regards,
Mahita

answered on 02 May 2012, 06:26 AM

Hello Mahita,

Please look in below code of above demo.

I added one dummy record to resolve "$find("SummaryRadGrid").get_masterTableView" is null issue.

protected void Page_Load(object sender, EventArgs e)

{

if (!IsPostBack)

{

dynamic data = new[] {

new { ID = "1", Name ="Name11",ParentID = "0"}

};

RadGrid1.MasterTableView.DataSource = data;

RadGrid1.DataBind();

}

Thanks,
Jayesh Goyani

answered on 07 May 2012, 11:42 AM

Example.zip

Hello Mahita,

I tried to get the grid’s masterTableView with the following line of javascript:

var dgrSummary = $find('<%=SummaryRadGrid.ClientID %>').get_masterTableView();

and it works on my end. I am sending you a simple example, based on your code. Please check it out and let me know what differs in your case.

Looking forward for your reply.

Greetings,
Radoslav
the Telerik team

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.