0

I am having a lot of trouble with my column/column header alignment.

Image of the jqgrid:

enter image description here

As you can in the image above, my first column has a greater width than the column header. If i set the column header width to a larger number the column cells width grows as well. I have been trying things like turning shrinkToFit on and off and adding a class to the first column cells and setting 'max-widht' and 'width' but did not work.

The jqgrid is supposed to have a first column filled with employees names and the rest of the columns represent the days of the month. Days of the month will be either filled with a couple of letters and have their background coloured, or left empty.

Here is my code

$(document).ready(function () {
$("#tabs").tabs();

var ColModel1 = [];
ColModel1.push({ name: 'EMPLEADOS', label:'Empleados', index: 'EMPLEADOS',    align:'left', width:185    });
for (var i = 1; i < 32; i++) {
    ColModel1.push({ name: 'DIA_' + i, label: i, index: 'DIA_' + i, align: 'left', width: 27
    });
}
ConstruyeGridVacaciones(ColModel1);
});

function ConstruyeGridVacaciones(ColModel1) {
$("#GridMaestroVacaciones").jqGrid({
    datatype: 'local',
    altRows: true,
    altclass: 'jqgrid-altrow',
    rowNum: 1000,
    //scrollOffset: 0,
    shrinkToFit: false,
    height: 645,
    hidegrid: false,
    caption: "Vacaciones",
    width: 1180,
    colModel: ColModel1,
    pager: '#PaginadorGridMaestroMonedas',
    imgpath: '../shared/themes/basic/images',
    viewrecords: true,
    sortorder: 'asc',
});

var datos = {'EMPLEADOS':'1'};
for (var i = 1; i < 32; i++) {
    var key ='DIA_'+i;
    datos[key] = i;
}

$('#GridMaestroVacaciones').jqGrid('addRowData', '1', datos, 'last');

$('#GridMaestroVacaciones').jqGrid('addRowData', '2', datos, 'last');

$('#GridMaestroVacaciones').jqGrid('addRowData', '3', datos, 'last');

$('#GridMaestroVacaciones').jqGrid('addRowData', '4', datos, 'last');

$(".jqgrow td").first().addClass("ancho");
}
Alex
  • 8,461
  • 6
  • 37
  • 49
Santi
  • 11
  • 5
  • Which version of jqGrid you use? Which fork of jqGrid you use ([free jqGrid](https://github.com/free-jqgrid/jqGrid), [Guriddo jqGrid JS](http://guriddo.net/?page_id=103334) or an old jqGrid in version <=4.7)? By the way it's **vary bad** to fill the grid using `addRowData`. Instead of that you should assign unique `id` property to every item of `datos` array and use `data: datos` option of jqGrid. In the way you create jqGrid which already filled with the data. You should not assign some unclear classes see `.addClass("ancho")` to elements of the grid. What you want to implement in the way? – Oleg Nov 18 '15 at 09:50
  • To assign a class on all cells of specific column you can use `classes: "ancho", labelClasses: "ancho"` (`labelClasses` exist only in free jqGrid). I'm not sure what you try to display, but probably the usage of pivot table could be what you really need. See [the wiki article](https://github.com/free-jqgrid/jqGrid/wiki/jqPivot-in-version-4.9) – Oleg Nov 18 '15 at 09:54
  • The problem, which one can see on the picture from the question, is that the column headers of the grid are not above the corresponding columns. It could be some CSS style for example which removes borders instead of making the borders transparent (see [the answer](http://stackoverflow.com/a/11792322/315935) and [this one](http://stackoverflow.com/a/6994678/315935)) – Oleg Nov 18 '15 at 10:03
  • @Oleg I am using jqgrid 4.3.1. I thought of using addRowData since most of the day cells will be left empty and the raw data from the queries will need procesing. For example an employee could have asked to have only 1 day off the month. Then the jqgrid would have every day cell in the employee row empty and the cell corresponding to that day would have "OF" written and the background coloured in green. The class "ancho" was only to test if width property worked or not, it didnt. Actually "ancho" means "width" in spanish sorry for the missunderstanding. – Santi Nov 18 '15 at 10:05
  • Usage of `addRowData` is the most slow way to fill the grid. It's important to understand that if you modify one element on the page then at least the position (but it could be the style too) of other elements on **the whole page** could be changes. Thus the web browser have to reflow over the page and adjust some properties of **other elements** of the page. It makes changing in the loop of elements of the page very slowly. If you create the grid with `data` parameter and you use `gridview: true` then jqGrid fill the body of the grid with **one** assignent `innerHTML` of ``. – Oleg Nov 18 '15 at 10:18
  • I recommend you to try to replace URLs to jqGrid files to the URLs of free jqGrid described [here](https://github.com/free-jqgrid/jqGrid/wiki/Access-free-jqGrid-from-different-CDNs) and verify whether the problem still exist. In any way I find very suspected that one can't see borders between the cells on the grid on your picture. I suppose that you apply wrong styles on the grid. Look [the answer](http://stackoverflow.com/a/11792322/315935) instead. If your problem will still exist, that you should create JSfiddle demo which reproduce the problem and append it to the text of your question. – Oleg Nov 18 '15 at 10:24
  • Thanks for your help Oleg, already posted the answer. I'll take a look at the alternative methods to addRowData as well. – Santi Nov 18 '15 at 10:50
  • You are welcome! By the way, [free jqGrid](https://github.com/free-jqgrid/jqGrid) is the fork of jqGrid which I develop after Tony have changed the licence agreement of jqGrid in version 4.7.1 and have renamed his fork to Guriddo jqGrid JS (see [the post](http://www.trirand.com/blog/?p=1438) and [the license agreement with the prices](http://guriddo.net/?page_id=103334)) – Oleg Nov 18 '15 at 11:05

2 Answers2

0

Headers can be aligned by using setLabel method. You can change alignment of the column say 'empleados': 'empleados' with the following code:

grid.jqGrid ('setLabel', 'empleados', '', {'text-align':'center'});

Hope it works.

Amol Eklare
  • 113
  • 1
  • 9
  • I think that the main problem, which one can see on the picture from the question, are the column headers of the grid, which are not above the corresponding columns. It could be some CSS style for example which removes borders instead of making the borders transparent (see [the answer](http://stackoverflow.com/a/11792322/315935) and [this one](http://stackoverflow.com/a/6994678/315935)) – Oleg Nov 18 '15 at 10:02
0

Thanks to Oleg i tried a different version of jqgrid and it worked. Looks like the version of jqgrid i was using had its styles modified by a coworker long time ago wich probably caused the problem with the borders.

So, in the end, it was a modification of the version instead of a bug.

Santi
  • 11
  • 5