frozenColumns not working as expected in firefox

Posted by: dominique-schreckling on 14 September 2017, 11:59 am EST

  • 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.

  • Posted 14 September 2017, 11:59 am EST

    Hello Dominique,

    Thanks for reporting this issue.

    We are able to replicate this issue on Firefox and IE 11. Hence, this issue has been escalated to the concerned team for further investigation with tracking id 219502. We will let you know as soon as we get any update on this.

    However, we are not able to replicate this issue with latest build 5.20171.282 and previous build 5.20163.254 with safari browser version: 10.1(12603.1.30.0.34).

    For your reference, please see the attached sample and screenshot.

    *Please install required packages before running the sample using npm install command.

    Thanks,

    Manish Kumar Gupta

    2017/04/FlexGrid_frozenColumn_wjMenu.zip

  • Posted 14 September 2017, 11:59 am EST

    Thank you Manish for your reply.

    Yes, sorry, I don’t know why I mentioned Safari. I meant Firefox. The frozenColumns attribute works as expected under Chrome (and according to your reply on Safari), but not on Firefox.

  • Posted 14 September 2017, 11:59 am EST

    Any updates for IE11 on this?

  • Posted 14 September 2017, 11:59 am EST

    And Firefox. Problem found in version 20171.293

  • Posted 14 September 2017, 11:59 am EST

    My experience has been that the performance optimizations made for IE and Firefox typically just lead to bad behavior (possibly only in conjunction with angular2 interop). You may want to try this as a workaround by overwriting the grid’s _useFrozenDiv method to always disable it rather than allowing the default behavior where wijmo enables it for Firefox and IE:

    
    @ViewChild('myGrid') grid: wijmo.grid.FlexGrid;
    
    ngOnInit(){
        //...
     
        this.grid._useFrozenDiv = function() {
            return false;
        };
    }
    
  • Posted 14 September 2017, 11:59 am EST

    Hello,

    Thanks for your try and suggestion we have notified to our team.

    We are sorry, this issue is still with our development team. We will let you know as soon as we get any update on this issue.

    Thanks,

    Manish Kumar Gupta

  • Posted 14 September 2017, 11:59 am EST

    I as well see this issue. If you use frozen columns and use a template, the cell doesnt render correctly on Edge/IE. Works only Chrome.

    Any updates to this?

  • Posted 14 September 2017, 11:59 am EST

    Hi,

    we are sorry, this issue is still with our development team. In the meantime, you can use suggested approach by @qualton.

    We will let you know as soon as we get any update on this issue.

    Thanks,

    Manish Kumar Gupta

  • Posted 14 September 2017, 11:59 am EST

    I tried the approach by qualton… It doesn’t solve the issue.

  • Posted 14 September 2017, 11:59 am EST

    Hello,

    Please try this inside initialized event. It works correctly for us.

    Thanks,

    Manish Kumar Gupta

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels