igGrid - ajax example

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>

<!-- Wait 60 sec to load the data -->
<table id="grid"></table>
<p id="log_complete"></p>

JavaScript

//!!! Wait 60 sec to load the data !!!
$(function () {

//array variable for the data from ajax call
var records = [];
//how many times it is performed
var count = 0;

function getData(){
//set ajax to variable
	var request = $.ajax({
  	//random user api get 1 user at a time
  	url: 'https://randomuser.me/api/',
  	dataType: 'json',
  	contentType: 'application/json; charset=utf-8',
  	async: true,
  	processData: false,
  	cache: false,
  	success: function(data) {
      //get the record from the api
    	let record = {ID: data.results[0].login.salt, FirstName: data.results[0].name.first, LastName: data.results[0].name.last, Email: data.results[0].email, Gender: data.results[0].gender, City: data.results[0].location.city, Country: data.results[0].location.country};
      //add it to the array
    	records.push(record);
  	},
  	complete: function(msg){
  		if(records.length === 60){
  			count++;
        //temp the data
   			let temp = records;
        //rollback
      	$("#grid").igGrid("rollback");
        //set the data
      	$("#grid").igGrid("option", "dataSource", temp);
        //bind
      	$("#grid").igGrid("dataBind");
        //clear the records for another 60 records
      	records = [];
        //how many times it is called
      	$('#log_complete').html(`Data bind ${count} times.`);
        
        //set these to null to clear the ajax before start again
      	request.onreadystatechange = null;
      	request.abort = null;
      	request = null;
   		}
      
      //30 sec - 500
			//60 sec - 1000
      //set timeout to 500 or lower for faster load
   		setTimeout(getData, 1000);
  	},
  	failure: function (msg) {
    	console.log(msg)
  	},
  	error: function (msg) {
    	console.log(msg)
  	}
});
}

//call ajax func
getData();

						//grid
            $("#grid").igGrid({
                primaryKey: "ID",
                width: '100%',
                height: '500px',
                //columns
                columns: [
                   ...