Wijmo filter icon issue and listbox item dispaly issue

Wijmo filter icon issue and listbox item dispaly issue

Posted by: teenu.k on 8 May 2020, 11:46 am EST

• 

  teenu.k

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 8 May 2020, 11:46 am EST

  Hi,
  
  In my flexgrid i included both columnGroups and also filter functionality. when these comes together my filter icon is shown in right of the column header.
  
  I need to show it on the right of the header name.

  when i inspect it and removing display: flex; from wj-colgroup it is showing correctly but then header text alignment in center broken.
  
  also I tried float:right but not working.
  
  how to solve this?

  sample binding json

  [{ “allowSorting”: false, “header”: “Period”,“align”:“center”, “visible”:“true”,“columns”:[

  { "allowSorting": false, "binding": "periodStartDate", "header": "Start Date",  "dataType": "4", "format": "yyyy-MM-dd"},
  { "allowSorting": false, "binding": "periodEndDate", "header": "End Date",  "dataType": "4", "format": "yyyy-MM-dd"}
  ]},
  { "allowSorting": false, "binding": "currencyCode", "header": "Currency", "visible": true, "dataType": "1"}
  

  ]

  2.Also i implemented wijmo column picker. as seen in the html there columnGroups applied. my requirement is need to include only the parent headers(Period,Currency) in columnpicker. not needed to dispaly the child items (eg: Start Date,End Date )

  and also when uncheck the parent item from column picker need to hide both child columns ( Start Date,End Date ) from the grid. Is there any option?

  Thanks,
  
  Teenu

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 11 May 2020, 2:05 am EST

  Hi Teenu,

  The filter icons use the float CSS property to right-align themselves. But, with flex display, float does not work. To solve this, you may use the following CSS rule:

  .wj-flexgrid .wj-cell .wj-btn.wj-btn-glyph.wj-right {
    margin-left: auto;
    order: 2;
  }
  

  Regarding the picker, the column groups are stored in the columnGroups object. So, you may set the grid.columnGroups as the itemsSource of the column picker and handle the checkedItemsChanged event to change the visibility of the column groups.

  Refer to the sample link below:

  https://stackblitz.com/edit/js-sjh74t

  Regards,
  
  Ashwin

• 

  teenu.k

  • Post Options:
  • Link
    Copy

  Posted 11 May 2020, 10:48 am EST

  Thanks, Ashwin!! it worked for me. One more thing is how to add select all functionality for this list box ?

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 12 May 2020, 1:17 am EST

  Hi,

  Sorry but ListBox does not support a select all button.

  ~regards