FlexGrid - Firefox/Edge problem - Buttons in Frozen Group Header

Posted by: malpacasville on 29 April 2019, 3:24 am EST

    • Post Options:
    • Link

    Posted 29 April 2019, 3:24 am EST

    Hi,

    I have an issue where in Chrome the click events on the buttons fire, but in Firefox and Edge they don’t.

    In Firefox there appear to end up with two instances of the buttons, and the ones bound to the click events is hidden by the copy.

    
    <html>
    <head>   
        <!-- Wijmo --> 
        <link href="https://cdn.grapecity.com/wijmo/5.latest/styles/wijmo.min.css" rel="stylesheet"/> 
        <script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.min.js"></script> 
        <script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.grid.min.js"></script>     
        <script src="https://code.jquery.com/jquery-3.4.0.js"></script>
    </head>
    <body>
    
       <table id="theGrid" style="height: 300px"></table>
       
       <script>
          var src = [
             {"test": "a", "col2": "", "col3": "", "col4": "" },{"test": "a"},{"test": "b"},{"test": "c"},
             {"test": "d"},{"test": "d"},{"test": "d"},{"test": "d"},{"test": "d"},{"test": "d"},{"test": "d"}];
       
          var data = new wijmo.collections.CollectionView(src);      
          data.groupDescriptions.push(new wijmo.collections.PropertyGroupDescription('test'));         
    
          var _super = wijmo.grid.CellFactory;         
          
          var cellFactory = new wijmo.grid.CellFactory();
          cellFactory.updateCell = function (panel, r, c, cell, rng, updateContent)
          {         
             _super.prototype.updateCell.call(this, panel, r, c, cell, rng, true);
             
             if (panel.cellType == wijmo.grid.CellType.Cell)
             {                        
                if (panel.rows[r] instanceof wijmo.grid.GroupRow
                   && panel.cellType !== wijmo.grid.CellType.RowHeader)
                {
                   if (r === 0)
                   {                  
                      let expand = $("<button class='test' style='min-height: 1.5em; padding: 0'>expand</button>");
                      let collapse = $("<button class='test' style='min-height: 1.5em; padding: 0'>collapse</button>");
                      
                      $(cell).append(expand);
                      $(cell).append(collapse);
     
                      expand.on('click', function ()
                      {
                         alert('expand');
                      });
                      
                      collapse.on('click', function ()
                      {
                         alert('collapse');
                      });
                   }         
                }
             }
          };
             
          var theGrid = new wijmo.grid.FlexGrid('#theGrid', {
             itemsSource: data,
             frozenRows: 1,
             cellFactory: cellFactory
          });
       </script>
    </body>
    </html>
    
    
    

    (couldn’t tell if the attachment was working - the tick/x buttons were disabled)

  • Posted 30 April 2019, 3:23 am EST

    Hello,

    The click event is not firing in Firefox because of the frozen rows. In Firefox, the frozen row is cloned to improve performance and therefore the original buttons with click events attached are hidden beneath the duplicate buttons.

    To solve this issue, set the value of cloneFrozenCells property to false. Please refer to the sample attached.

    API Reference:

    cloneFrozenCells:

    https://www.grapecity.com/wijmo/api/classes/wijmo_grid.flexgrid.html#clonefrozencellsindex.zip

  • Posted 30 April 2019, 7:51 pm EST

    Thanks.

    If I wanted to keep the performance improvement, is there a suitable grid event that fires after the clone that I could bind the click events in?

  • Posted 1 May 2019, 8:51 am EST

    Hi,

    We are sorry but there is no event that fires after cloning has occurred. But you could attach a click event to the cloned buttons after the grid has been initialized. Please refer to the attached sample which demonstrates the same.

    Regards

    index.zip

Need extra support?

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

Learn More

Forum Channels