Hello Rohit,

Thank you for posting in our community!

I have been looking into your question and what I could say is that the igGrid as well as several other controls like the igTreeGrid, igHierarchicalGrid, igCombo, igEditors, etc. are standalone controls which means that they can be initialized independently.

For example, an igGrid can be initialized as simple as the following:

$("#grid").igGrid({
    dataSource: data,
});

Here could be found a full list of all the Ignite UI for jQuery controls.

The ig.GridExcelExporter (as its name states) is a feature of the grid, it is used to export the igGrid, igTreeGrid and igHierarchicalGrid controls to Excel. This means that it is dependent on a grid and in order to use it, you should have an initialized grid first as this is the sole purpose of the control – to export an instance of a grid to Excel.

More useful information could be found in our Grid Excel Exporter Overview topic here.

Regarding the ui.igGridCellMerging and the other grid features which could be found here, what I could say is that they cannot be used independently without being initialized first.

For example, consider the following configuration:

<button id="filterButton">Filter</button>
<table id="grid"></table>

$("#filterButton").on("click", function () {
    $("#grid").igGridFiltering("filter", [
        {
            fieldName: "FirstName",
            expr: "Downs",
            cond: "equals",
            logic: "AND",
        },
    ]);
});

$("#grid").igGrid({
    autoGenerateColumns: false,
    dataSource: data,
    columns: [
        { headerText: "First Name", key: "FirstName", dataType: "string" },
        { headerText: "Last Name", key: "LastName", dataType: "string" },
    ],
    features: [
        {
            name: "Filtering",
        },
    ],
});

In the above code, we want to filter the "FirstName" column with the value "Downs" by using an external button and this is achieved by using the igGridFiltering feature’s filter method.

This configuration will work as expected and the grid will be filtered when clicking the button since the igGridFiltering feature is initialized:

features: [
    {
        name: "Filtering",
    },
],

However, if you initialize the grid like the following:

$("#grid").igGrid({
    autoGenerateColumns: false,
    dataSource: data,
    columns: [
        { headerText: "First Name", key: "FirstName", dataType: "string" },
        { headerText: "Last Name", key: "LastName", dataType: "string" },
    ],
    features: [
        MISSING FILTERING FEATURE
    ],
});

The grid will not be filtered, and the following error will be displayed in the console:

Uncaught Error: cannot call methods on igGridFiltering prior to initialization; attempted to call method 'filter'

This is true for all grid features.

Here could be found a small sample that demonstrates the above. Click the "Filter" button and you will see that the grid is filtered successfully. Then, remove the Filtering feature, click the "Filter" button, and observe the DevTools Console.

To conclude, the grid features’ methods can be used inside or outside the grid configuration only when the respective feature is initialized first, i.e., it is listed inside the features option. The ig.GridExcelExporter is an exception, it does not need and cannot be listed inside the features option, however, as previously mentioned, in order to use it, you should have an instance of a grid.

A simple way to distinguish the grid features from the controls is to look into the name of the feature: igGridSomething.

Please look into the provided resources and let me know if you need any further information regarding this matter.

Sincerely,
Riva Ivanova
Associate Software Developer