locked
Place flyout close to clicked ListView item

    Question

  • I need to display a flyout when a listview item is invoked.

    Is there a way to place a flyout closer to the actual position inside the list item where the click/touch occured that led to the invoke event? Currently I can only place the flyout relative to the whole list item, which is quite wide.

    My listview item contains several span element and I would like to use one of them as an anchor point. But the iteminvoked item does not carry the mouse position or the exact element that was touched inside the listview item.

    So my idea is to also listen to listview mousedown events and save the srcElement and reuse that when placing the flyout. But that seems like a hack to me. Any official way of achieving what I need?

    Wednesday, June 18, 2014 9:03 AM

Answers

  • Answering my own questions:

    listView.element.onmousedown = function(event) {
      event.currentTarget.clickedElement = event.srcElement;
    };
    listView.oniteminvoked = function(event) {
      event.detail.itemPromise.then(function(item) {
       flyout.confirmAsync(event.currentTarget.clickedElement, ...)
    };
    This will place the flyout close to the clicked element inside the listviews item.

    Not sure about the circular reference imposed on the listviews element though. But I think once the listview is removed from the DOM this reference to one of its child items goes away too.


    • Proposed as answer by pkursawe Wednesday, June 18, 2014 9:53 PM
    • Marked as answer by Jamles HezModerator Thursday, June 19, 2014 12:46 AM
    Wednesday, June 18, 2014 9:53 PM

All replies

  • Hi phil_ke,

    While the listview item is invoked, will this be a help: getPosition function ?

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Wednesday, June 18, 2014 9:44 AM
    Moderator
  • unfortunately not
    Wednesday, June 18, 2014 11:22 AM
  • Answering my own questions:

    listView.element.onmousedown = function(event) {
      event.currentTarget.clickedElement = event.srcElement;
    };
    listView.oniteminvoked = function(event) {
      event.detail.itemPromise.then(function(item) {
       flyout.confirmAsync(event.currentTarget.clickedElement, ...)
    };
    This will place the flyout close to the clicked element inside the listviews item.

    Not sure about the circular reference imposed on the listviews element though. But I think once the listview is removed from the DOM this reference to one of its child items goes away too.


    • Proposed as answer by pkursawe Wednesday, June 18, 2014 9:53 PM
    • Marked as answer by Jamles HezModerator Thursday, June 19, 2014 12:46 AM
    Wednesday, June 18, 2014 9:53 PM