jqGrid the correct way to expand column width - asp.net-mvc

Question

I am attempting to widen my columns here with the colModel property of jqGrid. when I do this, my table data disappears. Does any body know why this would happen. Before and after pictures will be below. As well as the jquery code that I use.
Here is an example of it working.
Here is an example after I have attempted to widen the columns
jQuery(document).ready(function () {
ShowMessage();
tableToGrid("#table1", {
height: '200',
shrinkToFit: false,
autowidth: true,
colNames: ['Edit',
'MRN',
'Hospital Fin',
'First Name',
'Last Name',
'Date of birth',
'Completed Pathway',
'Completed Pathway Reason',
'PCP Appointment',
'Specialist Appointment',
'Admit Date',
'Discharge Date',
'Discharge Disposition',
'Discharge To',
'Discharge Advocate Call',
'Home Healthcare',
'Safe Landing Accepted',
'PCP Name',
'PCP Phone',
'PCP Appointment Location',
'Specialist Name',
'Specialist Phone',
'Specialist Appointment Location',
'Comments',
'Patient Room',
'Phone',
'Payor',
'MRN Type'
],
colModel: [{ name: 'Edit', width: 55 },
{ name: 'MRN', width: 55 },
{ name: 'HospitalFin', width: 85 },
{ name: 'FirstName', width: 85 },
{ name: 'LastName', width: 85 },
{ name: 'Dateofbirth', width: 85 },
{ name: 'CompletedPathway', width: 145 },
{ name: 'CompletedPathwayReason', width: 165 },
{ name: 'PCPAppointment', width: 145 },
{ name: 'SpecialistAppointment', width: 165 },
{ name: 'AdmitDate', width: 55 },
{ name: 'DischargeDate', width: 80 },
{ name: 'DischargeDisposition', width: 180 },
{ name: 'DischargeTo', width: 55 },
{ name: 'DischargeAdvocateCall', width: 165 },
{ name: 'HomeHealthCareAccepted', width: 165 },
{ name: 'SafeLandingAccepted', width: 165 },
{ name: 'PCPName', width: 55 },
{ name: 'PCPPhone', width: 55 },
{ name: 'PCPAppointmentLocation', width: 165 },
{ name: 'SpecialistName', width: 185 },
{ name: 'SpecialistPhone', width: 185 },
{ name: 'SpecialistAppointmentLocation', width: 185 },
{ name: 'Comments', width: 55 },
{ name: 'PatientRoom', width: 85 },
{ name: 'Phone', width: 85 },
{ name: 'Payor', width: 85 },
{ name: 'MRNType', width: 85 }
]
});
$(window).bind('resize', function () {
$("#table1").fluidGrid({ example: "#tempplateInfo", offset: -10 });
$("#table1 tbody").sortable("destroy");
});
(function ($) {
jQuery.jgrid.fluid = {
fluidGrid: function (options) {
var grid = $(this);
var settings = $.extend({
example: grid.closest('.ui-jqgrid').parent(), offset: 0
},
options || {});
var width = $(settings.example).innerWidth() + settings.offset; grid.setGridWidth(width);
}
}
})
(jQuery);
jQuery.fn.extend({ fluidGrid: jQuery.jgrid.fluid.fluidGrid });
var $grid = $('#table1'),
hdiv = $grid[0].grid.hDiv,
$columnHeaders = $("thead tr.ui-jqgrid-labels th", hdiv)
$columnHeaders.unbind('mouseenter');
$columnHeaders.unbind('mouseleave');
Comment out the columnModel section to get an idea of what I had when it was working. Should the colModel name property be equal to the th for instance? What is the word good fellows. I am getting inconsitent results.