CODEWITHSUNDEEP
angularjsslickgrid
P3anuts
P3anuts

Reputation: 471

Update contents of column header in slickgrid

I am using slickgrid in an angular application which supports multiple languages. How can I update the column headers when the selected language is changed. My column definition looks like this and what I basically want is the grid to call myI18N again to update the column title.

{ id: "myid", name: myI18nFn('idKey'), field: "myid", width: 100}

I have an angular event that detects changes and I have access to the grid object there, I am just not sure on what I need to do make it update the column header

Upvotes: 2

Views: 2745

Answers (2)

Alexandr Chazov
Alexandr Chazov

Reputation: 19

You can also use the next slickgrid method for it:

grid.updateColumnHeader(
   columnId: number | string,
   title?: string | HTMLElement | DocumentFragment,
   toolTip?: string
 )

In your case it will look like grid.updateColumnHeader("myid", myI18nFn('idKey')).

Upvotes: 0

Edward
Edward

Reputation: 3276

You need to update colDef.name property when the language changes and then trigger the grid to rebuild the header row (which occurs in the createColumnHeaders method in the SlickGrid source). The easiest way is to just update the column list with a setColumns call, which triggers a rerender of the entire grid:

function updateColumnHeaders()
{
    var cols = grid.getColumns();
    for(var i = 0, il = cols.length; i < il; i++)
    {
        cols[i].name = myI18nFn(cols[i].id);
    }
    grid.setColumns(cols);
}

Upvotes: 2

Related Questions