Monday, June 3, 2024
 Popular · Latest · Hot · Upcoming
7
rated 0 times [  10] [ 3]  / answers: 1 / hits: 45907  / 16 Years ago, tue, april 7, 2009, 12:00:00

ok, I'm back. I totally simplified my problem to just three simple fields and I'm still stuck on the same line using the addJSONData method. I've been stuck on this for days and no matter how I rework the ajax call, the json string, blah blah blah...I can NOT get this to work! I can't even get it to work as a function when adding one row of data manually. Can anyone PLEASE post a working sample of jqGrid that works with ASP.NET and JSON? Would you please include 2-3 fields (string, integer and date preferably?) I would be happy to see a working sample of jqGrid and just the manual addition of a JSON object using the addJSONData method. Thanks SO MUCH!! If I ever get this working, I will post a full code sample for all the other posting for help from ASP.NET, JSON users stuck on this as well. Again. THANKS!!



tbl.addJSONData(objGridData); //err: tbl.addJSONData is not a function!!



Here is what Firebug is showing when I receive this message:



• objGridData Object total=1 page=1 records=5 rows=[5]

○ Page 1

Records 5

Total 1

Rows [Object ID=1 PartnerID=BCN, Object ID=2 PartnerID=BCN, Object ID=3 PartnerID=BCN, 2 more... 0=Object 1=Object 2=Object 3=Object 4=Object]

(index) 0

(prop) ID (value) 1
(prop) PartnerID (value) BCN
(prop) DateTimeInserted (value) Thu May 29 2008 12:08:45 GMT-0700 (Pacific Daylight Time)

* There are three more rows



Here is the value of the variable tbl (value) 'Table.scroll'



<TABLE cellspacing=0 cellpadding=0 border=0 style=width: 245px; class=scroll grid_htable><THEAD><TR><TH class=grid_sort grid_resize style=width: 55px;><SPAN> </SPAN><DIV id=jqgh_ID style=cursor: pointer;>ID <IMG src=http://localhost/DNN5/js/jQuery/jqGrid-3.4.3/themes/sand/images/sort_desc.gif/></DIV></TH><TH class=grid_resize style=width: 90px;><SPAN> </SPAN><DIV id=jqgh_PartnerID style=cursor: pointer;>PartnerID </DIV></TH><TH class=grid_resize style=width: 100px;><SPAN> </SPAN><DIV id=jqgh_DateTimeInserted style=cursor: pointer;>DateTimeInserted </DIV></TH></TR></THEAD></TABLE>


Here is the complete function:



 $('table.scroll').jqGrid({  
datatype: function(postdata) {
mtype: POST,
$.ajax({
url: 'EDI.asmx/GetTestJSONString',
type: POST,
contentType: application/json; charset=utf-8,
data: {},
dataType: text, //not json . let me try to parse
success: function(msg, st) {
if (st == success) {
var gridData;

//strip of d: notation
var result = JSON.parse(msg);
for (var property in result) {
gridData = result[property];
break;
}

var objGridData = eval(( + gridData + )); //creates an object with visible data and structure
var tbl = jQuery('table.scroll')[0];

alert(objGridData.rows[0].PartnerID); //displays the correct data

//tbl.addJSONData(objGridData); //error received: addJSONData not a function

//error received: addJSONData not a function (This uses eval as shown in the documentation)
//tbl.addJSONData(eval(( + objGridData + )));

//the line below evaluates fine, creating an object and visible data and structure
//var objGridData = eval(( + gridData + ));
//BUT, the same thing will not work here
//tbl.addJSONData(eval(( + gridData + )));
//FIREBUG SHOWS THIS AS THE VALUE OF gridData:
// {total:1,page:1,records:5,rows:[{ID:1,PartnerID:BCN,DateTimeInserted:new Date(1214412777787)},{ID:2,PartnerID:BCN,DateTimeInserted:new Date(1212088125000)},{ID:3,PartnerID:BCN,DateTimeInserted:new Date(1212088125547)},{ID:4,PartnerID:EHG,DateTimeInserted:new Date(1235603192033)},{ID:5,PartnerID:EMDEON,DateTimeInserted:new Date(1235603192000)}]}

}
}
});
},
jsonReader: {
root: rows, //arry containing actual data
page: page, //current page
total: total, //total pages for the query
records: records, //total number of records
repeatitems: false,
id: ID //index of the column with the PK in it
},
colNames: [
'ID', 'PartnerID', 'DateTimeInserted'
],
colModel: [
{ name: 'ID', index: 'ID', width: 55 },
{ name: 'PartnerID', index: 'PartnerID', width: 90 },
{ name: 'DateTimeInserted', index: 'DateTimeInserted', width: 100}],
rowNum: 10,
rowList: [10, 20, 30],
imgpath: 'http://localhost/DNN5/js/jQuery/jqGrid-3.4.3/themes/sand/images',
pager: jQuery('#pager'),
sortname: 'ID',
viewrecords: true,
sortorder: desc,
caption: TEST Example)};

More From » asp.net

 Answers
0

Here is a simple example...



You will need https://github.com/douglascrockford/JSON-js/blob/master/json2.js
for this to work...



and of course the usual jquery files.



Paste this to a webservice



// The lower case properties here are required to be lower case
// I cant find a way to rename them when they are serialized to JSON
// XmlElement(yournamehere) does not work for JSON :(
public class JQGrid
{
public class Row
{
public int id { get; set; }
public List<string> cell { get; set; }

public Row()
{
cell = new List<string>();
}
}

public int page { get; set; }
public int total { get; set; }
public int records { get; set; }
public List<Row> rows { get; set; }

public JQGrid()
{
rows = new List<Row>();
}
}


[WebService(Namespace = http://tempuri.org/)]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[ScriptService]
public class MyWebService : System.Web.Services.WebService
{

[WebMethod(EnableSession = true)]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public JQGrid GetJQGrid(int page, int pageSize, string sortIndex, string sortDirection)
{
DataSet ds = SqlHelper.ExecuteDataset(SqlHelper.CONN_STRING, udsp_GetMyData,pageIndex, pageSize);

if (ds == null || ds.Tables.Count < 1)
throw new Exception(Unable to retrieve data.);

JQGrid jqGrid = new JQGrid();

int i = 1;
foreach (DataRow dataRow in ds.Tables[0].Rows)
{
JQGrid.Row row = new JQGrid.Row();

row.id = Convert.ToInt32(dataRow[MyIdColumn]);

row.cell.Add(dataRow[MyIdColumn].ToString());

row.cell.Add(dataRow[MyColumn].ToString());


projectGrid.rows.Add(row);
}

jqGrid.page = 1; // Set this when you are actually doing paging... this is just a sample
jqGrid.records = jqGrid.rows.Count;
jqGrid.total = jqGrid.rows.Count; // Set this to total pages in your result...

return jqGrid;
}
}


Paste this to your aspx page



<script type=text/javascript>
function getData(pdata) {
var params = new Object();
params.page = pdata.page;
params.pageSize = pdata.rows;
params.sortIndex = pdata.sidx;
params.sortDirection = pdata.sord;


$.ajax({
type: POST,
contentType: application/json; charset=utf-8,
url: /CLM/CLM.asmx/GetProjectGrid2,
data: JSON.stringify(params),
dataType: json,
success: function(data, textStatus) {
if (textStatus == success) {
var thegrid = $(#testGrid)[0];
thegrid.addJSONData(data.d);
}
},
error: function(data, textStatus) {
alert('An error has occured retrieving data!');
}
});
}

var gridimgpath = '/clm/css/ui-lightness/images';
$(document).ready(function() {
$(#testGrid).jqGrid({
datatype: function(pdata) {
getData(pdata);
},
colNames: ['My Id Column', 'My Column'],
colModel: [
{ name: 'MyIdColumn', index: 'MyIdColumn', width: 150 },
{ name: 'My Column', index: 'MyColumn', width: 250 }
],
rowNum: 10,
rowList: [10, 20, 30],
imgpath: gridimgpath,
pager: jQuery('#pagerdt'),
sortname: 'id',
viewrecords: false,
sortorder: desc,
caption: Projects,
cellEdit: false
});
});
</script>

[#99733] Thursday, April 2, 2009, 16 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
gregorio

Total Points: 362
Total Questions: 95
Total Answers: 93

Location: Puerto Rico
Member since Sun, Jun 27, 2021
3 Years ago
;