tudor-malene/Easygrid

Easygrid fails with template not found error

r500 opened this issue · 29 comments

r500 commented

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:

<title>Workspace</title> function customShowFormat(cellvalue, options, rowObject){ return "" + cellvalue + " "; } /r:script /grid:grid

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"/>

r500 commented

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"/>

r500 commented
<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.

r500 commented

Thank you it worked.

r500 commented

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.

r500 commented

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?

r500 commented

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.

r500 commented

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 .

r500 commented

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 notifications@github.com
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
#123 (comment)
.

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: `

r500 commented

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>
r500 commented

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?

r500 commented

Grails 2.2.5 and jdk 1.6.

Check :easygrid:1.6.7
It should work on your setup now.

r500 commented

Thank you. I will compile and see if it solves the problem.

On Wed, Oct 15, 2014 at 3:34 AM, Tudor Malene notifications@github.com
wrote:

Check :easygrid:1.6.7
It should work on your setup now.


Reply to this email directly or view it on GitHub
#123 (comment)
.

r500 commented

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.
r500 commented

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

r500 commented

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.
r500 commented

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?

r500 commented

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))},

r500 commented

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.