Modifying jqGrid looks

Question

I got 2 questions about JqGrid

• Is it possible to have column name in 2 lines instead of 1 line? I tried to change it from CSS side but it tends to break and gimped on occasion.
• Can we use another plugin on top of JqGrid, for example using combobox plugin on JqGrid to replace the dropdown box in JqGrid?

Thanks

Answer 1

Both is possible in jqGrid.

The items of colNames array contains HTML fragments. So you can use <br/> for example inside of the text. To increase the height of the columns you can use for example the following CSS rule

.ui-jqgrid .ui-jqgrid-htable th div { height: auto }

Alternatively one could need to use word or character wrapping of the text from colNames. See the answer for more details.

The demo from the answer demonstrates how to use select2 plugin which allows to search (filter) items in dropdown box. The demo uses dataInit callback of editoptions to "convert" the standard dropdown box in the more comfortable one.