The reason I am re-rendering the grid is that, I want the grid to be configurable by the user and 'generate' at runtime with the new set of columns and data binding.

Also, as I said, I am using Angular2. So my implementation of iggrid looks different from js. For example, I use the following to bind datasource / clickevents.

<ig-grid *ngIf="gridOptions" [(ngModel)]="gridOptions" [(dataSource)]="testData" (cellClick)="cellClickHandler($event)"
ngDefaultControl></ig-grid>

Also the gridOptions

this.gridOptions = {
caption: "Form",
primaryKey: "Id",
// dataSource: testData,
// fixedHeaders: true,
width: "100%",
height: "500px",
// autofitLastColumn: false,
columns: [
{ headerText: "Customer ID", key: "CustomerID", width: "100px" },
{
headerText: "Company Information",
group: [
{ headerText: "Company Name", key: "CompanyName", width: "150px" },
{ headerText: "Contact Name", key: "ContactName", width: "150px" },
{ headerText: "Contact Title", key: "ContactTitle", width: "150px" }
]
},
{
headerText: "Address Information", columnKey: "AddressInformation",
group: [
{
headerText: "Local address",
group: [
{ headerText: "Address", key: "Address", width: "150px" },
{ headerText: "City", key: "City", width: "100px" },
{ headerText: "PostalCode", key: "PostalCode", width: "100px" }
]
},
{ headerText: "Country", key: "Country", width: "100px" }
]
}
],
features: [
{
name: 'Resizing'
},
// {
// name: "Responsive",
// enableVerticalRendering: true
// },
{
name: "Sorting",
type: "local",
applySortedColumnCss: false
},
{

// This does not work
name: 'MultiColumnHeaders',
renderMultiColumnHeader: function(event, ui){
console.log("MultiColumnHeaders Feature");
}
}
]
};

What do I need to change to make this work?

Hello Mohamed,

I see that you are trying to use “renderMultiColumnHeader” as if it is an event. That is the likely cause of your issues. “renderMultiColumnHeader” is a method you would call after the grid is setup. For example in your AppComponent you have a function/method that fires on click of a button. In that event you would call “renderMultiColumnHeader” passing in the new column setup you want:

var columns = [
    { headerText: "Customer ID", key: "CustomerID", dataType: "string", width: "100px" },
    { headerText: "Company Information",
        group: [
            { headerText: "Company Name", key: "CompanyName", dataType: "string", width: "150px" },
            { headerText: "Contact Name", key: "ContactName", dataType: "string", width: "150px" },
            { headerText: "Contact Title", key: "ContactTitle", dataType: "string", width: "150px" }
        ]
    }
];

$("#grid1").igGrid("renderMultiColumnHeader", columns);

Do MultiColumnHeaders render for you currently when you first run?
What if you remove the “renderMultiColumnHeader” code where you are trying to set it up as an event?

I am not able to see the MultiColumnHeaders even on my first run. It just negates the 'group' and shows all the columns on same level.

Also with Angular2, we are not using the jquery selectors anywhere. Usually we use gridOptions object in our component to access all the features and ngModel for binding.

Hello Mohamed,

If the multi column headers are not working for you, you may be using an older version as they are working in the current version. I am attaching a sample that demonstrates starting the grid with multi column headers and then changing them on button click. To do this I just the jQuery selector to get the grid and call “renderMultiColumnHeader”.

Note for using the gridOptions, that is for the initial setup of the grid. If you want to modify the grid when running you have to get a handler to the grid and call its methods.