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

how can i fill grid with json data

2 Answers 1038 Views

Grid

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

2 Answers, 1 is accepted

answered on 04 Apr 2012, 02:27 PM

Hello CD / Nahmoud,

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

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

{

protected void Page_Load(object sender, EventArgs e)

{

if (!IsPostBack)

{

dynamic data = new[] {

new { ID = "1", 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