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

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

• 

  ksm.ac.in

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 7 July 2020, 3:58 pm EST - Updated 3 October 2022, 6:06 am 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

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 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

• 

  ksm.ac.in

  • Post Options:
  • Link
    Copy

  Posted 14 July 2020, 4:02 pm EST

  It works. Thanks Team GrapeCity.

• 

  ksm.ac.in

  • Post Options:
  • Link
    Copy

  Posted 5 August 2020, 12:34 am EST - Updated 3 October 2022, 6:06 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.

  

  933×864 80 KB

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 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

• 

  ksm.ac.in

  • Post Options:
  • Link
    Copy

  Posted 5 August 2020, 9:25 pm EST

  Perfect !

  Thanks Ashwin for this quick response, it works.