1
Я использую сетку в версии 16.16.Функция ColumnFixing, не работающая в igGrid
$(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>Это бросает следующее сообщение об ошибке
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.
Если я использую minimalVisibleAreaWidth: 96, сетка становится оказаны. Если я увеличу значение дальше, это будет ошибка.
Пожалуйста, помогите