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

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 "";
        }