Posted 14 September 2017, 11:59 am EST
Hi
I am trying to insert a row to a wijmo flexgrid containing a dropdown menu with the actions the user can perform on the item. As the whole flexgrid can be pretty wide, I wanted to fix the first column with the dropdown menu using the frozenColumns attribue.
<wj-flex-grid
[allowDragging]="true"
(dblclick)="onDoubleClick($element)"
[isReadOnly]="true"
[itemsSource]="collectionView"
[selectionMode]="'Row'"
[headersVisibility]="1"
[frozenColumns]="1"
style="height: auto; max-height: 300px">
<wj-flex-grid-column
header="">
<ng-template wjFlexGridCellTemplate [cellType]="'Cell'"
let-item="item">
<wj-menu header="Actions"
(itemClicked)="onContextMenuItemSelected(contextMenu)">
<wj-menu-item value="read">Read</wj-menu-item>
<wj-menu-item value="update">Edit</wj-menu-item>
</wj-menu>
</ng-template>
</wj-flex-grid-column>
...
</wj-flex-grid>
It works as expected on Chrome browser. The first row containing the dropdowns is always visible, scrolling horizontally moves all rows except the frozen one and the menu is working as well.
On Safari however, the dropdown menus are not displayed at first, just some kind of tiny box. If I scroll horizontally the remaining rows, the dropdown gets displayed, but it is unable to open the menu, as if the frozen attribute locks the wj-menu as well. Without the frozenColumns attribute, it works well.