Implementing Icons in Custom Headers of AG Grid Using vue js

I am working on implementing a new feature in AG Grid where I want to display an info icon in the header along with a tooltip that appears when the icon is hovered over. I have already created a custom tooltip component that works correctly, but once I add the icon, the default sorting and filters are removed.

import Vue from "vue";

export default Vue.extend({
    template: `
      <div>
        <div>
      {{ params.headerName }}
      <v-tooltip  bottom max-width="200">
          <template v-slot:activator="{ on }">  
            <i v-on="on" class="custom-info info circle icon"></i>
            </template>
          <span>{{params.toolTipText}}</span>
        </v-tooltip>
       </div>
      </div>  
      `,
    data: function() {
        return {

        };
    },
    beforeMount() {},
    mounted() {
        //   console.log("header components",params.value);
    },
    methods: {

    },

}, );


**
Column Defs Code: **
    Here is the column definition code
for the "ndc11" field.

field: "ndc11",

    filter: "agNumberColumnFilter",
    headerComponent: 'customTooltipIcon',
    headerComponentParams: {
        headerName: "NDC11",
        toolTipText: "NDC11"
    },
    pinned: "left",
    cellClass: params => {
        if (
            params.data &&
            params.data.ion_dispute_code &&
            params.data.ion_dispute_code.length &&
            (params.data.ion_dispute_code.includes("O") ||
                params.data.ion_dispute_code.includes("N") ||
                params.data.ion_dispute_code.includes("U") ||
                params.data.ion_dispute_code.includes("G"))) {
            return "validation-grid-cell-red"
        }
    },
    cellRenderer: "ndc11Render",
    sort: "asc"
},
javascriptvue.jsvuejs2ag-gridag-grid-vue

Answer №1

due to the fact that you are overwriting the ag-grid header with your own custom one and neglecting to include sorting and filtering in it

here's an example of how it should be structured:

export default Vue.extend({
template: `
<div>
  <div
    v-if="params.enableMenu"
    ref="menuButton"
    class="customHeaderMenuButton"
    @click="onMenuClicked($event)"
  >
    <i class="fa" :class="params.menuIcon"></i>
  </div>

  <div class="customHeaderLabel">{{ params.headerName }}</div>

  <v-tooltip  bottom max-width="200">
    <template v-slot:activator="{ on }">  
      <i v-on="on" class="custom-info info circle icon"></i>
    </template>
    <span>{{ params.toolTipText }}</span>
  </v-tooltip>

  <div
    v-if="params.enableSorting"
    @click="onSortRequested('asc', $event)"
    :class="ascSort"
    class="customSortDownLabel"
  >
    <i class="fa fa-long-arrow-alt-down"></i>
  </div>

  <div
    v-if="params.enableSorting"
    @click="onSortRequested('desc', $event)"
    :class="descSort"
    class="customSortUpLabel"
  >
    <i class="fa fa-long-arrow-alt-up"></i>
  </div>

  <div
    v-if="params.enableSorting"
    @click="onSortRequested('', $event)"
    :class="noSort"
    class="customSortRemoveLabel"
  >
    <i class="fa fa-times"></i>
  </div>
</div>
`;
data: function () {
    return {
        ascSort: null,
        descSort: null,
        noSort: null
    };
},
beforeMount() {},
mounted() {
    this.params.column.addEventListener('sortChanged', this.onSortChanged);
    this.onSortChanged();
},
methods: {
    onMenuClicked() {
        this.params.showColumnMenu(this.$refs.menuButton);
    },

    onSortChanged() {
        this.ascSort = this.descSort = this.noSort = 'inactive';
        if (this.params.column.isSortAscending()) {
            this.ascSort = 'active';
        } else if (this.params.column.isSortDescending()) {
            this.descSort = 'active';
        } else {
            this.noSort = 'active';
        }
    },

    onSortRequested(order, event) {
        this.params.setSort(order, event.shiftKey);
    }
}
});

the example referenced ag-grid documentation for further information: https://www.ag-grid.com/javascript-grid-header-rendering/#vueCellEditing

further details on how header components work and how custom header components should operate can also be found here https://www.ag-grid.com/javascript-grid-header-rendering/#vueCellEditing

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

JS Executing functions in a pop-up window

Recently, I have been immersing myself in learning JS and experimenting with webpage interactions. It started with scraping data, but now I am also venturing into performing actions on specific webpages. For example, there is a webpage that features a butt ...

javascriptweb-scraping

Exploring the depths of nested object arrays and navigating through historical indexes

I am working with nested object arrays within an array and looking to determine the path of a specific key. For instance: const dataList = [ [ [{id: 100,name: 'Test1'}, {id: 120,'Test12'}], [{id: 101,name: 'Test1&apo ...

javascript

Using a comma as a parameter separator is not valid

Having trouble setting up a WhatsApp button with a custom message, I wrote a JavaScript script and called it using onclick. I've tried adjusting quotation marks but nothing seems to be working. This issue might seem minor, but as a beginner in coding ...

javascriptphp

The functionality of the JavaScript animated placeholder seems to be malfunctioning

I am currently working on a code that updates the placeholder text every 2 seconds. The idea is to have it type out the letters one by one, and then erase them in the same manner. Unfortunately, the code is not functioning as expected. As a newcomer to J ...

javascriptjqueryarrays

Retrieving the correct selected value from multiple select tables created through a for loop can be achieved using JavaScript or jQuery

Despite searching Google and asking previous questions, I have not found a solution that addresses my specific issue. The common responses only pertain to one select element with multiple options. To further clarify, when I create code for a loop to genera ...

javascriptjqueryjsonajaxdom-events

Encountering an issue with Spring and AngularJS, as I am receiving an HTTP Status 404 error message

I'm encountering an HTTP Status 404 error within my controller. Server code @RequestMapping(value="/showMsg/", method=RequestMethod.GET,produces= { "application/json" })' public ResponseBody String show(){ HashMap hash = new HashMap(); ...

javascriptjavaangularjsspring

Sending data with React using POST request

Currently in my React application, I have a form that includes fields for username and password (with plans to add "confirm password" as well). When submitting the form, I need it to send JSON data containing the email and password in its body. The passwo ...

javascriptnode.jsreactjspostaxios

"Encountering a mysterious internal server error 500 in Express JS without any apparent issues in

My express.js routes keep giving me an internal server error 500, and I have tried to console log the variables but nothing is showing up. Here are the express routes: submitStar() { this.app.post("/submitstar", async (req, res) => { ...

javascriptnode.jsexpressblockchain

A guide to incorporating nested loops with the map method in React JS

I've come across numerous threads addressing the nested loop using map in React JS issue, but I'm still struggling to implement it in my code. Despite multiple attempts, I keep encountering errors. Here are some topics I've explored but cou ...

javascriptreactjs

In Node.js, the `res.send()` function is called before the actual functionality code is executed

As a newcomer to node js, I am currently working on an app where I query the MySql DB and process the results using node js. One issue I have encountered is that if my initial query returns null data, I then need to perform another query and further proc ...

javascriptmysqlnode.jsexpresscallback

How can I dynamically adjust the stroke length of an SVG circle using code?

In my design project, I utilized Inkscape to create a circle. With the fill turned off, only the stroke was visible. The starting point was set at 45 degrees and the ending point at 315 degrees. After rotating it 90 degrees, here is the final outcome. < ...

javascripthtmlsvg

Replace the hyperlink with plain text using JQuery

Is there a way to replace a hyperlink within an li element with different text but without removing the entire list item? <li class="pull-left"> <a href="#" class="js-close-post" data-post-id="1"> Close </a> </li> ...

javascriptjqueryhtml

send the value of a variable from a child component to its parent

I have created a typeahead component within a form component and I am trying to pass the value of the v-model from the child component to its parent. Specifically, I want to take the query model from the typeahead component and place it in the company mode ...

javascriptvue.jsvue-component

Enhance your Next.js application with beautifully styled formatting using prettier

Looking for some assistance in setting up prettier with my next.js project. I have the following configuration defined in my package.json file: "scripts": { "format": "prettier --write \"**/*.{js, jsx}\"", }, My project structure includes sever ...

javascriptreactjsnext.jsformatterprettier

Exploring Angular.JS: How to Access Sub-Arrays and Parse Keys

Trying my hand at building something with Angular for the first time, I'm facing an issue with retrieving JSON data. The data is fetched from a SQL database in JSON format and passed to a template using Angular route: .when('/tasks/:TaskID&apos ...

javascriptjsonangularjs

Looking for a smart way to extract all the selected elements from a form?

I am attempting to retrieve all the checked items from this form using JavaScript. I have looked at previous solutions, but none of them fit my requirements. <form id="checkform" class="container" style="margin-top:20px;"> <input type="checkb ...

javascriptjqueryhtml

Uploading Files Using the Dropbox API Version 2

Before, I integrated the Dropbox API V1 into my web application to upload files to my personal Dropbox account. The app was configured to use only one specific dropbox account for file uploads. Previous Process: I registered an app on the dropbox develo ...

javascriptnode.jsdropboxdropbox-api

Ways to showcase numerous records in Ember.js template using hasMany relationship?

The model I have defined looks something like this: App.Question = DS.Model.extend({ title: DS.attr( 'string' ), answers: DS.hasMany('App.Answer') }); App.Answer = DS.Model.extend({ title: DS.attr( 'string&ap ...

javascriptjsonmodelember.jsember-data

Elements from Firebase failing to appear in Angular Grid

I'm struggling to populate items within this grid sourced from Firebase. I was able to make it work with a custom Service that returned a fixed array. I can confirm that the data is being received by the browser as I can log it out in JSON format lik ...

javascriptangularjsfirebasefirebase-realtime-databaseangular-grid

Jquery plugin experiencing a malfunction

I am encountering an issue with my custom plugin as I am relatively new to this. My goal is to modify the properties of div elements on a webpage. Here is the JavaScript code I am using: (function($) { $.fn.changeDiv = function( options ) { var sett ...

javascriptjqueryhtmlcss