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: enter image description here

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







All Articles