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

Client Side Binding of Telerik Grid Issue

1 Answer 109 Views

Grid

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

Neha asked on 09 May 2012, 03:49 PM

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.

<%@ 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

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:

<%@ 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!