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

Bind RadGrid Client Side to a JSON array

11 Answers 1584 Views

Grid

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

11 Answers, 1 is accepted

answered on 28 Jan 2012, 05:02 PM

Hello,

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_1734880_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></title>

<script src="../Scripts/jquery-1.6.2.min.js" type="text/javascript"></script>

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

<script type="text/javascript">

function OnbuttonClient() {

var GridData;

jQuery.ajax({

type: 'POST',

contentType: 'application/json; charset=utf-8',

data: '',

dataType: 'JSON',

url: 'Default.aspx/BindGrid',

success: function (result) {

GridData = result.d;

if (GridData.length > 0) {

var divGridContainer = document.getElementById('divGridContainer');

divGridContainer.style.display = "";

var tableView = $find("<%= RadGrid1.ClientID %>").get_masterTableView();

tableView.set_dataSource(GridData);

tableView.dataBind();

}

else {

var divGridContainer = document.getElementById('divGridContainer');

divGridContainer.style.display = "none";

}

},

error: function () {

alert('Error on binding the data');

}

});

return false;

}

</script>

</telerik:RadCodeBlock>

</head>

<body>

<form id="form1" runat="server">

<div>

<telerik:RadScriptManager ID="RadScriptManager1" EnablePageMethods="true" runat="server">

</telerik:RadScriptManager>

<asp:Button ID="Button1" Text="Bind Grid" runat="server" OnClientClick="return OnbuttonClient();" />

<div id="divGridContainer" style="display: none;">

<telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="false">

<MasterTableView HierarchyLoadMode="Client" DataKeyNames="ID,ParentID" ClientDataKeyNames="ID,ParentID">

<Columns>

<telerik:GridBoundColumn DataField="ID" UniqueName="ID" HeaderText="ID">

</telerik:GridBoundColumn>

</Columns>

</MasterTableView>

</telerik:RadGrid>

</div>

</form>

</body>

</html>

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.Services;

using System.Runtime.Serialization.Json;

using System.IO;

using System.Text;

public partial class _1734880_Default : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

if (!IsPostBack)

{

                 // Add Dummy data to generate MatertableView

dynamic data = new[] {

new { ID = "1", Name ="Name11",ParentID = "0"},

new { ID = "2", Name ="Name11",ParentID = "0"},

new { ID = "3", Name ="Name11",ParentID = "0"},

new { ID = "4", Name ="Name11",ParentID = "0"}

};

RadGrid1.MasterTableView.DataSource = data;

RadGrid1.DataBind();

}

[WebMethod]

public static List<Employee> BindGrid()

{

List<Employee> list = new List<Employee>(); ;

Employee obj = new Employee();

obj.ID = "1";

obj.ParentID = "0";

obj.Name = "Name1";

list.Add(obj);

obj = new Employee();

obj.ID = "2";

obj.ParentID = "0";

obj.Name = "Name2";

list.Add(obj);

obj = new Employee();

obj.ID = "4";

obj.ParentID = "1";

obj.Name = "Name2";

list.Add(obj);

obj = new Employee();

obj.ID = "5";

obj.ParentID = "1";

obj.Name = "Name2";

list.Add(obj);

obj = new Employee();

obj.ID = "6";

obj.ParentID = "2";

obj.Name = "Name2";

list.Add(obj);

obj = new Employee();

obj.ID = "11";

obj.ParentID = "2";

obj.Name = "Name2";

list.Add(obj);

obj = new Employee();

obj.ID = "12";

obj.ParentID = "2";

obj.Name = "Name2";

list.Add(obj);

obj = new Employee();

obj.ID = "7";

obj.ParentID = "2";

obj.Name = "Name2";

list.Add(obj);

obj = new Employee();

obj.ID = "13";

obj.ParentID = "2";

obj.Name = "Name2";

list.Add(obj);

obj = new Employee();

obj.ID = "9";

obj.ParentID = "0";

obj.Name = "Name2";

list.Add(obj);

obj = new Employee();

obj.ID = "3";

obj.ParentID = "1";

obj.Name = "Name2";

list.Add(obj);

obj = new Employee();

obj.ID = "8";

obj.ParentID = "0";

obj.Name = "Name2";

list.Add(obj);

return list;

}

public class Employee

{

public string ID { get; set; }

public string Name { get; set; }

public string ParentID { get; set; }

}

Thanks,
Jayesh Goyani

answered on 23 May 2013, 02:55 AM

Hello Tsvetina I went through your example. But what I need to achieve is a way to use Jquery Ajax where I can manually mention the page URL Of where my page method exist. Similar to the code example provided by jayesh. Where he states this following code jQuery.ajax({ type: 'POST', contentType: 'application/json; charset=utf-8', data: '', dataType: 'JSON', url: 'Default.aspx/BindGrid', success: function (result) { How do I achieve sorting , paging using this method ?

answered on 23 May 2013, 05:10 AM

Or is there a generic way to have all Telerik contorls ajax traffic route to a specific page method of your choice ?
I need to figure this out, since Im building a Single Page Application, where the html content of multiple pages are downloaded on to say a Default.aspx.
Hence any interaction with my Telerik controls need to hit the appropriate Code behind page like Form1.aspx , from the base page Default.aspx.

Generally I can do this with jQuery's Ajax by specifying manually in the URL part the page path of the web method as shown below.

$.ajax({
        type: "POST",
        url: MyWebMethodPagePath + "/" + webMethodName,
        contentType: "application/json; charset=utf-8",
        data: paramList,
        dataType: "json",
        success: successFn,
        error: errorFn
    });

Let me know if there's a generic technique I can use for my Telerik Controls aswell.
If not atleast specific to Telerik Grids where I can Sort and provide paging.

answered on 27 May 2013, 06:56 AM

Hello Nikil,

In order to achieve your scenario you could subscribe to RadGrid OnCommand client-side event and route your request from there. Note that there is no build in mechanism in RadGrid or any other Telerik control for routing ajax traffic.

<ClientSettings>

<ClientEvents OnCommand="GridCommand" />

</ClientSettings>

function GridCommand(sender, args)

{

if (args.get_commandName() === "Sort")

{

// your routing logic here

}

Regards,
Antonio Stoilkov
Telerik

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.

answered on 12 Jun 2013, 06:58 AM

Hi Subodh,

You could achieve the desired functionality by following the approach shown in the demo below.

http://demos.telerik.com/aspnet-ajax/grid/examples/client/databinding/defaultcs.aspx

The idea is to use the updateGrid function which accepts an JavaScript Array which will bind to the RadGrid.

function updateGrid(result)

{

var tableView = $find("<%= RadGrid1.ClientID %>").get_masterTableView();

tableView.set_dataSource(result);

tableView.dataBind();

}

Regards,
Antonio Stoilkov
Telerik