Documentation

Bind jqxGrid to SQL Database using ASP.NET

1. Open Visual Studio.
2. Create a new ASP .NET Web Application.
3. Click the "Data" menu item in the Visual Studio's Menu.
4. Add a new DataSource. In the sample, we will use the Northwind.mdf and will populate the Grid with data from the Customers table. *You can also add a connection from the "Server Explorer".
5. Add the JQWidgets JavaScript files to the Scripts folder.
6. Add the jQWidgets CSS files and images to the Styles folder.
7. Open the Default.aspx.cs file.
8. 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.
   
   
   
9. 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'}
   );
   

   
   
10. 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}
    	]
    });
    

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