Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

Jquery Ajax call to ASPX page not displaying datatble in radgrid

1 Answer 86 Views
Ajax
This is a migrated thread and some comments may be shown as answers.
Vamsi
Top achievements
Rank 1
Vamsi asked on 14 Aug 2012, 10:02 PM
Hi,

        I am trying to get a datatable using a jquery ajax call and display it in radgrid using Telerik Q2 2009. My call to the web method is going through and returning a datable from JSON.NET, but the datatable doesn't bind to the radgrid.

In Masterpage:

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="frmMasterTest.master.cs" Inherits="frmMasterTest" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<<%@ Register Src="~/User Controls/ucPageHeaderStandard.ascx" TagName="ucPageHeaderStandard"
    TagPrefix="uc1" %>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Hazard</title>
    <link href="Hazard.css" rel="stylesheet" type="text/css" />    
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager ID="ScriptManager1" runat="server" AsyncPostBackTimeout="120" EnablePageMethods="true">
        <Scripts>
            <asp:ScriptReference Path="~/Scripts/MainScript.js?Version=1" />                     
            <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" />
            <asp:ScriptReference Path="~/Scripts/jqueryblockUI.js" />                        
        </Scripts>
    </telerik:RadScriptManager>
    <telerik:RadAjaxLoadingPanel ID="RALPMaster" runat="server" BackColor="#EEEEEE" Transparency="50">
        <div align="center">
            <asp:Image ID="Image1" runat="server" AlternateText="Loading..." ImageUrl="~/Images/loading6.gif" />
        </div>
    </telerik:RadAjaxLoadingPanel>
 
    <div>                            
            <table cellpadding="0" cellspacing="0" border="2" width="100%">
                <tr>
                    <td valign="top">
                        <uc1:ucPageHeaderStandard ID="ucPgHdr" runat="server" EnableViewState="true" />
                        <asp:HiddenField ID="txtWireBillingNewLoanNum" runat="server" />
                        <asp:HiddenField ID="txtWireBillingReasonCode" runat="server" />                        
                        <asp:HiddenField ID="txtWIActionSummary" runat="server" />
                    </td>
                </tr>
                <tr>
                    <td valign="top">
                        <telerik:RadSplitter ID="rdSpltMain" runat="server" Orientation="Vertical" Width="99%"
                            Height="660px" CssClass="gradienceColor" VisibleDuringInit="false" LiveResize="true">
                            <telerik:RadPane ID="rdPaneLeft" runat="server" Width="50%" Height="" Scrolling="None"
                                CssClass="gradienceColor">
                                <asp:ContentPlaceHolder ID="CPHLeft" runat="server">
                                </asp:ContentPlaceHolder>
                            </telerik:RadPane>
                            <telerik:RadSplitBar ID="rdSpltBarMain" runat="server" />
                            <telerik:RadPane ID="rdPaneRight" runat="server" Width="50%" Scrolling="Both" CssClass="gradienceColor">                                
                                <table cellpadding="0" cellspacing="0" border="0" width="100%">
                                        <tr>
                                            <td valign="top">
                                                
                                            </td>
                                        </tr>
                                        <tr>
                                            <td valign="top">
                                                <asp:ContentPlaceHolder ID="CPHTopRight" runat="server">
                                                    
                                                </asp:ContentPlaceHolder>
                                                <asp:ContentPlaceHolder ID="CPHRight" runat="server">
                                                </asp:ContentPlaceHolder>
                                            </td>
                                        </tr>
                                    </table>                                
                            </telerik:RadPane>
                        </telerik:RadSplitter>
                    </td>
                </tr>
            </table>        
    </div>
    </form>
</body>
</html>

In TestNotes.aspx:

<%@ Page Language="C#" MasterPageFile="~/frmMasterTest.master" AutoEventWireup="true" CodeFile="testNotes1.aspx.cs" Inherits="TestInteraceNotes_testNotes1" %>

<%@ MasterType VirtualPath="~/frmMasterTest.master" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

<asp:Content ID="Content1" ContentPlaceHolderID="CPHLeft" runat="server">
        
        <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
            <script type="text/javascript">
                (function ($) {
                    $(document).ready(function () {
                        $('[Id$=Button1]').click(function () {                    
                            $.ajax({
                              type: 'POST',
                              url: 'TestNotes1.aspx/afLoadNotes',
                              data: '{}',
                              contentType: "application/json; charset=utf-8",
                              dataType: "json",
                              success: function(result) {
                                var mtv = $find("<%= RadGrid1.ClientID %>").get_masterTableView();
                                  mtv.set_dataSource(result.d);
                                  mtv.dataBind();                        
                              },
                              error: function(msg) {
                                alert('error');
                              }
                            });     
                        });
                    });
                })($telerik.$);
            </script>
        </telerik:RadCodeBlock>
    
        <div>                                
            <asp:Button ID="Button1" Text="Bind Grid" runat="server" />
            <div id="divGridContainer">
                <telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="false" Skin="Default"
                    AllowFilteringByColumn="true" AllowSorting="true" GroupingSettings-CaseSensitive="false">
                    <ClientSettings>
                        <Scrolling AllowScroll="True" SaveScrollPosition="True" UseStaticHeaders="True" ScrollHeight="170px">
                        </Scrolling>                    
                    </ClientSettings>
                    <MasterTableView HierarchyLoadMode="Client">
                        <Columns>
                            <telerik:GridBoundColumn DataField="Date" FilterControlWidth="60px" HeaderText="Date"
                                HeaderStyle-Width="100px" ItemStyle-Width="100px" SortExpression="DateForSort">
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="Note" HeaderText="Note" FilterControlWidth="230px"
                                HeaderStyle-Width="270px" ItemStyle-Width="270px">
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="User" HeaderText="User" FilterControlWidth="40px"
                                HeaderStyle-Width="80px" ItemStyle-Width="80px">
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="Type" HeaderText="Type" FilterControlWidth="40px"
                                HeaderStyle-Width="80px" ItemStyle-Width="80px">
                            </telerik:GridBoundColumn>
                        </Columns>
                    </MasterTableView>
                </telerik:RadGrid>
            </div>
        </div>
</asp:Content>
In TestNotes.aspx.cs
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.Services;
using System.IO;
using Newtonsoft.Json;
 
public partial class TestInteraceNotes_testNotes1 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
             
        }
    }
 
    [WebMethod]
    public static string afLoadNotes()
    {
        Web Service call returns a datatable
        return Serialize(dt);
    }
 
    public static string Serialize(object value)
    {
        Type type = value.GetType();
 
        Newtonsoft.Json.JsonSerializer json = new Newtonsoft.Json.JsonSerializer();
 
        json.NullValueHandling = NullValueHandling.Ignore;
 
        json.ObjectCreationHandling = Newtonsoft.Json.ObjectCreationHandling.Replace;
        json.MissingMemberHandling = Newtonsoft.Json.MissingMemberHandling.Ignore;
        json.ReferenceLoopHandling = ReferenceLoopHandling.Ignore;
 
        //if (type == typeof(DataRow))
        //    json.Converters.Add(new DataRowConverter());
        //else if (type == typeof(DataTable))
        //    json.Converters.Add(new DataTableConverter());       
 
        StringWriter sw = new StringWriter();
        Newtonsoft.Json.JsonTextWriter writer = new JsonTextWriter(sw);
        //if (this.FormatJsonOutput)
        //    writer.Formatting = Formatting.Indented;
        //else
        //    writer.Formatting = Formatting.None;
 
        writer.QuoteChar = '"';
        json.Serialize(writer, value);
 
        string output = sw.ToString();
        writer.Close();
        sw.Close();
 
        return output;
    }
}

Please Advice Thank you!
Vamsi       

1 Answer, 1 is accepted

Sort by
0
Vamsi
Top achievements
Rank 1
answered on 17 Aug 2012, 08:46 PM
I figured this out myself.
Tags
Ajax
Asked by
Vamsi
Top achievements
Rank 1
Answers by
Vamsi
Top achievements
Rank 1
Share this question
or