Jqgrid列のヘッダーボタンが正しく表示されない

Question

jqgrid（v4.4.4.4）列のヘッダーにボタンと列の名前があり、列見出しのスタイルが追加されています。ボタンと列の名前が部分的に表示されず、完全に表示されない

ここで列ヘッダーの値は正しくありません。間違いがどこになるかはわかりません。完全なヘッダーを表示するのを手伝ってください。ありがとう。 UPDATED

： バージョン：v4.4.4 .MYコード、

$(function() { 
    var Role = $("#hiddenRole").val(); 
    $("#ProgramListGird").jqGrid({ 
     url: '/Home/programGrid', 
     datatype: "json", 
     contentType: "application/json; charset-utf-8", 
     mtype: 'Get', 
     colNames: ['id', 'Program', 'Unit', 'Active?', '<input type="button" style="display: inline-block; padding: 3px 12px;margin: 0px 0px;font-size: 12px;font-weight: normal;text-align: center;white-space: nowrap;border-radius: 4px;overflow:visible;border:1px solid #444444;color: #000;box-shadow: 2px 3px 1px 0px #cccccc;" id="addNewProgramId" value="Add New Program" onclick= "addNewProgram()"/>'], 
     colModel: [ 
      { key: true, name: 'id', index: 'id', hidden: true }, 
      { 
       name: 'ProgramDesc', index: 'ProgramDesc', editable: true 
       ,editrules: { custom: true, custom_func: programDescValidation 
       } 
      }, 
      { 
       name: 'UnitID', index: 'UnitID', editable: true, edittype: 'select', 
       formatter: 'select', editoptions: { value: "Unit1:Unit1 ; Unit2/3:Unit2/3" }, 
       editrules: { custom: true, custom_func: dupicateRecordValidation 
       } 
      }, 
      { 
       name: 'InActive', index: 'InActive', editable: true, formatter: 'select', 
       stype: 'select', edittype: 'select', editoptions: { value: "false:No;true:Yes" } 
      }, 
      {    

       sortable: false, align: "center", class: "button", 
       formatter: function (cellvalue, options, rowObj) {     
        var cBtn = '<input type="button" style="display: inline-block; padding: 3px 12px;margin: 0px 0px;font-size: 12px;font-weight: normal;text-align: center;white-space: nowrap;border-radius: 4px;overflow:visible;border:1px solid #444444;color: #000;box-shadow: 2px 3px 1px 0px #cccccc;" value="Save Changes" onclick= "saveChanges(' + "'" + rowObj.id + "'" + '\)"/>' 
         return cBtn; 

       } 
      } 
     ], 
     pager: jQuery('#pager'), 
     rowNum: 3, 
     rowList: [3, 6, 9, 12], 
     height: '100%', 
     //width: outerwidth, 
     //shrinkToFit: false, 
     scrollerbar: true, 
     viewrecords: true, 
     caption: 'Program' + " " + Role, 
     //loadonce: true, 
     emptyrecords: 'No records to display', 
     //editurl: '/Home/programGridSave', 
     jsonReader: { 
      root: "rows", 
      page: "page", 
      total: "total", 
      records: "records", 
      repeatitems: false, 
      id: "0" 
     }, 
     hidegrid: false, 
     autowidth: true, 
     multiselect: false,  
     onSelectRow: function (id) { 
      rowSelect(id); 
     }, 

    }).navGrid('#pager', { edit: false, add: false, del: false, search: false, cancel: false, reload: false, refresh: false }), 
    $("#ProgramListGird").jqGrid('inlineNav', '#pager', 
     { 
      edit: false, add: false, save: false, cancel: false, reload: false, refresh: false, restoreAfterSelect: false, 
     }); 
}); 

JSONデータは、あなたがレトロバージョン4.4を使用して、/ホーム/ programGridから

public JsonResult programGrid(string sidx, string sord, int page, int rows) { 
programModel.id = "001"; 
programModel.ProgramDesc = "A"; 
programModel.InActive = true; 
programModel.UnitID = "Unit1"; 
programModelList.Add(programModel); 

programModel = new ProgramModel(); 
programModel.id = "002"; 
programModel.ProgramDesc = "B"; 
programModel.InActive = true; 
programModel.UnitID = "Unit1"; 
programModelList.Add(programModel); 

int pageIndex = Convert.ToInt32(page) - 1; 
int pageSize = rows; 
var results = programModelList.Select(emp => new 
{ 
    emp.id, 
    emp.InActive, 
    emp.ProgramDesc, 
    emp.UnitID, 
}); 
int totalRecords = results.Count(); 
var totalPages = (int)Math.Ceiling((float)totalRecords/(float)rows); 
if (sord.ToUpper() == "DESC") 
{ 
    results = results.OrderByDescending(s => s.id); 
    results = results.Skip(pageIndex * pageSize).Take(pageSize); 
} 
else 
{ 
    results = results.OrderBy(s => s.id); 
    results = results.Skip(pageIndex * pageSize).Take(pageSize); 
} 
var jsonData = new 
{ 
    total = totalPages, 
    page, 
    records = totalRecords, 
    rows = results 
}; 
return Json(jsonData, JsonRequestBehavior.AllowGet); 

}

Answer 1

を返しました。 4歳の4歳です。あなたの質問は主にCSSの問題です。どのバージョンのjQuery UIとjQueryを使用していますか？あなたのメインWebブラウザはどれですか？ jqGrid 4.4.4は、Chrome 24、Firefox 18、IE9（Windows 8のみIE 10）の時点で公開されました。私たちは現在Chrome 55、Firefox 50.1、Microsoft Edge 38、IE11を持っています。そのような古いバージョンのjqGridの使用法は、現代のWebブラウザを使用する場合の良いアイデアだと思いますか？ jqGrid 4.4.4を更新してjqGrid 4.13.5（または4.13.6を次回公開予定）にすることを強くお勧めします。あなたは解決しようとする問題はないでしょう。

あなた、あなたは本当に、あなたは、いくつかのCSSルールをオーバーライドすることで、古いui.jqgrid.cssを修正することができ、より新しいバージョンにjqGrid 4.4.4にアップグレードすることはできません：あなたは<link rel="stylesheet" href=".../ui.jqgrid.css" >後の規則と<style> ... </style>を含めることができ

.ui-jqgrid .ui-jqgrid-htable th div { height: auto; } 
.ui-jqgrid .ui-jqgrid-htable th { height: auto; } 

。