Populate jqxGrid with data from ASP .NET Web Service

In a few steps, we will show you how to load the jqxGrid with data coming from ASP .NET Web Service.

1. Create a new ASP.NET Web Application.
2. In the "Solution Explorer", click "Site.Master" and in the head section, add references to the jQuery Framework, jQWidgets Framework(jqx-all.js) and the Theme Files(jqx.base.css and any other theme file like jqx.classic.css).
3. Add a new web service to the website. Right click on your project’s name. Then choose “Add -> New Item -> Web Service”. For example call it “Service”.
   
   
   
   Double click on the “Service.asmx” to open it. The GetData web method must have ScriptService attribute with ResponseFormat.JSON. Below is the web service’s code:

       [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); 
           }
       }
   }
   

4. Open the “Default.aspx” page. An interesting moment in the implementation below is the downloadComplete callback function. Inside the function's body, we return data.d instead of data. We need to do this because ASP.NET is wrapping the server response in the following format { d: response }

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