JQuery cannot call method before initialization error when calling ignite ui filtering grid method
I am trying to call a filter method on the infragistics ignite ui grid by referencing their example script. They seem to behave fine in their fiddle, but not in my angularjs app. You can find the fiddle here - http://jsfiddle.net/40xgtcry/
In my angular js app, I initialize a grid in an angular directive using some dummy data and then create this by calling the igGridFiltering method.
define(['directives/directives', 'northwind'],
function(directives) {
directives.directive('gridView', function () {
return {
restrict: 'EA',
scope: true,
link: function (scope) {
scope.$on("InventoryDataReady", function (){
// $( '#' + scope.gridSettings.targetId ).igGrid(scope.gridSettings);
$('#' + scope.gridSettings.targetId).igGrid({
autoGenerateColumns: false,
columns: [
{ headerText: "Employee ID", key: "EmployeeID", dataType: "number" },
{ headerText: "First Name", key: "FirstName", dataType: "string" },
{ headerText: "Last Name", key: "LastName", dataType: "string" },
{ headerText: "Birth Date", key: "BirthDate", dataType: "date" },
{ headerText: "City", key: "City", dataType: "string" },
{ headerText: "Postal Code", key: "PostalCode", dataType: "string" }
],
dataSource: northwind,
responseDataKey: "results",
features: [
{
name: "Responsive",
enableVerticalRendering: false,
columnSettings: [
{
columnKey: "EmployeeID",
classes: "ui-hidden-phone"
},
{
columnKey: "PostalCode",
classes: "ui-hidden-phone"
}
]
},
{
name: "Filtering",
type: "local",
mode: "advanced"
}
]
});
$('#' + scope.gridSettings.targetId).igGridFiltering("filter", ([{fieldName: "FirstName", expr: "Nancy", cond: "equals", logic: "OR"}]));
});
}
};
});
});
The grid renders just fine, but calling the filter method throws the following error: 'Error: Can't call methods on igGridFiltering before initialization; tried to call the "filter" method
source to share
For those facing this issue, please note that the apragistics api reference for mesh filtering is inaccurate. In their sample, they initialize their grid to a div in the same way as -
<div id="gridFiltering"></div>
However, it turns out that for some reason the jquery filter widget won't initialize unless you attach the grid to the table.
<table id="gridFiltering"></table>
They seem to do this for other igniteui grid samples, but NOT on the api link for filtering the grid.
source to share
All igGrid functions are initialized in the igGrid table. So there is a difference in whether the mesh is initialized to div
or table
. If the grid is initialized to table
, you can call the filter function directly, for example on the top-level element. Otherwise, you will need to call it on the table.
$('#' + scope.gridSettings.targetId + "_table").igGridFiltering(...);
source to share