Button in column header on flexgrid

Posted by: ehh on 17 August 2021, 8:08 pm EST

    • Post Options:
    • Link

    Posted 17 August 2021, 8:08 pm EST - Updated 29 September 2022, 12:49 am EST

    Hello,

    Is it possible to add a button to the column header, and potentionally style the column header, to hide the button when not hovering over the header.

  • Posted 19 August 2021, 7:39 pm EST

    Hi,

    To implement the above requirement, we may use the CellFactory class which is used to create every cell which is rendered on the FlexGrid.

    We may override the GetCellContentRenderFragment() method of CellFactory class and may implement it, to add the required button within the columnHeaders.

    To make the button visible only on hover, we may set the following CSS styling:

      .custom-btn {
           display: none;
       }
    
           .wrapper-custom-btn:hover > .custom-btn{
               display: inline-block;
           }
    

    Please refer to the following sample: FlexGrid_ (3).zip

    Regards,

    Manish Gupta

Need extra support?

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

Learn More

Forum Channels