Replace "wj-groupmarker" template for items within "wj-group-panel"

Replace "wj-groupmarker" template for items within "wj-group-panel"

Posted by: ewurzer on 21 December 2023, 5:00 am EST

• 

  ewurzer

  • Post Options:
  • Link
    Copy

  Posted 21 December 2023, 5:00 am EST

  In a vue project I’m using a group panel:

  <wj-group-panel :initialized='onGroupPanelReady' :grid='grid' id='group-panel' placeholder='Drag columns here to create groups'></wj-group-panel>

  When columns are dragged up to it, they create groups as expected. I would like to change the HTML template for these items, however (the “wj-groupmarker” items).

  How can I do this? Currently I’m using raw DOM manipulation but its less than ideal.

• 

  anirudh.verma

  

  • Post Options:
  • Link
    Copy

  Posted 25 December 2023, 3:27 pm EST

  Hi,

  Sorry for the late reply. There is no direct method of modifying the default template of the group panel items. So, to modify the HTML template of the items formed in the GroupPanel, you need to overwrite the refresh method of the GroupPanel class. It is required because the items are created in this method. So, you may modify it accordingly as per your requirement.

  Please refer to this sample for reference: https://stackblitz.com/edit/vue-example-1-qtv6vq

  Also, if you just want to style the items, then it could be done using the CSS. You need to use the wj-groupmarker class for this.

  Please refer to this sample for reference: https://stackblitz.com/edit/vue-example-1-hg1b7b

  Thank you for your understanding and patience.

  Regards