CODEWITHSUNDEEP
angularjssortinghidejquery-ui-sortableangular-ui-grid
SaiGiridhar
SaiGiridhar

Reputation: 886

Ui-grid - How to sort and hide a column on click of respective ui-icons

I need to sort and hide the respective column on click of the respective ui-icons.

ui-icon-close -> On click of this, respective column should be made hidden. ui-icon-arrowthick-2-n-s -> On click of this icon, table should be sorted with respect to the values of that column.

Here is the plunker link

HTML:

<div id="grid1" ui-grid="gridOptions1" class="grid"></div>

JS:

$scope.gridOptions1 = {
    enableSorting: true,
    columnDefs: [
      { field: 'name', headerCellTemplate: '<div style="float:left">Name</div><div class="ui-icon ui-icon-close" style="float:left"></div><div style="float:left" class="ui-icon ui-icon-arrowthick-2-n-s"></div>' }, 
      { field: 'gender', headerCellTemplate: '<div style="float:left">Name</div><div class="ui-icon ui-icon-close" style="float:left"></div><div style="float:left" class="ui-icon ui-icon-arrowthick-2-n-s"></div>' },
      { field: 'company', headerCellTemplate: '<div style="float:left">Name</div><div class="ui-icon ui-icon-close" style="float:left"></div><div style="float:left" class="ui-icon ui-icon-arrowthick-2-n-s"></div>'}
    ],
    onRegisterApi: function( gridApi ) {
      $scope.grid1Api = gridApi;
    }
  };

Upvotes: 1

Views: 2952

Answers (1)

Ganesh Vellanki
Ganesh Vellanki

Reputation: 421

you can simply use the properties of 'col' and hide the column, the important thing is to refresh grid after every action,

 col.hideColumn();

similarly you can sort using the gridApi functionality, 

$scope.grid1Api.grid.sortColumn(col,$scope.uiGridConstants.ASC, false );

here is the plunk

but you should know that there is already column menu service that can do these for you

here is the link

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

Upvotes: 3

Related Questions