[WebService(Namespace = "http://tempuri.org/")] [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] // To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. [System.Web.Script.Services.ScriptService] public class Service : System.Web.Services.WebService { /// <summary> /// Service which is getting JSON string from the jQWidgets website /// </summary> /// <returns>JSON string</returns> [WebMethod] [ScriptMethod(UseHttpGet = true, ResponseFormat = ResponseFormat.Json)] public object GetData() { string result; WebResponse response; WebRequest request = HttpWebRequest.Create("http://www.jqwidgets.com/jquery-widgets-demo/demos/sampledata/data.php"); response = request.GetResponse(); using (StreamReader reader = new StreamReader(response.GetResponseStream())) { result = reader.ReadToEnd(); reader.Close(); } return new JavaScriptSerializer().DeserializeObject(result); } }}
<script type="text/javascript">$(document).ready(function () { var source = { type: "GET", datatype: "json", datafields: [ { name: 'firstname' }, { name: 'lastname' }, { name: 'productname' }, { name: 'quantity', type: 'int' }, { name: 'price', type: 'float' }, { name: 'total', type: 'float' } ], url: 'http://localhost:1216/Service.asmx/GetData', cache: false, root: 'data' }; //Preparing the data for use var dataAdapter = new $.jqx.dataAdapter(source, { contentType: 'application/json; charset=utf-8', downloadComplete: function(data, textStatus, jqXHR) { return data.d; } } ); $("#jqxgrid").jqxGrid({ source: dataAdapter, columns: [ { text: 'First Name', dataField: 'firstname', width: 100 }, { text: 'Last Name', dataField: 'lastname', width: 100 }, { text: 'Product', dataField: 'productname', width: 180 }, { text: 'Quantity', dataField: 'quantity', width: 80, cellsalign: 'right' }, { text: 'Unit Price', dataField: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' }, { text: 'Total', dataField: 'total', cellsalign: 'right', minwidth: 100, cellsformat: 'c2' } ] });});</script>