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 70 Views

Ajax

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

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

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting

Testing & Mocking

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Jquery Ajax call to ASPX page not displaying datatble in radgrid

1 Answer, 1 is accepted