Customising pivot panel fields

Customising pivot panel fields

Posted by: ykumar23 on 11 December 2017, 10:48 pm EST

• 

  ykumar23

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 11 December 2017, 10:48 pm EST

  Hi,

  We are using Pivot Panel and able to modify the template using “wijmo.olap.PivotPanel.controlTemplate”.

  But requirement is to replace the checkbox with span or button element with some css added. Clicking on the same should toggle the css.

  Please suggest.

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 13 December 2017, 12:26 am EST

  Hi,
  
  Could you please let us know the after changing checkbox to Button how you would like to select/deselect the fields.

  ~Manish

• 

  ykumar23

  • Post Options:
  • Link
    Copy

  Posted 13 December 2017, 7:02 pm EST

  Hi Manish,

  PFA containing images. I wanted to customize the default checkbox of pivot panel as shown image image.
  
  First image with no hovering. Second image with css class added on hover and third image when user clicked.

  This element contains a label with css class (styling related to border for checked, unchecked).
  
  Label contains input button of type “checkbox” and div to display the name. Please suggest on how I can achieve.

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 14 December 2017, 11:57 pm EST

  Hi,
  
  We are investigating on this. We will let you know on Monday.

  ~Manish

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 17 December 2017, 4:35 pm EST

  Hi,
  
  You need to handle updatedView event for customizing PivotPanle UI and change innerHTML for labels. We also need to update UI window on resize and onload event.

  Please refer to the updated fiddle:
  
  http://jsfiddle.net/mkgupta911/tvw9xbjs/17/

  ~Manish

• 

  ykumar23

  • Post Options:
  • Link
    Copy

  Posted 18 December 2017, 12:44 am EST

  Thank you Manish. I am able to customize the pivot grid labels.

• 

  ykumar23

  • Post Options:
  • Link
    Copy

  Posted 20 December 2017, 5:51 pm EST

  Hi Manish,

  I am able to customize the pivot grid fields but when I click on “Defer update” custom checkbox’s are retaining to original state.

  This can be reproduced in the same url
  
  http://jsfiddle.net/mkgupta911/tvw9xbjs/17/

  I am implementing the same in Angular 2 and on windows resize I can see original checkbox.

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 21 December 2017, 9:58 pm EST

  Hi,
  
  You need to handle click event for defer update PivotPanel UI. Please refer to the attached sample for the same.

  ~Manish

  PivotPanel_UI_Customization.zip