I am currently trying to upgrade my javascript libraries to the latest verion and I am getting an error which baffles me.
The application is MVC4 using our own custom model. It consists of a parent form which calls a fairly complex jquery dialog comprised of several partial views.
One of the partial views starts as empty so I populate its div with a div containing a string. I then call a back end search and after the post has completed I populate the filter using $('#GetSeriesDialogGrid').igGridFiltering("filter", searchDef.getFilterExp());. I get an error telling me the igGridFiltering has not been initialized.
I have a similar issue when, after the grid has populated in the iggridselectionrowselectionchanging event I capture the selected rows for an internal variable. I have fixed this by changing the code to use $("#GetSeriesDialogGrid").igGrid("selectedRows") but when I use the igGridSelection version I get an error that igGridSelection is not initialized.
All the events are set up in the ready code of the main dialog form. The script libraries are loaded in the parent form.
Everything is fine when the scripts are as follows
<script src="../../Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-ui-1.8.11.min.js" type="text/javascript"></script>
but fail when changed to
<script src="../../Scripts/jquery-1.8.3.min.js" type="text/javascript"></script>
Hello bubblesdad,
Thank you for posting in our forums!
Could you please answer the following questions so I may have a better understanding of this issue?
1. What version and build of IgniteUI are you experiencing these errors with? e.g. 13.2.20132.2212
2. Do these errors occur when the grid is placed outside of the dialog?
3. Do you receive any other errors in the browser's console at any time?
4. Would you be able to provide me with the code you are using to define the grid?
5. Can you use any other features of the grid without error?
6. What browsers do these errors occur on?
Looking forward to hearing from you.
Please let me know if you still need help with this issue.
I too have the same issue with any of igGridDFiltering, igGridSelection:
Uncaught Error: cannot call methods on igGridFiltering prior to initialization; attempted to call method 'filter'
Here is my setup:
<link href="http://cdn-na.infragistics.com/igniteui/2015.1/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" /> <link href="http://cdn-na.infragistics.com/igniteui/2015.1/latest/css/structure/infragistics.css" rel="stylesheet" />
<!-- JavaScript Library Dependencies --> <script src="http://modernizr.com/downloads/modernizr-latest.js"></script> <script src="http://code.jquery.com/jquery-1.11.3.js"></script> <script src="http://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<!-- Ignite UI Required Combined JavaScript Files --> <script src="http://cdn-na.infragistics.com/igniteui/2015.1/latest/js/infragistics.core.js"></script> <script src="http://cdn-na.infragistics.com/igniteui/2015.1/latest/js/infragistics.dv.js"></script> <script src="http://cdn-na.infragistics.com/igniteui/2015.1/latest/js/infragistics.lob.js"></script>
Grid definition:
// create grid var jobGrid = $(TEST_JOBS_GRID).igGrid({ width: "100%", height: "650", autoGenerateColumns: false, features: [ { name: "Sorting", type: "local" }, { name: "Selection", mode: 'row', }, { name: "Resizing" }, { name: "Filtering", type: "local", filterDropDownItemIcons: false, filterDropDownWidth: 200 }, { name: 'GroupBy', columnSettings: [ { columnKey: "Tag", isGroupBy: true, //groupComparerFunction: groupByFirstLetter } ], groupByAreaVisibility: "hidden", }, { name: "Updating", enableAddRow: false, editMode: "row", enableDeleteRow: true, } ],
columns: [ { key: "Id", headerText: "ID", width: 'auto' }, { key: "Name", headerText: "Name", width: "350px" }, { key: "Tag", headerText: "Tag", width: "200px" }, { key: "Type", headerText: "Type", width: 'auto' }, { key: "Status", headerText: "Status", width: 'auto' }, { key: "RunsTotal", headerText: 'Runs Total', datatype: "number", width: 'auto' }, { key: "RunsCompleted", headerText: 'Runs Completed', datatype: "number", width: 'auto' }, { key: "Destination", headerText: "Destination", width: 'auto' }, { key: "Destination2", headerText: 'Destination 2', width: 'auto' }, { key: "RandomSeed", headerText: 'Random Seed', datatype: "number", width: 'auto' } ],
});
I fetch the data from server via $adjax as JSON and set as dataSource on the grid.
Please HELP!
SOLUTION:
The grid must be registered as table: <table id="grid"></table>
NOT as a div
How about for the markup developed by the MVC html helper, it generates it as a div