jQuery UI Widgets Forums Angular jqxPopover on dynamic element in *ngfor

This topic contains 2 replies, has 3 voices, and was last updated by  msn_elf 5 years, 5 months ago.

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

  • ansh143
    Participant

    Hi,

    How can i bind it inside ng loop as I am having multiple delete buttons and it is giving error jqxPopover: Invalid Popover toggler: \”#container1\”.”
    Here is my Code:

                                   <jqxPopover
                                            [showCloseButton]="true"
                                            [selector]="'#container' + citydatadetails1.id"
                                            [title]="'Delete'"
                                            [arrowOffsetValue]="50"
                                            [offset]="{ left: 300, top: -9 }"
                                    >
                                        <div>You want to delete</div>
                                    </jqxPopover>
    
                                    <jqxButton id="container{{citydatadetails1.id}}">
                                        <i class="fa fa-trash"></i>
                                    </jqxButton>

    If i bind with static id it works fine
    Thanks

    • This topic was modified 6 years, 1 month ago by  ansh143. Reason: Title Changed and codse formatted
    • This topic was modified 6 years, 1 month ago by  ansh143.

    Hristo
    Participant

    Hello ansh143,

    I would like to suggest you try to use the class selector:

    <jqxPopover #popover
    	[position]="'left'"
    	[title]="'Employees'"
    	[showCloseButton]="true"
    	[selector]="'.classpopover'"
    	>
      <div #employees> testing example </div>
    </jqxPopover>
    <div class="classpopover">
        <jqxButton id="test" style="float: right; margin-top: 10px; padding: 8px 0px; border-radius: 6px;"
            [width]="140" [height]="35">View Employees</jqxButton>
      </div>

    Let me know if this does not help you.

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com

    jqxPopover on dynamic element in *ngfor #102753

    msn_elf
    Participant

    Hi
    try this solution :

    you must set 'auto-create=false'  and create popover component in afterViewInit State
    1- your popover :
     <jqxPopover
        #removePopover
        [auto-create]="false"
    [selector]="'.' + uniqName">
    </jqxPopover>
    2- your container :
    <div[class]="uniqName"></div>
    3-  in '... .component.ts'  please implement AfterViewInit:
    import { jqxPopoverComponent } from 'jqwidgets-scripts/jqwidgets-ts/angular_jqxpopover';
        @ViewChild('removePopover') removePopover: jqxPopoverComponent;
        ngAfterViewInit(): void {
         if (this.removePopover) {
            this.removePopover.createComponent();
          }
        }
    
    • This reply was modified 5 years, 5 months ago by  msn_elf.
Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.