igGrid - copy paste from excel

by georgianastasov

HTML

<!-- Required scripts -->
<script src="https://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.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>
<!-- Data -->
<script src="https://igniteui.github.io/help-samples/data-files/nw-employees.js"></script>
<!-- External files for exporting -->
<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>
<!-- Ignite UI for jQuery Required Combined CSS Files -->
<link href="https://cdn-na.infragistics.com/igniteui/2022.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet">
<link href="https://cdn-na.infragistics.com/igniteui/2022.2/latest/css/structure/infragistics.css" rel="stylesheet">




<!-- Required scripts -->
<fieldset id="pasteOptions" class="explorer">
		<label for="pasteMode">Select Paste mode:</label>
		<input id="pasteMode">
	</fieldset>
<fieldset class="explorer">
		<table id="grid"></table>
    <input type="button" id="exportButton" value="Export" />
	</fieldset>
<fieldset id="editingOptions" class="explorer">
			<input type="button" id="saveChanges" class="button-style" value="Save Changes">
			<input type="button" id="undo" class="button-style" value="Undo">
			<input type="button" id="redo" class="button-style" value="Redo">
</fieldset>

JavaScript

$(function () {
	//paste mode variable
	var pasteMode = "Paste data as new records", updates;
  
  //grid variable
	var grid = $("#grid");

	//editors and buttons
	$("#pasteMode").igCombo({
		mode: "dropdown",
		width: "300px",
		dataSource: [
			 "Paste data as new records",
			 "Paste starting from active cell"
		],
    //change the text in the combo based on the selection
    //get the paste mode
		selectionChanged: function (evt, ui) {
			if (ui.items.length == 1) {
				pasteMode = ui.items[0].data.value;
			}
		}
	});

	//button for the editing
	$("#saveChanges").igButton({ labelText: $("#saveChanges").val(), disabled: true });
	$("#undo").igButton({ labelText: $("#undo").val(), disabled: true });
	$("#redo").igButton({ labelText: $("#redo").val(), disabled: true });

	//on undo click clear last edit
	$("#undo").on('igbuttonclick',
		function (e, args) {
			updates = $.extend({}, grid.data('igGrid').pendingTransactions());
			$.each(updates, function (index, transaction) {
				grid.igGrid("rollback", transaction.rowId, true);
			});
			$("#redo").igButton("option", "disabled", false);
			$("#undo").igButton("disable");
			$("#saveChanges").igButton("disable");
			return false;
		}
	);

	//on redo click revert to the last edit
	$("#redo").on('igbuttonclick',
		function (e) {
			$.each(updates, function (index, transaction) {
				switch (transaction.type) {
					case "row":
						grid.igGridUpdating('updateRow', transaction.rowId, transaction.row, null, false);
						break;
					case "newrow":
						grid.igGridUpdating('addRow', transaction.row, false);
						break;
					case "deleterow":
						grid.igGridUpdating('deleteRow', transaction.rowId, false);
						break;
				}

			});
			$(this).igButton("disable");
			$("#undo").igButton("option", "disabled", false);
			$("#saveChanges").igButton("option", "disabled", false);
		}
	);

	//on save changes click save the edits
	$("#saveChanges").on('igbuttonclick',
	   function (e) {
	   	grid.igGrid("commit");
	  ...