jQuery igGrid databind no data appears

300

saevar posted over 13 years ago

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 this
function 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.

300

saevar posted over 13 years ago in reply to Alexander Todorov

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}]"}
Cancel
Reply

Cancel
24671

Alexander Todorov posted over 13 years ago

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

Cancel