jQuery Grid Plugin - jqGrid

Hi everyone,

I have a problem here (I'm sure it's an easy thing, but I can't find the solution).

I create my grid this way:

jQuery("#grid_Primaria").jqGrid({
            url: 'w72Prueba.do?action=populatePrimaria',
            ajaxGridOptions : {async:false},
            datatype: 'clientSide',
            editurl:'clientArray',
             width: 940,
            loadui:'disable',
            altRows:true,
            mtype: 'POST',
            colNames: ['Descripcion','AlumnadoA', 'GruposA', 'AlumnadoB','GruposB', 'AlumnadoD','GruposB','Identificador','Total','Id_Aula'],
            colModel: [
              { name:'Descripcion',index: '1',width:300,  align:'center' },
              { name:'AlumnadoA', index: '2',width:120, editable: true, align: 'center', editoptions:{style:'text-align: center;',size:6,maxlength: 5,onchange: "calculaTotal(id)",onfocus:"obtenerValor(id)"} },
              { name:'GruposA', index: '3',width:120, editable: true, align: 'center', editoptions:{style:'text-align: center;',size:6,maxlength: 5,onchange: "calculaTotal(id)",onfocus:"obtenerValor(id)"} },
              { name:'AlumnadoB', index: '4',width:120,  editable: true, align: 'center', editoptions:{style:'text-align: center;',size:6,maxlength: 5,onchange: "calculaTotal(id)",onfocus:"obtenerValor(id)"} },
              { name:'GruposB', index: '5',width:120, editable: true, align: 'center', editoptions:{style:'text-align: center;',size:6,maxlength: 5,onchange: "calculaTotal(id)",onfocus:"obtenerValor(id)"} },
               { name:'AlumnadoD', index: '6',width:120,  editable: true, align: 'center', editoptions:{style:'text-align: center;',size:6,maxlength: 5,onchange: "calculaTotal(id)",onfocus:"obtenerValor(id)"} },
              { name:'GruposD', index: '7',width:120, editable: true, align: 'center', editoptions:{style:'text-align: center;',size:6,maxlength: 5,onchange: "calculaTotal(id)",onfocus:"obtenerValor(id)"} },
              { name:'Identificador',index:'8',hidden:true},
              { name:'Total',index:'9',hidden:true},
              { name:'Id_Aula',index:'10',hidden:true}
            ],
            rowNum: 30,
            height: 400,
            loadComplete : function (xhr){            
                //numero de filas que tiene el grid            
                var numeroFilas=eval('('+xhr.responseText+')');
                setEditable ("#grid_Primaria",numeroFilas);    
            },
            onSelectRow: function(id){            
            if(id && id!==lastSel){
                lastSel=id;
                }
            }
                               
        });

It works fine, but there's a problem with widths. The grid has a 940px width, but when it is displayed there's always a blank gap (some kind of blank column), so columns never fit the grid width.

I would appreciate any help or suggestions,

Thanks¡¡