Add Clear & select all button at bottom of Popup Column Picker (Angular)

Posted by: ksm.ac.in on 7 July 2020, 3:58 pm EST

  • Posted 7 July 2020, 3:58 pm EST

    Hello Team GrapeCity,

    Can we add
    1. "Clear"
    2. "Select All" button
    3. "count of selected column out of all"


    at bottom of Popup Column Picker (Angular) Grid.
    As per attached image


    If yes, please let us know, how we can achieve this.

    Thanks

  • Marked as Answer

    Replied 8 July 2020, 4:58 pm EST

    Hi,

    We can achieve this by simply updating the layout of the column picker and by adding multiple buttons and adding event listeners on these buttons. Please refer to the sample link below for reference:

    https://stackblitz.com/edit/angular-gggscy

    Regards,
    Ashwin
  • Replied 14 July 2020, 4:02 pm EST

    It works. Thanks Team GrapeCity.
  • Replied 5 August 2020, 12:34 am EST

    Hello Ashwin,

    Please provide your suggestion,

    we want close/hide Popup Column Picker, if user click anywhere outside Popup. Like in yellow mark in attached image.

    We have tried lostfocus, but in that user have first click on checkbox then event triggers, without click on checkbox ,lostfocus event not called. We used "hidePopup(this.pickerRef)" in lost event.

    Please suggest any, after open , how we can hide it to click outside of popup area.
    As now Close button not required.



    Thanks in Advance.


  • Replied 5 August 2020, 7:24 pm EST

    Hi,

    Since, the new column picker container is not a Wijmo control and is just a simple div element, lostFocus will not work. You can use the blur event on the main container to hide the popup but as soon you will click on any of the checkboxes inside the main container, the blur event will fire closing the main container.

    The only solution I was able to find is to handle the mousedown event on the whole document and if the current target is the main container or one of its child, then close the popup. Refer to the updated sample link below:

    https://stackblitz.com/edit/angular-dmyvkn

    ~regards
  • Replied 5 August 2020, 9:25 pm EST

    Perfect !

    Thanks Ashwin for this quick response, it works.
Need extra support?

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

Learn More

Forum Channels