{"id":258,"date":"2010-09-18T09:03:00","date_gmt":"2010-09-18T09:03:00","guid":{"rendered":"http:\/\/www.greytrix.com\/blogs\/sagecrm\/?p=258"},"modified":"2023-10-06T06:54:30","modified_gmt":"2023-10-06T06:54:30","slug":"display-multiple-grids-on-single-screen","status":"publish","type":"post","link":"https:\/\/www.greytrix.com\/blogs\/sagecrm\/2010\/09\/18\/display-multiple-grids-on-single-screen\/","title":{"rendered":"Display multiple grids on Single Screen"},"content":{"rendered":"<p><span style=\"color: black; font-family: 'Calibri','sans-serif'; font-size: 12pt; line-height: 115%; mso-ansi-language: EN-US; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-SA; mso-fareast-font-family: Calibri; mso-fareast-language: EN-US; mso-hansi-theme-font: minor-latin;\">The normal SageCRM user interface that we have got used to over the years is that the user clicks on a tab and if the tab lists multiple records then the user are presented with a grid. The user then has to click on one of the records to view the summary or detail information of that record. Makes perfect sense.<\/span><\/p>\n<p><span style=\"color: black; font-family: 'Calibri','sans-serif'; font-size: 12pt; line-height: 115%; mso-ansi-language: EN-US; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-SA; mso-fareast-font-family: Calibri; mso-fareast-language: EN-US; mso-hansi-theme-font: minor-latin;\"><strong><span style=\"color: black; font-family: 'Calibri','sans-serif'; font-size: 12pt; font-weight: normal; line-height: 115%; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-font-weight: bold; mso-hansi-theme-font: minor-latin;\">However there are some users who have such multiple tabs and each of the tabs have grid listed. Now instead of viewing one grid at a time and then clicking on another grid to view the other details, the users need to see the information of both the grids in one single page. It is more like a live in relationship; not related but still together. Till recent past though the SQL relationship between the tables were all that I needed to know while understanding or explaining SageCRM but I could not find a better example than this one <\/span><span style=\"color: black; font-family: Wingdings; font-size: 12pt; font-weight: normal; line-height: 115%; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-font-weight: bold; mso-char-type: symbol; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin; mso-symbol-font-family: Wingdings;\"><span style=\"mso-char-type: symbol; mso-symbol-font-family: Wingdings;\">J<\/span><\/span><span style=\"color: black; font-family: 'Calibri','sans-serif'; font-size: 12pt; font-weight: normal; line-height: 115%; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-font-weight: bold; mso-hansi-theme-font: minor-latin;\">. <\/span><\/strong><\/span><\/p>\n<p><span style=\"color: black; font-family: 'Calibri','sans-serif'; font-size: 12pt; line-height: 115%; mso-ansi-language: EN-US; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-SA; mso-fareast-font-family: Calibri; mso-fareast-language: EN-US; mso-hansi-theme-font: minor-latin;\"><span style=\"color: black; font-family: 'Calibri','sans-serif'; font-size: 12pt; font-weight: normal; line-height: 115%; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-font-weight: bold; mso-hansi-theme-font: minor-latin;\"><span style=\"color: black; font-family: 'Calibri','sans-serif'; font-size: 12pt; line-height: 115%; mso-ansi-language: EN-US; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-SA; mso-fareast-font-family: Calibri; mso-fareast-language: EN-US; mso-hansi-theme-font: minor-latin;\">So now that you have understood what we need to achieve and why we have to do that lets check how to do it and what are the challenges that we encounter during the development.<\/span><\/span><\/span><\/p>\n<h2 style=\"margin: 10pt 0in 0pt;\"><span style=\"color: black; font-family: 'Calibri','sans-serif'; font-size: 12pt; font-weight: normal; line-height: 115%; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-font-weight: bold; mso-hansi-theme-font: minor-latin;\">To achieve the above result we used IFRAME. Each of the grids was initiated by its own IFRAME from a parent page. The IFRAME was assigned appropriate properties so it does not look like an IFRAME and bingo!!! We got what we wanted. But the work did not stop here. The challenge here was that we had to handle the navigation as well. Once the users click on the record in the grid and go to the summary or details of the record, the back or cancel button should get him back to the parent page that houses the 2 grids. That was a little tricky but we managed to get past it and were happy that we were able to<\/span><span style=\"color: black; font-family: 'Arial','sans-serif'; font-size: 12pt; font-weight: normal; line-height: 115%; mso-bidi-font-weight: bold;\"> <span style=\"color: black; font-family: 'Calibri','sans-serif'; font-size: 12pt; font-weight: normal; line-height: 115%; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-font-weight: bold; mso-hansi-theme-font: minor-latin;\">present the client with the solution that he wanted. Here is how the grid looked like.<\/span><\/span><\/h2>\n<h2 style=\"margin: 10pt 0in 0pt;\"><\/h2>\n<div class=\"separator\" style=\"clear: both; text-align: center;\"><a style=\"margin-left: 1em; margin-right: 1em;\" href=\"http:\/\/4.bp.blogspot.com\/_A6_b0zkYeSY\/TJR-7yfedVI\/AAAAAAAABHM\/3GY7zB5dHl4\/s1600\/Grid.JPG\" target=\"_blank\" rel=\"noopener\"><img fetchpriority=\"high\" decoding=\"async\" class=\"alignnone\" src=\"http:\/\/4.bp.blogspot.com\/_A6_b0zkYeSY\/TJR-7yfedVI\/AAAAAAAABHM\/3GY7zB5dHl4\/s640\/Grid.JPG\" alt=\"Multiple grids on single screen\" width=\"640\" height=\"208\" border=\"0\" \/><\/a><\/div>\n<p><b>If you find this content useful, please feel free to drop us an email at <a title=\"mailto:crm@greytrix.com\" href=\"mailto:crm@greytrix.com\">crm@greytrix.com<\/a>. <\/b><\/p>\n","protected":false},"excerpt":{"rendered":"<p>The normal SageCRM user interface that we have got used to over the years is that the user clicks on a tab and if the tab lists multiple records then the user are presented with a grid. The user then has to click on one of the records to view the summary or detail information\u2026 <span class=\"read-more\"><a href=\"https:\/\/www.greytrix.com\/blogs\/sagecrm\/2010\/09\/18\/display-multiple-grids-on-single-screen\/\">Read More &raquo;<\/a><\/span><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[499,503,1223],"class_list":["post-258","post","type-post","status-publish","format-standard","hentry","category-uncategorized","tag-action","tag-actions-on-grid","tag-grid"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.3 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Display multiple grids on Single Screen - Sage CRM \u2013 Tips, Tricks and Components<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.greytrix.com\/blogs\/sagecrm\/2010\/09\/18\/display-multiple-grids-on-single-screen\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Display multiple grids on Single Screen - Sage CRM \u2013 Tips, Tricks and Components\" \/>\n<meta property=\"og:description\" content=\"The normal SageCRM user interface that we have got used to over the years is that the user clicks on a tab and if the tab lists multiple records then the user are presented with a grid. The user then has to click on one of the records to view the summary or detail information\u2026 Read More &raquo;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.greytrix.com\/blogs\/sagecrm\/2010\/09\/18\/display-multiple-grids-on-single-screen\/\" \/>\n<meta property=\"og:site_name\" content=\"Sage CRM \u2013 Tips, Tricks and Components\" \/>\n<meta property=\"article:published_time\" content=\"2010-09-18T09:03:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-10-06T06:54:30+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/4.bp.blogspot.com\/_A6_b0zkYeSY\/TJR-7yfedVI\/AAAAAAAABHM\/3GY7zB5dHl4\/s640\/Grid.JPG\" \/>\n<meta name=\"author\" content=\"greysagecrm\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"greysagecrm\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.greytrix.com\/blogs\/sagecrm\/2010\/09\/18\/display-multiple-grids-on-single-screen\/\",\"url\":\"https:\/\/www.greytrix.com\/blogs\/sagecrm\/2010\/09\/18\/display-multiple-grids-on-single-screen\/\",\"name\":\"Display multiple grids on Single Screen - Sage CRM \u2013 Tips, Tricks and Components\",\"isPartOf\":{\"@id\":\"https:\/\/www.greytrix.com\/blogs\/sagecrm\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.greytrix.com\/blogs\/sagecrm\/2010\/09\/18\/display-multiple-grids-on-single-screen\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.greytrix.com\/blogs\/sagecrm\/2010\/09\/18\/display-multiple-grids-on-single-screen\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/4.bp.blogspot.com\/_A6_b0zkYeSY\/TJR-7yfedVI\/AAAAAAAABHM\/3GY7zB5dHl4\/s640\/Grid.JPG\",\"datePublished\":\"2010-09-18T09:03:00+00:00\",\"dateModified\":\"2023-10-06T06:54:30+00:00\",\"author\":{\"@id\":\"https:\/\/www.greytrix.com\/blogs\/sagecrm\/#\/schema\/person\/e7ff1c8f4763b47730d6bc5e74d59c1f\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.greytrix.com\/blogs\/sagecrm\/2010\/09\/18\/display-multiple-grids-on-single-screen\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.greytrix.com\/blogs\/sagecrm\/2010\/09\/18\/display-multiple-grids-on-single-screen\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.greytrix.com\/blogs\/sagecrm\/2010\/09\/18\/display-multiple-grids-on-single-screen\/#primaryimage\",\"url\":\"http:\/\/4.bp.blogspot.com\/_A6_b0zkYeSY\/TJR-7yfedVI\/AAAAAAAABHM\/3GY7zB5dHl4\/s640\/Grid.JPG\",\"contentUrl\":\"http:\/\/4.bp.blogspot.com\/_A6_b0zkYeSY\/TJR-7yfedVI\/AAAAAAAABHM\/3GY7zB5dHl4\/s640\/Grid.JPG\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.greytrix.com\/blogs\/sagecrm\/2010\/09\/18\/display-multiple-grids-on-single-screen\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.greytrix.com\/blogs\/sagecrm\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Display multiple grids on Single Screen\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.greytrix.com\/blogs\/sagecrm\/#website\",\"url\":\"https:\/\/www.greytrix.com\/blogs\/sagecrm\/\",\"name\":\"Sage CRM \u2013 Tips, Tricks and Components\",\"description\":\"Explore the possibilities with Sage CRM insights through our comprehensive blogs. As a leading Sage partner, Greytrix helps businesses maximize their Sage CRM potential with its rich expertise and immense knowledge. Here, you will find blogs that feature expert advice, tips &amp; tricks, best practices, and comprehensive guides on customizing and configuring Sage CRM for your business. Stay informed with our regular updates and expert insights!\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.greytrix.com\/blogs\/sagecrm\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.greytrix.com\/blogs\/sagecrm\/#\/schema\/person\/e7ff1c8f4763b47730d6bc5e74d59c1f\",\"name\":\"greysagecrm\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.greytrix.com\/blogs\/sagecrm\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/c3b4325cb326e36467f945b9b9adf2bb85e907fe092d42eb36b39743b492e626?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/c3b4325cb326e36467f945b9b9adf2bb85e907fe092d42eb36b39743b492e626?s=96&d=mm&r=g\",\"caption\":\"greysagecrm\"},\"url\":\"https:\/\/www.greytrix.com\/blogs\/sagecrm\/author\/greysagecrm\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Display multiple grids on Single Screen - Sage CRM \u2013 Tips, Tricks and Components","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.greytrix.com\/blogs\/sagecrm\/2010\/09\/18\/display-multiple-grids-on-single-screen\/","og_locale":"en_US","og_type":"article","og_title":"Display multiple grids on Single Screen - Sage CRM \u2013 Tips, Tricks and Components","og_description":"The normal SageCRM user interface that we have got used to over the years is that the user clicks on a tab and if the tab lists multiple records then the user are presented with a grid. The user then has to click on one of the records to view the summary or detail information\u2026 Read More &raquo;","og_url":"https:\/\/www.greytrix.com\/blogs\/sagecrm\/2010\/09\/18\/display-multiple-grids-on-single-screen\/","og_site_name":"Sage CRM \u2013 Tips, Tricks and Components","article_published_time":"2010-09-18T09:03:00+00:00","article_modified_time":"2023-10-06T06:54:30+00:00","og_image":[{"url":"http:\/\/4.bp.blogspot.com\/_A6_b0zkYeSY\/TJR-7yfedVI\/AAAAAAAABHM\/3GY7zB5dHl4\/s640\/Grid.JPG","type":"","width":"","height":""}],"author":"greysagecrm","twitter_card":"summary_large_image","twitter_misc":{"Written by":"greysagecrm","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.greytrix.com\/blogs\/sagecrm\/2010\/09\/18\/display-multiple-grids-on-single-screen\/","url":"https:\/\/www.greytrix.com\/blogs\/sagecrm\/2010\/09\/18\/display-multiple-grids-on-single-screen\/","name":"Display multiple grids on Single Screen - Sage CRM \u2013 Tips, Tricks and Components","isPartOf":{"@id":"https:\/\/www.greytrix.com\/blogs\/sagecrm\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.greytrix.com\/blogs\/sagecrm\/2010\/09\/18\/display-multiple-grids-on-single-screen\/#primaryimage"},"image":{"@id":"https:\/\/www.greytrix.com\/blogs\/sagecrm\/2010\/09\/18\/display-multiple-grids-on-single-screen\/#primaryimage"},"thumbnailUrl":"http:\/\/4.bp.blogspot.com\/_A6_b0zkYeSY\/TJR-7yfedVI\/AAAAAAAABHM\/3GY7zB5dHl4\/s640\/Grid.JPG","datePublished":"2010-09-18T09:03:00+00:00","dateModified":"2023-10-06T06:54:30+00:00","author":{"@id":"https:\/\/www.greytrix.com\/blogs\/sagecrm\/#\/schema\/person\/e7ff1c8f4763b47730d6bc5e74d59c1f"},"breadcrumb":{"@id":"https:\/\/www.greytrix.com\/blogs\/sagecrm\/2010\/09\/18\/display-multiple-grids-on-single-screen\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.greytrix.com\/blogs\/sagecrm\/2010\/09\/18\/display-multiple-grids-on-single-screen\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.greytrix.com\/blogs\/sagecrm\/2010\/09\/18\/display-multiple-grids-on-single-screen\/#primaryimage","url":"http:\/\/4.bp.blogspot.com\/_A6_b0zkYeSY\/TJR-7yfedVI\/AAAAAAAABHM\/3GY7zB5dHl4\/s640\/Grid.JPG","contentUrl":"http:\/\/4.bp.blogspot.com\/_A6_b0zkYeSY\/TJR-7yfedVI\/AAAAAAAABHM\/3GY7zB5dHl4\/s640\/Grid.JPG"},{"@type":"BreadcrumbList","@id":"https:\/\/www.greytrix.com\/blogs\/sagecrm\/2010\/09\/18\/display-multiple-grids-on-single-screen\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.greytrix.com\/blogs\/sagecrm\/"},{"@type":"ListItem","position":2,"name":"Display multiple grids on Single Screen"}]},{"@type":"WebSite","@id":"https:\/\/www.greytrix.com\/blogs\/sagecrm\/#website","url":"https:\/\/www.greytrix.com\/blogs\/sagecrm\/","name":"Sage CRM \u2013 Tips, Tricks and Components","description":"Explore the possibilities with Sage CRM insights through our comprehensive blogs. As a leading Sage partner, Greytrix helps businesses maximize their Sage CRM potential with its rich expertise and immense knowledge. Here, you will find blogs that feature expert advice, tips &amp; tricks, best practices, and comprehensive guides on customizing and configuring Sage CRM for your business. Stay informed with our regular updates and expert insights!","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.greytrix.com\/blogs\/sagecrm\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.greytrix.com\/blogs\/sagecrm\/#\/schema\/person\/e7ff1c8f4763b47730d6bc5e74d59c1f","name":"greysagecrm","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.greytrix.com\/blogs\/sagecrm\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/c3b4325cb326e36467f945b9b9adf2bb85e907fe092d42eb36b39743b492e626?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c3b4325cb326e36467f945b9b9adf2bb85e907fe092d42eb36b39743b492e626?s=96&d=mm&r=g","caption":"greysagecrm"},"url":"https:\/\/www.greytrix.com\/blogs\/sagecrm\/author\/greysagecrm\/"}]}},"_links":{"self":[{"href":"https:\/\/www.greytrix.com\/blogs\/sagecrm\/wp-json\/wp\/v2\/posts\/258","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.greytrix.com\/blogs\/sagecrm\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.greytrix.com\/blogs\/sagecrm\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.greytrix.com\/blogs\/sagecrm\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.greytrix.com\/blogs\/sagecrm\/wp-json\/wp\/v2\/comments?post=258"}],"version-history":[{"count":1,"href":"https:\/\/www.greytrix.com\/blogs\/sagecrm\/wp-json\/wp\/v2\/posts\/258\/revisions"}],"predecessor-version":[{"id":27867,"href":"https:\/\/www.greytrix.com\/blogs\/sagecrm\/wp-json\/wp\/v2\/posts\/258\/revisions\/27867"}],"wp:attachment":[{"href":"https:\/\/www.greytrix.com\/blogs\/sagecrm\/wp-json\/wp\/v2\/media?parent=258"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.greytrix.com\/blogs\/sagecrm\/wp-json\/wp\/v2\/categories?post=258"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.greytrix.com\/blogs\/sagecrm\/wp-json\/wp\/v2\/tags?post=258"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}