Steps for ensuring the search icon remains visible in the column of ag-grid

I am looking to find a way to keep the filter icon constantly visible in the Ag-grid interface. Currently, the filter icons only show up when I hover over the column headings.

Here is an example of the column definition that I have been using:

this.ColumnDefs=[{"headerName":"Interface","field":"interfaceName",sortingOrder: ['asc','desc', 'null'],width:120,cellStyle:{'text-align': "left"},unSortIcon: true},
{"headerName":"Status","field":"status",sortingOrder: ['asc','desc', 'null'],width:120,cellStyle:{'text-align': "left"},unSortIcon: true},
{"headerName":"Runtime","field":"lastDate",sortingOrder: ['asc','desc', 'null'],width:150,cellStyle:{'text-align': "left"},unSortIcon: true}]

Any ideas on how I can achieve this desired outcome?

javascriptangularjsag-grid

Answer №1

The solution entails setting suppressMenuHide within the gridOptions or directly on the HTML element as [suppressMenuHide]="true"

suppressMenuHide should be set to true to ensure the column menu button is always visible, rather than only appearing when hovering over the column header.

Answer №2

You don't need to worry about ColDef - a simple CSS tweak can achieve the desired result.

Check out my customized plunk here: Showing Built-In Filters Icon by Default

.ag-header-icon.ag-header-cell-menu-button {
  opacity: 1 !important;
}

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

How do I avoid using an if statement in jQuery to eliminate errors caused by "undefined" values?

Whenever I incorporate third-party plugins, my usual practice is to initiate them in the main application.js file. For example: $('.scroll').jScrollPane(); However, a challenge arises when a page loads without the presence of the scroll class, ...

javascriptjqueryfunctionundefined

Locate the initial ancestor element that contains a specific child element on the first level

Looking to retrieve the primary parent element of a selected item that contains a checkbox as a direct child. HTML $('input[type="checkbox"]').change(function(e) { $(this) .parent() .parents("li:has(input[type='checkbox'] ...

javascripthtmljquerycss

Developing an array-based multiple choice quiz

Being a complete novice, I am currently immersed in designing a multiple-choice quiz using arrays. The questions all follow a similar template: "Which word in the following has a similar meaning to '_________'." To implement this, I have created ...

javascripthtmlarrays

What is the reason behind bower installing packages twice?

Whenever I use Yeoman to install packages, which is powered by Bower in the background, I notice that each package gets duplicated... The first copy is placed in the project root under the components folder. The second copy goes inside the app/components ...

javascriptnode.jsnpmyeomanbower

What is the best situation to utilize $(document).ready()?

After observing that using $(document).ready(..) seems to introduce a noticeable delay in applying JavaScript effects, I've been contemplating the best approach. I know that simply placing the effect in a <script> tag may not work if the DOM isn ...

javascriptjquerydom

What alternative do we have if we are unable to utilize ng-checked alongside ng-model?

Looking to bind a list of items to ng-checked and having trouble with ng-model? If ng-checked is not working with ng-model, what other solutions are available to ensure an item is checked and bound to ng-model? $scope.items = ['item1', 'ite ...

angularjs

How is it possible that this event listener is able to capture an event that was already sent before it was

I am facing an issue with my Vue JS code. When I click on the account <a> tag, it triggers the toggle method. The toggle method adds an event listener to the document. However, as soon as the toggle method is executed, the event listener fires and ...

javascriptvue.js

Froala - response in JSON format for uploading images

I have integrated the Froala editor into my website. The image upload feature of this editor is functioning properly, but I am facing issues with the response. As per the documentation provided: The server needs to process the HTTP request. The server mu ...

javascriptphpjson

Create a focal point by placing an image in the center of a frame

How can an image be placed and styled within a div of arbitrary aspect ratio to ensure it is inscribed and centered, while maintaining its position when the frame is scaled? Ensure the image is both inscribed and centered Set dimensions and position usin ...

javascripthtmlcss

What is the best way to retrieve the most recent CMS posts information within a Gatsby-constructed project?

I created a static website using Gatsby and everything was working well. However, I encountered an issue when updating the titles and content of posts in Contentful CMS - the changes were not reflected when I refreshed the website. How can I ensure that ...

javascriptreactjsgatsby

What significant alterations can be found in the architecture of Angular 2?

Hello, I am currently exploring Angular 2 and Stack Overflow. I am curious about the significant architectural differences between Angular 2 and its predecessor, Angular. In Angular, there were functions like $apply, $digest, $evalAsync, and others. Why we ...

angularjsangular

Load data onto a dropdown menu using Ajax requests

My view currently includes a dropdown menu. Upon selecting an item from the dropdown, AJAX is supposed to load. The table 'locations' has a one-to-many relationship with 'contacts.' When I select a location from the locations dropdown, ...

javascriptphpajaxlaravel-5

Ways to connect a button to a Bootstrap 5 tab class

I am trying to find a way to directly link to a specific tab using a Bootstrap 5 button class. I have attempted to incorporate the solution provided in the following resource: Twitter Bootstrap 5 Tabs: Go to Specific Tab on Page Reload or Hyperlink Unfo ...

javascriptjquerybootstrap-5

Setting up a personalized configuration entry in environment.js

I am currently working with EmberJS version 2.4.2 and I have a specific requirement to handle custom configuration entries using an environment.js file. var ENV = { APP: { myKey: "defaultValue" } }; While everything works perfectly in development ...

javascriptember.js

Troubleshooting issue with multer code failing to save files in designated directory within nodejs server when using reactjs frontend

I'm facing an issue while trying to upload a photo into my server folder. Even though the submission process adds the picture to my database, it does not display the image in my server folder. The frontend of my application is built using React JS, an ...

javascriptnode.jsreactjs

Real-time JQuery search with instant results

While utilizing a custom script to display search results on the page, I encountered an issue when typing long sentences. Each request goes to the server, resulting in delayed responses that stack up and cause the div to change quickly. This is not the des ...

javascriptjqueryajax

Should I fork and customize npm package: Source or Distribution? How to handle the distribution files?

Currently, I am in the process of developing a VueJS web application. Within this project, there is a module that utilizes a wrapper for a JavaScript library obtained through npm and designed to seamlessly integrate with VueJS. However, it doesn't com ...

javascriptnpm

Learn how to organize a div element containing select options using categories such as gender and shoe size, similar to the filtering

Is there a way to sort div elements using a select menu, similar to how it is done on shopping websites? I am struggling with modifying my JS code in order to implement multiple selects. Although I believe my JS code is correct, it doesn't seem to be ...

javascripthtml

When using React, the auto-fill suggestions in forms are not displayed

Looking to enhance a React panel for adding new products, I've developed a separate auto-complete class. This special class should display an input field along with a list of suggested autofill items below. However, it seems that only the input elemen ...

javascriptreactjsfirebase

Accessing and assigning an ID to a particular line in a text file using JavaScript

I have a plain text document formatted as follows... Hello . world . . . . its me The code I am currently using to access the text file is as follows: <head> <script type="text/javascript"> function fetchTextFile(); </script> < ...

javascriptjqueryhtmltwitter-bootstrap