CODEWITHSUNDEEP
angularjsag-grid
undefined
undefined

Reputation: 3622

ag-grid custom header with html

I am trying to use ag-grid to display the data. I want to have HTML tags inside the Header column, but that doesn't seems to be working. I have previous knowledge working with ui-grid but this ag-grid is new to me, so not sure where I am missing. Here is what I have tried till now:

var columnDefs = [
                   {headerName: "Workload", field: "workload"},
                   {headerName: "units", "field": "units"}
                 ];

Grid Options:

$scope.gridOptionsObject = {
                            columnDefs: columnDefs,
                            rowData: $scope.rowData,
                            headerCellRenderer: (params) =>
                                {return headerCellRendererFunc(params)}
                        };

// Header cell renderer function:

        var headerCellRendererFunc = function(params) {
            var headerColDef = params.colDef;
            headerColDef.name =  headerColDef.headerName;
            headerColDef.isMetadata = false;
            return '<h1 column="headerColDef"></h1>';
        }

Can anyone help me out here.

Upvotes: 7

Views: 50317

Answers (6)

Anuj Gupta
Anuj Gupta

Reputation: 1

Just write the headerName property of ColDef(columnDefs: ColGroupDef[];) as

headerName: 'You message' + '<some-html>Message to display</some-html>'

Upvotes: -2

Louis Moore
Louis Moore

Reputation: 91

I'm a developer at ag-Grid, hopefully I'll be able to help you out with this.

This behaviour is very easily achieved using a header template, which allows for simple UI customisations of the default header component.

//Athlete column definition
  {
        minWidth: 150,
        field: 'athlete',
        headerComponentParams: {
            template:
                '<div class="ag-cell-label-container" role="presentation">' +
            '  <span ref="eMenu" class="ag-header-icon ag-header-cell-menu-button"></span>' +
            '  <div ref="eLabel" class="ag-header-cell-label" role="presentation">' +
            '    <span ref="eSortOrder" class="ag-header-icon ag-sort-order" ></span>' +
            '    <span ref="eSortAsc" class="ag-header-icon ag-sort-ascending-icon" ></span>' +
            '    <span ref="eSortDesc" class="ag-header-icon ag-sort-descending-icon" ></span>' +
            '    <span ref="eSortNone" class="ag-header-icon ag-sort-none-icon" ></span>' +

            //The line below is the key for achieving the solution
            '    <a href="https://ag-grid.com" target="_blank"> <span ref="eText" class="ag-header-cell-text" role="columnheader"></span></a>' +

            '    <span ref="eFilter" class="ag-header-icon ag-filter-icon"></span>' +
            '  </div>' +
            '</div>'
        },
}

To use a header template we add it to the template property of the headerComponentParams column property, in the column definitions of our chosen column (we chose the athlete column for this example). We've focused on customising the eText element here (highlighted above), this is the text in the column header. To transform the value to a hyperlink we've simply wrapped it in an anchor tag.

Here is a demo created using Angular: https://plnkr.co/edit/DVCbltCbbamkNqMo

Here is a blog covering this topic (link to blog) and here is the page in our docs which covers header templates (link to the docs)

Upvotes: 9

undefined
undefined

Reputation: 3622

*UPDATE: This only works for older versions of AgGrid (v18 and possibly some newer versions, but definitely not working as of v22.1.1)*

So finally I found a solution. This can be easily done without any special treatment for the header. Simply define the template for the header and use.

var header_template = '<span class="text-danger" style="height:30px;">Some Value </span>';

and then define columnDefs:

columnDefs = [];
customColumn = {headerName: header_template, field: name};
columnDefs.push(customColumn);

Upvotes: 0

Wimukthi Rajapaksha
Wimukthi Rajapaksha

Reputation: 1019

First of all you can create a component. Then initialize that component to the attribute of headerComponentFramework of columnDefs.

this.gridOptions.columnDefs = [
      {
        headerComponentFramework: StylingHeaderComponent,
        filter: 'agTextColumnFilter',
        field: 'name',
        cellRendererFramework: StylingsNameComponent,
      },
    ];

Upvotes: 7

Inerc
Inerc

Reputation: 23

In my project I did something like this:

headerCellTemplate = function () {
                    var eCell = document.createElement('span');
                    eCell.innerHTML = '<div></div>'
                    return eCell;
                };

Upvotes: 2

Jarod Moser
Jarod Moser

Reputation: 7338

First, please note from the docs:

Header components (explained above) replace the need for header rendering. If using header rendering, you should refactor your code to use header components instead. Support for header rendering will be dropped in ag-Grid v9.

That's if you plan on upgrading to using the latest features of the grid.

Now to answer your question... what you are returning from your headerCellRendererFunc is going to be the same for each column, an empty h1 tag. It should display the column name if you do this instead:

return '<h1 column="headerColDef">' + headerColDef.name + '</h1>';

Upvotes: 0

Related Questions