title: how to set the jqgrid column width, and re-sizable, in a scrollable jqgrid?
body: <p>i am using jqgrid and facing a problem with column width 
  here is my js code</p>
  
  <pre><code>jQuery(document).ready(function () {
  
      var grid = jQuery("#grid");
  
      grid.jqGrid({
          url: '/Admin/GetUserForJQGrid',
          datatype: 'json',
          mtype: 'Post',
          cellsubmit: 'remote',
          cellurl: '/Admin/GridSave',
  
          //formatCell: emptyText,
          colNames: ['Id', 'Privileges', 'First Name', 'Last Name', 'User Name', 'Password', 'Password Expiry', 'Type', 'Last Modified', 'Last Modified By', 'Created By', ''],
          colModel: [
              { name: 'Id', index: 'Id', key: true, hidden: true, editrules: { edithidden: true } },
              { name: 'Privileges', index: 'Privileges', width: "350", resizable: false, editable: false, align: 'center', formatter: formatLink, classes: 'not-editable-cell' },
              { name: 'FirstName', index: 'FirstName', width:350, align: "left", sorttype: 'text', resizable: true, editable: true, editrules: { required: true } },
              { name: 'LastName', index: 'LastName',width:350, align: "left", sorttype: 'text', resizable: true, editable: true, editrules: { required: true } },
              { name: 'UserName', index: 'UserName', width:300,align: "left", sorttype: 'text', resizable: true, editable: true, editrules: { required: true } },
              { name: 'Password', index: 'Password',width:400, align: "left", sorttype: 'text', resizable: true, editable: false, editrules: { required: true }, classes: 'not-editable-cell' },
              {
                  name: 'Password_Expiry',width:250, index: 'Password_Expiry', align: "left", resizable: true, editable: true, editoptions: {
                      size: 20, dataInit: function (el) {
                          jQuery(el).datepicker({
                              dateFormat: 'yy-mm-dd', onSelect: function (dateText, inst) {
  
                                  jQuery('input.hasDatepicker').removeClass("hasDatepicker")                               
                                  return true;
                              }
                          });
                      }
                  }
              },
  
  
              {
                  name: 'Type', width: "250", index: 'Type', sorttype: 'text', align: "left", resizable: true, editable: true, editrules: { required: true }, edittype: 'select', editoptions: {
                      value: {
                          'Normal': 'Normal',
                          'Sales': 'Sales',
                          'Admin': 'Admin',
                          'SuperAdmin': 'SuperAdmin'
                      },
                      dataEvents: [
                              {
                                  type: 'change',
                                  fn: function (e) {
  
                                      var row = jQuery(e.target).closest('tr.jqgrow');
                                      var rowId = row.attr('id');
                                      jQuery("#grid").saveRow(rowId, false, 'clientArray');
                                  }
                              }
                      ]
                  }
              },
              { name: 'Modified',width:250, index: 'Modified', sorttype: 'date', align: "left", resizable: true, editable: false, classes: 'not-editable-cell' },
              { name: 'ModifiedBy', width:250, index: 'ModifiedBy', sorttype: 'text', align: "left", resizable: true, editable: false, classes: 'not-editable-cell' },
              { name: 'CreatedBy', width:250,index: 'CreatedBy', sorttype: 'text', align: "left", resizable: true, editable: false, classes: 'not-editable-cell' },
              { name: 'Delete',width:50, index: 'Delete', width: 25, resizable: false, align: 'center', classes: 'not-editable-cell' }
  
          ],
          rowNum: 10,
          rowList: [10, 20, 50, 100],
          sortable: true,
          delete: true,
  
          pager: '#pager',
          height: '100%',
          width: "650",
  
  
          afterSubmitCell: function (serverStatus, rowid, cellname, value, iRow, iCol) {
  
              var response = serverStatus.responseText;
              var rst = 'false';
              debugger;
              if (response == rst) {
                  debugger;               
                  setTimeout(function () {
                      $("#info_dialog").css({
                          left: "644px", // new left position of ERROR dialog
                          top: "380px"   // new top position of ERROR dialog
                      });
                  }, 50);
                  return [false, "User Name Already Exist"];
  
              }
              else {
  
                  return [true, ""];
  
              }
          },
  
  
  
          //rowNum: 10,
          //rowList: [10, 20, 50, 100],
          sortable: true,
          loadonce: false,
          ignoreCase: true,
  
          caption: 'Administration',
  
          search: false,
  
          del: true,
          cellEdit: true,
          hidegrid: false,
          pgbuttons : false,
          pginput : false,
          //viewrecords: true,
          gridComplete: function () {
  
              var ids = grid.jqGrid('getDataIDs');
              for (var i = 0; i &lt; ids.length; i++) {
                  var isDeleted = grid.jqGrid('getCell', ids[i], 'Delete');
                  if (isDeleted != 'true') {
                      grid.jqGrid('setCell', ids[i], 'Delete', '&lt;a href="#" onclick="deleteUser(' + ids[i] + ');"&gt;&lt;img src="/Images/delete.png" alt="Delete Row" /&gt;&lt;/a&gt;');
                  }
                  else {
                      grid.jqGrid('setCell', ids[i], 'Delete', ' ');
                  }
              }
          }
      }
  
      );
  
      grid.jqGrid('navGrid', '#pager',
          { resize: false, add: false, search: false, del: false, refresh: false, edit: false, alerttext: 'Please select one user' }
  
      ).jqGrid('navButtonAdd', '#pager',
          { title: "Add New users", buttonicon: "ui-icon ui-icon-plus", onClickButton: showNewUsersModal, position: "First", caption: "" });
  });
  </code></pre>
  
  <p>i need a scrollable grid , when use come to this page i have to show the first 7 columns only just seven in full page. i have 11 columns in my grid rest of the columns can be seen by using scroll, but first 7 should be shown when grid loads. and every column should be re-sizable. can any body help me, i will 100% mark your suggestion if it works for me ...thank you ;) . if something is not explained i am here to explain please help me
  and can i save the width of column permanently when user re-size the column, so when next time grid get loads the column should have the same width which is set by the user by re-sizing.. is it possible ? </p>