Jquery JQGrid – How to set alignment of grid header cells?

by

The best documented way to change column header alignment is the usage of setLabel method of jqGrid (see http://www.trirand.com/jqgridwiki/doku.php?id=wiki:methods).

You can change alignment of the column identified by 'name': 'Name' with the following code:

grid.jqGrid ('setLabel', 'Name', '', {'text-align':'right'});

With the code 

grid.jqGrid ('setLabel', 'Name', 'Product Name', {'text-align':'right'},
             {'title':'My ToolTip for the product name column header'});

you can change the header name to ‘Product Name’ and set ‘My ToolTip for the product name column header’ as a tool tip for the corresponding column header.

You can also define some classes in your CSS and set it for the column headers also with respect of setLabel method.

By the way the name of the function ‘setLabel’ is choosed because you can not define colNames parameter of the jqGrid, but use additional 'label' option in the colModel to define a column header other as the 'name' value.

UPDATED: You can do able to use classes to define 'text-align' or 'padding'. Just try following

.textalignright { text-align:right !important; }
.textalignleft { text-align:left  !important; }
.textalignright div { padding-right: 5px; }
.textalignleft div { padding-left: 5px; }

and

grid.jqGrid ('setLabel', 'Name', '', 'textalignright');
grid.jqGrid ('setLabel', 'Description', '', 'textalignleft');

(I defined 5px as the padding to see results better. You can choose the padding value which you will find better in your case).

More Related Contents:

  1. How to filter the jqGrid data NOT using the built in search/filter box
  2. Why is gridview:true used for and what does it mean?
  3. jqGrid paging question
  4. How to fire loadComplete after new row is added in jqgrid?
  5. jqGrid: Disable form fields when editing
  6. JqGrid need hyperlink – need to capture value through Jquery
  7. Linking from a column value in jqGrid to a new page using GET
  8. How to adjust the column width of jqgrid AFTER the data is loaded?
  9. How to use free jqgrid properties to conditionally add actions buttons
  10. jqGrid dynamic column binding
  11. jqGrid: using beforeProcessing to populate filterToolbar selection boxes
  12. jqGrid resolve the grid pager ID dynamically?
  13. Can jqGrid hover text be defined with AddRowData?
  14. jqgrid showLink
  15. How to read userData in jqgrid?
  16. How can i get jqgrid frozen columns to work with word wrap on
  17. Resize SubGrid Columns on resizing main grid
  18. How do I change selected value of select2 dropdown with JqGrid?
  19. jqGrid : issue loading nested sub grid with local datatype
  20. How to make Jqgrid frozen column word-wrap
  21. jqgrid nested subgrid 4th level subgrid always returns first rowid of the subgrid
  22. How to edit the selected cell on jqGrid
  23. jQuery modal dialog and jqGrid
  24. In JQGrid, Is it possible to use different formatter on grouping summary cell other than column formatter?
  25. why doesn’t Jqgrid frozen column seem to work with filter rows and filter heading?
  26. JqGrid Filter Rules – Can we filter based on an Array?
  27. How can I change the background color of a cell in a jqgrid custom formatter?
  28. JQGrid: Loading data into the footer row
  29. Remove vertical lines in jqGrid
  30. How to create jqGrid Context Menu?

Leave a Comment