Hello Izac, 

The Grid MVC helper generates a main target element of type table as well as js code for the actual initialization of the igGrid widget.

For example the following MVC code: 

    @(Html.Infragistics()

        .Grid(Model)

        .ID("Grid")

…

 Would generate:

• A html target element with the specified id:

<table id=’Grid’ …> </table>

• JS initialization code for the grid with the specified options:

$('#Grid').igGrid({ … });

 Post grid initialization it is possible for the target element to be wrapped in a div (for example if the initialized grid is scrollable), however the target element always remains the same (always the original table with the specified id).

So you shouldn’t have any issues with the  calling API methods on the main grid element: $(“#Grid”). 

Let me know if you have any additional questions or concerns.

Regards,

Maya Kirova

How about for the markup developed by the MVC html helper, it generates it as a div 

SOLUTION:

The grid must be registered as table: <table id="grid"></table>

NOT as a div

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!

Hello bubblesdad,

Please let me know if you still need help with this issue.