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

Errors in Data Capture from AJAX Dropdown Selections

Recently, I've encountered an issue with one of my data fields while attempting to save it to a mySQL database. The problem seems to be related to the fact that the 'id' for the text value is saved instead of the actual text value itself, wh ...

phpjavascriptajaxgoogle-maps-api-3

Is it achievable to have a background image cover size with a responsive rollover effect?

I’m currently facing a unique challenge where I want to have an image as the background of my website, with the size set to cover the entire screen. On this background image, there are elements like buildings that I want to interact with when hovered ove ...

javascriptjqueryhtmlcss

Change every occurrence of span class red to be a strike tag

I'm attempting to replace all span tags with the red class and their content with a strike tag. However, I've encountered an issue where it doesn't seem to be replacing the specific span tags as expected. Below is the code snippet: let s ...

javascriptregex

Pulling a div from beneath numerous other divs

I have been attempting to create a test case for a web application we are developing and I am on the verge of finding a solution, but there is one final hurdle that has me puzzled... Our requirement is to enable div elements to be draggable (which is work ...

javascriptjqueryjquery-uijquery-ui-draggable

Is the initial carousel element failing to set height to 100% upon loading?

If you take a look here, upon loading the page you will notice a DIV at the top. It is labeled "content" with "content_container" wrapped around it and finally, "page" around that. Clicking the bottom left or right arrows reveals other DIVs with similar ta ...

javascripthtmlcssheightalignment

Having issues with Facebook's login API for JavaScript?

Apologies for the improper formatting. I am encountering errors in my JavaScript compiler while working with the Facebook Login API... Error: Invalid App Id - Must be a number or numeric string representing the application id." all.js:53 "FB.getL ...

javascriptfacebookapifacebook-javascript-sdkapp-id

What is the best way to show a message on a webpage after a user inputs a value into a textbox using

I have a JSFiddle with some code. There is a textbox in a table and I want to check if the user inserts 3000, then display a message saying "Yes, you are correct." Here is my jQuery code: $("#text10").keyup(function(){ $("#text10").blur(); ...

javascriptjquery

The Data from Req.Body Doesn't Appear After Adding Form Fields

I've been struggling to find a solution to this issue, but here's the gist of it: I have a button that allows users to add a question and answer pair one at a time by clicking on an "Add Question" button. This is achieved through the append featu ...

javascripthtmlnode.jsexpress

Warning: Datatables encountered an issue with the table ID 'example'

Good day, I am seeking clarification regarding DataTables. In a tutorial, I came across a table that can be edited "inline". I prefer the table to be in German. The code snippet for the table: <script type="text/javascript" language="javascript" ...

javascripthtmljquerydatatables

transferring background-image in html between elements

Imagine having a three-level hierarchy HTML code structured like this: <section> <div id="outer"> <div id="inner"> </div> </div> </section> If we set background-image:someImage.jpg to the section, and backg ...

javascriptjqueryhtmlcss

Share the Nav tag value or name during an OnClick event within ReactJS

I've been facing a minor issue that I just can't seem to figure out - how do I pass a value to my OnClick event? It's crucial for me to pass this value as it corresponds to the options in my menu and is essential for some processes: This is ...

javascriptreactjsreact-native

JavaScript Regex: Removing all characters that are not numbers

There have been several inquiries about this particular question, such as this one on Stack Overflow. Despite my efforts to replicate the solution and research regex, I can't seem to get it to work: $("#button").click(function () { new_number = $ ...

javascriptjqueryregexreplace

What is the best way to display a modal box using NodeJs on the server side?

I recently created a contact page on my website where users can fill out a form. Upon submitting the form, I capture the information using a post method in my server.js file. If everything is correct, I want to display a modal box on the contact page to co ...

javascriptnode.jsexpress

The HttpParams are reluctant to be established

Working with Angular 8, I am attempting to assign an HttpParam using the provided code snippet and observing the outcome on the final line. let newParams = new HttpParams(); newParams.set('ordering', 'name'); console.log('getting: ...

javascriptangular

How can I extract the domain name using a regular expression in JavaScript?

I am struggling with creating a regular expression to extract the main domain name from a URL. The URLs I have are: http://domain.com/return/java.php?hello.asp http://www.domain.com/return/java.php?hello.asp http://blog.domain.net/return/java.php?hello.as ...

javascriptregexurl

Optimizing with react and mobX: What You Need to Know

I am new to React and MobX and have been studying various tutorials on using both together. Currently, I am working on creating a form where users can select a product through autocomplete functionality using react-select. Once a product is selected, the i ...

javascriptreactjsmobxmobx-react

Encountering problems with ajax technology

As a newcomer to Laravel and Ajax, I am facing an issue with displaying the state of the selected country in a dropdown list. Although the data is successfully fetched from Laravel and received through Ajax, I am struggling to dynamically add it to the H ...

javascriptjqueryajax

What is the best way to indicate the selected item in the Menu List using Material UI React?

I am attempting to dynamically style the menu list items by toggling the selected prop between true and false. In order to achieve this, I am utilizing the onClick method to capture the event.target.name, update the state of the corresponding value associ ...

javascriptreactjsmaterial-ui

Utilizing functions for object creation in JavaScript

Having trouble with creating a function that automatically generates an object and then alerts its properties. Can't seem to get the alerts when I click the button. Any assistance would be appreciated. <html> <head> <s ...

javascriptjqueryhtmlfunctionobject

Unlocking the potential of resizable bootstrap table columns in React

Currently utilizing a bootstrap table <div class="table-responsive"> <table class="table table-bordered"> <thead> <tr> <th>#</th> <th>Table heading</th> </tr> < ...

javascripthtmlcssreactjstwitter-bootstrap-3