I am having some issues with getting data to display using the igGrid. I am programming in asp.net and calling a webmethod that returns json object back to the javascript.
Here is my code.
function test_json() { simpleLoad('orderdetail.aspx/GetOrderTotal', { orderid: '40069' }, testjson_success); return false;}
my webmethod
Public Shared Function GetOrderDetail(ByVal PostData) Dim outputObj As New Dictionary(Of String, String) Dim _orderLines As EmunWorks.Info.SalesOrderLinesTotalInfo() Dim _orderLinesDB As New EmunWorks.DataAccess.SalesOrderLinesDB _orderLines = _orderLinesDB.GetSalesOrderLineTotals("40069") Dim jsSerializer As System.Web.Script.Serialization.JavaScriptSerializer jsSerializer = New System.Web.Script.Serialization.JavaScriptSerializer() Dim sbOrder As New System.Text.StringBuilder() jsSerializer.Serialize(_orderLines(0), sbOrder) Dim json As String = sbOrder.ToString() Return json End Function
if data get is successful then thisfunction testjson_success(data) { $("#grid1").igGrid({ autoGenerateColumns: false, columns: [ { headerText: "Line Count", key: "lineCount", dataType: "number" }, { headerText: "Qty Count", key: "qtyCount", dataType: "numbers" } ], dataSource: data, width: '500px' });
}
the data object returns this json response.
{"d":{"lineCount":"23","qtyCount":"56","extendedSum":"$5,000.16"}}
I have also tried this response, but no luck
"{"LineCount":23,"QtyCount":56,"ExtendedSum":5000.1600000000008}"
my web method is really a an object that i Serialize to json
object.LineCount
object.QtyCount
Any help would be greatly appreciated.
Sy
hi,
your response should be an array, not object. i mean, it should be something like:
"[ {"LineCount":23,"QtyCount":56,"ExtendedSum":5000.1600000000008} ] "
(that's assuming you have one record). In order for that to work, you can change your webmethod to be like this:
jsSerializer.Serialize(_orderLines, sbOrder)
Notice i have changed _orderLines(0) to just _orderLines.
Hope that helps. If you keep with the first format, that includes "d" as the root path, you need to set responseDataKey: "d", so that the grid can find where your records are located in the response. You can also have a look at the online API docs:
http://help.infragistics.com/jQuery/2011.1/ui.iggrid#!options
Thanks
Angel
Thanks for your quick response.
I made some adjustments based on what you sent me. I am only getting the header to show up with no data. I am using a different data object that will make more sense.
Here is my code
$("#grid1").igGrid({
autoGenerateColumns: false,
columns: [
{ headerText: "Name", key: "Name", dataType: "string" },
{ headerText: "Description", key: "Description", dataType: "string" }
],
dataSourceType: 'json',
responseDataKey: 'd',
dataSource: data,
width: '500px'
});
My data web method
Public Shared Function GetOrderDetail(ByVal PostData)
'Dim sOrderNumber As String = PostData("orderid")
Dim outputObj As New Dictionary(Of String, String)
Dim _ShipViaInfo As EmunWorks.Info.ShippingMethodsInfo()
Dim _ShipViaDB As New EmunWorks.DataAccess.ShippingMethodsDB
_ShipViaInfo = _ShipViaDB.GetShippingMethods()
Dim jsSerializer As System.Web.Script.Serialization.JavaScriptSerializer
jsSerializer = New System.Web.Script.Serialization.JavaScriptSerializer()
Dim sbOrder As New System.Text.StringBuilder()
jsSerializer.Serialize(_ShipViaInfo, sbOrder)
Dim json As String = sbOrder.ToString()
Return json
End Function
My response
{"d":"[{\"Name\":\"AACT\",\"Description\":\"AAA COOPER\",\"NewShipMethod\":false},{\"Name\":\"ABFS\",\"Description\":\"AB FREIGHT SYSTEM\",\"NewShipMethod\":false},{\"Name\":\"ACT\",\"Description\":\"AAA COOPER\",\"NewShipMethod\":false},{\"Name\":\"ALX\",\"Description\":\"ALEX AIR\",\"NewShipMethod\":false},{\"Name\":\"ALX1\",\"Description\":\"ALEX AIR\",\"NewShipMethod\":false},{\"Name\":\"ALX2\",\"Description\":\"ALEX AIR 2ND DAY\",\"NewShipMethod\":false},{\"Name\":\"AM\",\"Description\":\"AMERICAN FREIGHT\",\"NewShipMethod\":false},{\"Name\":\"APP\",\"Description\":\"AIR PARCEL POST\",\"NewShipMethod\":false},{\"Name\":\"ATNF\",\"Description\":\"American Trans Freight\",\"NewShipMethod\":false},{\"Name\":\"AVRT\",\"Description\":\"Averitt\",\"NewShipMethod\":false},{\"Name\":\"BELL\",\"Description\":\"BELL CARTAGES\",\"NewShipMethod\":false},{\"Name\":\"BINE\",\"Description\":\"BIRMINGHAM NASHVILLE EXPRESS\",\"NewShipMethod\":false}]"}
Ok i see,
i haven't realized you are actually not having the URL as the data source but directly supplying your local javascript object. In that case you can just set dataSource: data.d, and responseDataKey is not necessary.
Hope it helps,
I am using same code snippet but I am not able to display the data, only header is being shown up on UI. Please suggest me.
Angel thank you so much that fixed it.
Please have a look at the attached screenshot. You don't have "d" property in the response. So it should be just data. Or if you have the format where your records are stored in "d", then it's data.d.
Thanks,
Still no luck using that. You can try it yourself here http://emunportal.com:3500/deploy/ewonline/jsontest.aspx
i know it is something with the data source, because I can set it up manually and it will work.
thanks
sy