How to JSON with jqxGrid?

[viperbyteMember]

Hi everyone,

This is my first time here. I’m having a tough time understanding how to get the jqxGrid to work with my JSON data that is being returned by a web service. I have a project in which the following code will populate an html textArea named textResult with data. I beleive CallWS is the webservice method.


CallWS({
exec: "getsuppliers"
}, function (data) {
$("#txtResult").val(JSON.stringify(data));
});


I’ve been following along in the example Grid/datasource/json from this website and the json comes from a beverages.txt file. I don’t see or know how to swap out that beverages.txt bit of the code out for where my data will be coming from. It will be coming from that call to CallWS that is mentioned above. Can someone super duper please show me how to get that CallWS incorporated into the below code which is lifted from this site?


Grid populated from JSON. $(document).ready(function () { var url = "beverages.txt"; // prepare the data var source = { datatype: "json", datafields: [ { name: 'name' }, { name: 'type' }, { name: 'calories' }, { name: 'totalfat' }, { name: 'protein' }, ], id: 'id', url: url }; var dataAdapter = new $.jqx.dataAdapter(source, { downloadComplete: function (data, status, xhr) { }, loadComplete: function (data) { }, loadError: function (xhr, status, error) { } }); $("#jqxgrid").jqxGrid( { width: 670, source: dataAdapter, columns: [ { text: 'Name', datafield: 'name', width: 250 }, { text: 'Beverage Type', datafield: 'type', width: 250 }, { text: 'Calories', datafield: 'calories', width: 180 }, { text: 'Total Fat', datafield: 'totalfat', width: 120 }, { text: 'Protein', datafield: 'protein', width: 120 } ] }); });

[viperbyteMember]

I just reviewed my post and see how ugly that code at the bottom came out. The code is at this site at this link http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxgrid/jquery-grid-datasources.htm At that page you scroll down a bit till you get to the “Bind the Grid to JSON data” section.

[Peter StoevKeymaster]

Hi viperbyte,

I suggest you to take a look at this help topic: asp.net-web-service-grid.htm. The help topic illustrates how to populate jqxGrid with JSON data from a web service.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[viperbyteMember]

Thanks Peter for the help.

In that link the tutorial uses a project in which the webservice will be called like this: url: ‘http://localhost:1216/Service.asmx/GetData’. That line was in the $.ajax({…part of the code where GetData is the WebService. The WebService I have available to work with comes in the form of a Method like deomonstrated in my original post. The way the Call is used in the origianal post, it puts data in the txtArea named textResults. I don’t know how to incorporate the code from the link you provided and such similar code I have seen with the CallWS method that I have to work with. Super thanks though. Can anyone pleeeease show me how to get my method CallWS to work with the jqxGrid?

[Author]

Posts