CODEWITHSUNDEEP
javascriptangularjsangular-ui-gridui-grid
GOK
GOK

Reputation: 2428

How to position custom context menu on click of a cell while using angular ui-grid?

I am using below code from angular-ui-grid using http://ui-grid.info/

I have my gridOptions as follows:

$scope.gridOptions = {
            enableSelectAll: true,

            enableFiltering: true,
            showGridFooter: true,
            paginationPageSizes: [10, 25, 50, 75],
            paginationPageSize: 10,
            useExternalPagination: true,
            enableGridMenu: false,
            columnDefs: [
                { name: 'materialnum', displayName: 'Part Number', cellClass: 'partNum', cellTemplate: "<div> <div ng-click='grid.appScope.cellClicked(row,col)' class='ui-grid-cell-contents' title='TOOLTIP'>{{COL_FIELD CUSTOM_FILTERS}}</div><div class='subMenu' ng-show='menu'><div class='subMenuChld'><span class='arrwLeft'></span><h5>View Details</h5><ul><li ng-click='menuItemClick(parts)'>New Price</li><li ng-click='menuItemClick(parts)'>Usage/Forecast</li><li ng-click='menuItemClick(parts)'>Inventory</li><li ng-click='menuItemClick(parts)'>Part BOM</li><li ng-click='menuItemClick(parts)'>Open Order</li><li ng-click='menuItemClick(parts)'>Open PO</li><li ng-click='menuItemClick(parts)'>Return History</li><li ng-click='menuItemClick(parts)'>Supplier History</li><li ng-click='menuItemClick(parts)'>Repair History</li><li ng-click='menuItemClick(parts)'>Alternative Parts</li></ul></div></div></div>"},
                { name: 'materialdesc', displayName: 'Part Description', },
                {
                    name: 'sparable', displayName: 'Sparable'
                },

.. .

Also have handled it's click to show the menu which is in the cell template:

$scope.menu = false;

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

                console.log(row.entity.materialnum);
                $scope.menu = true;
            }

The menu is not coming up when we click the row on the grid.

Need suggestions how to show it.

#

EDIT

#

I got the answer for accessing the inside of grid scope but now i am not able to position the context menu for every row click. How can i make the position precise to the click on the grid.

Upvotes: 0

Views: 744

Answers (1)

John Doe
John Doe

Reputation: 506

Always use grid.appScope before vars inside ui-grid templates.

Must be ng-show='grid.appScope.menu' instead of ng-show='menu'. Check all your elements for this.

Upvotes: 1

Related Questions