Displaying Data on a JSP page using Dojo Data grid

Question

I have written this code which is returning a Json string.It contains a set of values(names). Now i want to display these values on a jsp page using Dojo data grid. I Don't know how to use this returned Json string as a data for Dojo grid. And how to format the table Structure. Also i want when i click on a particular row in a table(which in this case contains only a single column - Employee name as per my query) a new Window opens up(probably a new JSP page). how to do that? Please help me with the code. Thanks.

PopulateTextbox.java

package MyPackage;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.ArrayList;
import java.util.List;

import com.google.gson.Gson;

public class PopulateTextbox {

    Gson gson = new Gson();
    String temp;
    List <String>rowValues = new ArrayList<String>();
    String[] contactListNames;
    Connection con=null;
    Statement st=null;
    ResultSet rs=null;


    public String method(){


        try{


        String driver = "sun.jdbc.odbc.JdbcOdbcDriver";
        Class.forName(driver);

        String db = "jdbc:odbc:Practice_Database";
        con = DriverManager.getConnection(db,"","");

        st = con.createStatement();
        String sql = "SELECT Emp_Name FROM EmployeeSearch";
        rs = st.executeQuery(sql);

        while(rs.next()){

            rowValues.add(rs.getString("Emp_Name"));
        }
        contactListNames = (String[]) rowValues.toArray(new String[rowValues.size()]);
        temp = gson.toJson(contactListNames);

    }catch(Exception e){System.out.println(e);}
    /*finally{
        try {
                if(con!=null)con.close();
            } catch (SQLException e) {

                e.printStackTrace();
            }
        try {
            if(rs!=null)rs.close();
        } catch (SQLException e) {

            e.printStackTrace();
        }try {
            if(st!=null)st.close();

        } catch (SQLException e) {

            e.printStackTrace();
        }


    }*/
        return temp;

    }
}

Answer 1

The dojox.grid.DataGrid uses a data store as its source. A dojo.data.ItemFileReadStore can take a json object that is the data.

var grid = ...
var store = new dojo.data.ItemFileReadStore({
    data: YOUR_JSON_HERE
});
grid.setStore(store);

The json that the store uses to initialize itself looks like the following

{
    identifier: 'id',
    items: [
        { id: 0, name: 'x' },
        { id: 1, name: 'y' }
    ]
}

So you will need to modify your java code to generate the specific json format. Also note that each item has an id that must be unique across all items in the store.

http://dojotoolkit.org/reference-guide/dojo/data/ItemFileReadStore.html

The DataGrid has onRowClick and onRowDblClick events that you can tie into to do what you need when the user selects it.

http://dojotoolkit.org/reference-guide/dojox/grid/DataGrid.html#dojox-grid-datagrid