1. Create a new ASP .NET Web Application.
2. Click the Data item.
3. Add a new DataSource. In the sample, we will use the Northwind.mdf and will bind the Grid to the Customers table.
4. Add the JQWidgets JavaScript files to the Scripts folder.
5. Add the jQWidgets CSS files and images to the Styles folder.
6. Open the Default.aspx.cs file.
7. Create a new SqlConnection, SqlDataAdapter and DataSet. Use the NorthwindConnectionString(this is the default name) connection string for the connection. You can see the connection string in the Web.config, too. Fill the DataSet with data and return the XML result.
Here’s the source code of the Default.aspx.cs file.
using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.UI;using System.Web.UI.WebControls;using System.Web.Services;using System.Web.Script.Services;using System.Data;using System.Data.SqlClient;using System.Configuration;using System.Web.Script.Serialization;namespace WebApplication1{ public partial class _Default : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { } [WebMethod] [ScriptMethod(UseHttpGet = true, ResponseFormat = ResponseFormat.Xml)] public static string GetCustomers() { string query = "SELECT * FROM Customers"; SqlCommand cmd = new SqlCommand(query); // Populate the DataSet. DataSet data = GetData(cmd); // return the Customers table as XML. System.IO.StringWriter writer = new System.IO.StringWriter(); data.Tables[0].WriteXml(writer, XmlWriteMode.WriteSchema, false); return writer.ToString(); } private static DataSet GetData(SqlCommand cmd) { string strConnString = ConfigurationManager.ConnectionStrings["NorthwindConnectionString"].ConnectionString; using (SqlConnection con = new SqlConnection(strConnString)) { using (SqlDataAdapter sda = new SqlDataAdapter()) { cmd.Connection = con; sda.SelectCommand = cmd; using (DataSet ds = new DataSet()) { sda.Fill(ds); return ds; } } } } }}
8. Open the Default.aspx file and create a new jqxDataAdapter instance.
source = { datatype: "xml", datafields: [ { name: 'CompanyName' }, { name: 'ContactName' }, { name: 'ContactTitle' }, { name: 'City' }, { name: 'Country' }, { name: 'Address' } ], async: false, record: 'Table', url: 'Default.aspx/GetCustomers',};var dataAdapter = new $.jqx.dataAdapter(source, { contentType: 'application/json; charset=utf-8'} );
9. Create and populate the jqxGrid. Set its source property to point to the dataAdapter.
$("#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} ]});
10. Here’s the full source code of the Default.aspx page.
<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %><asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent"> <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 () { //Getting the source data with ajax GET request source = { datatype: "xml", datafields: [ { name: 'CompanyName' }, { name: 'ContactName' }, { name: 'ContactTitle' }, { name: 'City' }, { name: 'Country' }, { name: 'Address' } ], async: false, record: 'Table', url: 'Default.aspx/GetCustomers', }; var dataAdapter = new $.jqx.dataAdapter(source, { contentType: 'application/json; charset=utf-8'} ); $("#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></asp:Content><asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent"> <div id="jqxgrid"></div></asp:Content>
The resulting Grid is shown below: