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

RadGrid in jquery

5 Answers 269 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Mahita Ande
Top achievements
Rank 1
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.

 

<div id="divContent" runat="server" style="display: none;">

 

 

<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">

 

 

<div style="overflow: auto; width: 100%; height: 100%;">

 

 

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

 

 

<MasterTableView AutoGenerateColumns = "false">

 

 

<Columns>

 

 

<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

Sort by
0
Jayesh Goyani
Top achievements
Rank 2
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">
<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>
    </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
0
Mahita Ande
Top achievements
Rank 1
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.

 

 

<div id="divContent" runat="server" style="display: none;">

 

 

 

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

 

 

 

<asp:TableRow>

 

 

<asp:TableCell ColumnSpan="2">

 

 

 

<div style="overflow: auto; width: 100%; height: 100%;">

 

 

 

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

 

 

 

    <MasterTableView AutoGenerateColumns = "false">

 

 

 

        <Columns>

 

        </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

 

0
Jayesh Goyani
Top achievements
Rank 2
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
0
Mahita Ande
Top achievements
Rank 1
answered on 03 May 2012, 02:02 AM
Thank you, Jayesh.

I tried the solution you suggested, but it did not work.
Despite adding a dummy record in the page load event I still get null error when trying to locate teh rad  grid using
$find("SummaryRadGrid"). I have tried other syntax too but of no use.

It would be helpful to know the syntax to access an element within another in jquery.

Regards,
Mahita
0
Radoslav
Telerik team
answered on 07 May 2012, 11:42 AM
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.
Tags
Grid
Asked by
Mahita Ande
Top achievements
Rank 1
Answers by
Jayesh Goyani
Top achievements
Rank 2
Mahita Ande
Top achievements
Rank 1
Radoslav
Telerik team
Share this question
or