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

Client Side Binding of Telerik Grid Issue

1 Answer 46 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Neha
Top achievements
Rank 1
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">
<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

Sort by
0
Richard
Top achievements
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:
<%@ 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">
<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!
Tags
Grid
Asked by
Neha
Top achievements
Rank 1
Answers by
Richard
Top achievements
Rank 1
Share this question
or