CODEWITHSUNDEEP
jqueryinfragisticsignite-uiiggrid
pavan kumar k
pavan kumar k

Reputation: 49

ColumnFixing feature not working in igGrid

I am using grid in infragistics 16.2 version.

$(function() {
  var options = {
    "columns": [{
      "headerText": "<span class='text-center header prewrap' attrcol='false'title='Product'>Product<\/span>",
      "key": "C0",
      "width": 246,
      "actualWidth": 246
    }, {
      "headerText": "<span class='text-center header'  data-uid=C1;C2;C3 title='Dollar Sales'>Dollar <br/>Sales<\/span>",
      "key": "C1C2C3",
      "width": 114,
      "oheaderText": "Dollar Sales"
    }],
    "alternateRowStyles": false,
    "enableHoverStyles": false,
    "autoGenerateColumns": false,
    "virtualizationMode": "continuous",
    "avgRowHeight": 32,
    "autofitLastColumn": false,
    "width": "360px",
    "rowVirtualization": false,
    "height": "100%",
    "features": [{
      "name": "ColumnFixing",
      "showFixButtons": false,
      "fixingDirection": "left",
      "minimalVisibleAreaWidth": 150,
      "columnSettings": [{
        "columnKey": "C0",
        "isFixed": true,
        "allowFixing": false
      }, {
        "columnKey": "C1C2C3",
        "isFixed": false,
        "allowFixing": false
      }]
    }],
    "gridPageInfo": {
      "currentRowPageNum": 1,
      "currentColPageNum": 1,
      "totalRowPage": 1,
      "totalColPage": 1,
      "rowPerPage": 250,
      "colPerPage": 2147483647
    },
    "dataSource": [{
      "C0": "<span class=\"ellipsis align-left fixedCol\" data-uid='R1' dimname='Product' data-status='collapsed'  title='AISLE-CARBONATED SOFT DRINKS'  style=\"padding-left:0px\">AISLE-CARBONATED SOFT DRINKS<\/span>",
      "C1C2C3": "<span rawval='400263603.33634156' data-uid='C1;C2;C3' class=\"ellipsis align-right\" title='$400,263,603' style=\"\">$400,263,603<\/span>"
    }, {
      "C0": "<span class=\"ellipsis align-left fixedCol\" data-uid='R2' dimname='Product' data-status='collapsed'  title='AISLE-COFFEE & TEA'  style=\"padding-left:0px\">AISLE-COFFEE & TEA<\/span>",
      "C1C2C3": "<span rawval='237118864.48523393' data-uid='C1;C2;C3' class=\"ellipsis align-right\" title='$237,118,864' style=\"\">$237,118,864<\/span>"
    }, {
      "C0": "<span class=\"ellipsis align-left fixedCol\" data-uid='R3' dimname='Product' data-status='collapsed'  title='AISLE-DRINK MIXES'  style=\"padding-left:0px\">AISLE-DRINK MIXES<\/span>",
      "C1C2C3": "<span rawval='34350880.31351226' data-uid='C1;C2;C3' class=\"ellipsis align-right\" title='$34,350,880' style=\"\">$34,350,880<\/span>"
    }, {
      "C0": "<span class=\"ellipsis align-left fixedCol\" data-uid='R4' dimname='Product' data-status='collapsed'  title='AISLE-JUICES'  style=\"padding-left:0px\">AISLE-JUICES<\/span>",
      "C1C2C3": "<span rawval='129576492.33320642' data-uid='C1;C2;C3' class=\"ellipsis align-right\" title='$129,576,492' style=\"\">$129,576,492<\/span>"
    }, {
      "C0": "<span class=\"ellipsis align-left fixedCol\" data-uid='R5' dimname='Product' data-status='collapsed'  title='AISLE-NON-FRUIT DRINKS'  style=\"padding-left:0px\">AISLE-NON-FRUIT DRINKS<\/span>",
      "C1C2C3": "<span rawval='13803085.046566382' data-uid='C1;C2;C3' class=\"ellipsis align-right\" title='$13,803,085' style=\"\">$13,803,085<\/span>"
    }, {
      "C0": "<span class=\"ellipsis align-left fixedCol\" data-uid='R6' dimname='Product' data-status='collapsed'  title='AISLE-SPORTS/ENERGY DRINKS'  style=\"padding-left:0px\">AISLE-SPORTS/ENERGY DRINKS<\/span>",
      "C1C2C3": "<span rawval='238951247.71143132' data-uid='C1;C2;C3' class=\"ellipsis align-right\" title='$238,951,248' style=\"\">$238,951,248<\/span>"
    }, {
      "C0": "<span class=\"ellipsis align-left fixedCol\" data-uid='R7' dimname='Product' data-status='collapsed'  title='AISLE-WATER'  style=\"padding-left:0px\">AISLE-WATER<\/span>",
      "C1C2C3": "<span rawval='169492202.71100083' data-uid='C1;C2;C3' class=\"ellipsis align-right\" title='$169,492,203' style=\"\">$169,492,203<\/span>"
    }]
  }
  $("#test").igGrid(options);


});
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script>

<link rel="stylesheet" href="https://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css"></link>
<link rel="stylesheet" href="https://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css"></link>
<table id="test"></table>

It's throwing following error

VM509 infragistics.lob.js:159 Uncaught Error: Initial fixing could not be applied for column with key: C0. Reason: This column cannot be fixed. Its width exceeds the available space for fixing a column in the grid.

If I use minimalVisibleAreaWidth : 96, the grid is getting rendered. If I increase the value further, it's throwing the error.

Please help

Upvotes: 1

Views: 699

Answers (1)

Martin Pavlov
Martin Pavlov

Reputation: 462

The igGrid includes the vertical scrollbar width when calculating the available width to fix a column. In Windows the width of the scrollbar is 17px, so if you add those to your calculations the grid won't throw an error.

In your case you have set grid height to be 100% and there will be no vertical scrollbar, so the grid should not account for it. That's an issue that you should report to the Infragistics Support.

Upvotes: 1

Related Questions