[mail2harishaMember]

Thanks Peter

[mail2harishaMember]

But Mr Peter, what if I have different sets of columns(both different number of columns and different column names and its datatype) to show depending on different user logged into system.

I don’t want to hard code in client java script code like:

var columns = [
                  { text: 'First Name', dataField: 'firstname', width: 100 },
                  { text: 'Last Name', dataField: 'lastname', width: 100 },
                  { text: 'Product', dataField: 'productname', width: 180 },
                  { text: 'Quantity', dataField: 'quantity', width: 80, cellsalign: 'right' },
                  { text: 'Unit Price', dataField: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
                  { text: 'Total', dataField: 'total', cellsalign: 'right', minwidth: 100, cellsformat: 'c2' }
                ];

We will be storing what columns to display in depending on user logged in server side database, hence it would great if there is a option to send the column information and its definition (like datatype, cellalign) from server side.

Like:

var newcolumns = getColumns();
var getData = function () {
							
	$.post(url, function(newcolumns ) {
		
		return newcolumns ;
	});
};

or

Let us create a table by using jsp(which contains column names, its datatype etc) like

<table id="UserTable">
	<c:if test="${actionBean.searchPropertyList != null}">
		<tr>
			<c:forEach items="${actionBean.searchPropertyList}" var="prop"
				varStatus="loop">
				<th>${prop.columnName}, datatype=${prop.columnType}</th>
			</c:forEach>
		</tr>
	</c:if>
</table>

And then use this table id to construct a jqxgrid.

Kindly help

[mail2harishaMember]

Thanks it works great.

I would like to give a suggestion that please include this tip in below page’s Keyboard Edit Actions and Navigation section. This will help many other users.
http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxgrid/jquery-grid-cells-editing.htm

[mail2harishaMember]

Thanks for your quick reply.

Making column non editable is working. As you mentioned it should be false

columns : [
								{ text : 'eBlotter Ref', datafield : 'eblotter_ref', width : 100, cellsrenderer : colorrenderer, editable : false },

For the documentation part,
It would be great if the documentation is more explanatory like Java Docs.

[mail2harishaMember]

Thanks its working.

Please note: I have a suggestion. The Documentation regarding API is very little and and there is no working example for each method or properties. Kindly add more explanations:

Example: For jqxgrid, columns behavior, there is property called editable which says it will make a particular column either editable or non editable. As per documentation:
editable – enables or disables the cells editing

but what value I have to provide either “enable” or “disable” or “true” or ” false” is not mentioned. I had with below but eblotter_ref and status field are still editable. Kindly answer my question.

$("#jqxgrid").jqxGrid(
						{
							width : 1200,
							source : dataAdapter,
							editable : true,
							//theme: 'energyblue',
							selectionmode : 'singlecell',
							sortable : true,
							altrows : true,
							columns : [
								{ text : 'eBlotter Ref', datafield : 'eblotter_ref', width : 100, cellsrenderer : colorrenderer, editable : 'disable' },
								{ text : 'B/S/U/A', datafield : 'buy', width : 100, cellsrenderer : colorrenderer},
								{text : 'Nominal', columntype: 'dropdownlist', datafield : 'nominal',width : 100,cellsrenderer : colorrenderer,
									initeditor: function (row, cellvalue, editor) {
				                          editor.jqxDropDownList({ source: nominalDropdownListSource});
				                      }
								},
								{text : 'Status',datafield : 'status',width : 100,cellsrenderer : colorrenderer, editable : 'disable' },

[mail2harishaMember]

Thanks Peter. Its working.

[mail2harishaMember]

But our requirement is, we have to insert tooltip to each column of every row and tooltip will be different to each other. Also, the value of tooltip for each row will be retrieved from server and will not be available while declaring the jqgrid.

Example:

var cellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties) {
                if (value < 20) {
                    //create tooltip for this element, tooltip would be = value + "" + row
                    return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #0000ff;">' + value + '</span>';
                }
                else {
                    return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #008000;">' + value + '</span>';
                }
            }
            $("#jqxgrid").jqxGrid(
            {
                width: 670,
                source: source,
                pageable: true,
                autoheight: true,
                columns: [
                  { text: 'First Name', datafield: 'firstname', width: 100 },
                  { text: 'Last Name', datafield: 'lastname', width: 100 },
                  { text: 'Product', datafield: 'productname', width: 180 },
                  { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right', cellsrenderer: cellsrenderer },
                  { text: 'Unit Price', datafield: 'price', width: 90, cellsalign: 'right', cellsrenderer: cellsrenderer, cellsformat: 'c2' },
                  { text: 'Total', datafield: 'total', cellsalign: 'right', cellsformat: 'c2' }
                ]
            });

[mail2harishaMember]

Hi All,

I have similar requirement.

Requirement:
I am using grid to display many invoices stored in two different databases one in local and another external system. Each row contains “n” number of columns. While displaying if there is any mismatch in any column of a row, i have to highlight in different colors and i have to show the mismatched value in another system in tool tip when hovered on that colored column.

Mismatch can be on any column.

I am retrieving all the data from local database in JSON format:

[{"id":"1","ref":"20120424/31","buy":"buy3","nominal":"nominal3","instrument":"instrument3","rate":"6","start_date":"04/27/2012","status":"MISMATCH"},{"id":"7","ref":"20120424/35","buy":"buy","nominal":"actual","instrument":"i6","rate":"7","start_date":"4/24/2012","status":"NO_MISMATCH"}]

Below are my questions:
1. What would be the most efficient way of getting mismatch data from server?
Example: If “rate” field of first invoice is having mismatch.
Local database = 6
External = 6.5

Then should I have to form a single JSON object and send to grid like:

[{"id":"1","ref":"20120424/31","buy":"buy3","nominal":"nominal3","instrument":"instrument3","rate":"6","start_date":"04/27/2012","status":"MISMATCH","rate_MISMATCH":"6.5"},{"id":"7","ref":"20120424/35","buy":"buy","nominal":"actual","instrument":"i6","rate":"6","start_date":"4/24/2012"}]
and iterate each rowdata to find is there any field with key "property_name"_MISMATCH.

2. What would be the most efficient way of displaying mismatch data?
Current thought solution:

var colorrenderer = function (row, columnfield, value, defaulthtml, columnproperties) {
	                var theStatus = $("#jqxgrid").jqxGrid('getrowdata', row).status;
	                if (theStatus == 'MISMATCH') {
                             var prop = columnfield + "_MISMATCH";
                             if(row[prop] != null) {
	                              return '<table bgcolor="#F5C9C9" width="100%"><tr><td><span style="margin: 4px;float: ' + columnproperties.cellsalign + '">' + value + '</span></td></tr></table>';
                                       // Show tooltip with that value
	                     }
                        }
	                else {
	                    return '<span style="margin: 4px;float: ' + columnproperties.cellsalign + '">' + value + '</span>';
	                }
	                
	            };
	            
				$("#jqxgrid").jqxGrid({
					width : 1200,
					source : dataAdapter,
					editable : true,
					theme : theme,
					selectionmode : 'singlecell',
					sortable: true,
	                altrows: true,
					columns : [ {
						text : 'eBlotter Ref',
						datafield : 'eblotter_ref',
						width : 200, cellsrenderer: colorrenderer 
					}, {
						text : 'B/S/U/A',
						datafield : 'buy',
						width : 200, cellsrenderer: colorrenderer
					}, {
						text : 'Nominal',
						datafield : 'nominal',
						width : 300, cellsrenderer: colorrenderer
					},

[mail2harishaMember]

Hi peter,

Thanks a lot for your reply. Its working now

Isn’t it possible to edit your getData function and return this [” + object.toString() + “]” instead of ‘object’?

I had tried both option then also it was not working

The other approach is as your data comes as: {“id”:”1″,”name”:”Super Chilli Hot Chocolate”,”type”:”Chocolate Beverage”,”calories”:”20″,”totalfat”:”16g”,”protein”:”14g”}, do this:

var dataAdapter = new $.jqx.dataAdapter(source,
{
downloadComplete: function (data) {
return $.makeArray(data);
}
}
);


By doing this, it is working. Thank you very much.

Can I know the difference between this option and earlier one?

Also, one suggestion would be please add some sample program of jqwidgets using Java JSP and servlets.

[mail2harishaMember]

Hi peter,

I have tried this, it works. But the problem is getting the same data(same format) from server side(jsp or servlet) and displaying the grid in client side. There i am getting JSON parse error.

Can somebody please send me a sample grid program which gets data in JSON(or other format) from jsp or servlet?

[mail2harishaMember]

Hi Peter,

Thanks for your reply. below are the answers to your question:

1. Could you post the results of the call of your getData() function?

{“id”:”1″,”name”:”Super Chilli Hot Chocolate”,”type”:”Chocolate Beverage”,”calories”:”20″,”totalfat”:”16g”,”protein”:”14g”}

I tried to hard code the return value to below, but that also resultant in same JSON parse error.
[{“id”:”1″,”name”:”Super Chilli Hot Chocolate”,”type”:”Chocolate Beverage”,”calories”:”20″,”totalfat”:”16g”,”protein”:”14g”}]

2. Did you try to make a call to the “getdata.jsp” using the jQuery’s ajax function? If yes, can you post here the results of the data object in the success function.

The result is:
{“id”:”1″,”name”:”Super Chilli Hot Chocolate”,”type”:”Chocolate Beverage”,”calories”:”20″,”totalfat”:”16g”,”protein”:”14g”}

I slightly changed the program:
Sample program is:
$(function() {
$("#button").click(function() {
alert("hi");
$.ajax( {
type: "GET", // the default
url: "GetPerson", //servlet name
data: { id: $("#sel").val() },
success: function(data) {
alert("success");
alert(data);
$("#out").html( data );
}
} );

});
});

Servlet
package servlet;

import java.io.*;
import javax.servlet.ServletException;
import javax.servlet.http.*;

import net.sf.json.JSONObject;

import models.People;

public class GetPerson extends HttpServlet {

/**
*
*/
private static final long serialVersionUID = 1L;
private People people = new People();

protected void doGet(
HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
try {
// String id = request.getParameter("id");
// out.print(people.getPerson(Integer.parseInt(id)));
JSONObject object = null;

object = new JSONObject();
object.put("id", "1");
object.put("name", "Super Chilli Hot Chocolate");
object.put("type", "Chocolate Beverage");
object.put("calories", "20");
object.put("totalfat", "16g");
object.put("protein", "14g");
out.print(object.toString());

} finally {
out.close();
}
}

}

This above program when called through jquery + ajax it is giving aove result, but when i try with jqwidgets it is still giving JSON parser error.

Please note: we are doing POC for our company, if it gets succesfull we may buy this framework. So, kindly help.

[mail2harishaMember]

Updated the content

getdata.jsp (which is in same location as json.jsp)

out.print(new Helper().getData());
out.flush();

[Author]

Posts