How to create popover dynamically in grid's createwidget

[ilywanziParticipant]

Hi, I user createwidget to render some icons in one column of the gird, but now I need to also add popover to the same column. Is there a way I can dynamically initialize popover in column? I want to show a popover when user click the “Delete” button. Below is the code:

{
        text: 'Action', datafield: null,
        createwidget: (row: any, column: any, value: string, htmlElement: HTMLElement): void => {
          const deleteBtn = document.createElement('span');
          deleteBtn.className = 'glyphicon glyphicon-trash edit-action-icon';
          const tooltip1 = document.createAttribute('title');
          tooltip1.value = 'Delete Row';
          deleteBtn.setAttributeNode(tooltip1);

          const moveUpBtn = document.createElement('span');
          moveUpBtn.className = 'glyphicon glyphicon-arrow-up edit-action-icon';
          const tooltip2 = document.createAttribute('title');
          tooltip2.value = 'Move Up';
          moveUpBtn.setAttributeNode(tooltip2);

          const moveDownBtn = document.createElement('span');
          moveDownBtn.className = 'glyphicon glyphicon-arrow-down edit-action-icon';
          const tooltip3 = document.createAttribute('title');
          tooltip3.value = 'Move Down';
          moveDownBtn.setAttributeNode(tooltip3);

          const delBtnId = <code>deleteBtn${row.boundindex}</code>;
          const moveUpBtnId = <code>moveUpBtn${row.boundindex}</code>;
          const moveDownId = <code>moveDownBtn${row.boundindex}</code>;
          deleteBtn.id = delBtnId;
          moveUpBtn.id = moveUpBtnId;
          moveDownBtn.id = moveDownId;
          htmlElement.appendChild(deleteBtn);
          htmlElement.appendChild(moveUpBtn);
          htmlElement.appendChild(moveDownBtn);
          const del = jqwidgets.createInstance(<code>#${delBtnId}</code>, 'jqxButton');
          const moveUp = jqwidgets.createInstance(<code>#${moveUpBtnId}</code>, 'jqxButton');
          const moveDown = jqwidgets.createInstance(<code>#${moveDownId}</code>, 'jqxButton');

          del.addEventHandler('click', () => {
            this.deleteRow(row.boundindex);
          });
          moveUp.addEventHandler('click', () => {
            this.rowMoveUp(row.boundindex);
          });
          moveDown.addEventHandler('click', () => {
            this.rowMoveDown(row.boundindex);
          });
        },
        initwidget: (row: number, column: any, value: any, htmlElement: HTMLElement): void => {

        }
      },

[HristoParticipant]

Hello ilywanzi,

I would like to mention something before continuing.
The initwidget callback is important to be implemented correctly, too.
It is required when you have to update the parameters.
For this case, I would like to suggest you use the Dynamic Injection approach to include the jqxPopover at the wanted place:
https://www.jqwidgets.com/angular-components-documentation/documentation/angular-dynamic-components/index.htm?search=
Also, another option is to use the jqxTooltip which is a light option to achieve this behavior and to show it at the wanted coordinates.
In this case, the approach with the cellhover callback will be useful.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[ilywanziParticipant]

Hi, Hristo, thanks for your comments, I will try these options.

[Author]

Posts