{"id":2734,"date":"2022-07-22T11:02:30","date_gmt":"2022-07-22T16:02:30","guid":{"rendered":"https:\/\/xlinesoft.com\/blog\/?p=2734"},"modified":"2022-10-14T16:45:25","modified_gmt":"2022-10-14T21:45:25","slug":"how-to-scroll-list-page-to-the-record-that-was-edited","status":"publish","type":"post","link":"https:\/\/xlinesoft.com\/blog\/2022\/07\/22\/how-to-scroll-list-page-to-the-record-that-was-edited\/","title":{"rendered":"How to scroll List page to the record that was edited"},"content":{"rendered":"<p>When you have a long List page with dozens of records, editing or viewing a record on a separate can be cumbersome. After you edit or view a record, clicking &#8216;Back to List&#8217; will display all the records from the top and you lost the position of the record you just edited. This simple technique will allow you to scroll the List page back to the original position and also it will highlight the record that was just edited or viewed. <\/p>\n<p><a href=\"https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2022\/07\/scr.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2022\/07\/scr-600x305.png\" alt=\"\" width=\"600\" height=\"305\" class=\"alignnone size-medium wp-image-2736\" srcset=\"https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2022\/07\/scr-600x305.png 600w, https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2022\/07\/scr-768x390.png 768w, https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2022\/07\/scr-1024x520.png 1024w, https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2022\/07\/scr.png 1255w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/a><\/p>\n<p>To implement this feature in your project, add the following code to respective events.<\/p>\n<h4>List page &#8211;> Javascript onload event<\/h4>\n<div class=\"my-syntax-highlighter\">\n<pre><textarea id=\"mshighlighter\" class=\"mshighlighter\" language=\"js\" name=\"mshighlighter\" >\r\nwindow.onscroll = function() {\r\nlocalStorage.setItem('scroll_value', window.pageYOffset);\r\n};\r\n\r\nif(localStorage.getItem('scroll_value')){\r\nwindow.scrollTo(0, localStorage.getItem('scroll_value'));\r\nlocalStorage.setItem('scroll_value', 0);\r\n}\r\nif(localStorage.getItem(\"editid1\")){\r\nvar id = $(\"[href*='editid1=\"+localStorage.getItem(\"editid1\")+\"']:first\").closest(\"tr\").attr(\"id\");\r\n$(\"#\"+id).css(\"background-color\",\"#AFEEEE\");\r\nlocalStorage.setItem(\"editid1\",\"\");\r\n}<\/textarea><\/pre>\n<\/div>\n<h4>Add page &#8211;> Javasctipt onload event<\/h4>\n<div class=\"my-syntax-highlighter\">\n<pre><textarea id=\"mshighlighter\" class=\"mshighlighter\" language=\"js\" name=\"mshighlighter\" >\r\nlocalStorage.setItem(\"editid1\",proxy[\"editid1\"]);<\/textarea><\/pre>\n<\/div>\n<h4>Add page &#8211;> After Record Added event<\/h4>\n<p><strong>PHP:<\/strong> <\/p>\n<div class=\"my-syntax-highlighter\">\n<pre><textarea id=\"mshighlighter\" class=\"mshighlighter\" language=\"php\" name=\"mshighlighter\" >\r\n$k = array_values($keys);\r\n$pageObject->setProxyValue(\"editid1\", $k[0]);\r\necho \" \";<\/textarea><\/pre>\n<\/div>\n<p><strong>C#:<\/strong><\/p>\n<div class=\"my-syntax-highlighter\">\n<pre><textarea id=\"mshighlighter\" class=\"mshighlighter\" language=\"js\" name=\"mshighlighter\" >\r\ndynamic k = XVar.Array();\r\nk = XVar.Clone(CommonFunctions.array_values((XVar)(keys)));\r\npageObject.setProxyValue(new XVar(\"editid1\"), (XVar)(k[0]));\r\nMVCFunctions.Echo(\" \");<\/textarea><\/pre>\n<\/div>\n<h4>Edit page \/ View page &#8211;> Javascript onload event<\/h4>\n<div class=\"my-syntax-highlighter\">\n<pre><textarea id=\"mshighlighter\" class=\"mshighlighter\" language=\"js\" name=\"mshighlighter\" >\r\nlocalStorage.setItem(\"editid1\",proxy[\"editid1\"]);<\/textarea><\/pre>\n<\/div>\n<h4>Edit page \/ View page &#8211;> Bebore Display event<\/h4>\n<p><strong>PHP:<\/strong> <\/p>\n<div class=\"my-syntax-highlighter\">\n<pre><textarea id=\"mshighlighter\" class=\"mshighlighter\" language=\"php\" name=\"mshighlighter\" > \r\n$pageObject->setProxyValue(\"editid1\",postvalue(\"editid1\"));<\/textarea><\/pre>\n<\/div>\n<p><strong>C#:<\/strong><\/p>\n<div class=\"my-syntax-highlighter\">\n<pre><textarea id=\"mshighlighter\" class=\"mshighlighter\" language=\"js\" name=\"mshighlighter\" >\r\npageObject.setProxyValue(new XVar(\"editid1\"), (XVar)(MVCFunctions.postvalue(new XVar(\"editid1\"))));<\/textarea><\/pre>\n<\/div>\n<p>This is it. Enjoy!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>When you have a long List page with dozens of records, editing or viewing a record on a separate can be cumbersome. After you edit or view a record, clicking &#8216;Back to List&#8217; will display all the records from the top and you lost the position of the record you just edited. This simple technique will allow you to scroll the List page back to the original position and also it will highlight the record that was just edited or viewed. To implement this feature&#8230;<span class=\"clearfix clearfix-post\"><\/span><a href=\"https:\/\/xlinesoft.com\/blog\/2022\/07\/22\/how-to-scroll-list-page-to-the-record-that-was-edited\/\" class=\"more-link\">Continue Reading <span class=\"screen-reader-text\">&#8220;How to scroll List page to the record that was edited&#8221;<\/span> <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[16,1,8],"tags":[],"class_list":["post-2734","post","type-post","status-publish","format-standard","hentry","category-asp-net","category-php-category","category-tutorials"],"_links":{"self":[{"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/posts\/2734","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/comments?post=2734"}],"version-history":[{"count":6,"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/posts\/2734\/revisions"}],"predecessor-version":[{"id":2827,"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/posts\/2734\/revisions\/2827"}],"wp:attachment":[{"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/media?parent=2734"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/categories?post=2734"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/tags?post=2734"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}