jQuery UI Widgets Forums Angular How to create popover dynamically in grid's createwidget

Tagged: ,

This topic contains 2 replies, has 2 voices, and was last updated by  ilywanzi 7 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author

  • ilywanzi
    Participant

    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 => {
    
            }
          },

    Hristo
    Participant

    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


    ilywanzi
    Participant

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

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.