adding my own button to the navigator in jqgrid

1,979 views
Skip to first unread message

ram

unread,
Aug 1, 2010, 11:58:33 AM8/1/10
to struts2-jquery
Hi

How can I add a button in the navigator area (where add, edit.. etc..
etc...are located)?

I cant see any options in the sjg tag... do I have to implement a
snippet of jquery code after the grid is complete or what is the best
way to do this?

I cant see any examples in the showcase on how I can do this.

There is a column choser example located at : http://www.trirand.com/blog/jqgrid/jqgrid.html
but this doesnt use the struts 2 plugin.


Many thanks & thanks for your help..

jogep

unread,
Aug 2, 2010, 2:05:44 PM8/2/10
to struts2-jquery
int the jqGrid wiki it is described how to add an button, but i never
try it.

http://www.trirand.com/jqgridwiki/doku.php?id=wiki:custom_buttons

you can try to at this in an onGridCompleteTopics topic.

Johannes
---
web: http://www.jgeppert.com
twitter: http://twitter.com/jogep

ram

unread,
Aug 3, 2010, 6:33:06 PM8/3/10
to struts2-jquery
Hi have tried to do this but it does not work. I dont get any errors
though.

onGridCompleteTopics I call addButton like so:
onGridCompleteTopics="addButton"

and addButton topic is like this:

$.subscribe('addButton', function(event,data) {
jQuery("#"+gridName).
navGrid('#pager',{edit:false,add:false,del:false,search:false}).
navButtonAdd('#pager',
{caption:"Columns", title:"Reorder Columns",
position:"first",
onClickButton: function(){
jQuery("#"+gridName).jqGrid('columnChooser');
}
}
);
});


I am doing exactly as it says in the jqgrid wiki. I think this might
be a bug in the struts2 jquery plugin?

I also tried call addButton with onCompleteTopics but still doesnt
work.

any ideas?
> > Many thanks & thanks for your help..- Hide quoted text -
>
> - Show quoted text -

Yael Joyas

unread,
Aug 3, 2010, 6:39:59 PM8/3/10
to struts2...@googlegroups.com
Hi I have a column chooser button on mine that am going to submit so
hopefully it will be on future versions. You can wait for that or I
can walk you through adding one.

Sent from my iPhone

> --
> You received this message because you are subscribed to the Google Groups "struts2-jquery" group.
> To post to this group, send email to struts2...@googlegroups.com.
> To unsubscribe from this group, send email to struts2-jquer...@googlegroups.com.
> For more options, visit this group at http://groups.google.com/group/struts2-jquery?hl=en.
>

ram

unread,
Aug 6, 2010, 8:06:32 AM8/6/10
to struts2-jquery
Hi

Please if you can post me the code here, I can then try it on my own
application & let you know if it works.

One point of note, in the wiki it says that to implement a custon
button on the page, you must first call the
navGrid('#pager',{edit:false,add:false,del:false,search:false}).
method before calling navButtonAdd.

This means that it will overwrite all my previous parameters already
put into my grid(for edit, add, del, etc). However, if I can get my
customised button to appear on the page, its a small price to pay
redot some of that work again.

thanks for your help & awaiting your response.


On Aug 3, 11:39 pm, Yael Joyas <yael.v.jo...@gmail.com> wrote:
> Hi I have a column chooser button on mine that am going to submit so
> hopefully it will be on future versions. You can wait for that or I
> can walk you through adding one.
>
> Sent from my iPhone
>
> > For more options, visit this group athttp://groups.google.com/group/struts2-jquery?hl=en.- Hide quoted text -

ram

unread,
Aug 10, 2010, 11:30:31 AM8/10/10
to struts2-jquery
Should I create a bug for this as its a plugin issue?
> > > For more options, visit this group athttp://groups.google.com/group/struts2-jquery?hl=en.-Hide quoted text -
>
> > - Show quoted text -- Hide quoted text -

Yael Joyas

unread,
Aug 10, 2010, 11:36:23 AM8/10/10
to struts2-jquery
Do you have access to the source code?
> > > > For more options, visit this group athttp://groups.google.com/group/struts2-jquery?hl=en.-Hidequoted text -

ram

unread,
Aug 10, 2010, 3:42:10 PM8/10/10
to struts2-jquery
Yes I think so.. the source is available on the release page.. so i
presume I do have it.

What do i need to do?

thanks in advance
> > > > > For more options, visit this group athttp://groups.google.com/group/struts2-jquery?hl=en.-Hidequotedtext -

Yael Joyas

unread,
Aug 10, 2010, 6:48:11 PM8/10/10
to struts2-jquery
Ok grab a copy of the source for version 2.3.1 of the grid plugin
This is the easiest and will be enabled by default.
Open the jquery.grid.struts2.js for editing

find the following line:
$elem.jqGrid('navGrid', self.escId(o.pager), navparams,........

after that line add the following (between dotted line)
------------------------------------------------------------

$elem.jqGrid('navSeparatorAdd','#' + o.pager);
$elem.jqGrid('navButtonAdd', self.escId(o.pager), {
caption:'',
buttonicon:"ui-icon-gear",
title:'Show/Hide Columns',
onClickButton: function() {
$elem.jqGrid('setColumns',{});
}
});

------------------------------------------------------------
save the file and build the plugin
also, make sure in your header you specify compressed="false".
As stated all your grid will have that basic functionality by default.
There are other nicer and more flexible approach to this but require a
bit more coding.
Hope this helps.
Let me know.

ram

unread,
Aug 11, 2010, 6:06:16 AM8/11/10
to struts2-jquery
Hi Yael

Thanks for that. I am on a previous version of the plugin and will be
upgrading to 2.3.1 this weekend.
I will then try your suggestion and I am sure it will work :-)

I am presuming your fix will be in upcoming releases.

thanks & I will keep you updated when I try this.

ram

unread,
Aug 11, 2010, 10:04:07 AM8/11/10
to struts2-jquery
Hi Yael

Just one thing I have notice with your code. This will add the Show/
Hide Columns button on every grid.
As per the jqgrid guidelines, it is possible to extend and add as many
buttons(different ones) as possible. I have serveral scenarios whereby
I need to add different buttons on different grids to do different
things.

I see your suggestion will probably work.. but I am sure the plugin
should cater for this.

Will update you when I try your suggestion and the will raise a bug on
this matter after I have upgraded to the latest release.

Your comments are greatly appreicated.

Yael Joyas

unread,
Aug 11, 2010, 2:01:39 PM8/11/10
to struts2-jquery
I'll take a look at that extension because i've tried similar things
before to persist grid params
but did not work for me, no errors and no effect. Either way i'll
check into it.

My plugin version has only 2 extra buttons, the column choose and an
export button.
Also updated the plugin to enable a few extra things on the grid.
I'll get back to you on the extension

jogep

unread,
Aug 12, 2010, 5:56:34 AM8/12/10
to struts2-jquery
@Yael

do you have an idea, how we can make this more generic?
So I can add it as attributes to the grid tag?

Yael Joyas

unread,
Aug 12, 2010, 3:22:50 PM8/12/10
to struts2-jquery
@Johannes
I have an idea that i'm currently trying so far looks good.
Will let you know later how it comes out

Yael Joyas

unread,
Aug 12, 2010, 6:59:50 PM8/12/10
to struts2-jquery
Hi
I have a solution that is pretty generic and allows you to add any set
of buttons and seperators as you please.
It's configured through the grid tag.
example:
navigatorButton="true"
navigatorButtonCount="3"
navigatorButtonOptions="{fn_0:'seperator', fn_1:'callMe',
title_1:'Some Button', fn_2:'seperator'}"

Here it tells it to create 3 buttons, in this case is 2 seperators one
in front the other at the end.
the options it takes have to end in a number 0,1,2... and so forth and
correspond to the button count.
there might be a better way to do this but this is easy and fast.

the properties are
(where x is the number for the button)
fn_x - mandatory ( function name to call onClick event - if fn_x =
'seperator' a seperator is added instead of a button )
caption_x - optional - caption for the button ( default = '' )
icon_x - optional - icon to use for the button ( default = 'ui-icon-
newwin' )
title_x - option - title for the button ( default = '' )

in javascript you would have a function like bellow

callMe = function(elem) {
alert('got object: ' + elem);
};

elem is the $elem from used by the plugin so you can do
$elem.jqGrid....
or do whatever you like or ignore if you want.

Does this solution sound good or is there something else that you
would like on it?

Thanks
Yael

jogep

unread,
Aug 13, 2010, 2:02:32 AM8/13/10
to struts2-jquery
Hi Yael,

what do you think about this.

navigatorExtraButtons="['seperator','Show Hide','seperator']"
navigatorExtraButtonsIcons="[null,'ui-icon-gear',null]"
navigatorExtraButtonsFunctions="[null,showHideColumnFunction,null]"


or

navigatorExtraButtons="{
button1 : {
title : 'seperator'
},
button2 : {
title : 'Show Hide',
icon: 'ui-icon-gear',
function: showHideColumnFunction
},
button1 : {
title : 'seperator'
}
}"


Johannes
---
web: http://www.jgeppert.com
twitter: http://twitter.com/jogep

> ...
>
> Erfahren Sie mehr »

Yael Joyas

unread,
Aug 13, 2010, 10:53:53 AM8/13/10
to struts2-jquery
Hi Johannes;
I'm trying this approach 2. but i'm having issues in javascript

navigatorExtraButtons="{button:{functionName:'seperator'}, button:
{functionName:'callMe', title:'Call Me Button', icon:'ui-icon-gear'},
button:{functionName:'seperator'}}"

how do i get the "button" object to come back as an array of 3 button
objects in this example?
when i check firebug it shows me that only 1 is created and that is
the very last one.

sorry am not so great in javascript
> > > > > > > > > > > > > >> try it.- Hide quoted text -
>
> - Show quoted text -...
>
> read more »

Yael Joyas

unread,
Aug 13, 2010, 2:57:07 PM8/13/10
to struts2-jquery
Ok, I got option 2 from above to work however dont know how to post
the updated files.

GRID Tag Example:
navigatorExtraButtons="{button1:{name:'seperator'}, button2:
{name:'callMe', title:'Call Me Button', icon:'ui-icon-gear'}, button3:
{name:'seperator'}, button4:{name:'callMe2', title:'Call Me 2 Button',
icon:'ui-icon-gear'}}"

JAVASCRIPT Example:
callMe = function(elem) {
alert('got object: ' + elem);
};
callMe2 = function(elem) {
alert('got object2: ' + elem);
};

Notes:
button1,button2... have to be unique objects or javascript will
replace the values with the last one.

Properties:
name - (mandatory) the function name to call onClick event
( if the name = 'seperator' a seperator button is created )
caption - (optional) the caption for the button (default = '')
icon - (optional) the icon for the button (default = 'ui-icon-newwin')
title - (optional) the title for the button (default = '')
position - (optional) the position of the button values are first or
last (default = 'last')

This setup will allow the user to specify as many buttons as they
desire with calls to their javascript method.
Also, the $elem is passed to the call so user has access to the grid
object.
> > > > > > > > > > > > > > >                                                  jQuery("#"+gridName).jqGrid('columnChooser');- Hide quoted text -

ram

unread,
Aug 16, 2010, 8:38:01 AM8/16/10
to struts2-jquery
Hi Yael

I am presuming that when these customs buttons are added to the grid,
they can execute struts actions and these actions results can be
displayed in another div. Is my assumption correct?

thanks
> > > > > > > > > > > > > > On Aug 3, 11:39 pm, Yael Joyas <yael.v.jo...@gmail.com>- Hide quoted text -

Yael Joyas

unread,
Aug 16, 2010, 9:44:15 AM8/16/10
to struts2-jquery
Hi;
Currently it's set to execute javascript method as the show/hide
columns functionality
can only be done through javascript. I can see if i can work in
struts2 action calls.
The question comes to mind as to why do you need it to do action
calls?
> > > > > > > > > > > > > > > One point of note, in the wiki it says that to implement a custon- Hide quoted text -

ram

unread,
Aug 16, 2010, 2:40:56 PM8/16/10
to struts2-jquery
Hi Yael

In my application, I will be calling server logic from these buttons.
It will be powerful functionality if we can basically have these
buttons to behave like sj:buttons currently does.

In many scenarios, if I have a grid, when a row is selected and I
click on 1 of these custom buttons, I attempt to fire a struts action
request using that selected row Id, to populate another div. Currently
I am doing this on just normal sj:buttons that are outside of the
grids and it doesnt look great.

so yes some buttons maybe to only excecute javascript(like show/hide
functionality) and some buttons to be like sj:buttons.

What do you think of this idea?
> > > > > > > > > > > > > On Aug 10, 4:36 pm, Yael Joyas- Hide quoted text -

Yael Joyas

unread,
Aug 16, 2010, 6:12:05 PM8/16/10
to struts2-jquery
Hi ram;
Alright, i'll work that into it.
As an FYI, there's a javascript function from jqgrid that allows you
to copy the selected row
properties into a form, this faster and more efficient if you want to
just display the details of your
row on a form so the user can modify it view it or delete it. To use
this
you can just look at the example in the showcase on how to fire of the
envent on select.
Then use the function GridToForm which takes in a rowid which
corresponds to your rowid in the grid
and a formid which is the id of the form.
> > > > > > > > > > > > >                  onClickButton: function()- Hide quoted text -

Yael Joyas

unread,
Aug 24, 2010, 5:18:22 PM8/24/10
to struts2-jquery
Sorry am back to work on this.
Will give an update later today on it.
> > > > > > > > > > > > > > Ok grab a copy of- Hide quoted text -

ram

unread,
Sep 13, 2010, 6:55:17 AM9/13/10
to struts2-jquery
Hi

Has this been implemented in the 2.4.0 release? I couldnt see anything
about it in the changelog & the wiki about how to go ahead and
impelementing it.

thanks
> > > > > > > > > > > > > > Thanks for that. I am on a- Hide quoted text -

ram

unread,
Sep 23, 2010, 1:15:50 PM9/23/10
to struts2-jquery
Hi Yael Joyas or Johannes

Any updates on whehter this problem has been fixed?

thanks for your help
> > > > > > > > > > > > > > I need to add different buttons on different grids to do different- Hide quoted text -

jogep

unread,
Sep 26, 2010, 4:27:36 PM9/26/10
to struts2-jquery
Hi,

before some weeks I give Yael SVN access to the sources,
but I don't get any answer to my mails.

Sorry at this days no new news for the buttons.
> > > > > > > > > > > > > > On Aug 11, 10:04 am, ram <ramfro...@gmail.com> wrote:...
>
> read more »
Reply all
Reply to author
Forward
0 new messages