CODEWITHSUNDEEP
jqueryjqgrid
Michael Sobczak
Michael Sobczak

Reputation: 1085

jqgrid: issue with scrolling subgrid

I'm currently using jqgrid 4.8.2 I have a parent grid with a fixed width of 800 px, and a sub grid that is larger. I've set both the parent grid and the child grid so that shrinkToFit is false. A scroll bar for the sub grid appears and works properly. Unfortunately, when I scroll the sub grid, the data row from the parent grid scrolls as well, but not the parent grid header.

I tried to replicate this experience using jsFiddle, but for some reason the jqgrid works differently there. I don't get the scroll bar for the sub grid, even though the code I'm running on my server is exactly the same.

Here's the code I'm using:

var mainGrid = {
  "total": 1,
  "page": 1,
  "pageSize": 20,
  "records": 1,
  "rows": [{
    "siteId": 12516086,
    "siteName": "Detroit",
    "siteAddress": "1 Woodward",
    "siteCitySt": "Detroit, MI",
    "siteZip": "48205",
    "productCd": "ProductX",
    "productName": "Product X",
    "finishedSize": null,
    "estimatedPieceWeight": 0.125,
    "vdpTypeCode": null,
    "taHouseholds": 1071689,
    "taDistribution": 445139,
    "distribution": 445139,
    "avgCpm": 32.32084084084084084084084084084084084084,
    "investment": 19542.8,
    "coverage": 41.54
  }]
};

var subGrid = {
  "total": 1,
  "page": 1,
  "pageSize": 20,
  "records": 2,
  "rows": [{
    "mediaPlanId": 3003,
    "mbuHdrId": 4035986,
    "mbuDtlId": 10442611,
    "commonMbuId": 99731,
    "ggId": 1244425,
    "fkGeoProfileId": 15032061,
    "fkSite": 12516086,
    "wrapZoneId": 15049936,
    "wrapZone": "MI Detroit/ Highland Park/ Hamtramck",
    "productCd": "INS_SHARED",
    "productName": "Insert - Shared Mail",
    "wrapPagePosition": null,
    "finishedSize": null,
    "estimatedPieceWeight": 0.125,
    "vdpTypeCode": null,
    "geocode": "48205D1",
    "zip": "48205",
    "atz": "D1",
    "cityName": "DETROIT, MI",
    "households": 2088,
    "taHouseholds": 2088,
    "distribution": 2092,
    "cpm": 0,
    "investment": 0.0,
    "overallCoverage": 100.191570881226053639846743295019157088,
    "taCoverage": 100.191570881226053639846743295019157088,
    "distance": 0.62,
    "coverageDescDisplay": "Pcd",
    "coverageDesc": "Private Carrier Delivery",
    "ihDate": 1463371200000,
    "ihDay": "M/T",
    "pricingMarket": "MI DETROIT",
    "fkSdmId": 15075973,
    "sdmName": "MI Detroit",
    "fkVariableId": 7039,
    "primaryVariableName": "Candy & Chewing Gum",
    "variableContents": "INDEX",
    "variableValue": 63.52,
    "isSelected": true,
    "isActiveMbuCmn": true,
    "isActiveMbuHdr": true,
    "isActiveMbuDtl": true,
    "isUsedInCbx": true,
    "isBought": true,
    "var1Name": "Candy & Chewing Gum",
    "var1Contents": "INDEX",
    "var1Value": "64",
    "var2Name": "Toys, Games, and Hobbies",
    "var2Contents": "INDEX",
    "var2Value": "74",
    "var3Name": "Casual Dining: Olive Garden",
    "var3Contents": "INDEX",
    "var3Value": "83"
  }, {
    "mediaPlanId": 3003,
    "mbuHdrId": 4035988,
    "mbuDtlId": 10442613,
    "commonMbuId": 99732,
    "ggId": 1244426,
    "fkGeoProfileId": 22973059,
    "fkSite": 12516086,
    "wrapZoneId": 15049936,
    "wrapZone": "MI Detroit/ Highland Park/ Hamtramck",
    "productCd": "INS_SHARED",
    "productName": "Insert - Shared Mail",
    "wrapPagePosition": null,
    "finishedSize": null,
    "estimatedPieceWeight": 0.125,
    "vdpTypeCode": null,
    "geocode": "48205G1",
    "zip": "48205",
    "atz": "G1",
    "cityName": "DETROIT, MI",
    "households": 1156,
    "taHouseholds": 1156,
    "distribution": 1157,
    "cpm": 0,
    "investment": 0.0,
    "overallCoverage": 100.086505190311418685121107266435986159,
    "taCoverage": 100.086505190311418685121107266435986159,
    "distance": 0.74,
    "coverageDescDisplay": "Pcd",
    "coverageDesc": "Private Carrier Delivery",
    "ihDate": 1463371200000,
    "ihDay": "M/T",
    "pricingMarket": "MI DETROIT",
    "fkSdmId": 15075973,
    "sdmName": "MI Detroit",
    "fkVariableId": 7039,
    "primaryVariableName": "Candy & Chewing Gum",
    "variableContents": "INDEX",
    "variableValue": 68.06,
    "isSelected": false,
    "isActiveMbuCmn": true,
    "isActiveMbuHdr": true,
    "isActiveMbuDtl": true,
    "isUsedInCbx": true,
    "isBought": false,
    "var1Name": "Candy & Chewing Gum",
    "var1Contents": "INDEX",
    "var1Value": "68",
    "var2Name": "Toys, Games, and Hobbies",
    "var2Contents": "INDEX",
    "var2Value": "78",
    "var3Name": "Casual Dining: Olive Garden",
    "var3Contents": "INDEX",
    "var3Value": "91"
  }]
};

$(document).ready(function() {
  $("#jqGrid").jqGrid({
    datatype: function(postdata) {

      $('#' + 'load_' + 'jqGrid').show();

      var json = mainGrid;

      for (var i = 0; i < json.rows.length; i++) {
        json.rows[i].id = $.jgrid.randId();
        json.rows[i].siteNameDisp = json.rows[i].siteName + ' - ' +
          json.rows[i].siteAddress + ', ' +
          json.rows[i].siteCitySt + ', ' +
          json.rows[i].siteZip;
      }

      var thegrid = $('#jqGrid')[0];
      thegrid.addJSONData(json);

      $('#' + 'load_' + 'jqGrid').hide();
    },
    page: 1,
    colModel: [{
      label: 'ID',
      name: 'id',
      width: 50,
      hidden: true,
      key: true,
      editable: true,
      sortable: false,
      editrules: {
        edithidden: true
      }
    }, {
      label: 'Site Id',
      name: 'siteId',
      width: 100,
      sortable: false,
      editable: true,
      hidden: true,
      editrules: {
        edithidden: true
      }
    }, {
      label: 'Site',
      name: 'siteNameDisp',
      width: 250,
      sortable: false
    }, {
      label: 'Trade Area Households',
      name: 'taHouseholds',
      width: 100,
      sortable: false,
      formatter: 'number',
      formatoptions: {
        thousandsSeparator: ",",
        decimalPlaces: 0
      },
      align: 'right'
    }, {
      label: 'Trade Area Distribution',
      name: 'taDistribution',
      width: 85,
      sortable: false,
      formatter: 'number',
      formatoptions: {
        thousandsSeparator: ",",
        decimalPlaces: 0
      },
      align: 'right'
    }, {
      label: 'Total Distribution',
      name: 'distribution',
      width: 85,
      sortable: false,
      formatter: 'number',
      formatoptions: {
        thousandsSeparator: ",",
        decimalPlaces: 0
      },
      align: 'right'
    }, {
      label: 'CPM',
      name: 'avgCpm',
      width: 50,
      sortable: false,
      formatter: 'currency',
      formatoptions: {
        decimalSeparator: ".",
        thousandsSeparator: ",",
        decimalPlaces: 2,
        prefix: "$ "
      },
      align: 'right'
    }, {
      label: 'Investment',
      name: 'investment',
      width: 75,
      sortable: false,
      formatter: 'currency',
      formatoptions: {
        decimalSeparator: ".",
        thousandsSeparator: ",",
        decimalPlaces: 2,
        prefix: "$ "
      },
      align: 'right'
    }, {
      label: 'Coverage %',
      name: 'coverage',
      width: 70,
      sortable: false,
      formatter: 'currency',
      formatoptions: {
        decimalSeparator: ".",
        thousandsSeparator: ",",
        decimalPlaces: 2,
        suffix: " %"
      },
      align: 'right'
    }, {
      label: 'Product',
      name: 'productCd',
      width: 150,
      sortable: false,
      editable: true,
      hidden: true,
      editrules: {
        edithidden: true
      }
    }],
    viewrecords: true,
    width: 800,
    shrinkToFit: false,
    //height: '100%',
    rowNum: 20,
    pager: "#jqGridPager",
    subGrid: true,
    subGridRowExpanded: function(subgrid_id, parentRowId) {
      var grid = $("#jqGrid");
      var row = grid.getRowData(parentRowId);
      showDetail(subgrid_id, parentRowId);
    }
  });
});

function showDetail(subgrid_id, parentRowId) {
  var lastSelection;

  var parentGridId = 'jqGrid';

  var grid = $('#' + parentGridId);
  var row = grid.getRowData(parentRowId);
  var siteId = row.siteId;
  var productCode = row.productCd;

  var subgrid_table_id = subgrid_id + "_table";
  var subgrid_pager_id = subgrid_id + "_pager";

  $("#" + subgrid_id).html("<table id=\'" + subgrid_table_id + "' class='scroll'></table>" +
    "<div id=\'" + subgrid_pager_id + "\'></div>");

  $("#" + subgrid_table_id).jqGrid({

    datatype: function(postdata) {
      $('#' + 'load_' + subgrid_table_id).show();

      var json = subGrid;

      for (var i = 0; i < json.rows.length; i++) {
        json.rows[i].taDistribution = json.rows[i].distribution;
        json.rows[i].parentGridId = parentGridId;
        json.rows[i].parentRowId = parentRowId;
      }

      var thegrid = $("#" + subgrid_table_id)[0];
      thegrid.addJSONData(json);
      $('#' + 'load_' + subgrid_table_id).hide();
    },

    editurl: 'clientArray',
    page: 1,

    colModel: [{
        label: 'Site ID',
        name: 'siteId',
        width: 75,
        //key: true,  // The key field must be visible in order for the row to go into edit mode.
        sortable: false,
        editable: true,
        hidden: true,
        editrules: {
          edithidden: true
        }
      }, {
        label: 'Common MBU ID',
        name: 'commonMbuId',
        width: 75,
        //key: true,  // The key field must be visible in order for the row to go into edit mode.
        sortable: false,
        editable: true,
        hidden: true,
        editrules: {
          edithidden: true
        }
      }, {
        label: 'Parent Grid ID',
        name: 'parentGridId',
        width: 75,
        hidden: true
      },

      {
        label: 'Parent Row ID',
        name: 'parentRowId',
        width: 75,
        hidden: true
      }, {
        label: 'Geography',
        name: 'geocode',
        width: 90,
        sortable: true,
        key: true
      }, {
        label: 'City, State',
        name: 'cityName',
        width: 115,
        sortable: true
      }, {
        label: 'TA HHs',
        name: 'taHouseholds',
        width: 50,
        sortable: true,
        formatter: 'number',
        formatoptions: {
          thousandsSeparator: ",",
          decimalPlaces: 0
        },
        align: 'right'
      }, {
        label: 'Distr Qty',
        name: 'distribution',
        width: 50,
        sortable: true,
        formatter: 'number',
        formatoptions: {
          thousandsSeparator: ",",
          decimalPlaces: 0
        },
        align: 'right'
      }, {
        label: 'TA Distr',
        name: 'taDistribution',
        width: 50,
        sortable: false,
        hidden: true,
        formatter: 'number',
        formatoptions: {
          thousandsSeparator: ",",
          decimalPlaces: 0
        },
        align: 'right'
      },

      {
        label: 'CPM',
        name: 'cpm',
        width: 50,
        sortable: true,
        formatter: 'currency',
        formatoptions: {
          decimalSeparator: ".",
          thousandsSeparator: ",",
          decimalPlaces: 2,
          prefix: ""
        },
        align: 'right'
      },

      {
        label: 'Investment',
        name: 'investment',
        width: 90,
        sortable: true,
        formatter: 'currency',
        formatoptions: {
          decimalSeparator: ".",
          thousandsSeparator: ",",
          decimalPlaces: 2,
          prefix: "$ "
        },
        align: 'right'
      },

      {
        label: 'Coverage %',
        name: 'taCoverage',
        width: 85,
        sortable: true,
        formatter: 'currency',
        formatoptions: {
          decimalSeparator: ".",
          thousandsSeparator: ",",
          decimalPlaces: 2,
          suffix: " %"
        },
        align: 'right'
      },

      {
        label: 'Distance',
        name: 'distance',
        width: 75,
        sortable: true,
        formatter: 'number',
        formatoptions: {
          thousandsSeparator: ",",
          decimalPlaces: 2
        },
        align: 'right'
      },

      {
        label: 'Coverage Description',
        name: 'coverageDescDisplay',
        width: 90,
        sortable: true
      },

      {
        label: 'IH Date',
        name: 'ihDate',
        width: 60,
        sortable: true,
        //formatter: dateFormatter,
        align: 'center'
      },

      {
        label: 'IH Day',
        name: 'ihDay',
        width: 60,
        sortable: true,
        align: 'center'
      },

      {
        label: 'Pricing Market',
        name: 'pricingMarket',
        width: 115,
        sortable: true
      }, {
        label: ' ',
        name: 'variableValue',
        width: 90,
        sortable: true,
        hidden: false,
        align: 'right'
      },

      // Variable 1
      {
        label: ' ',
        name: 'var1Value',
        width: 90,
        sortable: true,
        hidden: false,
        align: 'right'
      },

      // Variable 2
      {
        label: ' ',
        name: 'var2Value',
        width: 90,
        sortable: true,
        hidden: false,
        align: 'right'
      },

      // Variable 3
      {
        label: ' ',
        name: 'var3Value',
        width: 90,
        sortable: true,
        hidden: false,
        align: 'right'
      }

    ],
    viewrecords: true,
    //height: '100%',
    shrinkToFit: false,
    width: 1400,
    rowNum: 20,
    pager: "#" + subgrid_pager_id
  });

}

And here's a link to the JS Fiddle:

https://jsfiddle.net/msobczak/bebuyk67/3/

Hopefully the following pictures will help.

  1. Initial grid rendering

initial grid

  1. Grid display after scrolling the sub grid to the right. Notice how the parent grid data columns are no longer in sync with the header columns. In fact, the parent grid columns did not scroll at all.

grid after scrolling sub grid to the right

Upvotes: 2

Views: 1556

Answers (1)

Oleg
Oleg

Reputation: 221997

First of all I have to remark that the demo https://jsfiddle.net/msobczak/bebuyk67/3/, which you included in the text of your question uses my fork of jqGrid: free jqGrid and not commercial Guriddio jqGrid JS 4.8.2 or 5.0.2. The corresponding demo using the latest Guriddio jqGrid JS would be https://jsfiddle.net/OlegKi/bebuyk67/4/.

I made many fixes in free jqGrid. One from the changes, which I can see related to the problem, is the CSS rule

.ui-jqgrid tr.ui-subgrid > td {
    overflow: hidden;
}

If I would add CSS rule to Guriddio jqGrid JS then I get https://jsfiddle.net/OlegKi/bebuyk67/5/, which hold subgrid always inside of the parent grid and the problem which you reported never exist.

UPDATED: If you want to see the horizontal scrollbar in the subgrid the you should reduce it's width by usage of

$("#" + subgrid_table_id).jqGrid("setGridWidth", $("#" + subgrid_id).width());

or, in more easy way, just by replacing explicit width (width: 1400) of subgrid to autowidth: true option. See the demo https://jsfiddle.net/OlegKi/bebuyk67/7/

Upvotes: 2

Related Questions