Allow for passing a positioning strategy to IgxGridToolbarHidingComponent

[obedurena]

We have added some more buttons to our IgxGridToolbarActions. Now on small screens we face the issue, that the dropdown of the IgxGridToolbarHidingComponent always opens right aligned, so that it gets outside the viewport on the left.

For our own buttons which open dropdowns we are able to pass overlaySettings with AutoPositionStrategy.

Is there any way to make this work for the IgxGridToolbarHidingComponent?

[github-actions]

There has been no recent activity and this issue has been marked inactive.

[obedurena]

Thanks for re-opening the request. Actually still in need for a solution to this.

[zdrawku]

Hey @obedurena, thank you for your idea proposal. We've implemented the desired behavior, now it would be easy for you to set a different overlaySettings by using a simple toolbar action input (not only a positionStrategy). The feature will be available at the beginning of the next week with versions 11.1.16 and 12.0.6.

Example below:

    <igx-grid-toolbar-actions>
        <igx-grid-toolbar-pinning [overlaySettings]="overlaySettingsGlobal"></igx-grid-toolbar-pinning>
        <igx-grid-toolbar-hiding [overlaySettings]="overlaySettingsAuto"></igx-grid-toolbar-hiding>
    </igx-grid-toolbar-actions>

public positionStrategyGlobal = new GlobalPositionStrategy({
      openAnimation: scaleInCenter,
      closeAnimation: scaleOutCenter
});
public overlaySettingsGlobal = {
    positionStrategy: this.positionStrategyGlobal,
    scrollStrategy: new AbsoluteScrollStrategy(),
    modal: true,
    closeOnEscape: true
};

public positionStrategyAuto = new AutoPositionStrategy();
public overlaySettingsAuto = {
    positionStrategy: this.positionStrategyAuto,
    scrollStrategy: new AbsoluteScrollStrategy(),
    modal: false,
    closeOnEscape: false
};

public positionStrategyElastic = new ElasticPositionStrategy({
    verticalDirection: VerticalAlignment.Top,
    verticalStartPoint: VerticalAlignment.Bottom,
    horizontalDirection: HorizontalAlignment.Left,
    horizontalStartPoint: HorizontalAlignment.Right
});
public overlaySettingsElastic = {
    positionStrategy: this.positionStrategyElastic,
    scrollStrategy: new AbsoluteScrollStrategy(),
    modal: true,
    closeOnEscape: true
};