pass data and column names to jqgrid as an array

Question

I am using JQGRID for displaying data in tabular format. I have successfully accessed data in jqgrid from servlet. I am using XML as datatype.

My question is that how should I pass the column names as an array ? So far I am able to diaplya records in jqgrid by giving names to the column from javascript manually. but I want to fetch column names from database and pass it to the jqgrid as an array.

Following is my code snippet:

<script language="javascript">
        function fillGridOnEvent()
        {
            $("#jQGrid").html("<table id=\"list\"></table><div id=\"page\"></div>");
            jQuery("#list").jqGrid({
                url:'<%=request.getContextPath()%>/JQGridServlet?q=1&action=fetchData',
                datatype: "xml",
                height: 250,
              colNames:['Sr. No.','Student Name','Student Std.','Student RollNo.',"Action"],
                colModel:[{name:'srNo',index:'srNo', width:90,sortable:true},
                          {name:'stdName',index:'stdName', width:130,sortable:false},
                          {name:'stdStd',index:'stdStd', width:100,sortable:false},
                          {name:'stdRollNo',index:'stdRollNo', width:180,sortable:false},
                          {name:'view',index:'view', width:100,sortable:false}
                          ],
                multiselect: false,
                paging: true,
                rowNum:10,
                rowList:[10,20,30],
                pager: $("#page"),
                loadonce:true,
                caption: "Table1"
            }).navGrid('#page',{edit:false,add:false,del:false});
        }
        jQuery().ready(function (){
            //fillGrid();
        });
    </script>

Servlet:

protected void showData(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException 
{    
    PrintWriter out = response.getWriter();
            response.setContentType("text/xml;charset=UTF-8");               
            String rows = request.getParameter("rows");
            int totalPages = 0;
            int totalCount = 15;
            if (totalCount > 0) 
            {
                if (totalCount % Integer.parseInt(rows) == 0) 
                {
                    totalPages = totalCount / Integer.parseInt(rows);
                } 
                else
                {
                    totalPages = (totalCount / Integer.parseInt(rows)) + 1;
                }
            } 
            else 
            {
                totalPages = 0;
            }
            out.print("<?xml version='1.0' encoding='utf-8'?>\n");
            out.print("<rows>");
            out.print("<page>" + request.getParameter("page") + "</page>");
            out.print("<total>" + totalPages + "</total>");
            out.print("<records>" + 15 + "</records>");
            int srNo = 1;
            for (int i=0;i<15;i++) 
            {
                out.print("<row id='" + i + "'>");
                out.print("<cell>" + srNo + "</cell>");
                out.print("<cell>ABCDEFG</cell>");
                out.print("<cell>ABC</cell>");
                out.print("<cell>125</cell>");
                out.print("</row>");
                srNo++;
    }
            out.print("</rows>");
}

In above servlet I am able to sent the data, but now I also want to set column names from servlet.. Any Idea?

Answer 1

You are going to have to set up a separate process/servlet to pass in the names of the columns while initializing the jQgrid and before you call the loading of data.

Once you pass the data of the column names to your page you can setup a var array containing the column names and assign that to the colNames: property.