How to insert Vertical Space between columns in jqGrid

Question

How would I inject vertical space between columns as demonstrated in my crude mockup below (if at all possible). Again please forgive my hatchet job on this image but I think it conveys what I'm trying to do. Basically I'm wanting to have "groups" of columns in the grid which then have space to either side of the group.

Ex

Answer 1

You have many possibilities to implement your requirements. The most easy way seems me the usage of custom padding-right or padding-left for selected columns. For example you can define CSS like below

.ui-jqgrid tr.ui-row-ltr td.myCustomColumnClass { padding-right: 10px; }

and assign class "myCustomColumnClass" to all cells of the column by usage classes: "myCustomColumnClass" for the column definition in colModel. I suppose that it's want you need.

Another possibility will be just including empty column like

{ name: "empty1", width: 10, sortable: false, hidedlg: true, search: false,
    resizable: false, fixed: true }

in the grid. If it's needed you can additionally remove partition (vertical lines) between the empty column and the previous/next one by assigning classes: "noVerticalLines" to the previous column. You can define CSS for the class "noVerticalLines" like below

.ui-jqgrid tr.ui-row-ltr td.noVerticalLines { border-right-color: transparent; }

The demo shows all the possibilities:

UPDATED: You can use additionally the tricks from the answer. If you define for example CSS

.ui-jqgrid tr.ui-row-ltr td.noHorizLines { border-bottom-color: transparent; }

and add "noHorizLines" class to the column "empty1"

{ name: "empty1", width: 10, sortable: false, hidedlg: true, search: false,
    resizable: false, fixed: true, classes: "noHorizLines" }

you will get the following results

(see the demo).

Additionally, if you get the data from the server, it could be required to add one more empty string "" in the array of the data returned from the server. It's better to do such insertion of empty string on the client side instead of modifying the server code. So I recommend you to use beforeProcessing for the purpose. You can just enumerate items returned from the server and insert empty string using splice function.