So, I have a little problem with jqGrid display. I can not say that this is a mistake, but it confuses my users, and therefore I was asked to deal with it, but it seems that it improves me.
I use sublattices, where the extension of the parent line of the grid causes subnets to load (see code below). I simplified the whole configuration to make it easier to read, basically just deleting all but one column and the simple colModel procedure. The parent grid has a horizontal scroll bar to scroll left and right to see data that may not appear on the screen. When the screen is large enough to display all the data, the horizontal scroll bar on the parent grid disappears.
When a sub-segment is loaded, it is loaded with a width of 100%, which works great. The parent grid expands to allow the entire sub-segment to be displayed, and the horizontal scroll bar of the parent grid allows you to scroll back and forth to see all the data. There is one scroll bar for any horizontal scroll, regardless of how many or how many sub-frames are displayed.
Unfortunately, the subsegment also displays a horizontal scrollbar, but since the grid width is 100%, this scrollbar does nothing and excites the user’s confusion, thinking that there is no more data to see when they try to use it to scroll and nothing are moving.
Is there any way through the jqGrid configuration or CSS “magic” that I can hide this horizontal scrollbar on the subnet grid? I used Chrome dev tools, but there doesn't seem to be a DIV tag specifically associated with the scrollbar, just the title, title and data lines.
Versions:
- JQuery: 1.4.2
- jQueryUI: 1.8.5
- jqGrid: 3.8.1
- Browsers: Chrome 8, IE 8
jQuery(document).ready(function () { jQuery('#ParentGrid').jqGrid({ url: '[URL TO GET DATA]', width: '100%', height: '100%', shrinkToFit: 'false', datatype: 'json', mtype: 'POST', jsonReader: { repeatitems: false }, sortname: 'ParentRowID', sortorder: 'asc', colNames: [ 'Parent Row ID' ], colModel: [ { name: 'ParentRowID', index: 'ParentRowID', width: 110, align: 'left' } ], gridComplete: function () { $('.ui-jqgrid-titlebar-close', '#ParentGrid').remove(); }, subGrid: true, subGridRowExpanded: function (subgrid_id, row_id) { var subgrid_table_id = subgrid_id + '_t'; $('#' + subgrid_id).html("<table id='" + subgrid_table_id + "' cellpadding='0' cellspacing='0'></table>"); $('#' + subgrid_table_id).jqGrid({ url: '[URL TO GET DATA BASED ON PARENT GRID SELECTED ROW ID]', width: '100%', height: '100%', shrinkToFit: 'false', datatype: 'json', mtype: 'POST', jsonReader: { repeatitems: false }, sortname: 'ChildRowID', sortorder: 'asc', colNames: [ 'Child Row ID' ], colModel: [ { name: 'ChildRowID', index: 'ChildRowID', width: 110, align: 'left' } ], gridComplete: function () { $('.ui-jqgrid-titlebar-close', '#' + subgrid_table_id).remove(); } }); } }); });