JSF Marquee Component | Java Example | FlexiGrid using Servlet + JSON |

FlexiGrid example using Servlet and JSON

with 12 comments

Required Libraries :


Create a “Dynamic Web Project” in Eclipse.
New –> Project .. –> Dynamic Web Project.
I have my project named as “TestWeb”

click on the image for larger view


HTML File : demo.html
file Path : TestWeb/WebContent/flexigrid/demo.html

Wordpress doesn’t allow script tags . I will attach a screen shot of my demo.html.
Please click on the image to get a better view..

// $('.flexme1').flexigrid({height:'auto', width:'auto'});

method: 'GET',
dataType : 'json',
colModel : [
{display: 'Day of Week', name : 'daysofweek', width:100, sortable : true, align: 'center'},
{display: 'Desc', name : 'desc', sortable : true, align: 'left',width:100},

sortname: "iso",
sortorder: "asc",
usepager: true,
title: 'FlexiGrid Test',
useRp: true,
rp: 4,
showTableToggleBtn: true

Java Servlet :
File Path : /TestWeb/src/com/servlets/JsonServlet.java

package com.servlets;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.Map;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import net.sf.json.JSONArray;
import net.sf.json.JSONObject;

* Servlet implementation class for
* Servlet: JsonServlet
public class JsonServlet extends javax.servlet.http.HttpServlet implements javax.servlet.Servlet {
static final long serialVersionUID = 1L;

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println(" --> doGet ");

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println(" --> doPost ");
Map<String, ArrayList> strMap = new HashMap<String, ArrayList>();
ArrayList aList1 = new ArrayList();
ArrayList aList2 = new ArrayList();
ArrayList aList3 = new ArrayList();

aList1.add(" Sunday is FunDay");

aList2.add(" Monday is Meh.");

aList3.add("Tuesday is day after Meh..");


JSONArray jArray = new JSONArray();
for(String key:strMap.keySet()) {
JSONObject jsonObj = new JSONObject();
jsonObj.element("id", key);
jsonObj.element("cell", strMap.get(key));


JSONObject jObj = new JSONObject();
jObj.element("page", 1);
jObj.element("total", strMap.size());
jObj.element("rows", jArray);

PrintWriter out = response.getWriter();


Web.xml should have the following servlet mapping.



I have deployed the application in Tomcat 6.0
if the all js/css files and Servlet are in place , you should be seeing the following output
URL to access : http://localhost:8080/TestWeb/flexigrid/demo.html


Written by speedrace703

June 20, 2011 at 2:10 am

12 Responses

Subscribe to comments with RSS.

  1. I couldn’t get this example to work. The only difference is I am using NetBeans. I can’t successfully hit the “doGet” method in the JsonServlet.

    The flexigrid should show up right when the page is loaded, correct? The button doesn’t seem to serve any purpose.

    Any help would be appreciated.


    Derek Adams

    August 23, 2011 at 12:16 am

  2. I don’t think netbeans has anything to do with it. if you are using firefox, can you open firebug and see if you are seeing any error ?

    Also, try accessing the servlet directly from browser something like
    http://localhost:8080/TestWeb/JsonServlet and see if you are getting JSON response.


    August 23, 2011 at 12:50 am

  3. looks like in the source code i mentioned here i made the flexigrid to load when the page loads and in the image ( screen shot of html page) , flexigrid gets loaded on button click.. both should work.. let me know how it goes.


    August 23, 2011 at 1:57 am

    • You would also need to include JQuery Cookie plugin. Else it is complaining that $.cookie is not a function


      June 14, 2012 at 10:43 am

      • Also, make sure to include commons-beanutils.jar, commons-collections.jar, commons-lang.jar, ezmorph.jar and json-lib-2.4-jdk15.jar. Servlet will complain of missing class files if any of these jars are not included.


        June 15, 2012 at 4:50 am

  4. {display: ‘Day of Week’, name : ” ‘daysofweek’ “, width:100, sortable : true, align: ‘center’},
    {display: ‘Desc’, name : ” ‘desc’ “, sortable : true, align: ‘left’,width:100},
    how did you connect the name “daysofweek” to the JSON array and also the “desc”?

    hope you can help me.



    February 29, 2012 at 9:40 am

    • the data displayed in the grid is maintained by the json object created my the server. In JsonServelt.java if you change the order of aList1 to something like this
      aList1.add(” Sunday is FunDay”);

      you can see the change in grid display..
      Hope it helps ..


      February 29, 2012 at 6:12 pm

  5. excelente ejemplo, me has ayudado bastante 🙂


    May 12, 2012 at 4:09 pm

  6. Your example is excellent.. I have one question though .. I cannot have the previous next buttons to work with this example.. I have 50 rows and everything shows op on page load and when i click next it still goes back to my servlet but stays on the same page 1


    June 8, 2012 at 6:19 pm

  7. Thank you so much for you helpful post.


    July 12, 2012 at 10:24 pm

  8. flexigrid is coming but data is not coming ..


    January 8, 2013 at 12:40 pm

    • hey, were you able to get it resolved ? I think it works if you have followed all the instructions 🙂


      February 2, 2013 at 12:50 am

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: