Hi,
I been using telerik grid for more than one year. In our new project we need telerik grid client side binding. I created test project to learn to pieces of client side binding. I get master table view null in my basic binding operation. below is the mark up i have. I don't have anything specified in my code behind. Please take a look and let me know what i am doing wrong.
I been using telerik grid for more than one year. In our new project we need telerik grid client side binding. I created test project to learn to pieces of client side binding. I get master table view null in my basic binding operation. below is the mark up i have. I don't have anything specified in my code behind. Please take a look and let me know what i am doing wrong.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="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 Client Side Binding Test</title> <telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server" /></head><body> <form id="form1" runat="server"> <telerik:RadScriptManager ID="RadScriptManager1" runat="server"> <Scripts> <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" /> <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" /> <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" /> </Scripts> </telerik:RadScriptManager> <script type="text/javascript"> function pageLoad() { var data = [{ "ID": 1, "Text": "Text1" }, { "ID": 2, "Text": "Text2"}]; var mtv = $find("RadGrid1").get_masterTableView(); mtv.set_dataSource(data); mtv.dataBind(); } </script> <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"> </telerik:RadAjaxManager> <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Default"> </telerik:RadAjaxLoadingPanel> <div> <telerik:RadGrid runat="server" ID="RadGrid1" AutoGenerateColumns="false"> <MasterTableView> <Columns> <telerik:GridBoundColumn DataField="ID" HeaderText="ID"> </telerik:GridBoundColumn> <telerik:GridBoundColumn DataField="Text" HeaderText="Text"> </telerik:GridBoundColumn> </Columns> </MasterTableView> </telerik:RadGrid> </div> </form></body></html>1 Answer, 1 is accepted
0
Richard
Top achievements
Rank 1
Rank 1
answered on 11 May 2012, 05:11 PM
Neha:
I think the reason that you are getting the null for the MasterTableView when trying to access it in the pageLoad of your JavaScript is due to the fact that the grid is not available at that early stage.
You should reference the Grid/Declarative Binding online demo for insights on getting started with your own application.
I've reworked your code and have it working successfully by modifying it based on the above demo:
Default.aspx:
I hope this helps!
I think the reason that you are getting the null for the MasterTableView when trying to access it in the pageLoad of your JavaScript is due to the fact that the grid is not available at that early stage.
You should reference the Grid/Declarative Binding online demo for insights on getting started with your own application.
I've reworked your code and have it working successfully by modifying it based on the above demo:
Default.aspx:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="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 id="Head1" runat="server"> <title>RadGrid Client Side Binding Test</title> <telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server" /></head><body> <form id="form1" runat="server"> <telerik:RadScriptManager ID="RadScriptManager1" runat="server"> <Scripts> <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" /> <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" /> <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" /> </Scripts> </telerik:RadScriptManager> <script type="text/javascript"> function RadGrid1_DataBinding(sender, args) { // alert("fired"); var data = [{ "ID": 1, "Text": "Text1" }, { "ID": 2, "Text": "Text2"}]; var mtv = $find("<%= RadGrid1.ClientID %>").get_masterTableView(); mtv.set_dataSource(data); mtv.dataBind(); } </script> <div> <telerik:RadGrid ID="RadGrid1" AllowSorting="true" AllowPaging="true" AllowFilteringByColumn="true" AutoGenerateColumns="false" runat="server"> <MasterTableView> <Columns> <telerik:GridBoundColumn DataField="ID" HeaderText="ID" DataType="System.Int32" /> <telerik:GridBoundColumn DataField="Text" HeaderText="Text" /> </Columns> </MasterTableView> <PagerStyle AlwaysVisible="true" /> <ClientSettings> <DataBinding Location="Default.aspx" SelectMethod="GetData" /> <ClientEvents OnDataBinding="RadGrid1_DataBinding" /> </ClientSettings> </telerik:RadGrid> </div> </form></body></html>I hope this helps!