Ui-grid: how to show and place a popup menu div onclick a row element inside a grid?

Question

I have a ui-grid configuration and the menu below, but I get a menu open for each displayed element (I know the problem is that the same menu opens for all elements, since there are no differentiation interference, of which the menu of elements is for opening, but I can not refer to it)

$scope.gridOptions = {
                enableSelectAll: true,
                exporterCsvFilename: 'AGS_Extract.csv',
                exporterMenuPdf: false,
                enableFiltering: true,
                showGridFooter: true,
                paginationPageSizes: [25, 50, 75],
                paginationPageSize: 25,
                useExternalPagination: true,
                enableGridMenu: true,
                exporterAllDataFn: function () {

                    var paramsObj = {};
                    var url = "http://test.satellite.com:8080/Dashboards/AGSMateervlet";

                    paramsObj['query'] = $scope.keyword;
                    paramsObj['start'] = 0;
                    paramsObj['rows'] = $scope.gridOptions.totalItems;
                    return $http.get(url, { params: paramsObj, headers: { 'Content-Type': 'application/json' } }).then(function (res) {
                        var myElement = angular.element(document.querySelectorAll(".custom-csv-link-location"));
                        $scope.gridApi.exporter.csvExport( $scope.export_row_type, $scope.export_column_type, myElement );
                    });
                },
                columnDefs: [
                    { name: 'materialnum', displayName: 'Part Number', cellClass: 'partNum', 
                    cellTemplate: "<div> <div ng-click='grid.appScope.cellClicked(row)' class='ui-grid-cell-contents' title='{{COL_FIELD CUSTOM_FILTERS}}'>{{COL_FIELD CUSTOM_FILTERS}}</div><div class='subMenu' ng-show='grid.appScope.menu'><div class='subMenuChld'><span class='arrwLeft'></span><h5>View Details <span style='float:right;' ng-click='grid.appScope.menu=false;'>X</span></h5><ul><li ng-click='grid.appScope.menuItemClick(row,&apos;new_price&apos;)'>New Price</li><li ng-click='grid.appScope.menuItemClick(row,&apos;usage_forecast&apos;)'>Usage/Forecast</li><li ng-click='grid.appScope.menuItemClick(row,&apos;inventory&apos;)'>Inventory</li><li ng-click='grid.appScope.menuItemClick(row,&apos;part_bom&apos;)'>Part BOM</li><li ng-click='grid.appScope.menuItemClick(row,&apos;open_order&apos;)'>Open Order</li><li ng-click='grid.appScope.menuItemClick(row,&apos;open_po&apos;)'>Open PO</li><li ng-click='grid.appScope.menuItemClick(row,&apos;return_history&apos;)'>Return History</li><li ng-click='grid.appScope.menuItemClick(row,&apos;supplier_history&apos;)'>Supplier History</li><li ng-click='grid.appScope.menuItemClick(row,&apos;repair_history&apos;)'>Repair History</li><li ng-click='grid.appScope.menuItemClick(row,&apos;alternative_parts&apos;)'>Alternative Parts</li></ul></div></div></div>"
                    },
                    { name: 'materialdesc', displayName: 'Part Description', 
                        cellTemplate:'<div ng-if="row.entity.materialdesc" title="{{row.entity.materialdesc}}">{{row.entity.materialdesc}}</div><div ng-if="!row.entity.materialdesc"></div>',
                    },
                    {
                        name: 'sparable', displayName: 'Sparable', 
                        filter: {
                            type: uiGridConstants.filter.SELECT,
                            selectOptions: [
                                { value: 'yes', label: 'YES' },
                                { value: 'no', label: 'NO' }
                            ]
                        },
                        //cellTemplate:'<div ng-if="row.entity.sparable" class="tcenter">{{row.entity.sparable}}</div><div ng-if="!row.entity.sparable" class="tcenter">-</div>',
                        cellClass: function (grid, row, col) {
                            if (grid.getCellValue(row, col) === 'NO') {
                                return 'red tcenter';
                            } 
                            if(grid.getCellValue(row, col) === 'YES') {
                                return 'green tcenter';
                            } 
                            return 'tcenter';
                        }
                    },

..

The following is the function that is called when you click on it:

$scope.cellClicked = function (row, col){

                console.log(row.entity.materialnum);
                $scope.menu = true; // All menus are becoming active

            };

In addition to displaying all menus, the layout of the menu is now irrelevant. How can I position or point to the correct click position (this is simple in jquery, but I strictly use javascript, angularjs and ui-grid).

Thanks in advance!

#

EDIT

#

• , ; ; jquery, , jquery, - angular javascript .

• 25 , 10-12 , ; , , , , , , ( , ul/li , , . ( z- , ). :

Answer 1

, :

$scope.cellClicked = function (row, col){

     row.menu = true; 

};

:

<div>
  <div ng-click='grid.appScope.cellClicked(row)' class='ui-grid-cell-contents' title='{{COL_FIELD CUSTOM_FILTERS}}'>{{COL_FIELD CUSTOM_FILTERS}}</div>
  <div class='subMenu' ng-show='row.menu'>
    <div class='subMenuChld'>
      <span class='arrwLeft'></span>
      <h5>View Details <span style='float:right;' ng-click='row.menu=false;'>X</span></h5>
      <ul>
        <li ng-click='grid.appScope.menuItemClick(row,&apos;new_price&apos;)'>New Price</li>
        <li ng-click='grid.appScope.menuItemClick(row,&apos;usage_forecast&apos;)'>Usage/Forecast</li>
        <li ng-click='grid.appScope.menuItemClick(row,&apos;inventory&apos;)'>Inventory</li>
        <li ng-click='grid.appScope.menuItemClick(row,&apos;part_bom&apos;)'>Part BOM</li>
        <li ng-click='grid.appScope.menuItemClick(row,&apos;open_order&apos;)'>Open Order</li>
        <li ng-click='grid.appScope.menuItemClick(row,&apos;open_po&apos;)'>Open PO</li>
        <li ng-click='grid.appScope.menuItemClick(row,&apos;return_history&apos;)'>Return History</li>
        <li ng-click='grid.appScope.menuItemClick(row,&apos;supplier_history&apos;)'>Supplier History</li>
        <li ng-click='grid.appScope.menuItemClick(row,&apos;repair_history&apos;)'>Repair History</li>
        <li ng-click='grid.appScope.menuItemClick(row,&apos;alternative_parts&apos;)'>Alternative Parts</li>
      </ul>

</div>
</div>
</div>

: row.menu grid.appScope.menu.

Answer 2

HTML-. , , . , openMenu .

HTML . $index - , $index - , ng-repeat.

<div ng-repeat="row in rows" class="my-grid-row" ng-click="openMenu($event, $index, 0, row, col)">
      <div  ng-repeat="col in row.cols" class="my-grid-col" ng-click="$parent.openMenu($event, $parent.$index, $index, row, col)">
      </div>
</div>

$event.

$scope.openMenu = function(evt, rowindex, colindex, row, col){

       //first find mouse position;
      var left  = evt.pageX;
      var top = evt.pageY;
      //YOUR MENU SHOULD HAVE POSITION ABSOLUTE.
      //ALSO YOU CAN SET MENU POSITOIN BY USING LOTS OF WAY WITHOUT JQUERY
      var menuStyle = {left:left,top:top};
      1. If each row has own menu you can set the new positoin to scope by binding ng-style="menuStyle"
      $scope.menuStyle = menuStyle;
      $scope.menu = true;
      2. If your menu container have an ID and you are using single menu for all grid
      var menuEl = angular.element('#mygridmenu');
      menuEl.css(menuStyle);
      menuEl.show();

}

HTML, .

Answer 3

Turn on events of clicking on the grid cell and monitor the changes to get the selected identifier.

var grid = $("#grid").data("kendoGrid");
var selectedId = '';
$scope.gridOptions {
 ...
 selectable: 'cell'
}

// Watch array changes

$scope.watchCollection('grid.selectedKeyNames()',function(newValue, oldValue) {
  if (newValue != oldValue) {
    selectedId = newValue[0];
  }
}