Jqgrid Column Headers and data not aligned

Question

I have a table that is dynamic and is generated at the code behind in C#. I use tabletogrid to convert this html table to a Jqgrid and the code I use to do that is

tableToGrid('#gvSearchDocuments',
                    { height: 'auto',
                        autowidth:true,
                        multiselect: true,
                        pager: 'pagersearch',
                        rowList: [20, 30, 50],
                        colNames: ['ID','Message Date', 'Fund', 'Partner', 'Menu', 'Sub Menu', 'Document Name', 'Document Description', 'Type'],
                        colModel: [
                            { name: 'ID', hidden: true},
                            { name: 'MessageDate',
                            align: 'right',
                            sorttype: 'date',
                            formatter: 'date',
                            formatoptions: { newformat: 'M-d-Y' }
                                    },
                                    { name: 'Fund', align: 'left'},
                                    { name: 'Partner', align: 'left' },
                                    { name: 'Menu', align: 'left'},
                                    { name: 'SubMenu', align: 'left'},
                                    { name: 'Documentname', align: 'left' },
                                    { name: 'DocumentDescription', align: 'left'},
                                    { name: 'Type', align: 'left' }

                                   ]
                    });

The problem I have is when the jqgrid is generated, the column headers and data is not aligned right.I tried playing with autoWidth, width and shrinkToFit but no luck there. This is how my grid appears in IE,Firefox and Chrome.

enter image description here

I have spent more than a day on this one and its killing me slowly. Any help would be great !

I don't recommend you to use `tableToGrid`. You should create jqGrid directly. — Oleg, Nov 08 '12 at 15:52
Could you set up a jsfiddle with the actual html from the page so we can see it working? — Jerryf, Jun 28 '13 at 12:51
You set all columns format, except `MessageDate` to `align:"left"`. Am I missing something? — Tommi, Jun 28 '13 at 12:53
One can't reproduce the problem without having HTML table which the input data. I agree additionally with previous comment (@Tommi). One can remove `align: 'left'` properties from all columns because `'left'` is the default value for `align`. Nevertheless the main problem is the width of columns. **Toni Toni Chopper** started bounty because he probably has close problem. It would be better if he posted his demo. Usage of very old `tableToGrid` is really bad choice especially if the table contains **formatted data** instead of pure data. — Oleg, Jun 28 '13 at 15:15
I had this same exact issue when using jqGrid. Please give us a jsfiddle to help you. — Rafi W., Jun 28 '13 at 19:17

Toni Toni Chopper · Answer 1 · 2013-07-02T13:42:07.713

1

I was finally able to fix the issue.

I was erroneously hiding the plain HTML table before calling tableToGrid with display: none; and then showing it after the conversion with display: block;. The display: block; was inherited by the data cells, affecting them negatively. Their resizing was blocked when the headers were resized (they stopped resizing once reached the minimum width necessary to show to entire cell content).

See this jsFiddle to reproduce the issue. If you comment out the last line in the script the issue disappears.

BTW I know that tableToGrid is not great (it is terrible in terms of performances) but in a special case in my application is the only approach I can use that doesn't require a massive rewriting of a lot of legacy code.

edited Jul 02 '13 at 13:42

answered Jul 02 '13 at 13:28

Toni Toni Chopper

1,833
2
20
29

1

jqGrid allows you to fill grid with **data** and not only as strings. So the numbers and dates for example will be correctly sorted and displayed corresponds with *locale* or formatter options which one use. Only after that one can really use local sorting, paging and filtering of data. `tableToGrid` fill grid with respect of `addRowData` which place all data on one page. If you would place more as 20 rows in the way then you will see only 20 rows after the next sorting (because of usage `rowNum: 20` and specifying no pager). It's just an example. There are more problems. – Oleg Jul 02 '13 at 14:09

score 0 · Answer 2 · answered Jul 05 '13 at 10:19

0

Try applying this property to your table..

table-layout: fixed;

This will work for me. I hope this may be helpful for you.

answered Jul 05 '13 at 10:19

Dipen Dedania

1,452
1
21
37

score -1 · Answer 3 · edited Dec 24 '14 at 09:11

-1

edit css with

.ui-jqgrid tr.jqgrow td{
         white-space: normal;
      }

edited Dec 24 '14 at 09:11

CRABOLO

8,605
39
41
68

answered Dec 24 '14 at 07:25

Albin Mathew

604
9
19

Plz 4nsw3r d4 q43sti0ns in h4lfw4y d3c3nt 3nglish, cuz it is easier to read and hence understand, as you might have noticed by now. – Markus W Mahlberg Dec 24 '14 at 07:56

Jqgrid Column Headers and data not aligned

3 Answers3

Linked