Easygrid
Easygrid copied to clipboard
tudor-malene
Easygrid fails with template not found error
Hello,
I followed all the steps and installed easy grid 1.6.6 successfully. But when I run the application I get template not found error. Please let me know what I am missing. Below is code.
gsp:
Controller:
def workspaceGrid = {
dataSourceType 'gorm'
domainClass workspace
gridImpl 'jqgrid'
initialCriteria {
}
columns {
id {
type 'id'
jqgrid {
hidden=true
}
}
name
} }
Error:
Error 500: Error processing GroovyPageView: Template not found for name [/templates/easygrid/jqGridRenderer] and path [/templates/easygrid/_jqGridRenderer.gsp] Servlet: grails URI: /flow/grails/assigned/index.dispatch Exception Message: Template not found for name [/templates/easygrid/jqGridRenderer] and path [/templates/easygrid/_jqGridRenderer.gsp] Caused by: Error processing GroovyPageView: Template not found for name [/templates/easygrid/jqGridRenderer] and path [/templates/easygrid/_jqGridRenderer.gsp] Class: index.gsp At Line: [22] Code Snippet: 21: <grid:set col="name" width="60" /> 22: /grid:grid 23: <grid:exportButton name="workspace"/>
Controller:
def workspaceGrid = {
dataSourceType 'gorm'
domainClass workspace
gridImpl 'jqgrid'
initialCriteria {
}
columns {
id {
type 'id'
jqgrid {
hidden=true
}
}
name
} }
Error 500: Error processing GroovyPageView: Template not found for name [/templates/easygrid/jqGridRenderer] and path [/templates/easygrid/_jqGridRenderer.gsp] Servlet: grails URI: /flow/grails/assigned/index.dispatch Exception Message: Template not found for name [/templates/easygrid/jqGridRenderer] and path [/templates/easygrid/_jqGridRenderer.gsp] Caused by: Error processing GroovyPageView: Template not found for name [/templates/easygrid/jqGridRenderer] and path [/templates/easygrid/_jqGridRenderer.gsp] Class: index.gsp At Line: [22] Code Snippet: 21: <grid:set col="name" width="60" /> 22: /grid:grid 23: <grid:exportButton name="workspace"/>
<r:require modules="easygrid-jqgrid-dev,export"/>
function customShowFormat(cellvalue, options, rowObject){
return "<a href='${g.createLink(controller: "assigned", action: "edit")}/" + cellvalue + "'>" + cellvalue + "</a> ";
}
grid:grid name="workspace" addUrl="${g.createLink(controller: 'assigned', action: 'workspace')}"> grid:set caption="workspace" width="800"/> grid:set col="id" formatter="f:customShowFormat" /> grid:set col="name" width="60" /> /grid:grid> grid:exportButton name="workspace"/>
You need to run the easygrid-setup command.
This will copy the templates.
How do I pass external parameters to view from controller method. Ex: username, list of particular group users. If try to access existing bean userService which handles springSecurity it complains saying object is null even though I can access that bean in other controller methods.
tudor,
For some reason formatter is not getting called for jqgrid. I have put alert but it doesnt go there. My application already has jqgrid plugin and looks like both conflict. Is it possible to have both jqgrid plugin and easy grid in one grails application?
Hi,
Regarding your first question: How do I pass external parameters to view from controller method? A: Do you need these parameters for some filtering? Can you provide some code sample?
Second question: For some reason formatter is not getting called for jqgrid. I have put alert but it doesnt go there. My application already has jqgrid plugin and looks like both conflict. Is it possible to have both jqgrid plugin and easy grid in one grails application? A: Basically easygrid acts as the server side library for jqgrid ( or other javascript grids). It comes bundled with the latest version of jqgrid, but you can use any other version . Can you provide some code sample for this too?
Here is what I am trying to achieve. I had to remove left < symbol to see on the preview. I have to create link under each 'Code' column by passing Id. I have alert in the function as you can see below but it never gets called and also not creating link. Not sure what I am missing here.
grid:grid name="workspace" addUrl="${g.createLink(controller: 'assigned', action: 'workspace')}"> grid:set caption="Workspace" width="970" height="500"/> grid:set col="id" /> grid:set col="code" width="100" formatter='f:customShowFormat'/> grid:set col="status" width="100"/> /grid:grid> grid:exportButton name="workspace"/>
g:javascript> function customShowFormat(cellvalue, opts, rowObject){ window.alert('This is the end of the page!' + opts.rowId); if (cellValue == null) { return ''; } else { return 'a href="${createLink(action: 'edit', controller: 'assigned')}?id=' + opts.rowId + '">' + rowObject[1] + ''"
}
}
/g:javascript>
Controller:
def workspaceGrid = {
dataSourceType 'gorm'
domainClass Workspace
gridImpl 'jqgrid'
inlineEdit false
initialCriteria {
join 'rep.id'
resultTransformer Criteria.DISTINCT_ROOT_ENTITY
eq('user',username)
}
columns {
id {
type 'id'
enableFilter false
jqgrid {
hidden true
}
}
code {
enableFilter false
label 'Code'
jqgrid {
editable true
}
filterClosure { Filter filter ->
applyFilter(delegate, filter.operator, 'code', filter.value)
}
sortClosure { sortOrder ->
order('code', sortOrder)
}
}
status{
enableFilter false
label 'Status'
value{
it.rep.status.toString()
}
jqgrid {
editable false
}
}
}
}
My second question is after installing easy grid my existing JQgrid application is not working. It deosn't show grid at all. Is it because of particular version has conflict? Below what I have in my buildConfig.
compile ":jqgrid:3.8.0.1" compile ":easygrid:1.6.6" compile ":export:1.6" compile ":google-visualization:0.7"
Thanks.
Tudor,
Not sure you got chance to look at this issue. My lead is pressuring me to solve this issue. I have tried several versions of hyper link. None are working. Can you please help.
Thanks.
Hi,
Can you tell me again what is it exactly you are trying to achieve? I mean from a functional point of view. I couldn't understand from your code snippets.
Regarding the conflict with the jqgrid plugin. I never tried it together with easygrid. So , there might be issues with the resources. Both plugins come bundled with a version of jqgrid. I would suggest you migrate away from it, and use easygrid or plain jqgrid. The plugin is pretty old and unmaintained .
Nothing much. Ex: Think I have two columns. One is 'id' and other is 'code'. Put a link under 'code' column by passing id. I want to hide id column. See below link which shows link under 'id'.
http://199.231.186.169:8080/petclinic/overview/index
user will click on view button in the navigator, it will show link on code column. User will click on the link, perform some operation and close it. Click on next in same view window. click on the code link..etc.
I am not able put link under 'code' column. I have copied same exact code from grails petclinic project. It is so simple right? but link doesnt appear. Let me know if you need anything else.
On Wed, Oct 8, 2014 at 3:38 PM, Tudor Malene [email protected] wrote:
Hi,
Can you tell me again what is it exactly you are trying to achieve? I mean from a functional point of view. I couldn't understand from your code snippets.
Regarding the conflict with the jqgrid plugin. I never tried it together with easygrid. So , there might be issues with the resources. Both plugins come bundled with a version of jqgrid. I would suggest you migrate away from it, and use easygrid or plain jqgrid. The plugin is pretty old and unmaintained .
— Reply to this email directly or view it on GitHub https://github.com/tudor-malene/Easygrid/issues/123#issuecomment-58414701 .
Now I understand. Your code looks correct.
Can you check if you have some javascript errors in the console. Also, do a "view source" and post the relevant parts. If you want to display the source code nicely in github use triple quotes around it: `
This time I am trying to put link under Id column. I don't see any errors on console. I am using same Controller to get data and create link which takes to same Controller for different method.See below for generated html. I took out all JQgrid libraries and only using easyGrid. Hope you can spot something.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
'''<html>
<head>
<title></title>
<link rel="shortcut icon" href="" type="image/x-icon"/>
<script src="/static/plugins/jquery-1.11.1/js/jquery/jquery-1.11.1.min.js" type="text/javascript" ></script>
<link href="//static/plugins/easygrid-1.6.6/jquery-ui-1.11.0/jquery-ui.css" type="text/css" rel="stylesheet" media="screen, projection" />
<link href="//static/css/ui.daterangepicker.css" type="text/css" rel="stylesheet" media="screen, projection" />
<link href="//static/plugins/easygrid-1.6.6/jquery.jqGrid-4.6.0/css/ui.jqgrid.css" type="text/css" rel="stylesheet" media="screen, projection" />
<script src="//static/bundle-bundle_easygrid-jqgrid-dev_head.js" type="text/javascript" ></script>
<script src="//static/plugins/jquery-ui-1.10.3/jquery-ui/js/jquery-ui-1.10.3.custom.min.js" type="text/javascript" ></script>
<link href="//static/bundle-bundle_layout_head.css" type="text/css" rel="stylesheet" media="screen, projection" />
<link href="//static/css/south-street/jquery-ui-1.8.10.custom.css" type="text/css" rel="stylesheet" media="screen, projection" />
<script src="//static/bundle-bundle_layout_head.js" type="text/javascript" ></script>
<link href="//static/css/export.css" type="text/css" rel="stylesheet" media="screen, projection" />
<script type="text/javascript">
function customShowFormat(cellvalue, options, rowObject) {
window.alert("I am here")
return "<a href='/flow/assigned/edit/" + cellvalue + "'>" + cellvalue + "</a> ";
}
$(document).ready(function () {
$.idleTimeout('#idletimeout', '#idletimeout a', {
idleAfter:1200,
pollingInterval:600,
keepAliveURL:'/flow/keepalive.gsp',
serverResponseEquals:'OK',
onTimeout:function () {
$(this).slideUp();
window.location = '/flow/logout/index';
},
onIdle:function () {
$(this).slideDown(); // show the warning bar
},
onCountdown:function (counter) {
$(this).find("span").html(counter); // update the counter
},
onResume:function () {
$(this).slideUp(); // hide the warning bar
}
});
});
</script>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="layout" content="main"/>
</head>
<body>
<table id="workspace_table"></table>
<div id="workspacePager"></div>
<script type="text/javascript">jQuery(function(){
jQuery("#workspace_table").jqGrid({
url: '/flow/assigned/workspaceRows',
loadError: easygrid.loadError,
pager: '#workspacePager',
"datatype":"json","viewrecords":true,"width":"970","height":"500","rowNum":10,"rowList":[10,20,50],"multiSort":true,"caption":"Workspace",
colModel: [
{"width":40,"fixed":true,"search":false,"editable":false,"searchoptions":{"clearSearch":false},"formatter":"'f:customShowFormat'","name":"id","label":"id"
},
{"searchoptions":{"clearSearch":false},"search":false,"name":"code","width":"100","label":"code","editable":false
},
{"searchoptions":{"clearSearch":false},"search":false,"name":"status","label":"Status","editable":false
},
],
});
jQuery('#workspace_table').jqGrid('filterToolbar', {"stringResult":true,"searchOperators":true});
jQuery('#workspace_table').jqGrid('navGrid','#workspacePager',
{"add":false,"view":true,"edit":false,"del":false,"search":true,"refresh":true},
{}, //edit
{"afterSubmit":"org.grails.plugin.easygrid.JsUtils$1$2@2c8192af","errorTextFormat":"org.grails.plugin.easygrid.JsUtils$1$2@6ec535fc","reloadAfterSubmit":false,"closeAfterAdd":true}, //add
{}, //delete
{"multipleSearch":true,"multipleGroup":true,"showQuery":true,"caption":"Multi-clause Searching","closeAfterSearch":true,"sopt":["eq","ne","lt","le","gt","ge","bw","bn","ew","en","cn","nc","nu","nn"]}, //search
{"closeOnEscape":true} //view
)
.jqGrid('navButtonAdd','#workspacePager',{caption:"", buttonicon:"ui-icon-plus", onClickButton:function(){
document.location = '/flow/assigned/workspace';
}});
}); </script>
<script src="/flow/static/plugins/easygrid-1.6.6/jquery-ui-1.11.0/jquery-ui.js" type="text/javascript" ></script>
</body>
</html>
Look at below code. For some reason formatter is not working. I have copied my local code and grails pet clinic code. How do I go about fixing this one?
My local box:
colModel: [
{"width":40,"fixed":true,"search":false,"editable":false,"searchoptions":{"clearSearch":false},"formatter":"org.grails.plugin.easygrid.JsUtils$1$2@668d1b4e","name":"id","label":"id"
},
Grails petclicnic project:
{"width":40,"fixed":true,"search":false,"editable":false,"searchoptions":{"clearSearch":false},"formatter":customShowFormat,"name":"id","sortable":true,"label":"Id"
},
The problems seems to be that the custom JSON marshallers that easygrid registers in order to render the javascript , are for some reason not called.
What version of grails / jdk are you using?
Thank you. I will compile and see if it solves the problem.
On Wed, Oct 15, 2014 at 3:34 AM, Tudor Malene [email protected] wrote:
Check :easygrid:1.6.7 It should work on your setup now.
— Reply to this email directly or view it on GitHub https://github.com/tudor-malene/Easygrid/issues/123#issuecomment-59168148 .
After taking latest build its working now. Thank you for that. I need 1 more help from you. See below code. There is drop down of users and I need to pass username to controller Grid. How do I pass? Based on that userName I query the database.
<div style="float: left;">
<g:form action="index" name="change_workspace">
<label for="username">See workspace for:</label>
<g:select from="${users}" name="username" optionKey="username" value="${username}" optionValue="fullName" noSelection="${["" :'Select One']}"/>
</g:form>
</div>
I tried like below
<grid:grid id="workspace" name="workflowWorkspace" addUrl="${g.createLink(controller: 'assigned', action: 'workflowWorkspace', params:username)}">
Not sure how to access this params in controller. If need more info let me know.
here is the controller code which doesnt work
externalParams ( ['username'])
globalFilterClosure
{
if(params.username)
{
def username = params.username
println(username)
}
}
Hi. Your controller code is ok. Except you don't need the externalParams.
In the gsp you have to use some javascript:
<g:select from="${users}" name="username" optionKey="username" value="${username}" optionValue="fullName" noSelection="${["" :'Select One']}" onchange="reloadWorkspaceGrid()" />
function reloadWorkspaceGrid(){
var grid = jQuery("#workspace_table");
var params = {'username': $('#username')};
grid.jqGrid('setGridParam', {postData: params});
grid.trigger('reloadGrid');
}
This code was not tested. Just to show the general idea
Thanks. I got it working. Meanwhile I have few more questions. Hope I am not bothering you a lot.
Question 1: applying search filter on complex queries. See below code. How do I apply search filter on each column?
initialCriteria {
join 'report.id'
join 'report.event.id'
resultTransformer Criteria.DISTINCT_ROOT_ENTITY
}
columns {
id {
type 'id'
jqgrid {
hidden true
enableFilter false
}
}
code {
label 'Code'
}
name{
label 'Name'
value{
it.report.name
}
filterClosure { Filter filter ->
report{
applyFilter(delegate, filter.operator, 'name', filter.value)
}
}
}
status{
label 'Status'
value{
it.report.event.status.toString()
}
filterClosure { Filter filter ->
report.event{
applyFilter(delegate, filter.operator, 'status', filter.value)
}
}
Question 2: With old grails JQGrid plug-in we were returning Json data like below. How does easygrid returns data from controller? Can we return like below and easygrid can just render it since underneath is JQGrid.
data = [rows: newResults, page: Integer.valueOf(page) ?: 1, records: total, total: pages]
render data as JSON
Answer Q1: You can write the grid in this simplified form, and the plugin will generate default values for the filterClosures.
initialCriteria {
join 'report.id'
join 'report.event.id'
resultTransformer Criteria.DISTINCT_ROOT_ENTITY
}
columns {
id {
type 'id'
jqgrid {
hidden true
enableFilter false
}
}
code {
label 'Code'
}
'report.name'{
label 'Name'
}
'report.event.status'{
label 'Status'
}
}
Basically, any search term you enter in the search fields of jqgrid will append the filterClosure of that column to the main query.
Answer Q2: This is how easygrid works:
- for each grid it dynamically add methods to the controller, that basically do that JSON rendering or process the filtering params. Basically, just by defining the grid, you get all that. Check: http://199.231.186.169:8080/easygrid/author/jqgrid All the code used to generate that grid is in the page.
Search is not working for me. Most of the examples are single table queries. I am not finding multiple table join examples. How do I go about printing the main sql which is generated by easygrid? How to check what is returned from controller method?
To log sql queries: http://grails-dev.blogspot.co.uk/2013/06/how-to-log-sql-statements-in-grails.html
For a grid with joins see: https://github.com/tudor-malene/grails-petclinic/blob/master/grails-app/controllers/org/grails/samples/VetScheduleController.groovy#L99
To see the json output, use the ${gridName}Rows controller method. Like this : http://199.231.186.169:8080/petclinic/overview/ownersRows?rows=10&page=1&sidx=&sord=asc
Thanks. I feel we had more flexibility with grails JQgrid and we could play with query in controller and pass json data. May be it is taking me time to fully get the potential of easygrid. It would be good if you add flexibility to pass params through grid. JQGrid had option like below where we could pass paramas while calling the controller method. Easygrid complains params is null. It only takes postData after initial call. What if you want to load grid based on previous page params. Is it possible with easygrid?
url="'${createLink(action: 'listJSON', params: [department: params.department, range1: params.range1, range2: params.range2, status: params.status, type: params.type, view: params.view, format: params.format, extension: params.extension])}'"
You can pass params to the grid by using externalParams
def yourGrid={
...
externalParams (['range1', 'range2', 'status'])
}
As a matter of fact the link you mention is constructed like this in _jqGridRenderer.gsp
url: '${g.createLink(controller: attrs.controller, action: "${gridConfig.id}Rows", params: GridUtils.externalParams(gridConfig))},
Are you saying that I can pass like below.
<grid:grid id="details" url="'${createLink(action: 'listJSON', params: [department: params.department, range1: params.range1, range2: params.range2, status: params.status, type: params.type, view: params.view, format: params.format, extension: params.extension])}'"
in Controller
externalParams (['range1', 'range2', 'department','view','max'])
if I do params.range1 I get null pointer exception. How do I access them without globalFilterClosure?
Unless you modify the _jqgridRenderer, you can't specify the url.
By setting the externalParams, they will be passed on to jqgrid, from the parameters of the enclosing page.