Keep popup edit form next to edited item

Thread is closed for posting
1 posts, 0 answers
  1. D41B02FE-0EF9-48A6-9B2C-E910424294F5
    D41B02FE-0EF9-48A6-9B2C-E910424294F5 avatar
    23 posts
    Member since:
    Jul 2012

    Posted 09 Oct 2018 Link to this post

    If you want to keep the popup edit form of a RadGrid in a static place so it denotes to the user which item they are editing (in addition to the row highlight that the grid provides), you can use the approach below.

    This can also solve some problems where the form may move especially if postbacks inside it occur and/or scrollbars get lost due to partial page rendering removing some scrollbars during parsing of the new content, and thus changes the position of the grid and the popup form.

    The gist is that you can make the table row that contains the popup form have position:relative, and use the OnPopupShowing event to move the form to its beginning (or another location as per your preferences):

    <style>
        .rgEditRow + tr > td {
            position: absolute; /*so that positioning happens according to the row element and not another parent element, thus making calculations easier for this case*/
        }
    </style>
    <script type="text/javascript">
        function onPopUpShowing(sender, args) {
            setTimeout(function () {
                //in this case we hardcode 0px, you can do other calculations or choose another position (e.g., negative values)
                args.get_popUp().style.left = "0px";
                args.get_popUp().style.top = "0px";
            }, 200); //so this happens after the built-in logic and overrides it
        }
    </script>

    There are two other approaches you can consider:

Back to Top

This Code Library is part of the product documentation and subject to the respective product license agreement.