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>';?>
Hi,
Did you manage to resolve your issue? If I can provide further assistance, please let me know.
Regards,
Tsanna
Hi Calm,
Can you send me your application or some isolated version of it that demonstrates the issue in order to test it on my side? As you can see from the sample that I've recently attached is that everything works properly when the grid is loaded from external js file and since I'm not aware of your application's structure I need to take a look at it in order to assist you efficiently.
Waiting for your reply.
Hello Tsanna,
Thank you for the example. I got it to work as a standalone, but its not working as part of my application. I have created a small visual representation of what I am trying to achieve. Hope it helps.
I assume that the issue is related to the way that you're using the jQuery document.ready function. If you want to pass a named function to $(document).ready() instead of passing an anonymous function, here is the way to do this:
// Passing a named function instead of an anonymous function. function readyFn( jQuery ) { // Code to run when the document is ready.} $( document ).ready( readyFn );
In your case, the grid could be wrapped in the following function, for instance:
function grid($){
//grid configuration
}
and on the page you may call it using:
$( document ).ready(grid);
I'm attaching a sample with similar scenario for your reference.
If you have further questions, please let me know.