Skip to main content

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

Image
By User


Is it possible to align grid column headers in jqgrid? eg align left right or center?



In the jqrid documents http://www.trirand.com/jqgridwiki/doku.php?id=wiki:colmodel_options it says: 





align: Defines the alignment of the cell in the Body layer, not in header cell. 

Possible values: left, center, right.


Note that it says "not in the header cell". How can I do this for the header cell (grid title cell)? The documentation fails to mention this little detail....


Source: Tips4all, CCNA FINAL EXAM
Labels:

Comments

  1. UserMay 13, 2012 at 8:25 AM

    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).

    ReplyDelete
  2. UserMay 13, 2012 at 8:25 AM

    Just go to your css file of your jqgrid.

    Look for:

    ui-th-column,.ui-jqgrid .ui-jqgrid-htable th.ui-th-column
    {overflow:hidden;white-space:nowrap;text-align:center; ...


    And change the text-align.

    I didn't find it eather with regular options.

    I hope this will help you.

    Bruno

    ReplyDelete

Post a Comment

Popular posts from this blog

Why is this Javascript much *slower* than its jQuery equivalent?

By User
I have a HTML list of about 500 items and a "filter" box above it. I started by using jQuery to filter the list when I typed a letter (timing code added later): $('#filter').keyup( function() { var jqStart = (new Date).getTime(); var search = $(this).val().toLowerCase(); var $list = $('ul.ablist > li'); $list.each( function() { if ( $(this).text().toLowerCase().indexOf(search) === -1 ) $(this).hide(); else $(this).show(); } ); console.log('Time: ' + ((new Date).getTime() - jqStart)); } ); However, there was a couple of seconds delay after typing each letter (particularly the first letter). So I thought it may be slightly quicker if I used plain Javascript (I read recently that jQuery's each function is particularly slow). Here's my JS equivalent: document.getElementById('filter').addEventListener( 'keyup', function () { var jsStart = (new Date).getTime()...
3 comments
Read more

Is it possible to have IF statement in an Echo statement in PHP

By User
Thanks in advance. I did look at the other questions/answers that were similar and didn't find exactly what I was looking for. I'm trying to do this, am I on the right path? echo " <div id='tabs-".$match."'> <textarea id='".$match."' name='".$match."'>". if ($COLUMN_NAME === $match) { echo $FIELD_WITH_COLUMN_NAME; } else { } ."</textarea> <script type='text/javascript'> CKEDITOR.replace( '".$match."' ); </script> </div>"; I am getting the following error message in the browser: Parse error: syntax error, unexpected T_IF Please let me know if this is the right way to go about nesting an IF statement inside an echo. Thank you.
5 comments
Read more