Forums Ignite UI for jQuery
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Calm Winds
90
igGrid Not Displaying Data
posted

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:

<?php
header("Content-type: application/json");
$servername = "localhost";
$username = "root";
$password = "password";
$dbname = "northwind";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection

if ($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>

Parents
No Data
Reply Children
No Data