Make jqGrid's cb column wider

Question

I'm using free-jqGrid and jqGrid has the option to place selection checkboxes for you onto the grid. On my grid I have two columns in the beginning which is placed by jqGrid and not backed up by my own data: a record number column 'rn' and the checkbox for record selection 'cb' (multi select in my case).

I feature the jqGrid on a bootstrap website, so when the loadComplete event hits, I add 'from-control' class to a lot of edits, like the per column search boxes and basically every edit I can find on the page. (I also replace every ugly little icon to glyphicons. I manipulate the DOM of the toolbar buttons so they become real buttons, so they look nicer and chardin.js work well for example. And so on and on and on. The end result is much better than the original. BTW, I'm not sure if that's the best practice, I couldn't find a better way to make jqGrid more bootstrappy, but this can be another question).

When you apply form-control class to a checkbox, it bloats up. That's beneficial, because it's much easier to click on it, you don't need to have a magnifier glass (like for the original tiny checkbox). I can nicely resize the columns for all those data columns what I supply data for, but I cannot figure out how to widen the cb column so it can accommodate the bloated up checkbox.

1. I tried adding a configuration for that column in my colModel:

Both

{
    name: 'cb',
    width: 38,
    align: 'center',
    sortable: false,
}

and

{
    width: 38,
    align: 'center',
    sortable: false,
}

failed, I got an error from jqGrid stating that the number of colModels doesn't match the number of supplied data. That's true, because the data behind the cb column is not backed up by me.

2. I tried in the loadComplete

   var $ajaxGrid = $("#ajaxGrid");
   $ajaxGrid.jqGrid('setColProp', 'cb', { width: 38 });
   

That didn't give me an error, but also didn't change anything. Maybe I should put it into another event handler? Which?

3. Then I tried to go down the rocky road of manipulation:

   $("#ajaxGrid_cb").css("width", "38px");
   $(".td_cbox").css("width", "38px");
   

As you see I separately widen the header and the td elements. But this causes the table horizontal scrollbar to appear. Yuck! I tried to tumble deeper into the hacking hole, and make a wider column on the grid narrower to make the scrollbar disappear, but this didn't help:

$("#ajaxGrid_Name").css("width", "435px");
$('td[aria-describedby="ajaxGrid_Name"]').css("width", "435px");

There must be a way. Now it's ugly. Screenshot:

(Another style problem you can also see is for the Combined column I specify align: 'center' in the colModel but it has no effect.)

Answer 1

You can use multiselectWidth to specify the width of the multiselect column:

multiselectWidth: 38

One more alternative: you can change the columns width later using setColWidth which is the part of free jqGrid. I introduced the method originally in the answer as plugin to old jqGrid versions. Thus the following, for example, will work too:

onInitGrid: function () {
    $(this).jqGrid("setColWidth", "cb", 38);
}

The onInitGrid callback or jQuery event "jqGridInitGrid" are good place, where you can modify the grid before the data will be loaded.

P.S. I'm working now on including better support of Bootstrap in free jqGrid. Probably you will just need to use guiStyle: "bootstrap" in the next version of jqGrid to make jqGrid be "in Bootstrap style".