Can I change column width in cellattr in jqgrid?

Question

Can I change column width in cellattr? I tried this:

cellattr: function(rowId, value, rowObject, colModel, arrData) {
        return \' style= width: 100% !impo         


        

Answer 1

cellattr can be used to specify attributes of individual cells (<td> elements) of the column. The width of the column is the common width of all cells. Nevertheless if you need to assign style attribute to all cells of the column you should use quotes in your code:

cellattr: function () {
    return ' style="width: 100% !important;"';
}

If you would do this you will see that the style="width: 100% !important;" attribute will be assigned to all <td> elements of the column. I still not sure that it will follows to results which you expect.

Answer 2

In th:eq(2) here 2 indicates the destination column to increase column header / cell width. eq comparison starts from 0. Here I mentioned third column(2) for increasing width of header and cell.

1. For changing Column Header width in jqgrid use below one

   $('.ui-jqgrid-labels > th:eq(2)').css('width','400px')

2. For changing Column cells width in jqgrid use below one

   $('#gridId tr').find("td:eq(2)").each(function(){$(this).css('width','400px');})

Complete Example:

$(document).ready(function(){
            //jqGrid
            $("#usersList").jqGrid({
                url:'<%=request.getContextPath() %>/Admin/getUsersList',
                datatype: "json",               
                colNames:['Edit','Primary Email','Active','First Name','Middle Name','LastName','Mobile Number'],
                colModel:[
                    {name:'userId',search:false,index:'userId',width:30,sortable: false,formatter: editLink},                       
                    {name:'email',index:'user.primaryEmail',width:150},
                    {name:'isActive',index:'user.isActive',width:80},
                    {name:'firstName',index:'firstName', width:100},
                    {name:'middleName',index:'middleName', width:100},
                    {name:'lastName',index:'lastName', width:100},
                    {name:'mobileNo',index:'user.mobileNo', width:100},
                    ],
                    rowNum:20,
                    rowList:[10,20,30,40,50],
                    rownumbers: true,  
                    pager: '#pagerDiv',
                    sortname: 'user.primaryEmail',  
                    viewrecords: true,  
                    sortorder: "asc",

            });
            $('#gridContainer div:not(.ui-jqgrid-titlebar)').width("100%");
            $('.ui-jqgrid-bdiv').css('height', window.innerHeight * .65);
            $('#load_usersList').width("130");
            $("#usersList").jqGrid('navGrid','#pagerDiv',{edit:false,add:false,del:false},{},{},{}, {closeAfterSearch:true});
            $(".inline").colorbox({inline:true, width:"20%"});

            $('.ui-jqgrid-labels > th:eq(2)').css('width','400px');
            $('#usersList tr').find("td:eq(2)").each(function(){$(this).css('width','400px');});
        });

        function editLink(cellValue, options, rowdata, action)
        {
            return "<a href='<%=request.getContextPath()%>/Admin/editUser/" + rowdata.userId + "' class='ui-icon ui-icon-pencil' ></a>";
        }