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.

  10. Create and populate the jqxGrid. Set its source property to point to the dataAdapter.
  11. Here’s the full source code of the Default.aspx page.