PDA

View Full Version : Json Help( Bind Json data to Grid)



thilakmsc
13 Jul 2012, 9:36 PM
Dear all.,

I need a help to Bind grid using Json value.

Json Data : (This data from Webservice(I was convert dataset to Json in C#))

{"Table" : [{"UserId" : "1","UserName" : "Thilakraj","DateOfBirth" : "3/21/1985 12:00:00 AM","Gender" : "1","EmailId" : "thilakraj@angleritech.com"},
{"UserId" : "2","UserName" : "thilak","DateOfBirth" : "7/10/2012 12:00:00 AM","Gender" : "1","EmailId" : "thilakraj@angleritech.com"},]}

Code :

Ext.onReady(function () {

Ext.define('Bond', {
extend: 'Ext.data.Model',
fields: ['UserId', 'UserName', 'DateOfBirth', 'Gender','EmailId']
});


var store = new Ext.data.JsonStore
({
root: 'Table', // see json output
proxy: {
type: 'ajax',
url: '../ExtJs.asmx/UserInformation',
actionMethods: {create: 'POST', read: 'POST', update: 'POST', destroy: 'POST'},
reader:
{
type: 'json',
root: 'Table',
idProperty: 'UserId'
}
},
model: 'Bond'
// fields: [ {name: 'UserId', type: 'int'}, 'UserName','DateOfBirth','Gender','EmailId']
});

store.load();


var grid = new Ext.grid.GridPanel({

store: store,
columns: [
{header: "User Name", width: 120, dataIndex: 'UserName', sortable: true},
{header: "Date Of Birth", width: 180, dataIndex: 'DateOfBirth', sortable: true},
{header: "Email", width: 115, dataIndex: 'EmailId', sortable: true}
,{header: "Gender", width: 100, dataIndex: 'Gender', sortable: true}
],
stripeRows: true,
autoExpandColumn: 'UserName',
height: 350,
width: 600,
title: 'User Information',
stateful: true,
stateId: 'grid'
});

store.load();

grid.render('grid-example');
});



Error Message :

'Unable to parse the JSON returned by the server: You're trying to decode an invalid JSON String: <?xml version="1.0" encoding="utf-8"?>
<string xmlns="http://tempuri.org/">
{"Table" : [{"UserId" : "1","UserName" : "Thilakraj","DateOfBirth" : "3/21/1985 12:00:00 AM","Gender" : "1","EmailId" : "thilakraj@angleritech.com"},
{"UserId" : "2","UserName" : "thilak","DateOfBirth" : "7/10/2012 12:00:00 AM","Gender" : "1","EmailId" : "thilakraj@angleritech.com"},
{"UserId" : "3","UserName" : "thilaksample","DateOfBirth" : "7/10/2012 12:00:00 AM","Gender" : "1","EmailId" : "thilakraj@angleritech.com"},

</string>'
when calling method: [nsIDOMEventListener::handleEvent]
[Break On This Error]

Filtered chrome url chrome://firebug/content/net/spy.js

scottmartin
13 Jul 2012, 10:31 PM
You will need to encode your json string sent from the server.

Scott.

thilakmsc
13 Jul 2012, 10:40 PM
Dear Scott,

Following is string is my Json from my server

{
"Table" :
[
{"UserId" : "1","UserName" : "Thilakraj","DateOfBirth" : "3/21/1985 12:00:00 AM",
"Gender" : "1","EmailId" : "thilakraj@angleritech.com"},
{"UserId" : "2","UserName" : "thilak","DateOfBirth" : "7/10/2012 12:00:00 AM",
"Gender" : "1","EmailId" : "thilakraj@angleritech.com"},
]
}

I think this valid Json i also check through http://jsonlint.com/.

Is it possible well you please give sample valid Json string.

sword-it
13 Jul 2012, 10:48 PM
Hi,
I did not try this in Ext 4.1 but I tried in Extjs 3.4 & its working well for me. You can easily convert that into 4.x. I am giving you a demo code, you can take review from the below code:

1. Store of the grid -



createStore: function(){
return new Ext.data.JsonStore({
proxy: new Ext.data.HttpProxy({
url: 'MyWebservice.asmx/GetList', // url of the web method of asp.net
headers: {
'content-type': 'application/json'
}
})
, root: 'd' // this is auto root, I don't know how to change this
, idProperty: 'recordId'
, fields: ['recordId', 'recordName', 'age',....] // define the no of column of grid store
});
}



2. web method of Asp.NET code. File - MyWebservice.asmx



using System.Web;
using System.Web.Security;
using System.Web.Script.Services;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Collections;
using System.Collections.Generic;

[ScriptService]
public class MyWebservice: WebService
{
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json, UseHttpGet = true, XmlSerializeString = false)]
public ArrayList GetList()
{
ArrayList table = new ArrayList();
// get the data from the table
// define a object of class 'MyClass' and fill row data to that & add that to the arraylist object.
// add all rows of the table to the arraylist object like above.
return table;
}
}
// defini a class that will save the data of table row
// this class will contains the table-columns value as its properties
public class MyClass
{
public string recordId { get; set; } // these property will be same as column defined in grid store
public string recordName { get; set; }
public int age{ get; set; }
......
}

redraid
16 Jul 2012, 6:49 AM
'Unable to parse the JSON returned by the server: You're trying to decode an invalid JSON String: <?xml version="1.0" encoding="utf-8"?>
<string xmlns="http://tempuri.org/">

You send XML header (blue text) before JSON

thilakmsc
16 Jul 2012, 7:03 PM
Yes redraid., i just convert dataset to json string it return following string.,

<?xml version="1.0" encoding="utf-8"?>
<string xmlns="http://tempuri.org/">
{"Table" : [{"UserId" : "1","UserName" : "Thilakraj","DateOfBirth" : "3/21/1985 12:00:00 AM","Gender" : "1","EmailId" : "thilakraj@angleritech.com"}]}

Better will you please try to How to convert dataset to Json string.

redraid
16 Jul 2012, 11:55 PM
Try this:

var jsonSerializer = new System.Web.Script.Serialization.JavaScriptSerializer();
string json = jsonSerializer.Serialize(yourCustomObject);

thilakmsc
17 Jul 2012, 12:15 AM
HI .,

Will you please try to give some sample paging in grid.Still i'm unable to load Json value to Grid.

Even In ExtJs 4.1 we don't have Base.js.