The scrolling is displayed in the JqGrid column header
Here is my JqGrid Ajax function:
function GetData() {
$.ajax({
type: "POST",
url: "../Downloads.aspx/GetDownLoadData",
contentType: "application/json; charset=utf-8",
dataType: "json",
//async: false,
success: function (response) {
debugger;
var item = response.d;
if (item != null && item != "" && typeof (item) != 'undefined') {
$("#list").jqGrid({
data: JSON.parse(item),
datatype: 'local',
colNames: ['DownLoad Name', 'Format','Size','Link',''],
colModel: [
{ name: 'DownLoadName', index: 'DownLoadName', width: 200, align: 'left', stype: 'text', editable: false },
{ name: 'Format', index: 'Format', width: 150, align: 'left', stype: 'text', editable: false },
{ name: 'Size', index: 'Size', width: 150, align: 'left', stype: 'text', editable: false },
{ name: 'Link', index: 'Link', width: 150, align: 'left', stype: 'text', editable: false },
{ name: 'Id', index: 'Id', width: 145, align: 'left', stype: 'text', editable: false,hidden:true }
],
rowNum: 5,
height:'auto',
altRows: true,
hoverrows:true,
rowList: [5, 10, 20],
pager: '#pager',
sortname: 'Id',
sortorder: 'asc',
caption: "DownLoad Data",
viewrecords: true,
loadonce: true,
gridview: true,
width:995,
loadError: function (xhr) {
alert("The Status code:" + xhr.status + " Message:" + xhr.statusText);//Getting reponse 200 ok
}
});
}
else {
var result = '<tr align="left"><td>' + "No Record" + '</td></tr>';
$('#list').empty().append(result);
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert("error");
}
});
}
It gives me great output , but in the output, why does the scrollbar appear in the column headers? I cannot figure it out. Give me back help. Thank. Here's the output:
Notice the attached image and the circle in the column Link
.
+3
source to share
1 answer
I recommend that you use the following additional CSS rule to fix the problem:
.ui-jqgrid-hdiv { overflow-y: hidden; }
or
.ui-jqgrid .ui-jqgrid-hdiv { overflow-y: hidden; }
jqGrid is only set overflow-x: hidden;
to .ui-jqgrid-hdiv
(see here ). So it depends on other CSS rules in use that can be included in the vertical scroll bar. The above CSS role removes it.
0
source to share