How to force action buttons to appear in same row in jqgrid

Question

Action buttons are added to jqGrid columns using colmodel below. Column width 45 is sufficient to hold both buttons in same row. Edit and delete buttons appear in separate rows and row height in increased. For unknown reason there is empty space before both buttons, there do not appear in left side in column.

If inline edit starts, save and cancel button also appear in separate rows.

How to force buttons to appear in same row witohut increasing column width ?

grid.jqGrid({
  colModel: [{name:_actions,width:45,
  formatter:"actions",
  formatoptions:
    {keys:true}
}, ....

update

Toolbar containts text right to button. Removing 30px from style creates overlapping buttons so I cannot remove it.

According to Oleg suggestion I added

.ui-inline-edit, .ui-inline-del, .ui-inline-save, .ui-inline-cancel
{
    margin-right: 0px !important;
}

and

                colModel: [{"hidden":false,"label":" Muuda ","name":"_actions","width":($.browser.webkit == true? 58: 53)
,"align":"center","sortable":false,"formatter":"actions","formatoptions":{"keys":true,"delbutton":false,"onSuccess":function (jqXHR) {
actionresponse = jqXHR;
return true;
}
,"afterSave":function (rowID) {
cancelEditing($('#grid'));aftersavefunc(rowID,actionresponse)}
,"onError":errorfunc
,"extraparam":{"_dokdata":FormData
},"afterRestore":setFocusToGrid
,"onEdit":function (rowID) {
                            if (typeof (lastSelectedRow) !== 'undefined' && rowID !== lastSelectedRow)
                                       cancelEditing($('#grid'));
                           lastSelectedRow = rowID;
                                  }
}},

to style but this does not change anything, buttons still appear in two rows. How to fix ?

Update 2

adding fixed: true puts buttons to same row. There are two issues:

Buttons are two small

Column contains only edit button ( delbutton:false option used). Edit button width is small and icon is not centered. How to increase edit button width to column width-few pixels so that clicking anywhere in column starts edit mode and show edit icon in center of column ? How to increase save ad cancle button widths so that both occupy 50%- few pixels of action column width?

Multiple rapid clicks cause edit button so stop working

Save button appears in the same place as edit button and save to server takes some time. If This place is clicked rapidly, inline edit mode is toggled before save is completed and autocomplete controls are not created anymore. after that edit button does not work at all. How to prevent multiple save button clicks: disable save button or whole grid if clicked once or other solution and show "Saving..." message until save is completed?

style used:

td.ui-pg-button > div.ui-pg-div { margin-right: 30px }

colmodel:

colModel: [{
fixed:true,
label:" Change ",
name:"_actions",
width:($.browser.webkit == true? 58: 53)
,align:"center",
sortable:false,
formatter:"actions",
formatoptions:{"keys":true,"delbutton":false,
  "onSuccess":function (jqXHR) {actionresponse = jqXHR;return true;}
  ,"afterSave":function (rowID) {
      cancelEditing($('#grid'));aftersavefunc(rowID,actionresponse);actionresponse=null; }
  ,"onError":errorfunc
  ,"extraparam":{"_dokdata":FormData
  },
afterRestore:setFocusToGrid
,onEdit:function (rowID) {
     if (typeof (lastSelectedRow) !== 'undefined' && rowID !== lastSelectedRow)
        cancelEditing($('#grid'));
     lastSelectedRow = rowID;
   }
}}

In your demo (test case) which I use the setting are still not included. You should just trace the styles which you used or update you testcase. — Oleg

Oleg Oleg · Accepted Answer · 2011-08-27T20:22:20

I find 45px as the width for the column with the formatter:"actions" a little to small. It seems to my that 53px or 58px looks better. The calculation is the following: every button has 16px. Two buttons will be shown at once. The second button (Delete or Cancel) has left-margin:5px. Moreover all the buttons will be placed inside the div which has margin-left: 8px;. If you want to have the same margin at the right side of the second button the total width should be 8+16+5+16+8=53px. In case of usage of Webkit browser it should be 5px more because of other calculation of the column width (calculation will be without margin and padding which are 5px per default). So I would recommend you to use

width: ($.browser.webkit == true? 58: 53)

You main problem exist because of you set margin-right:30px of the ui-pg-div class in your CSS. I could see that only because you previously send me the URL of your demo page.

All actions buttons use ui-pg-div together with ui-inline-edit, ui-inline-del, ... for the actions buttons. So you have to: either to remove the setting margin-right:30px for the ui-pg-div class or overwrite the margin-right for ui-inline-edit, ui-inline-del, ui-inline-save and ui-inline-cancel with respect of !important additional attribute.

How to force action buttons to appear in same row in jqgrid

1 Answers