CODEWITHSUNDEEP
javascriptjqueryag-grid
Swishy
Swishy

Reputation: 44

How to allow user to change column name's in AG-GRID?

I am looking to allow my users to change the column header names to whatever they would like in ag-grid. I am using the javascript implementation.

I could not find an example of anyone doing this on stack overflow or the documentation, my initial idea is to create a new header component and add my own code to handle it that way via the ag grid api.

I found this page https://www.ag-grid.com/javascript-data-grid/component-header/

It does not appear to have the default header component as an example. And I would like to use that to start off with... So my question is either:

  1. Does anyone know of an example or better method which achieves what I am trying to do? Or
  2. Would anyone please be able to point me to where I could find the code of the default ag grid header component, which I can use to start off with, and alter using the example given in the documentation linked above.

Upvotes: 1

Views: 1663

Answers (2)

Alan Richardson
Alan Richardson

Reputation: 191

I allow the user to edit column names in my table editor application which is based on AG Grid Community.

Table Editor App: https://eviltester.github.io/grid-table-editor/

I do this using a custom header.

The source for my custom header is here: https://github.com/eviltester/grid-table-editor/blob/master/customHeader.js

I based my header on the header templates from AG Grid documentation:

https://www.ag-grid.com/javascript-data-grid/column-headers/#header-templates

My header is:

   <div class="customHeaderTop">
    <div class="customFilterMenuButton">
        <i class="ag-icon ag-icon-filter"></i>
    </div>
    <div class="customHeaderLabel">${this.agParams.displayName}</div>
    <div class="customSort">
      <span class="customSortDownLabel inactive">
          <i class="ag-icon ag-icon-desc"></i>
      </span>
      <span class="customSortUpLabel inactive">
          <i class="ag-icon ag-icon-asc"></i>
      </span>
      <span class="customSortRemoveLabel inactive">
          <i class="ag-icon ag-icon-cancel"></i>
      </span>
    </div>
  </div>
  <div class="headerbuttons">
    <span title="add left" onclick="addNeighbourColumnId(-1,'${this.agParams.column.colId}')">[<+]</span>
    <span title="rename" onclick="renameColId('${this.agParams.column.colId}')">[~]</span>
    <span title="delete" onclick="deleteColId('${this.agParams.column.colId}')">[x]</span>
    <span title="duplicate" onclick="duplicateColumnId(1,'${this.agParams.column.colId}')">[+=]</span>
    <span title="add right" onclick="addNeighbourColumnId(1,'${this.agParams.column.colId}')">[+>]</span>
  </div>

Renaming the column itself can be done using the API:

    renameColId(id,name){

        var colDefs = this.gridApi.getColumnDefs();
        var editColDef;
        colDefs.forEach(colDef =>{
            if(colDef.colId==id){
              editColDef = colDef;
            }
          })
        editColDef.headerName = name;
        this.gridApi.setColumnDefs(colDefs);
    }

Upvotes: 1

Josef Bl&#225;ha
Josef Bl&#225;ha

Reputation: 1113

This is how the default header template looks like. You could use it as a base to define your custom header component. Instead of those ref attributes, you need to inline component parameters, bind events etc. as shown in the example of header components.

<div class="ag-cell-label-container" role="presentation">
    <span ref="eMenu" class="ag-header-icon ag-header-cell-menu-button" aria-hidden="true"></span>
    <div ref="eLabel" class="ag-header-cell-label" role="presentation">
        <span ref="eText" class="ag-header-cell-text"></span>
        <span ref="eFilter" class="ag-header-icon ag-header-label-icon ag-filter-icon" aria-hidden="true"></span>
        <span ref="eSortOrder" class="ag-header-icon ag-header-label-icon ag-sort-order" aria-hidden="true"></span>
        <span ref="eSortAsc" class="ag-header-icon ag-header-label-icon ag-sort-ascending-icon" aria-hidden="true"></span>
        <span ref="eSortDesc" class="ag-header-icon ag-header-label-icon ag-sort-descending-icon" aria-hidden="true"></span>
        <span ref="eSortNone" class="ag-header-icon ag-header-label-icon ag-sort-none-icon" aria-hidden="true"></span>
    </div>
</div>

Source: https://www.ag-grid.com/javascript-data-grid/column-headers/#header-templates

Upvotes: 1

Related Questions