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. Add the following files to the Scripts folder.
“jqxbuttons.js, jqxcore.js, jqxdata.js, jqxgrid.js, jqxgrid.selection.js, jqxmenu.js, jqxscrollbar.js” and “jquery-1.7.1.min.js”.
3. Add the following css stylesheet files to the Styles folder.
In the “Styles” folder add “jqx.base.css” and “jqx.classic.css”.
4. Add the customers.txt file to the App_Data folder. Below is the data, that we will load into the jQuery Grid.
[{"CompanyName":"Alfreds Futterkiste","ContactName":"Maria Anders","ContactTitle":"Sales Representative","Address":"Obere Str. 57","City":"Berlin","Country":"Germany"},{"CompanyName":"Ana Trujillo Emparedados y helados","ContactName":"Ana Trujillo","ContactTitle":"Owner","Address":"Avda. de la Constitucin 2222","City":"Mxico D.F.","Country":"Mexico"},{"CompanyName":"Antonio Moreno Taquera","ContactName":"Antonio Moreno","ContactTitle":"Owner","Address":"Mataderos 2312","City":"Mxico D.F.","Country":"Mexico"},{"CompanyName":"Around the Horn","ContactName":"Thomas Hardy","ContactTitle":"Sales Representative","Address":"120 Hanover Sq.","City":"London","Country":"UK"},{"CompanyName":"Berglunds snabbkp","ContactName":"Christina Berglund","ContactTitle":"Order Administrator","Address":"Berguvsvgen 8","City":"Lule","Country":"Sweden"},{"CompanyName":"Blauer See Delikatessen","ContactName":"Hanna Moos","ContactTitle":"Sales Representative","Address":"Forsterstr. 57","City":"Mannheim","Country":"Germany"},{"CompanyName":"Blondesddsl pre et fils","ContactName":"Frdrique Citeaux","ContactTitle":"Marketing Manager","Address":"24, place Klber","City":"Strasbourg","Country":"France"},{"CompanyName":"Blido Comidas preparadas","ContactName":"Martn Sommer","ContactTitle":"Owner","Address":"C\/ Araquil, 67","City":"Madrid","Country":"Spain"},{"CompanyName":"Bon app'","ContactName":"Laurence Lebihan","ContactTitle":"Owner","Address":"12, rue des Bouchers","City":"Marseille","Country":"France"},{"CompanyName":"Bottom-Dollar Markets","ContactName":"Elizabeth Lincoln","ContactTitle":"Accounting Manager","Address":"23 Tsawassen Blvd.","City":"Tsawassen","Country":"Canada"},{"CompanyName":"B's Beverages","ContactName":"Victoria Ashworth","ContactTitle":"Sales Representative","Address":"Fauntleroy Circus","City":"London","Country":"UK"},{"CompanyName":"Cactus Comidas para llevar","ContactName":"Patricio Simpson","ContactTitle":"Sales Agent","Address":"Cerrito 333","City":"Buenos Aires","Country":"Argentina"},{"CompanyName":"Centro comercial Moctezuma","ContactName":"Francisco Chang","ContactTitle":"Marketing Manager","Address":"Sierras de Granada 9993","City":"Mxico D.F.","Country":"Mexico"},{"CompanyName":"Chop-suey Chinese","ContactName":"Yang Wang","ContactTitle":"Owner","Address":"Hauptstr. 29","City":"Bern","Country":"Switzerland"},{"CompanyName":"Comrcio Mineiro","ContactName":"Pedro Afonso","ContactTitle":"Sales Associate","Address":"Av. dos Lusadas, 23","City":"Sao Paulo","Country":"Brazil"},{"CompanyName":"Consolidated Holdings","ContactName":"Elizabeth Brown","ContactTitle":"Sales Representative","Address":"Berkeley Gardens 12 Brewery","City":"London","Country":"UK"},{"CompanyName":"Drachenblut Delikatessen","ContactName":"Sven Ottlieb","ContactTitle":"Order Administrator","Address":"Walserweg 21","City":"Aachen","Country":"Germany"},{"CompanyName":"Du monde entier","ContactName":"Janine Labrune","ContactTitle":"Owner","Address":"67, rue des Cinquante Otages","City":"Nantes","Country":"France"},{"CompanyName":"Eastern Connection","ContactName":"Ann Devon","ContactTitle":"Sales Agent","Address":"35 King George","City":"London","Country":"UK"},{"CompanyName":"Ernst Handel","ContactName":"Roland Mendel","ContactTitle":"Sales Manager","Address":"Kirchgasse 6","City":"Graz","Country":"Austria"}]
5. 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 ScriptMethod attribute with ResponseFormat.JSON. Below is the web service’s code:
using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.Services;using System.Net;using System.IO;using System.Web.Script.Services;using System.Web.Script.Serialization;using System.Web.Hosting;namespace WebService{ /// <summary> /// Summary description for Service /// </summary> [WebService(Namespace = "http://tempuri.org/")] [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] [ScriptService] // 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 string GetData() { String result; WebResponse response; WebRequest request = HttpWebRequest.Create(Path.Combine(HostingEnvironment.ApplicationPhysicalPath, "App_Data", "customers.txt")); response = request.GetResponse(); using (StreamReader reader = new StreamReader(response.GetResponseStream())) { result = reader.ReadToEnd(); reader.Close(); } return result; } }}
6. Open the “Default.aspx” page. Include the javascript and css files to the header section of the page. After that, initialize the web service’s url and the source object. Next, make asynchronous ajax request to the service’s URL. An interesting moment is the implementation of the success function in the jQuery’s ajax method. In its body, we set the source.localdata property to point to data.d. We need to do this because ASP.NET is wrapping the object in the following format { d: response }. Finally, initialize the Grid and set its source object to point to the dataAdapter.
<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebService._Default" %><asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent"></asp:Content><asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent"><link href="Styles/jqx.base.css" rel="stylesheet" type="text/css" /><link href="Styles/jqx.classic.css" rel="stylesheet" type="text/css" /><script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script><script src="Scripts/jqxcore.js" type="text/javascript"></script><script src="Scripts/jqxbuttons.js" type="text/javascript"></script><script src="Scripts/jqxdata.js" type="text/javascript"></script><script src="Scripts/jqxgrid.js" type="text/javascript"></script><script src="Scripts/jqxgrid.selection.js" type="text/javascript"></script><script src="Scripts/jqxmenu.js" type="text/javascript"></script> <script src="Scripts/jqxscrollbar.js" type="text/javascript"></script> <script type="text/javascript">$(document).ready(function () { //URL to the service url = "http://localhost:1216/Service.asmx/GetData", //Initializing the source property source = { datatype: "json", datafields: [ { name: 'CompanyName' }, { name: 'ContactName' }, { name: 'ContactTitle' }, { name: 'City'}, { name: 'Country'}, { name: 'Address'} ] }; //Getting the source data with ajax GET request $.ajax({ type: 'GET', dataType: 'json', async: false, url: 'http://localhost:1216/Service.asmx/GetData', cache: false, contentType: 'application/json; charset=utf-8', success: function (data) { source.localdata = data.d; }, error: function (err) { alert('Error'); } }); //Preparing the data for use var dataAdapter = new $.jqx.dataAdapter(source); $("#jqxgrid").jqxGrid({ source: dataAdapter, theme: 'classic', columns: [ { text: 'Company Name', dataField: 'CompanyName', width: 250 }, { text: 'Contact Name', dataField: 'ContactName', width: 150 }, { text: 'Contact Title', dataField: 'ContactTitle', width: 180 }, { text: 'Address', dataField: 'Address', width: 180}, { text: 'City', dataField: 'City', width: 80 }, { text: 'Country', dataField: 'Country', width: 100} ] });});</script> <h2> Welcome to ASP.NET! </h2> <p> To learn more about ASP.NET visit <a href="http://www.asp.net" title="ASP.NET Website">www.asp.net</a>. </p> <p> You can also find <a href="http://go.microsoft.com/fwlink/?LinkID=152368&clcid=0x409" title="MSDN ASP.NET Docs">documentation on ASP.NET at MSDN</a>. </p> <div id="jqxgrid"></div></asp:Content>
