igGrid - export visible columns

by georgianastasov

HTML

<script src="https://igniteui.com/js/modernizr.min.js"></script>
<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://igniteui.com/js/external/FileSaver.js"></script>
<script src="https://igniteui.com/js/external/Blob.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>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.excel-bundled.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/modules/infragistics.gridexcelexporter.js"></script>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet"></link>

<div>
  <table id="grid"></table>
</div>

<button id="export" class="btn btn-primary" style="margin-top:1rem;">Export</button>

JavaScript

$(function () {
				var data = [
        		{id: 779397, firstName: "Ben", lastName: "Smith", gender: "male", marks: 100, subject: "Math", city: "New York", address: "address", phone: "123456789", country: "USA"}
        ]
        
				$("#grid").igGrid({
					primaryKey: "id",
					renderCheckboxes: true,
					autoGenerateColumns: false,
					width: "100%",
          height: "350px",
					columns: [
							{ headerText: "Student ID", key: "id", dataType: "number"},
							{ headerText: "First Name", key: "firstName", dataType: "string"},
							{ headerText: "Last Name", key: "lastName", dataType: "string"},
							{ headerText: "Gender", key: "gender", dataType: "string"},
							{ headerText: "Marks", key: "marks", dataType: "number"},
							{ headerText: "Subject", key: "subject", dataType: "string"},
              //hidden columns
							{ headerText: "City", key: "city", dataType: "string", hidden: true},
							{ headerText: "Address", key: "address", dataType: "string", hidden: true},
							{ headerText: "Phone", key: "phone", dataType: "string", hidden: true},
              //end hidden oclumns
							{ headerText: "Country", key: "country", dataType: "string"},
          ],
					dataSource: data,
					});

          $("#export").igButton( {
                labelText: $("#saveChanges").val(),
                click: function(e)
                {
                			$.ig.GridExcelExporter.exportGrid($("#grid"),{
                            fileName: "igGrid",
                            //handle gridFeatureOptions
                            gridFeatureOptions: {
                            		//enable only visible columns to be exported
																hiding: "visibleColumnsOnly"
        										}
                      });
               }
          });
});