igGrid - ajax adapted sample

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://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://igniteui.com/js-data/northwind"></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>

<table id="grid"></table>
<p id="log_complete"></p>

JavaScript

$(function () {

var records = [];
var count = 0;

function getData(){
		var request = $.ajax({
  	url: 'https://api.npoint.io/266b239456c684e2acac',
  	dataType: 'json',
  	contentType: 'application/json; charset=utf-8',
  	async: true,
  	processData: false,
  	cache: false,
  	success: function(data) {
    	records = data;
  	},
  	complete: function(msg){
  		count++;
			let temp = records;
			$("#grid").igGrid("rollback");
			$("#grid").igGrid("option", "dataSource", temp);
			$("#grid").igGrid("dataBind");
			records = [];
			$('#log_complete').html(`Data bind ${count} times.`);

			request.onreadystatechange = null;
			request.abort = null;
      request = null;

			setTimeout(getData, 60000);
  	},
  	failure: function (msg) {
    	console.log(msg)
  	},
  	error: function (msg) {
    	console.log(msg)
  	}
});
}

getData();

            $("#grid").igGrid({
                primaryKey: "Id",
                width: '100%',
                height: '500px',
                columns: [
                    { headerText: "Id", key: "Id", dataType: "string" },
                    { headerText: "Remark", key: "Remark", dataType: "string" },
                    { headerText: "PrettyName", key: "PrettyName", dataType: "string"},
                    { headerText: "Description", key: "Description", dataType: "string"},
                    { headerText: "CheckDateTime", key: "CheckDateTime", dataType: "date"},
                    { headerText: "ExtraInfo", key: "ExtraInfo", dataType: "number"},
                    { headerText: "Status", key: "Status", dataType: "int"},
                ],
                autofitLastColumn: false,
                autoGenerateColumns: false,
            });
        });