Ignite UI jQuery Grid column's auto width
HTML
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script src="http://www.igniteui.com/igniteui/js/modules/i18n/infragistics.ui.grid-es.js"></script>
<script src="http://www.igniteui.com/igniteui/js/infragistics.core.js"></script>
<script src="http://www.igniteui.com/igniteui/js/infragistics.dv.js"></script>
<script src="http://www.igniteui.com/igniteui/js/infragistics.lob.js"></script>
<link href="http://www.igniteui.com/igniteui/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
<link href="http://www.igniteui.com/igniteui/css/structure/infragistics.css" rel="stylesheet"></link>
<table id="grid"></table>
JavaScript
$(function () {
var employees = getEmployees();
try {
$("#grid").igGrid({
dataSource: employees,
autoGenerateColumns: false,
width: "1",
primaryKey: "ID",
columns: [{
headerText: "ID",
key: "ID",
hidden: true,
dataType: "number"
}, {
headerText: "Name",
key: "Name",
dataType: "string",
width: "*"
}, {
headerText: "Address",
key: "Address",
dataType: "string",
width: "*"
}],
features: [{
name: "Selection",
mode: 'row',
multipleSelection: false,
activation: true
}, {
name: 'Paging',
type: "local",
pageSize: 10,
pageCountLimit: 9999999
}, {
name: "Updating",
enableAddRow: false,
editMode: null,
enableDeleteRow: false,
columnSettings: [{
columnKey: "ID",
readOnly: true
},{
columnKey: "Name",
readOnly: true
},{
columnKey: "Address",
readOnly: true
}]
}, {
name: "Tooltips"
},{
name: "Sorting",
type: "local",
applySortedColumnCss: false,
mode: "multi",
columnSettings: [{
columnKey: "ID",
allowSorting: false
}]
},{
name: "Filtering",
type: "local",
mode: "advanced",
filterDialogWidth: 500,
...