Hello Team,
I am using igGrid to display data which is been fetched from a php file in the form of a json. I have used every alternative that I could find for fetching data from PHP into the igGrid and none seems to populate the data.
Some issues that I can think of are:
1. The incorrect usage of igGrid.
2. Data is been fetched but because of ajax call, there is a delay in data getting populated.
I would love if some one can provide me insights into this issue.
Below is the code:
PHP File:
<?phpheader("Content-type: application/json");$servername = "localhost";$username = "root";$password = "password";$dbname = "northwind";// Create connection$conn = new mysqli($servername, $username, $password, $dbname);// Check connectionif ($conn->connect_error) { die("Connection failed: " . $conn->connect_error);}$sql = "SELECT firstname FROM employees";$result = $conn->query($sql);$rows = array();if ($result->num_rows > 0) { $i = 1; // output data of each row while ($row = $result->fetch_assoc()) { $rows['header'][] = array('ID' => $i, 'Name' => $row["firstname"], 'CategoryID' => "2"); $i++; } /*// Writing a json file $fp = fopen('../data/results.json', 'w'); fwrite($fp, json_encode($rows)); fclose($fp); */ echo json_encode($rows);}else{ return "0 results";}$conn->close();?>
HTML Code:
<!DOCTYPE html><html><head> <title></title> <!-- Ignite UI Required Combined CSS Files --> <link href="http://cdn-na.infragistics.com/igniteui/2014.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" /> <link href="http://cdn-na.infragistics.com/igniteui/2014.2/latest/css/structure/infragistics.css" rel="stylesheet" /> <script src="http://modernizr.com/downloads/modernizr-latest.js"></script> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script> <!-- Ignite UI Required Combined JavaScript Files --> <script src="../js/infragistics.core.js"></script> <script src="../js/infragistics.lob.js"></script></head><body><style type="text/css"> #updatedMessage { padding-top: 20px; } @media all and (max-width:360px) { #gridProducts { font-size: 14px; } }</style><?php<div id="gridProducts"></div><div id="updatedMessage"></div><script type="text/javascript"> // Global Variable Declaration: var northwindProductsJSON; var northWindCategoriesJSON; // Main Function for fetching values function yourFunction(callback) { $.ajax({ url: "http://localhost:63342/LoginFormV0.3/App//Model/fetchPSData.php", dataType: "json", type: "local", success: function (data) { northwindProductsJSON = data.responseText; }, complete: function (data, textStatus) { //for additional info //alert(data.responseText); //alert(textStatus); northwindProductsJSON = data.responseText; }, error: function(data, textStatus, errorThrown) { alert(textStatus); } }).done(function(result) { callback(result); // invokes the callback function passed as parameter }); ; }; jQuery(function($) { //Formatting for igGrid cells to display igCombo text as opposed to igCombo value /*function PrimaryStudies(callback) { var httpRequest = new XMLHttpRequest(); httpRequest.open('GET', "http://localhost:63342/LoginFormV0.3/App/Model/fetchPSData.php", true); httpRequest.send(); return httpRequest.responseText; //jQuery.getJSON('Model/fetchPSData.php', callback); } PrimaryStudies(function(json) { northwindProductsJSON = json; $("#gridProducts").igGrid("header", "dataSource", northwindProductsJSON); }); new PrimaryStudies();*/ function showFeedback(elementID, message) { var selector = '#' + elementID; $(selector).stop(true, true).html(message) .fadeIn(500).delay(3000).fadeOut(500); } yourFunction(function(result) { northwindProductsJSON = result.responseText; alert(result.responseText); }); //Grid Initialization $("#gridProducts").igGrid({ dataSource: northwindProductsJSON, autoGenerateColumns: false, primaryKey: "ID", type: "local", autoCommit: true, responseDataKey:'header', width: "30%", height: "360px", columns: [ { headerText: "ID", key: "ID", dataType: "number", width: "8%" }, { headerText: "Name", key: "Name", dataType: "string", width: "24%" }, { headerText: "Category", key: "CategoryID", dataType: "number", width: "34%", formatter: formatCategoryCombo } ], features: [ { name: 'Updating', columnSettings: [{ //The combo is defined as an editor provider. Combo options are defined under 'editorOptions'. columnKey: "CategoryID", editorType: 'combo', required: true, editorOptions: { mode: "dropdown", dataSource: northWindCategoriesJSON, textKey: "Name", valueKey: "ID" } }], editRowEnded: function () { //To access the updated igGrid data northwindProductsJSON = $("#gridProducts").igGrid().data().igGrid.dataSourceObject(); //Show feedback var message = "The grid's data has been updated..."; showFeedback("updatedMessage", message); } } ] }); function formatCategoryCombo(val) { var i, category; for (i = 0; i < northWindCategoriesJSON.length; i++) { category = northWindCategoriesJSON[i]; if (category.ID === val) { val = category.Name; } } return val; } });</script></body></html>
Hello Calm,
Can I help you with anything else?
Tsanna