Actions column and icons

QuestionsActions column and icons
Evgeniy Yakovchuk asked 11 years ago

Can we modify actions column to show icons(buttons) instead of text link?
like in this example:
http://www.trirand.net/examples/grid/editing_data/row_inline_actions/default.aspx

3 Answers
Abu Ghufran answered 11 years ago

This feature is added in product now, and shows icons by default.
One can switch to links mode if required. Available in latest licensed build now, and it is planned to be published with free version update.

Richard Kooijman answered 11 years ago

Hi Marc,
I have not thoroughly tested it, but I used the jqgrid js example: {name: 'myac', width:80, fixed:true, sortable:false, resize:false, formatter:'actions',formatoptions:{keys:true}},
For PHP when using the following column params, the icons are shown as in the jqgrid example:
$col["formatter"] = "actions";
$col["formatoptions"]["keys"]=true;
Be sure to set not editable and not as first column, as an error wil occur when phpgrid is trying to save the field to the table.
Br. Richard

Antonis Kosmopoulos answered 11 years ago

Hello Marc,

Though it's a long time since you posed the question; I needed to do the same and did it as follows:

In the lib/inc/jqgrid_dist.php file search for the commented block of code indicating "// theme buttons — not looking good".

Uncomment this block which builds the action column entries using icons, and comment the block just abouve it, starting with

$out .= ",'gridComplete': function(){
var ids = jQuery('#$grid_id').jqGrid('getDataIDs'); etc.

If you dont want literals ("Edit, "Delete" etc.) in the resulting buttons, you need to erase those words in the declerations of variables be, de, se and ce just before the "<span class="ui-icon ui-icon-…" block.
If you do that, the buttons will look flat (1 pixel height) so you need to modify the inline CSS in the same rows accordingly.

What worked for me was converting (example using the be variable for edit)

be = ' <a style="padding:0 0.5em;padding-left:1.6em;font-weight:normal;"…

into
be = '<a style="margin-top:1px;padding:0.65em 0 0.75em 1.6em;font-weight:normal;"…

Kind of sloppy, but it worked.

Good Luck!

Antonis

Your Answer

1 + 4 =

Login with your Social Id:

OR, enter

Attach code here and paste link in question.
Attach screenshot here and paste link in question.



How useful was this discussion?

Click on a star to rate it!

Average rating 0 / 5. Vote count: 0

No votes so far! Be the first to rate it.

We are sorry that this post was not useful for you!

Let us improve this post!

Tell us how we can improve this post?