Hello Team,

Previously I had asked about the data not getting displayed and it was solved by placing the file link directly in data source. 

Now my requirement is to place the whole igGrid into a JS file and then call the JS file to display the grid. I have tried various methods to try & fetch the grid but all the other components get loaded while the igGrid component doesn't. 

My architecture is an MVC so the PHP code below will output the HTML page along with the grid. 

JS File Code:

/**
 * Created by on 3/5/2015.
 */
jQuery(function grid($) {


var data = [
    { "ID": 0, "Name": "Food" },
    { "ID": 1, "Name": "Beverages" },
    { "ID": 2, "Name": "Electronics" }
];

$("#combo").igCombo({
        dataSource: data, //JSON Array defined above
 valueKey: "ID",
        textKey: "Name"
 }

);

// Global Variable Declaration:
var studyTypeJSON;
var smallAnimalTypeJSON;
var largeAnimalTypeJSON;
var exoticAnimalTypeJSON;
var specialityJSON;
var relatedReviewsJSON;

studyTypeJSON = [
    { "ID": 0, "Name": "Food" },
    { "ID": 1, "Name": "Beverages" },
    { "ID": 2, "Name": "Electronics" }
];



    //Grid Initialization
 $("#gridProducts").igGrid({
        autoGenerateColumns: false,
        dataSource: "http://localhost:63342/LoginFormV0.3/App//Model/fetchPSData.php",
        primaryKey: "DVMNumber",
        responseDataKey: 'header',
        autoCommit: true,
        autoAdjustHeight: false,
        width: "100%",
        height: "720px",
        columns: [
            {
                headerText: "Record",
                group: [
                    {headerText: "DVM Number", key: "ID", width: "8%"},
                    {headerText: "Referene ID", key: "RefID", dataType: "number", width: "8%"},
                    {headerText: "Date Entered", key: "recordDate", dataType: "date", width: "8%"}
                ]
            },
            {
                headerText: "Citation",
                group: [
                    {headerText: "Authors", key: "author", dataType: "string", width: "8%"},
                    {
                        headerText: "Journal Title / Conference Title",
                        key: "jourTitle",
                        dataType: "string",
                        width: "8%"
 },
                    {headerText: "Title Article", key: "titleArticle", dataType: "string", width: "8%"},
                    {headerText: "Year", key: "year", dataType: "date", width: "6%"},
                    {headerText: "Citation", key: "citation", dataType: "string", width: "8%"},
                    {headerText: "Link", key: "url", dataType: "string", width: "10%"}
                ]
            },
            {
                headerText: "Categories",
                group: [
                    {
                        headerText: "Type of Study",
                        key: "studyType",
                        dataType: "number",
                        width: "10%",
                        formatter: formatStudyCombo
 },
                    {
                        headerText: "Species",
                        group: [
                            {
                                headerText: "Small Animal",
                                key: "smallAnimalType",
                                dataType: "number",
                                width: "10%",
                                formatter: formatSmallAnimalCombo
 },
                            {
                                headerText: "Large Animal",
                                key: "largeAnimalType",
                                dataType: "number",
                                width: "10%",
                                formatter: formatLargeAnimalCombo
 },
                            {headerText: "Exotic Animal", key: "exoticAnimalType", dataType: "number", width: "10%"}
                        ]
                    },
                    {
                        headerText: "Specialty",
                        key: "specialty",
                        dataType: "number",
                        width: "10%",
                        formatter: formatSpecialtyCombo
 },
                    {headerText: "Keywords", key: "keywords", dataType: "string", width: "10%"},
                    {
                        headerText: "Related Reviews",
                        key: "relatedReviews",
                        dataType: "number",
                        width: "10%",
                        formatter: formatRelatedReviewsCombo
 }
                ]
            }
        ],
        features: [{
            name: 'Responsive',
            columnSettings: [
                {
                    columnKey: "ID",
                    configuration: {
                        desktop: {
                            template: "<span style='font-size: 1.1em;'>${ID}</span>"
 }
                    }
                }]
        },{
            name: 'MultiColumnHeaders'
 }, {
            name: 'ColumnMoving'
 }, {
            name: 'Resizing'
 }, {
            name: 'Hiding'
 },
            {
                name: 'Updating',
                editMode: 'cell',
                enableAddRow: false,
                enableDeleteRow: false,
                columnSettings: [{
                    columnKey: "ID",
                    readOnly: true
 }],
                columnSettings: [{
                    columnKey: "RefID",
                    readOnly: true
 }],
                columnSettings: [{
                    columnKey: "recordDate",
                    readOnly: true
 }],
                columnSettings: [{
                    columnKey: "author",
                    readOnly: true
 }],
                columnSettings: [{
                    columnKey: "jourTitle",
                    readOnly: true
 }],
                columnSettings: [{
                    columnKey: "titleArticle",
                    readOnly: true
 }],
                columnSettings: [{
                    columnKey: "year",
                    readOnly: true
 }],
                columnSettings: [{
                    columnKey: "citation",
                    readOnly: true
 }],
                columnSettings: [{
                    columnKey: "url",
                    readOnly: true
 }],
                columnSettings: [{
                    columnKey: "keywords",
                    readOnly: true
 }],
                columnSettings: [
                    {
                        columnKey: "studyType",
                        editorType: 'combo',
                        editorOptions: {
                            mode: "dropdown",
                            dataSource: studyTypeJSON,
                            textKey: "Name",
                            valueKey: "ID"
 }
                    },
                    {
                        columnKey: "smallAnimalType",
                        editorType: 'combo',
                        editorOptions: {
                            mode: "dropdown",
                            dataSource: smallAnimalTypeJSON,
                            textKey: "Name",
                            valueKey: "ID"
 }
                    },
                    {
                        columnKey: "largeAnimalType",
                        editorType: 'combo',
                        editorOptions: {
                            mode: "dropdown",
                            dataSource: largeAnimalTypeJSON,
                            textKey: "Name",
                            valueKey: "ID"
 }
                    },
                    {
                        columnKey: "exoticAnimalType",
                        editorType: 'combo',
                        editorOptions: {
                            mode: "dropdown",
                            dataSource: exoticAnimalTypeJSON,
                            textKey: "Name",
                            valueKey: "ID"
 }
                    },
                    {
                        columnKey: "specialty",
                        editorType: 'combo',
                        editorOptions: {
                            mode: "dropdown",
                            dataSource: specialityJSON,
                            textKey: "Name",
                            valueKey: "ID"
 }
                    },
                    {
                        columnKey: "relatedReviews",
                        editorType: 'combo',
                        editorOptions: {
                            mode: "dropdown",
                            dataSource: relatedReviewsJSON,
                            textKey: "Name",
                            valueKey: "ID"
 }
                    }
                ],
                editRowEnded: function () {
                    //To access the updated igGrid data
 var northwindProductsJSON = $("#gridProducts").igGrid().data().igGrid.dataSourceObject();

                    //Show feedback
 var message = "The grid's data has been updated...";
                    showFeedback("updatedMessage", message);
                }
            },
        ],
        dataBound: function (evt, ui) {

            studyTypeJSON = [
                {"ID": 0, "Name": "Food"},
                {"ID": 1, "Name": "Beverages"},
                {"ID": 2, "Name": "Electronics"}
            ];
        }
    });


    $("#checkAll").on("click", function () {
        checkAll(combo);
    })

    //$("#gridProducts").data("igGrid").dataSource._addChangesSuccessHandler(changesSuccessHandler);
 //$("#gridProducts").igGrid("saveChanges");

 // Function for formatting type of study

 function formatStudyCombo(val) {
        var i, category;
        for (i = 0; i < studyTypeJSON.length; i++) {
            category = studyTypeJSON[i];
            if (category.ID === val) {
                val = category.Name;
            }
        }
        return val;
    }

    // Function for formatting Species

 function formatSmallAnimalCombo(val) {
        var i, category;
        for (i = 0; i < studyTypeJSON.length; i++) {
            category = studyTypeJSON[i];
            if (category.ID === val) {
                val = category.Name;
            }
        }
        return val;
    }

    function formatLargeAnimalCombo(val) {
        var i, category;
        for (i = 0; i < studyTypeJSON.length; i++) {
            category = studyTypeJSON[i];
            if (category.ID === val) {
                val = category.Name;
            }
        }
        return val;
    }

    // Function for formatting Specialty

 function formatSpecialtyCombo(val) {
        var i, category;
        for (i = 0; i < studyTypeJSON.length; i++) {
            category = studyTypeJSON[i];
            if (category.ID === val) {
                val = category.Name;
            }
        }
        return val;
    }

    // Function for formatting Related Reviews

 function formatRelatedReviewsCombo(val) {
        var i, category;
        for (i = 0; i < studyTypeJSON.length; i++) {
            category = studyTypeJSON[i];
            if (category.ID === val) {
                val = category.Name;
            }
        }
        return val;
    }


    function speciesValueChange(comboxValue) {

        var updating = $("#gridProducts").data("igGridUpdating"),
            grid = $("#gridProducts").data("igGrid"),
            ds = grid.dataSource, i, record;

        for (i = 0; i < ds.dataView().length; i++) {

            record = ds.dataView()[i];

            updating.setCellValue(record[grid.options.primaryKey], "Species", comboxValue);

        }
        grid.commit();
    }

    return document.write("hello");
});

PHP File which is calling the code:

$out .= '
<!doctype html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title></title>

 <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="http://cdn-na.infragistics.com/igniteui/2014.2/latest/js/infragistics.core.js"></script>
 <script src="http://cdn-na.infragistics.com/igniteui/2014.2/latest/js/infragistics.lob.js"></script>
 <script src="http://localhost/healthevidence/js/gridDisplay.js"></script>
 <link rel="stylesheet" href="/resources/demos/style.css">

</head>
<body>

<style type="text/css">
 #updatedMessage
 {
 padding-top: 20px;
 }

 @media all and (max-width:280px) {
 #gridProducts {
 font-size: 8px;
 }
 }
</style>

 <h3>Upload New Primary Studies</h3>
 <div>
 <p> Please select the primary studies which you want to upload:</p><br><br>
 <form enctype="multipart/form-data" action="upload.php" method="post">
 File: <input type="file" name="file_upload"><br><br><br>
 <input type="submit">
 </form>
 </div>
 <h3>View / Edit Primary Studies</h3>
 <div id="gridProducts"></div>
 <script>
 grid();
 </script>


</body>
</html>';
?>