Rico Live Grid Application with Java Plug in
Here we are discussing the Rico Live and Super grid implementation with java plug in. Rico provides a very simple interface for registering Ajax request handlers as well as HTML elements or JavaScript objects as Ajax response objects .This Implementation only supports MySQL and Oracle database. Java Implementation only supports live grid scrolling, sorting, search row, hide/show features. Will be updating filters soon.
Here are the steps for Rico live grid with Java Web Application.
Downloads:
• Download Jar files:
1. dom4j-1.5.2.jar
Download Link : Dom4j
2.mysql-connector-java-3.1.10-bin.jar
Download Link : MySQLConnector
3.ojdbc14.jar
Download Link : Oracle Connector
• Download Rico live grid
1.Rico Live grid
Download Link : Rico Live Grid
Unzip the file and copy all files and folders from src folder and paste to WebContent/js/rico
• Download rico supergrid items:
1.Rico Super Grid
Download Link : Rico Super Grid
Unzip the file and copy ,
1. ricoSuperGrid.js and paste to WebContent/js/rico
2. table.css and 1x1.gif and paste to WebContent/ GridShow-Dateien
3. main.css and ie5-7.css and paste to WebContent/css
Download Rico Live grid along with super grid and paste it in the appropriate folders.Please Refer previous one., ie, Download Rico live grid
Please refer the directory structure,
Directory Structure :
• Simple Structure

• Detailed Structure

1. Servlet Implementation :
You have to call this from the Rico Live Grid as “/ricoXMLquery”
package com.ricogrid.servlets;
import java.io.IOException;
import java.sql.Connection;
import java.util.Map;
import javax.servlet.ServletException;
import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.ricogrid.Utils.DBConnection;
import com.ricogrid.Utils.MySQLQueryGenerator;
import com.ricogrid.Utils.OracleQueryGenerator;
public class RicoXMLQuery extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void service(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
DBConnection dbConnection = null;
Connection connection = null;
System.out.println("Processing rico sql request");
try {
int limit = 20;
String responseString = "";
String id = (request.getParameter("id") != null) ? request
.getParameter("id") : "";
limit = (request.getParameter("limit") != null) ? Integer
.parseInt(request.getParameter("limit")) : limit;
int offset = (request.getParameter("offset") != null) ? Integer
.parseInt(request.getParameter("offset")) : 0;
/*
* String size = (request.getParameter("page_size") != null) ?
* request.getParameter("page_size") : "";
*
* boolean total = (request.getParameter("get_total") != null) ?
* Boolean.getBoolean(request.getParameter("get_total").toString()):
* false;
*
* String distinct = (request.getParameter("distinct") != null) ?
* request.getParameter("distinct"): "";
*/
String sqlQuery = (String) request.getSession().getAttribute(id);
dbConnection = new DBConnection(getServletContext().getRealPath("/WEB-INF/db.properties"));
connection = dbConnection.getConnection();
String dialect = dbConnection.getDialect();
Map paramMap = request.getParameterMap();
if( "MySQL".equals( dialect )){
//if MySQL
responseString = MySQLQueryGenerator.generateRicoResponseXML( connection, sqlQuery, paramMap,
offset, limit, dialect );
}else{
//if Oracle
responseString = OracleQueryGenerator.generateRicoResponseXML( connection, sqlQuery, paramMap,
offset, limit, dialect );
}
response.setHeader("Content-Type", "text/xml");
ServletOutputStream sos = response.getOutputStream();
sos.write(responseString.getBytes());
System.out.println("Processing rico sql request - Complete");
} catch (Exception e) {
e.printStackTrace();
} finally {
dbConnection.closeConnection(connection);
}
}
}
2: Database Connection class:
This Class is used for database Connectivity, getConnection Method gives you the Connection Object
package com.ricogrid.Utils;
import java.io.FileInputStream;
import java.io.FileNotFoundException;
import java.io.IOException;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.SQLException;
import java.util.Properties;
public class DBConnection {
Connection connection;
Properties propertyObj;
String sql_driver;
String sql_url_database;
String sql_user;
String sql_password;
public String dialect;
public DBConnection(String location) {
try {
propertyObj = new Properties();
propertyObj.load(new FileInputStream(location));
dialect = propertyObj.get("dialect").toString();
this.setDialect( dialect );
// MySQL Connection parameters
if ("MySQL".equals(dialect.trim())) {
sql_driver = propertyObj.get("sql.driver").toString();
sql_url_database = propertyObj.get("sql.url.datasource").toString();
sql_user = propertyObj.get("sql.user").toString();
sql_password = propertyObj.get("sql.password").toString();
}
// Oracle Connection Parameters
if ("Oracle".equals(dialect.trim())) {
sql_driver = propertyObj.get("oracle.driver").toString();
sql_url_database = propertyObj.get("oracle.url.datasource").toString();
sql_user = propertyObj.get("oracle.user").toString();
sql_password = propertyObj.get("oracle.password").toString();
}
Class.forName(sql_driver);
connection = DriverManager.getConnection(sql_url_database,sql_user, sql_password);
this.setConnection(connection);
} catch (ClassNotFoundException e) {
e.printStackTrace();
} catch (SQLException e) {
e.printStackTrace();
} catch (FileNotFoundException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
}
}
/**
* returns connection Object
*
* @return Connection
*/
public Connection getConnection() {
return connection;
}
/**
* set the connection object
*
* @param connection
* the connection to set
*/
public void setConnection(Connection connection) {
this.connection = connection;
}
/**
* Method is used to close the connection Object
*
* @param con
* -- indicates connection Object
*/
public void closeConnection(Connection con) {
try {
con.close();
} catch (Exception e) {
e.printStackTrace();
}
}
/**
* @return the dialect
*/
public String getDialect() {
return dialect;
}
/**
* @param dialect the dialect to set
*/
public void setDialect(String dialect) {
this.dialect = dialect;
}
}
3: DB Operation class
All the Database Operation like runQuery etc were implemented in this class
package com.ricogrid.Utils;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.Connection;
public class DBOperations {
/**
* Method is used to run the generated SQL queries
*
* @param sqlQuery
* -- indicates the given SQL query
* @param connection
* -- indicates DB Connection Object
* @param limit
* -- to limit query results in some specified range
* @param offset
* -- indicates the starting value of limit results
* @param rowCount
* -- indicates the total row count
* @param paramSize
* -- indicates total number of field names
* @return RICO based XML string
*/
public static String runQuery(String sqlQuery, Connection connection,
int limit, int offset, int rowCount, int paramSize ) {
String ricoGridValue = "";
PreparedStatement ps = null;
ResultSet rs = null;
try {
ps = connection.prepareStatement(sqlQuery);
//ps.setMaxRows( limit );
rs = ps.executeQuery();
if (rs != null) {
ricoGridValue = ResponseBuilder.createAjaxResponseForRicoGrid(
rs, offset, rowCount, paramSize );
}
} catch (Exception e) {
e.printStackTrace();
} finally {
try {
if (ps != null)
ps.close();
if (rs != null)
rs.close();
} catch (Exception e) {
e.printStackTrace();
}
}
return ricoGridValue;
}
/**
* Method is used to get the total row count
*
* @param connection
* -- indicates the DB Connection Object
* @param sqlString
* -- indicatse the given SQl queries
* @return total row count
*/
public static int getTotalRowCount(Connection connection, String sqlString ) {
int rowCount = -1;
String elementString = "";
PreparedStatement ps = null;
ResultSet rs = null;
sqlString = sqlString.toUpperCase().trim();
if (sqlString.contains("SELECT "))
elementString = sqlString.substring(7, sqlString.indexOf(" FROM"))
.trim();
sqlString = sqlString.replaceFirst(elementString, " count(*) ");
try {
ps = connection.prepareStatement(sqlString);
rs = ps.executeQuery();
if (rs != null) {
if (rs.next())
rowCount = rs.getInt(1);
}
} catch (Exception e) {
e.printStackTrace();
} finally {
try {
if (ps != null)
ps.close();
if (rs != null)
rs.close();
} catch (Exception e) {
e.printStackTrace();
}
}
return rowCount;
}
}
4: MySQLQueryGenerator
This class is used to generate MySQL based SQL query
package com.ricogrid.Utils;
import java.util.List;
import java.util.Map;
import java.util.Set;
import java.sql.Connection;
public class MySQLQueryGenerator {
/**
* Method to generate the ResponseXML from the given parameters
* @param connection -- indicates the Connection Object
* @param sqlQuery -- indicates the given SQLQuery
* @param paramMap -- contains the request.params object
* @param limit -- to limit query results in some specified range
* @param offset -- indicates the starting value of limit results
* @return a string of generated ResponseXML
*/
public static String generateRicoResponseXML(Connection connection, String sqlQuery,
Map paramMap, int offset, int limit, String dialect) {
int position = -1;
int paramElemSize = -1;
int rowCount = -1;
String value = "";
String responseString = "";
if (connection != null && paramMap != null && !"".equals( sqlQuery )) {
try {
// parse the given SQL query and to get the field name list from SQLParser.java class
SQLParser parser = new SQLParser();
parser.parseSqlQuery(sqlQuery);
List selectItemList = parser.selectItemList;
// get the size of field name list
if (selectItemList != null && selectItemList.size() > 0)
paramElemSize = selectItemList.size();
if (paramMap != null) {
// iterate parameter Map
Set set = paramMap.keySet();
for (String key : set) {
String prefix = key.substring(0, 1);
// from here we got the sorting order(ASC/DESC) and the clicked column ID
if ("s".equals(prefix)) {
String[] valueArray = (String[]) paramMap.get(key);
value = valueArray[0].toString();
position = Integer.parseInt(key.substring(1));
}
}
}
if (!"".equals(value) && position != -1) {
// if sorting
sqlQuery = createSortingSQLQuery(sqlQuery, limit, offset,
value, position, selectItemList);
} else {
// if scrolling
sqlQuery = createNormalSQLQuery(sqlQuery, limit, offset);
}
if (connection != null && !"".equals(sqlQuery)) {
// get the total row count
rowCount = DBOperations.getTotalRowCount( connection, sqlQuery );
if ( rowCount != -1 && paramElemSize != -1 ){
// run SQL Query and to generate XML String
responseString = DBOperations.runQuery(sqlQuery,
connection, limit, offset, rowCount,
paramElemSize);
}else{
responseString = "Your connection with the server was idle for too long and timed out. Please refresh this page and try again";
}
}
} catch (Exception e) {
e.printStackTrace();
}
}
return responseString;
}
/**
* Method is used to create the sorting SQL query
*
* @param sqlQuery
* -- indicates the given sql query
* @param limit
* -- to limit query results in some specified range
* @param offset
* -- indicates the starting value of limit results
* @param sortOrder
* -- indicates sort order (ASC/DESC)
* @param key
* -- indicates the column position to identify the field name
* @param elementArray
* -- indicates the list of field names
* @return sort query with the given parameters
*/
private static String createSortingSQLQuery(String sqlQuery, int limit,
int offset, String sortOrder, int key, List elementArray) {
sqlQuery = sqlQuery.toUpperCase().trim();
String orderByValue = (String) elementArray.get(key);
if (sqlQuery.contains("ORDER BY "))
sqlQuery = sqlQuery.substring(0, sqlQuery.indexOf(" ORDER BY"))
.trim();
sqlQuery = sqlQuery + " ORDER BY " + orderByValue + " " + sortOrder
+ " LIMIT " + limit + " OFFSET " + offset;
return sqlQuery;
}
/**
* Method to generate normal SQL query with out sorting parameters. ie, SQL
* query for scrolling
*
* @param sqlQuery
* -- indicates given SQL query
* @param limit
* -- to limit query results in some specified range
* @param offset
* -- indicates the starting value of limit results
* @return normal SQL query for scrolling
*/
private static String createNormalSQLQuery(String sqlQuery, int limit,
int offset) {
String query = "";
if (!"".equals(sqlQuery))
sqlQuery = sqlQuery.toUpperCase().trim();
query = sqlQuery + " LIMIT " + limit + " OFFSET " + offset;
return query;
}
}
5: OracleQueryGenerator
This class is used to generate MySQL based SQL query
package com.ricogrid.Utils;
import java.util.List;
import java.util.Map;
import java.util.Set;
import java.sql.Connection;
public class OracleQueryGenerator {
/**
* Method to generate the ResponseXML from the given parameters
*
* @param connection
* -- indicates the Connection Object
* @param sqlQuery
* -- indicates the given SQLQuery
* @param paramMap
* -- contains the request.params object
* @param offset
* -- indicates the starting value of limit results
* @param limit
* -- to limit query results in some specified range
* @return a string of generated ResponseXML
*/
public static String generateRicoResponseXML(Connection connection,
String sqlQuery, Map paramMap, int offset, int limit, String dialect) {
int paramElemSize = -1;
String value = "";
int position = -1;
int rowCount = -1;
String responseString = "";
if (connection != null && paramMap != null && !"".equals(sqlQuery)) {
try {
// parse the given SQL query and to get the field name list from
// SQLParser.java class
SQLParser parser = new SQLParser();
parser.parseSqlQuery(sqlQuery);
List selectItemList = parser.selectItemList;
// get the size of field name list
if (selectItemList != null && selectItemList.size() > 0)
paramElemSize = selectItemList.size();
if (paramMap != null) {
// iterate parameter Map
Set set = paramMap.keySet();
for (String key : set) {
String prefix = key.substring(0, 1);
// from here we got the sorting order(ASC/DESC) and the
// clicked column ID
if ("s".equals(prefix)) {
String[] valueArray = (String[]) paramMap.get(key);
value = valueArray[0].toString();
position = Integer.parseInt(key.substring(1));
}
}
}
// get the total row count
if (connection != null && !"".equals(sqlQuery))
rowCount = DBOperations.getTotalRowCount(connection,sqlQuery );
if (!"".equals(value) && position != -1) {
// if sorting
String orderByValue = ( selectItemList.get(position)) != null ? (String) selectItemList.get(position):"";
sqlQuery = createSQLSortingQuery(sqlQuery, orderByValue,value, offset, limit );
}else{
sqlQuery = createNormalSQLQuery( sqlQuery, offset, limit);
}
// run SQL Query and to generate XML String
if (rowCount != -1 && paramElemSize != -1 && connection != null && !"".equals(sqlQuery)) {
responseString = DBOperations.runQuery(sqlQuery,
connection, limit, offset, rowCount,
paramElemSize);
} else
responseString = "Your connection with the server was idle for too long and timed out. Please refresh this page and try again";
} catch (Exception e) {
e.printStackTrace();
}
}
return responseString;
}
/**
* Method is used to return the sorting SQL query
*
* @param sqlQuery
* -- indicates the given SQL query
* @param orderByValue
* -- indicates the field name for sorting
* @param value
* -- sorting order(ASC/DESC)
* @param offset
* -- indicates the starting value of limit results
* @param limit
* -- to limit query results in some specified range
* @return the formatted SQl query as String
*/
private static String createSQLSortingQuery(String sqlQuery,
String orderByValue, String value, int offset, int limit ) throws Exception{
sqlQuery = sqlQuery.toUpperCase().trim();
String orderBy = " ORDER BY " + orderByValue + " " + value;
if (sqlQuery.contains("ORDER BY "))
sqlQuery = sqlQuery.substring(0, sqlQuery.indexOf(" ORDER BY"))
.trim();
sqlQuery += orderBy;
sqlQuery = generateLimitQuery(sqlQuery, offset, limit);
return sqlQuery;
}
/**
* Method to generate normal SQL query with out sorting parameters. ie, SQL
* query for scrolling
*
* @param sqlQuery
* -- indicates given SQL query
* @param limit
* -- to limit query results in some specified range
* @param offset
* -- indicates the starting value of limit results
* @return normal SQL query for scrolling
* @throws Exception
*/
private static String createNormalSQLQuery(String sqlQuery, int offset, int limit ) throws Exception {
sqlQuery = sqlQuery.toUpperCase().trim();
sqlQuery = generateLimitQuery(sqlQuery, offset, limit);
return sqlQuery;
}
/**
* Method is used to create the sorting SQL query
* @param sqlQuery -- indicates the given SQL query
* @param offset -- indicates the starting value of limit results
* @param limit -- to limit query results in some specified range
* @return the generated SQL limit Query as String
*/
private static String generateLimitQuery(String sqlQuery, int offset, int limit) throws Exception{
sqlQuery = sqlQuery.toUpperCase().trim();
boolean isForUpdate = false;
StringBuffer limitQuery = new StringBuffer(sqlQuery.length() + 150);
if (sqlQuery.toLowerCase().endsWith(" FOR UPDATE")) {
sqlQuery = sqlQuery.substring(0, sqlQuery.length() - 11);
isForUpdate = true;
}
limitQuery.append("SELECT * FROM ( SELECT ROW_.*, ROWNUM ROWNUM_ FROM ( ");
limitQuery.append(sqlQuery);
limitQuery.append(" ) ROW_ WHERE ROWNUM <= " + (offset + limit) + ") WHERE ROWNUM_ > " + offset);
if (isForUpdate) {
limitQuery.append(" FOR UPDATE");
}
return limitQuery.toString();
}
}
5: ResponseBuilder
This class is used to generate the xml using dom4j
package com.ricogrid.Utils;
import java.io.IOException;
import java.io.StringWriter;
import java.sql.ResultSet;
import java.sql.SQLException;
import org.dom4j.Document;
import org.dom4j.DocumentHelper;
import org.dom4j.Element;
import org.dom4j.io.OutputFormat;
import org.dom4j.io.XMLWriter;
public class ResponseBuilder {
// XML format
public static OutputFormat XML_OUTPUT_FORMAT = OutputFormat.createPrettyPrint();
/**
* Method to create the RICO based XML from the resultset Object
* @param resultSet -- indicates the ResultSet Object
* @param offset -- indicates the starting value of limit results
* @param rowCount -- indicates the total row count
* @param paramSize -- indicates total number of field names
* @return RICO based XML string
* @throws SQLException
*/
public static String createAjaxResponseForRicoGrid(ResultSet resultSet, int offset, int rowCount, int paramSize) throws SQLException {
Document document = DocumentHelper.createDocument();
Element ajaxResponse = document.addElement("ajax-response");
Element response = ajaxResponse.addElement("response");
response.addAttribute("type", "object");
response.addAttribute("id", "data_grid_updater");
Element rows = response.addElement("rows");
rows.addAttribute("update_ui", "true");
rows.addAttribute("offset", (offset+1)+"");
while( resultSet.next() ){
Element tr_user = rows.addElement("tr");
for( int i = 1; i<= paramSize; i++){
tr_user.addElement("td").addText( resultSet.getString(i));
}
}
response.addElement("rowcount").addText( rowCount+"");
StringWriter stringWriter = new StringWriter();
XMLWriter writer = new XMLWriter(stringWriter, XML_OUTPUT_FORMAT);
try {
writer.write(document);
writer.close();
stringWriter.close();
} catch (IOException ioe) {
ioe.printStackTrace();
}
return stringWriter.toString();
}
}
6: SQLParser
This class is used to parse the given sql query to various components
package com.ricogrid.Utils;
import java.util.ArrayList;
import java.util.List;
public class SQLParser {
public List selectItemList;
public String tableName ;
public String whereClause;
public String fromClause;
public SQLParser() {
tableName = "";
whereClause = "";
fromClause = "";
selectItemList = new ArrayList();
}
/**
* Parse a SQL select statement into its major components
* Does not handle:
* 1) select * from tablename ( use field names instead of * )
* @param sqlQuery
* @throws Exception
*/
public void parseSqlQuery(String sqlQuery) throws Exception{
String elementString = "";
if (!"".equals(sqlQuery)) {
sqlQuery = sqlQuery.toUpperCase().trim();
if (sqlQuery.contains("SELECT ")) {
elementString = sqlQuery
.substring(7, sqlQuery.indexOf(" FROM")).trim();
if (!"*".equals(elementString)) {
String[] elementArray = elementString.split(",");
for (String element : elementArray){
if( element.contains( "AS" ))
element = element.substring(0, element.indexOf("AS")).trim();
selectItemList.add(element);
}
}else{
}
}
if (sqlQuery.contains("FROM ")) {
if (sqlQuery.contains(" WHERE"))
tableName = sqlQuery.substring(
sqlQuery.indexOf(" FROM") + 5,
sqlQuery.indexOf(" WHERE")).trim();
else
tableName = sqlQuery.substring(
sqlQuery.indexOf(" FROM") + 5).trim();
fromClause = sqlQuery.substring(sqlQuery.indexOf(" FROM") + 5, sqlQuery.length());
}
if( sqlQuery.contains("WHERE")){
whereClause = sqlQuery.substring( sqlQuery.indexOf( "WHERE ") +5 );
}
}
}
}
7: db.properties file
## General parameters
## MySQL/Oracle
dialect =Oracle
## MySQL Connection parameters
#sql.driver =com.mysql.jdbc.Driver
#sql.url.datasource =jdbc:mysql://192.168.0.34:3306/ricogrid
#sql.user =root
#sql.password =root
## Oracle Connection parameters
oracle.driver =oracle.jdbc.driver.OracleDriver
oracle.url.datasource =jdbc:oracle:thin:@192.168.0.34:1521:XE
oracle.user =system
oracle.password =root
8: index.jsp
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
</head>
<body leftMargin="0" topMargin="0" marginheight="0" marginwidth="0">
<table cellspacing="0" cellpadding="0" border="0" width="1374">
<tr>
<td align="center" colspan="3"><iframe name="iframe_MyIFrame" id="iframe_MyIFrame" height="520" width="1375"
frameborder="0" src="livegrid.jsp" scrolling="no"></iframe></td>
</tr>
</table>
</body>
</html>
9: livegrid.jsp[ for super grid ]
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/main.css">
<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="css/ie5-7.css">
<![endif]-->
<link href="GridShow-Dateien/table.css" type="text/css" rel="stylesheet">
<style>
#grid_head{
font-size: 19px;
}
</style>
</head>
<body leftmargin="0" topmargin="0"
style="background-color: rgb(236, 240, 246);" marginheight="0"
marginwidth="0">
<script src="js/rico/prototype.js" type="text/javascript"></script>
<script src="js/rico/rico.js" type="text/javascript"></script>
<%
String sqlQuery = "select ID,USER_NAME,CITY from user_details order by user_name";
request.getSession().setAttribute("tblGrid" , sqlQuery);
%>
<script type='text/javascript'>
Rico.loadModule('LiveGrid', 'LiveGridAjax', 'customgrid.css');
</script>
<script src="js/rico/ricoSuperGrid.js" type="text/javascript"></script>
<script>
var opts = {
frozenColumns :0,
defaultWidth :90,
useUnformattedColWidth :false,
allowColResize :true, // allow user to resize columns
windowResize :true, // Resize grid on window.resize event? Set to false when embedded in an accordian.
useUnformattedColWidth :true,
scrollBarWidth :19, // this is the value used in positioning calculations, it does not actually change the width of the scrollbar
hdrIconsFirst :false,
sortCol :0,
sortDir :'ASC',
headingSort :'hover',
highlightElem :'cursorRow',
highlightClass :'dataRollOver',
persistRowClick :true,
persistantRowClass :'persistantRow',
minScrollWidth :100, // min scroll area width when width of frozen columns exceeds window width
canFilterDefault :false,
canPrint :false,
columnSpecs : [ {
type :'number',
canSort :true
} ]
};
var buffer = null;
var tblGrid = null;
Event.observe(window, 'load', function() {
buffer = new Rico.Buffer.AjaxSQL('/ricoXMLquery?limit=30');
tblGrid = new Rico.SuperGrid('tblGrid', buffer, opts);
//tblGrid = new Rico.LiveGrid ('tblGrid', buffer, grid_options);
tblGrid.options.rowClickHandler = clickMe
.bindAsEventListener(tblGrid);
tblGrid.initClickEvents();
});
function clickMe(e) {
var cell = Event.element(e);
cell = RicoUtil.getParentByTagName(cell, 'div', 'ricoLG_cell');
var newIdx = this.winCellIndex(cell);
var rowVals = new Array();
for ( var c = 0; c < this.columns.length; c++) {
var value = this.columns[c].cell(newIdx.row).textContent;
rowVals.push(value);
}
var rowID = tblGrid.buffer.windowStart + newIdx.row + 1;
alert("Row Values : " + rowVals);
alert("Selected Row ID : "+ rowID );
}
function selectRow(rowId) {
if (tblGrid != null)
tblGrid.scrollToSelectRow(rowId - 1);
}
</script>
<style>
.dataRollOver {
background-color: #AABBCC;
}
.persistantRow {
background-color: orange;
color: #fff;
}
#rowId{
border-color: black;
border-style: solid;
width: 80px;
}
#serach_img{
margin-left: 10px;
}
</style>
<div style="background: steelblue; padding: 10px;">
<table width="100%">
<tr>
<td width="50%">
<div align="left"><span id ="grid_head">Rico Live Grid Demo</span>
<p class="ricoBookmark"><span id="tblGrid_bookmark" class="grid_bookmark"> </span></p>
</div>
</td>
<td width="50%">
<div align="right">
<input type="text" id="rowId" />
<img src="images/search_16x16.gif" id="serach_img" onclick="selectRow($('rowId').value)" alt="Search Row by ID" title="Search Row by ID" />
</div>
</td>
</tr>
</table>
</div>
<div class="dataGridHeader">
<div class="dataGridContent">
<table class="tableGrid scrolltablestyle" id="tblGrid" name="tblGrid"
border="0" cellpadding="0" cellspacing="0" width="100%">
<thead>
<tr>
<th>User ID</th>
<th>User Name</th>
<th>City</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
10: livegrid.jsp [ for Simple live grid]
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Rico LiveGrid Plus-Example Demo</title>
<script src="js/rico/prototype.js" type="text/javascript"></script>
<script src="js/rico/rico.js" type="text/javascript"></script>
<%
String sqlQuery = "select ID,USER_NAME,CITY from user_details order by user_name";
request.getSession().setAttribute("ex3" , sqlQuery);
%>
<script type='text/javascript'>
Rico.loadModule('Effect','LiveGridAjax','LiveGridMenu','greenHdg.css');
var ex3,buffer;
Rico.onLoad( function() {
// filterUI='t' --> text box
// filterUI='s' --> select list
var grid_options = {
frozenColumns: 1,
canFilterDefault: false,
canPrint: true,
columnSpecs: [{type:'number', canSort:true }]
};
buffer=new Rico.Buffer.AjaxSQL('/ricoXMLquery?limit=30');
ex3=new Rico.LiveGrid ('ex3', buffer, grid_options);
});
</script>
</head>
<body>
<p class="ricoBookmark">
<span id="ex3_bookmark"> </span></p>
<table id="ex3" class="ricoLiveGrid" cellspacing="0" cellpadding="0">
<tr>
<th>User ID</th>
<th>User Name</th>
<th>City</th>
</tr>
</table>
</body>
</html>
11: web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app id="WebApp_ID" version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
<display-name>
RicoLiveGridAutoFetch</display-name>
<servlet>
<description>
</description>
<display-name>RicoXMLQuery</display-name>
<servlet-name>RicoXMLQuery</servlet-name>
<servlet-class>com.ricogrid.servlets.RicoXMLQuery</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>RicoXMLQuery</servlet-name>
<url-pattern>/ricoXMLquery</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
<welcome-file>index.htm</welcome-file>
<welcome-file>index.jsp</welcome-file>
<welcome-file>default.html</welcome-file>
<welcome-file>default.htm</welcome-file>
<welcome-file>default.jsp</welcome-file>
</welcome-file-list>
</web-app>