Appropriate occasion for a concealed field in the user interface grid

Currently, I am utilizing the ui grid feature.

Within this feature, there is an option called hide column. I am interested in receiving an event when a user hides a column. Specifically, I would like to display an alert when a column is hidden. Is there an event within ui grid that triggers when a column is hidden?

http://plnkr.co/edit/9kDPhXz1d5Yn2ioyKa6w?p=preview

<div ng-controller="MainCtrl">
     <div class="grid" ui-grid="gridOptions" ui-grid-move-columns></div>
</div>

The option to hide column becomes visible when a user clicks on the header of a column. This triggers a popup screen with the option to hide the column.

javascriptangularjsangularjs-directiveangularjs-scopeangular-ui-grid

Answer №1

Utilize the columnVisibilityChanged method for making column visibility changes.

onRegisterApi : function(gridApi) { 
     $scope.gridApi = gridApi;
     $scope.gridApi.core.on.columnVisibilityChanged($scope,function (column)   {console.log('Column Scope',column);}); 
}

Answer №2

To implement this functionality using jQuery, you can utilize the following code snippet:

<script src="//code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
  jQuery(function()
  {
    jQuery('.grid-menu-button').click(function()
    {
      $column = jQuery(this).closest('.grid-header-cell');
      var columnNumber = $column.index() + 1;
      var columnName = $column.find('.grid-header-cell-label').text();
      jQuery(".grid-menu-items > li[id='menuitem-3'] button").click(function()
      {
          alert("Column "+columnNumber+" ("+columnName+") is now hidden");
      });
    });
  });
</script>

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

Add a click event to elements that match

I must admit that I am not particularly knowledgeable in Javascript/jQuery and my question might come across as trivial. However, I am trying to assign a click event to every element on the page with the following code: $(document).ready(function () { ...

javascriptjquery

Customizing the appearance of a JavaScript countdown timer's output on an individual basis

I am currently working on customizing the appearance of a JavaScript date counter. My goal is to style the days, hours, minutes, and seconds individually. Ideally, I want each unit to be right-aligned within its own div, with specific left and top absolute ...

javascripthtmlcss

When dealing with arrays, the parentElement.remove() function may not be defined

Query: e1.parentElement.remove(); is not defined debug: e1 contains a value. e1.remove() removes a button, however, I need to remove a group of buttons. global variable and function execution var x = 0; AllResponses(null, null); primary function featuri ...

javascriptarraysloopschatbot

Issue with triggering blur event in Internet Explorer while using Angular 2+

The issue discussed in the Blur not working - Angular 2 thread is relevant here. I have a custom select shared component and I am attempting to implement a blur event to close it when the component loses focus. // HTML <div (blur)="closeDropDown()" t ...

javascriptangulartypescriptinternet-explorerblur

Seeking clarification on how to load an angular directive

I am puzzled by the fact that in the given jsFiddle, 'here is a log' gets printed three times. http://jsfiddle.net/wg385a1h/5/ $scope.getLog = function () { console.log('here is a log'); } Could anyone shed some light on why thi ...

angularjsangularjs-directive

Unnecessary socket.io connection in a React component

Incorporating socket.io-client into my react component has been a learning experience. Most tutorials recommend setting it up like this: import openSocket from 'socket.io-client'; const socket = openSocket('http://localhost:8000'); In ...

javascriptreactjssocket.io

What is the best way to prevent the use of "******" at the beginning of every line in Javascript/Node Bund

Update: I am currently working on a Node.js test project (utilizing WebPack). In the development builds (app.js), at the start of each line, there is /******/ https://i.sstatic.net/jZ5h6.png Since this seems to be common behavior, I am wondering if th ...

javascriptnode.jswebpack

How can I use an HTML button to activate a function that inserts text into a read-only text-box?

Trying to write a simple piece of HTML code that finds the number greater than or equal to the first initial amount that wholly divides the second given amount. The code attempts to divide the numbers, and if it fails, increments the first number by 1 and ...

javascripthtmlbuttononclickgetelementbyid

Guide to incorporating all template partials dynamically while leveraging a module in AngularJS

For several modules I have in my application, there is a need to load template partials whenever the module is used. These files are stored in a folder named partials inside each module subfolder. Starting from meanjs, I store these partials in public/modu ...

angularjsangularjs-directiveangularjs-ng-includemeanjs

Different techniques for using percentages in CSS transformations to create dynamic animations for DOM element translations

I have 14 objects positioned across the dom that I need to animate using the translate property. Currently, I am using transform: translate(x%, y%) for each object, requiring me to calculate the translation amount and apply a CSS style individually. This m ...

javascripthtmlcss

What is the best way to perform a keyword search in AngularJS?

My data consists of code:description pairs (e.g. cmsc100: Web Programming). I have a search box where users can enter either the code or description. Upon clicking the button, the program should display the data that matches the entered code/description or ...

javascriptangularjs

Troubleshooting a Codeigniter issue with CSRF and jQuery ajax

Having trouble with posting data using ajax? I keep running into an error related to CSRF and despite my efforts, I have not been able to find a solution. Can someone please assist me with this issue? Here is the error message I am consistently receiving: ...

phpjavascriptjqueryajaxcodeigniter

Does the content within {{ }} get monitored for updates on my webpage?

Is there a way to display content on the page without AngularJS constantly checking for changes? Could someone explain how to achieve this? Do I just need to use a label like the following: {{ abc }} ...

angularjs

Activate the front camera on an Android device using HTML5 or JavaScript

I'm currently working on a web app that needs to access the front camera of Android phones running version 4.0 or higher. After taking a picture, the app should then upload the captured image to my own server. Is there a way to launch the front camer ...

javascriptandroidhtmlandroid-intent

Determine the duration/length of an audio file that has been uploaded to a React application

I am working on a React web application built with create-react-app that allows users to upload songs using react-hook-forms. The uploaded songs are then sent to my Node/Express server via axios. I want to implement a feature that calculates the length of ...

javascriptreactjsaudiofile-uploadmp3

Issue with Jquery function not executing on second attempt

/** Creates a table of iTunes data in HTML format **/ var appendValues = function(songArray) { songArray.each(function() { var title = $(this).find("im\\:name").eq(0).text(); var songImage = $(this).find("im\\:image").eq(0).text(); var ...

javascriptjqueryhtmlajaxweb

In order to determine if components linked from anchor elements are visible on the screen in Next.js, a thorough examination of the components

Currently, I am in the process of developing my own single-page website using Next.js and Typescript. The site consists of two sections: one (component 1) displaying my name and three anchor elements with a 'sticky' setting for easy navigation, a ...

javascripttypescriptnext.js

Editable content area: Maintain and restore cursor position when placed on a blank line

While working with a contenteditable div and constantly updating the HTML as the user types, I am facing the challenge of saving and restoring the caret position. I came across a helpful solution provided by Tim Down on a similar issue, which I found on S ...

javascripthtmlcontenteditable

Tips for modifying AJAX behavior or restricting requests in Wicket

I am looking to prevent updates based on a specific JavaScript condition using AjaxSelfUpdatingTimerBehavior. WebMarkupContainer messagesWmc = new WebMarkupContainer( "messagesWmc" ) ; messagesWmc.setOutputMarkupId( true ) ; messagesWmc.add( ...

javascriptajaxwicket

I'm currently utilizing lint in my Angular 2+ project. Is there a way to arrange the constructor parameters in alphabetical order

I am struggling to organize the constructor parameters in TypeScript while using TSLINT with Angular9. I am looking for a rule similar to member-ordering that can help me sort them effectively. constructor( // Sort these private readonly router: R ...

javascriptangularlinttslint