CODEWITHSUNDEEP
javascriptangularjsangularjs-directiveangularjs-scopeangular-ui-grid
user944513
user944513

Reputation: 12729

Suitable event for hidden column on UI grid

I am using ui grid.

http://ui-grid.info/docs/#/tutorial

In that there is option hide column. I want to get event when user hide the column. I want to show alert when column is hidden? Is there any event in ui grid which fire when 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>

hide column is display when user click on header of column ..there is popup screen which have option of hide column.

Upvotes: 1

Views: 1047

Answers (2)

user6083264
user6083264

Reputation: 126

You can use the columnVisibilityChanged(scope, callBack)

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

Upvotes: 1

Marco
Marco

Reputation: 136

This can be achieved with jQuery by adding the following code:

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

Upvotes: 0

Related Questions