Bind jqxTreeGrid to MySQL Database using JSP

In this help topic you will learn how to bind a jqxTreeGrid to a MySQL database using JSP (JavaServer Pages).

Important: before proceeding, please make sure you have followed the instructions of the tutorial Configure MySQL, Eclipse and Tomcat for Use with jQWidgets.

1. Connect to the Database and Retrieve the Tree Grid Data

To populate the tree grid, we need a JSP file that connects to the Northwind database and retieves data from it.

Create a new JSP by right-clicking the project's WebContent folder, then choosing NewJSP File. Name the file select-tree-grid-data.jsp.

Import the necessary classes in the beginning of the JSP:

Finally, add a scriptlet to the JSP that does the following:

  1. Makes a database connection.
  2. Selects the necessary data from the database in a ResultSet.
  3. Converts the ResultSet to a JSON array.
  4. Prints (returns) the JSON array.

2. Create a Page with a jqxTreeGrid

Create a new HTML page by right-clicking the project's WebContent folder, then choosing NewHTML File. Here is the code of the page in our example:

Through jqxDataAdapter, the tree grid is populated by the data retrieved from the database by select-tree-grid-data.jsp. To run the page, right-click it and select Run AsRun on Server. In the window that appears, select Tomcat v8.0 Server at localhost and click Finish.