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>

  • 15320
    Offline posted

    Hello Calm,

    Can I help you with anything else?

    Tsanna

  • 15320
    Verified Answer
    Offline posted

    Hello Calm,

    We used your code snippet to reproduce similar scenario as yours and after some testing there are two things that you should change:

    1) You should pass the following URL: http://localhost:63342/LoginFormV0.3/App//Model/fetchPSData.php to the grid 'dataSource' option. It seems that the requested via ajax call data is still not fetched before the grid is already initialized, therefore it's recommended to pass the data URL directly to the grid datasource.

    2) You should serialize your data on page loading

    All this changes are demonstrated in the attached sample for your reference. If you have any further questions, please let me know.

    Regards,

    Tsanna

    case-151566.zip