Popover in grid row sometimes (random) opens offset from clicked position

2 Answers 252 Views
Grid
Morten
Top achievements
Rank 1
Iron
Iron
Veteran
Morten asked on 06 Aug 2022, 07:20 AM

In a grid's dataBound event I set up popovers.

The popover sometimes opens at the correct position when the element is clicked.

Please see this video: https://vimeo.com/737072810/10bb7c26d8

This is the code setting up the popovers:

    dataBound: function(e) {

        $(".view-qrcode").kendoPopover({
            position: "bottom",
            body: '<div class="asset-qr"></div>',
            showOn: "click",
            animation: false,
            show: function (e) {

                // build QR code
                var $target = $(e.sender.element[0]);
                var uniqueId = $target.closest("tr").data("uid");
                var dataItem = Ise.Kendo.Grid.getDataItem("#assets-grid", uniqueId);
                var $popup = $(e.sender.popup.element[0]);
                var $assetQrs = $(".asset-qr", $popup);
                var url = viewModel.assetBaseUrl + '/' + dataItem.shortId;

                var $assetQr = $($assetQrs[0]);
                $assetQr.empty();

                $($assetQr).kendoQRCode({
                    value: url,
                    errorCorrection: "M",
                    size: 120
                });

            }
        });

    }
}).data("kendoGrid");

What am I doing wrong?

NB there is no PopOver tag

 

 

Morten
Top achievements
Rank 1
Iron
Iron
Veteran
commented on 08 Aug 2022, 05:06 PM

This post should have been posted in the KendoUI for jQuery forum

2 Answers, 1 is accepted

Sort by
0
Accepted
Neli
Telerik team
answered on 11 Aug 2022, 11:29 AM

Hello Morten,

The described issue appears due to the Popover being rendered first. Then its content is changed by adding the QRCode, respectively its width is changed as well. In order to avoid displaying the Popover in an undesired position, I would suggest you set the width to the Popover widget.

 $(".view-qrcode").kendoPopover({
            position: "bottom",
            body: '<div class="asset-qr"></div>',
            showOn: "click",
            animation: false,
            width: 150,

This way the Popover width will remain the same and it will be rendered in the same position even after the QRCode is added. Here you will find the modified Dojo example. 

 I hope this helps.

Regards,
Neli
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them. Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Morten
Top achievements
Rank 1
Iron
Iron
Veteran
commented on 11 Aug 2022, 12:35 PM

Thanks, Neli. That solves the problem for me
0
Neli
Telerik team
answered on 11 Aug 2022, 06:51 AM

Hi Morten,

I am writing you to inform you that I managed to replicate the described issue in the Dojo linked here. However, I will need a little bit more time to review the scenario and provide a suggestion for resolving the issue.

 

Regards,
Neli
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Morten
Top achievements
Rank 1
Iron
Iron
Veteran
commented on 11 Aug 2022, 10:58 AM

Hi Neli. Thanks for your message. Take your time, it's just a minor issue for me.
Tags
Grid
Asked by
Morten
Top achievements
Rank 1
Iron
Iron
Veteran
Answers by
Neli
Telerik team
Share this question
or