Grid action strip position

[Eralmidia]

We are looking at utilizing the action strip for some of our grids. Are there any options of controlling the positioning of the strip? Looking at the sample at https://www.infragistics.com/angular-demos/grid/grid-add-row the actions are positioned to the right side. Is there a way to instead lock the position to a specific column? We feel that on a wide grid/large screen, the actions could be easily missed by the user (especially if you opt in to using a menu type of action trip, resulting in only a "three-dots"-icon).

What we essentially is after is something like you have at Azure devops:

[dkamburov]

You can use the context property of the action strip and pass a specific template to it. In this case it should be the cell of the grid. The context can be passed to the show API method of the action strip. It has its specifics due to the fact that it is designed mainly for row context of the grid, but if you can set element property with a nativeElement in it, the action strip will be rendered inside that element:
actionstrip2.show({ element: { nativeElement: elem } })

And to make it more clear here's the complete code sample:

    <igx-grid #grid2 [data]="data">
        <igx-column [field]="'ID'" [width]="'50px'">
            <ng-template igxCell let-cell="cell" let-val>
                <div #elem class="cell-template" (mouseover)="actionstrip2.show({ element: { nativeElement: elem } })">
                    
                </div>
            </ng-template>
        </igx-column>
    </igx-grid>

    <igx-action-strip #actionstrip2 [hidden]="true">
        <ng-container>
                <igx-icon *igxActionStripMenuItem (click)="doSomeAction()">alarm</igx-icon>
        </ng-container>
    </igx-action-strip>

Note that if put inside the grid template the action-strip will use the row as a context.

[Eralmidia]

There is also another issue: Since the strip is outside the grid in your example, it will no longer automatically hide. I tried adding a mouseout in the igx-grid itself, with actionstrip.hide, and that does hide the strip when mouing the mouse outside the grid. The issue however is that since the strip is outside the grid, moving the mouse over one of the buttons in the strip also triggers the mouseout on the grid and hides the strip, rending the strip completely useless.

If I move the strip inside the hiding seems to work better, and I can actually click on the strip, but when inside the grid the grid want to put it to the far right in the row, and the grid ends up being confused whether the strip should be positioned in column one or at the default location at the right hand side of the grid.

[Eralmidia]

Managed to solve this one by using mouseleave on a div encapsulating both the grid and the strip instead.

[dkamburov]

Awesome, glad to hear you got this solved.

[Eralmidia]

Yes, but only the second issue tho. It will still only trigger when I hover over the column where the strip is shown. I would like for the strip to show if I hover over any column in the row, but that would require me to receive the element property in some other way.

[dkamburov]

I see, I though it was supposed to show only when you are on a specific cell.
How about adding mouseover to each cell and then using a specific one as a context of the action strip:

   <igx-grid #grid2 [data]="data">
        <igx-column *ngFor="let c of columns" [sortable]="true" [field]="c.field" [header]="c.field"
            [width]="c.width" [pinned]='c.pinned' [hidden]='c.hidden'>
                <ng-template igxCell let-cell="cell" let-val>
                    <div class="cell-template" (mouseover)="showForSpecificCell(actionstrip2, grid2, cell);">
                    </div>
                </ng-template>
        </igx-column>

    </igx-grid>

    <igx-action-strip #actionstrip2 [hidden]="true">
        <ng-container>
                <igx-icon *igxActionStripMenuItem (click)="doSomeAction()">alarm</igx-icon>
        </ng-container>
    </igx-action-strip>

    public showForSpecificCell(actionStrip, grid, cell, cellIndex = 0) {
        const row: IgxGridRowComponent = grid.gridAPI.get_row_by_index(cell.row.index);
        actionStrip.show({ element: { nativeElement: row.cells.toArray()[cellIndex].nativeElement } });
    }