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

Hagerty

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.

Hayrick

When passing in JSon to the grid, is there anything special I need to do to "skip" these blank columns, or do I just need to provide a blank piece of data to fill in for the blank column? I added in two "" fields into my JSon feed to accommodate two blank vertical columns for the moment but I'm wondering if there is a better way. – Hagerty

@Mark: It's depend on the format of JSON data which you use. If you use jsonReader: {repeatitems: false} and send named data then you don't need do anything. If you use standard JSON format of jqGrid then you have to either include additional "" to the data or better do this inside of beforeProcessing callback. By the way why you don't use just first approach which I suggested (with increasing padding)? It' mostly simple, but it gives no vertical separators. The blank columns are good in combination with CSS which remove horizontal lines between cells. – Hayrick

I did add the vertical lines to establish a blank column and actually love it and the look and separation it gives to the grid. As I mentioned I did provide the "" data element to get things going but I'll look into providing the named data. Any comments on how much bulk using named data adds to the JSONon data ? Thank you again, my project wouldn't be where it is at without your answers on SO – Hagerty

@Mark: I added "UPDATED" part to my answer to explain more detailed the same what I try to explain in previous comments. – Hayrick