{"id":144,"date":"2022-10-14T18:41:42","date_gmt":"2022-10-14T18:41:42","guid":{"rendered":"https:\/\/demos.rednao.com\/pagebuilder\/?page_id=144"},"modified":"2022-10-14T18:41:42","modified_gmt":"2022-10-14T18:41:42","slug":"grid-with-search-bar","status":"publish","type":"page","link":"https:\/\/demos.rednao.com\/pagebuilder\/grid-with-search-bar\/","title":{"rendered":"Grid with search bar"},"content":{"rendered":"\n\n    <form style=\"max-width: 1200px;margin:auto;\" method=\"post\" data-id=\"69e1cff21ed2e\" class=\"PageGenerator Grid\">\n        \n        \n<div class=\"Area Multiple\">\n    <style>\n        .Section_GridSection th.th_5{text-align:center !important;}\n.Section_GridSection td.td_5{text-align:center !important;}\n\n        @media (max-width: 768px) {\n        \n        }\n    <\/style>\n    <div>\n                    \n            \n<div class=\"Section Section_TopSection\">\n            \n        <div class=\"rnRow Row_1 \">\n                    \n<div class=\"rnColumn Column_1\" style=\"width: 100%\">\n            \n        <div class=\"rnBlock Block_3 rnSearchBar \" >\n            \n\n            <fieldset style=\"width: 100%;border:1px solid #dfdfdf;padding:5px;display: block;\">\n            <legend style=\"display: flex;align-items: center\">\n                <svg fill=\"currentColor\" viewBox=\"0 0 512 512\" style=\"height: 1em; margin-right: 5px;\"><path d=\"M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z\"><\/path><\/svg>\n                Search Criteria\n            <\/legend>\n                <div style=\"display: flex; flex-wrap: wrap;align-items: baseline\">\n                    \n\n<div style=\"width:calc(33.33% - 2px);margin-left:2px;display:inline-block;margin-bottom:5px;}}\">\n    <strong>Name<\/strong>\n    \n\n<input value=\"\" type=\"text\" style=\"width: 100%\" data-search-field-id=\"1\"\/>\n<\/div>\n                    \n\n<div style=\"width:calc(33.33% - 2px);margin-left:2px;display:inline-block;margin-bottom:5px;}}\">\n    <strong>Country<\/strong>\n    \n<select style=\"width: 100%\" data-search-field-id=\"2\">\n    <option value=\"\">All<\/option>\n            <option  value=\"Canada\">Canada<\/option>\n            <option  value=\"USA\">USA<\/option>\n            <option  value=\"Germany\">Germany<\/option>\n    <\/select>\n<\/div>\n                    \n\n<div style=\"width:calc(33.33% - 2px);margin-left:2px;display:inline-block;margin-bottom:5px;}}\">\n    <strong>Gender<\/strong>\n    \n<select style=\"width: 100%\" data-search-field-id=\"6\">\n    <option value=\"\">All<\/option>\n            <option  value=\"Male\">Male<\/option>\n            <option  value=\"Female\">Female<\/option>\n    <\/select>\n<\/div>\n                    \n\n<div style=\"width:calc(33.33% - 2px);margin-left:2px;display:inline-block;margin-bottom:5px;}}\">\n    <strong>Entry Start Date<\/strong>\n    \n\n<rn-search-date enabledate=\"true\" enabletime=\"true\" value=\"\" type=\"text\" style=\"width: 100%\" data-search-field-id=\"4\" \/>\n<\/div>\n                    \n\n<div style=\"width:calc(33.33% - 2px);margin-left:2px;display:inline-block;margin-bottom:5px;}}\">\n    <strong>Entry End Date<\/strong>\n    \n\n<rn-search-date enabledate=\"true\" enabletime=\"true\" value=\"\" type=\"text\" style=\"width: 100%\" data-search-field-id=\"5\" \/>\n<\/div>\n            <\/div>\n    <div>\n        <button disabled  class=\"rnbtn rnbtn-success searchButton\" tabindex=\"0\" type=\"submit\" style=\"align-items: center; display: flex;margin-left: 2px;margin-top: 3px;cursor: pointer;\">\n            <span class=\"jss2\" style=\"display: flex\">\n                <svg fill=\"currentColor\" viewBox=\"0 0 512 512\" style=\"height: 1em; margin-right: 3px;\">\n                    <path d=\"M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z\"><\/path><\/svg>\n            <\/span>\n            <span>Search<\/span>\n        <\/button>\n    <\/div>\n\n        <\/fieldset>\n\n        <\/div>\n\n\n            \n        <div class=\"rnBlock Block_1 rnPageInformation \" >\n            \n    <div>\n        Showing 1 - 5 of 10\n    <\/div>\n    <\/div>\n\n\n    <\/div>\n            <\/div>\n\n\n    <\/div>\n                    \n            \n\n<div style=\"padding: 10px;overflow: auto;\">\n    <table class=\"pageGrid Section_GridSection WithBorders rnStripped\">\n        <thead>\n            <tr>\n                                    <th class=\"th_1\" style=\"width: 15%\">\n                        \n<div style=\"display: block;align-items: center;flex-wrap: wrap\">\n    Entry\n            <span class=\"rnstack\" style=\"position: relative;height: 16px;width:16px;display: inline-flex;align-items: center;justify-content: center;margin-left: 5px\">\n                            <a href=\".\/?sortby=__entryId_Value&amp;dir=asc&amp;tid=13\" class=\"rncaretup\" style=\"position: absolute;top:0;display: flex;height: 6px;line-height: 6px;font-size: 6px;color:#dfdfdf\"><span style=\"margin-right:3px;width: 1.5em;height: 1.5em;-webkit-mask-position: center ;-webkit-mask-repeat: no-repeat ;mask-position: center;mask-repeat: no-repeat;background-color:currentColor;display: inline-flex;mask-image: url(https:\/\/demos.rednao.com\/pagebuilder\/wp-content\/plugins\/PageBuilderForWPFormPro\/pr\/icons\/fontawesome\/solid\/caret-up.svg);-webkit-mask-image: url(https:\/\/demos.rednao.com\/pagebuilder\/wp-content\/plugins\/PageBuilderForWPFormPro\/pr\/icons\/fontawesome\/solid\/caret-up.svg)\"><\/span><\/a>\n                                        <a class=\"rncaretdown\" href=\".\/?sortby=__entryId_Value&amp;dir=desc&amp;tid=13\" style=\"position:absolute;bottom: 0;height: 6px;line-height: 6px;font-size: 6px;color:#dfdfdf\" ><span style=\"margin-right:3px;width: 1.5em;height: 1.5em;-webkit-mask-position: center ;-webkit-mask-repeat: no-repeat ;mask-position: center;mask-repeat: no-repeat;background-color:currentColor;display: inline-flex;mask-image: url(https:\/\/demos.rednao.com\/pagebuilder\/wp-content\/plugins\/PageBuilderForWPFormPro\/pr\/icons\/fontawesome\/solid\/caret-down.svg);-webkit-mask-image: url(https:\/\/demos.rednao.com\/pagebuilder\/wp-content\/plugins\/PageBuilderForWPFormPro\/pr\/icons\/fontawesome\/solid\/caret-down.svg)\"><\/span><\/a>\n                    <\/span>\n    \n<\/div>\n\n                    <\/th>\n                                    <th class=\"th_2\" style=\"width: 25%\">\n                        \n<div style=\"display: block;align-items: center;flex-wrap: wrap\">\n    Name\n            <span class=\"rnstack\" style=\"position: relative;height: 16px;width:16px;display: inline-flex;align-items: center;justify-content: center;margin-left: 5px\">\n                            <a href=\".\/?sortby=1_Value&amp;dir=asc&amp;tid=13\" class=\"rncaretup\" style=\"position: absolute;top:0;display: flex;height: 6px;line-height: 6px;font-size: 6px;color:#dfdfdf\"><span style=\"margin-right:3px;width: 1.5em;height: 1.5em;-webkit-mask-position: center ;-webkit-mask-repeat: no-repeat ;mask-position: center;mask-repeat: no-repeat;background-color:currentColor;display: inline-flex;mask-image: url(https:\/\/demos.rednao.com\/pagebuilder\/wp-content\/plugins\/PageBuilderForWPFormPro\/pr\/icons\/fontawesome\/solid\/caret-up.svg);-webkit-mask-image: url(https:\/\/demos.rednao.com\/pagebuilder\/wp-content\/plugins\/PageBuilderForWPFormPro\/pr\/icons\/fontawesome\/solid\/caret-up.svg)\"><\/span><\/a>\n                                        <a class=\"rncaretdown\" href=\".\/?sortby=1_Value&amp;dir=desc&amp;tid=13\" style=\"position:absolute;bottom: 0;height: 6px;line-height: 6px;font-size: 6px;color:#dfdfdf\" ><span style=\"margin-right:3px;width: 1.5em;height: 1.5em;-webkit-mask-position: center ;-webkit-mask-repeat: no-repeat ;mask-position: center;mask-repeat: no-repeat;background-color:currentColor;display: inline-flex;mask-image: url(https:\/\/demos.rednao.com\/pagebuilder\/wp-content\/plugins\/PageBuilderForWPFormPro\/pr\/icons\/fontawesome\/solid\/caret-down.svg);-webkit-mask-image: url(https:\/\/demos.rednao.com\/pagebuilder\/wp-content\/plugins\/PageBuilderForWPFormPro\/pr\/icons\/fontawesome\/solid\/caret-down.svg)\"><\/span><\/a>\n                    <\/span>\n    \n<\/div>\n\n                    <\/th>\n                                    <th class=\"th_3\" style=\"width: 10%\">\n                        \n<div style=\"display: block;align-items: center;flex-wrap: wrap\">\n    Email\n            <span class=\"rnstack\" style=\"position: relative;height: 16px;width:16px;display: inline-flex;align-items: center;justify-content: center;margin-left: 5px\">\n                            <a href=\".\/?sortby=6_Value&amp;dir=asc&amp;tid=13\" class=\"rncaretup\" style=\"position: absolute;top:0;display: flex;height: 6px;line-height: 6px;font-size: 6px;color:#dfdfdf\"><span style=\"margin-right:3px;width: 1.5em;height: 1.5em;-webkit-mask-position: center ;-webkit-mask-repeat: no-repeat ;mask-position: center;mask-repeat: no-repeat;background-color:currentColor;display: inline-flex;mask-image: url(https:\/\/demos.rednao.com\/pagebuilder\/wp-content\/plugins\/PageBuilderForWPFormPro\/pr\/icons\/fontawesome\/solid\/caret-up.svg);-webkit-mask-image: url(https:\/\/demos.rednao.com\/pagebuilder\/wp-content\/plugins\/PageBuilderForWPFormPro\/pr\/icons\/fontawesome\/solid\/caret-up.svg)\"><\/span><\/a>\n                                        <a class=\"rncaretdown\" href=\".\/?sortby=6_Value&amp;dir=desc&amp;tid=13\" style=\"position:absolute;bottom: 0;height: 6px;line-height: 6px;font-size: 6px;color:#dfdfdf\" ><span style=\"margin-right:3px;width: 1.5em;height: 1.5em;-webkit-mask-position: center ;-webkit-mask-repeat: no-repeat ;mask-position: center;mask-repeat: no-repeat;background-color:currentColor;display: inline-flex;mask-image: url(https:\/\/demos.rednao.com\/pagebuilder\/wp-content\/plugins\/PageBuilderForWPFormPro\/pr\/icons\/fontawesome\/solid\/caret-down.svg);-webkit-mask-image: url(https:\/\/demos.rednao.com\/pagebuilder\/wp-content\/plugins\/PageBuilderForWPFormPro\/pr\/icons\/fontawesome\/solid\/caret-down.svg)\"><\/span><\/a>\n                    <\/span>\n    \n<\/div>\n\n                    <\/th>\n                                    <th class=\"th_4\" style=\"width: 10%\">\n                        \n<div style=\"display: block;align-items: center;flex-wrap: wrap\">\n    Country\n            <span class=\"rnstack\" style=\"position: relative;height: 16px;width:16px;display: inline-flex;align-items: center;justify-content: center;margin-left: 5px\">\n                            <a href=\".\/?sortby=5_Value&amp;dir=asc&amp;tid=13\" class=\"rncaretup\" style=\"position: absolute;top:0;display: flex;height: 6px;line-height: 6px;font-size: 6px;color:#dfdfdf\"><span style=\"margin-right:3px;width: 1.5em;height: 1.5em;-webkit-mask-position: center ;-webkit-mask-repeat: no-repeat ;mask-position: center;mask-repeat: no-repeat;background-color:currentColor;display: inline-flex;mask-image: url(https:\/\/demos.rednao.com\/pagebuilder\/wp-content\/plugins\/PageBuilderForWPFormPro\/pr\/icons\/fontawesome\/solid\/caret-up.svg);-webkit-mask-image: url(https:\/\/demos.rednao.com\/pagebuilder\/wp-content\/plugins\/PageBuilderForWPFormPro\/pr\/icons\/fontawesome\/solid\/caret-up.svg)\"><\/span><\/a>\n                                        <a class=\"rncaretdown\" href=\".\/?sortby=5_Value&amp;dir=desc&amp;tid=13\" style=\"position:absolute;bottom: 0;height: 6px;line-height: 6px;font-size: 6px;color:#dfdfdf\" ><span style=\"margin-right:3px;width: 1.5em;height: 1.5em;-webkit-mask-position: center ;-webkit-mask-repeat: no-repeat ;mask-position: center;mask-repeat: no-repeat;background-color:currentColor;display: inline-flex;mask-image: url(https:\/\/demos.rednao.com\/pagebuilder\/wp-content\/plugins\/PageBuilderForWPFormPro\/pr\/icons\/fontawesome\/solid\/caret-down.svg);-webkit-mask-image: url(https:\/\/demos.rednao.com\/pagebuilder\/wp-content\/plugins\/PageBuilderForWPFormPro\/pr\/icons\/fontawesome\/solid\/caret-down.svg)\"><\/span><\/a>\n                    <\/span>\n    \n<\/div>\n\n                    <\/th>\n                                    <th class=\"th_12\" style=\"width: 20%\">\n                        \n<div style=\"display: block;align-items: center;flex-wrap: wrap\">\n    Date\n    \n<\/div>\n\n                    <\/th>\n                                    <th class=\"th_5\" style=\"width: 20%\">\n                        Details\n                    <\/th>\n                            <\/tr>\n        <\/thead>\n        <tbody>\n                                                            <tr class=\"Row0\">\n                                                    <td class=\"td_1\" style=\"width: 15%\">\n                                23\n                            <\/td>\n                                                    <td class=\"td_2\" style=\"width: 25%\">\n                                Gebhard Ernestine\n                            <\/td>\n                                                    <td class=\"td_3\" style=\"width: 10%\">\n                                gebhard@mail.com\n                            <\/td>\n                                                    <td class=\"td_4\" style=\"width: 10%\">\n                                Germany\n                            <\/td>\n                                                    <td class=\"td_12\" style=\"width: 20%\">\n                                2022-10-13 17:23:44\n                            <\/td>\n                                                    <td class=\"td_5\" style=\"width: 20%\">\n                                <a  href=\".\/?ar=view&amp;tp=13&amp;form_id=126&amp;entryid=23&amp;nonce=4ba6d8598d&amp;tid=13\">View Detail<\/a>\n                            <\/td>\n                                            <\/tr>\n                    \n                                    <tr class=\"Row1\">\n                                                    <td class=\"td_1\" style=\"width: 15%\">\n                                24\n                            <\/td>\n                                                    <td class=\"td_2\" style=\"width: 25%\">\n                                Ricky Jasper\n                            <\/td>\n                                                    <td class=\"td_3\" style=\"width: 10%\">\n                                ricky@mail.com\n                            <\/td>\n                                                    <td class=\"td_4\" style=\"width: 10%\">\n                                Canada\n                            <\/td>\n                                                    <td class=\"td_12\" style=\"width: 20%\">\n                                2022-10-13 17:25:16\n                            <\/td>\n                                                    <td class=\"td_5\" style=\"width: 20%\">\n                                <a  href=\".\/?ar=view&amp;tp=13&amp;form_id=126&amp;entryid=24&amp;nonce=f7e4862beb&amp;tid=13\">View Detail<\/a>\n                            <\/td>\n                                            <\/tr>\n                    \n                                    <tr class=\"Row2\">\n                                                    <td class=\"td_1\" style=\"width: 15%\">\n                                25\n                            <\/td>\n                                                    <td class=\"td_2\" style=\"width: 25%\">\n                                Donnie Terrance\n                            <\/td>\n                                                    <td class=\"td_3\" style=\"width: 10%\">\n                                donnie@mail.com\n                            <\/td>\n                                                    <td class=\"td_4\" style=\"width: 10%\">\n                                USA\n                            <\/td>\n                                                    <td class=\"td_12\" style=\"width: 20%\">\n                                2022-10-13 17:25:50\n                            <\/td>\n                                                    <td class=\"td_5\" style=\"width: 20%\">\n                                <a  href=\".\/?ar=view&amp;tp=13&amp;form_id=126&amp;entryid=25&amp;nonce=60ba8fcdba&amp;tid=13\">View Detail<\/a>\n                            <\/td>\n                                            <\/tr>\n                    \n                                    <tr class=\"Row3\">\n                                                    <td class=\"td_1\" style=\"width: 15%\">\n                                26\n                            <\/td>\n                                                    <td class=\"td_2\" style=\"width: 25%\">\n                                Joseph Reimund\n                            <\/td>\n                                                    <td class=\"td_3\" style=\"width: 10%\">\n                                joseph@mail.com\n                            <\/td>\n                                                    <td class=\"td_4\" style=\"width: 10%\">\n                                Germany\n                            <\/td>\n                                                    <td class=\"td_12\" style=\"width: 20%\">\n                                2022-10-13 17:26:38\n                            <\/td>\n                                                    <td class=\"td_5\" style=\"width: 20%\">\n                                <a  href=\".\/?ar=view&amp;tp=13&amp;form_id=126&amp;entryid=26&amp;nonce=f974d3d20c&amp;tid=13\">View Detail<\/a>\n                            <\/td>\n                                            <\/tr>\n                    \n                                    <tr class=\"Row4\">\n                                                    <td class=\"td_1\" style=\"width: 15%\">\n                                27\n                            <\/td>\n                                                    <td class=\"td_2\" style=\"width: 25%\">\n                                Courteney Leyla\n                            <\/td>\n                                                    <td class=\"td_3\" style=\"width: 10%\">\n                                courteney@mail.com\n                            <\/td>\n                                                    <td class=\"td_4\" style=\"width: 10%\">\n                                Canada\n                            <\/td>\n                                                    <td class=\"td_12\" style=\"width: 20%\">\n                                2022-10-13 17:27:40\n                            <\/td>\n                                                    <td class=\"td_5\" style=\"width: 20%\">\n                                <a  href=\".\/?ar=view&amp;tp=13&amp;form_id=126&amp;entryid=27&amp;nonce=75bda5d65a&amp;tid=13\">View Detail<\/a>\n                            <\/td>\n                                            <\/tr>\n                    \n                                    <\/tbody>\n    <\/table>\n<\/div>\n\n                    \n            \n<div class=\"Section Section_BottomSection\">\n            \n        <div class=\"rnRow Row_2 \">\n                    \n<div class=\"rnColumn Column_2\" style=\"width: 100%\">\n            \n        <div class=\"rnBlock Block_2 rnNavigation \" >\n            \n    <div>\n        \n        \n                                                <span class=\"navigationItem\">1<\/span>\n                \n                                                <a class=\"navigationItem\" href=\".\/?i=2&amp;tid=13\"  href=\"#\">2<\/a>\n                \n            \n\n                            <a class=\"navigationItem\" href=\".\/?i=2&amp;tid=13\" href=\"#\">&gt;<\/a>\n                <a class=\"navigationItem\" href=\".\/?i=2&amp;tid=13\" href=\"#\">&gt;&gt;<\/a>\n                        <\/div>\n    <\/div>\n\n\n    <\/div>\n            <\/div>\n\n\n    <\/div>\n            <\/div>\n<\/div>\n\n        \n    <\/form>\n\n    <script>\n        function rnSubmit(e,parameters)\n        {\n            e.preventDefault();\n            let pageGenerator=e.target.closest('.PageGenerator').PageGenerator;\n            pageGenerator.Submit(parameters);\n        }\n    <\/script>\n\n\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/demos.rednao.com\/pagebuilder\/wp-json\/wp\/v2\/pages\/144"}],"collection":[{"href":"https:\/\/demos.rednao.com\/pagebuilder\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/demos.rednao.com\/pagebuilder\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/demos.rednao.com\/pagebuilder\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/demos.rednao.com\/pagebuilder\/wp-json\/wp\/v2\/comments?post=144"}],"version-history":[{"count":1,"href":"https:\/\/demos.rednao.com\/pagebuilder\/wp-json\/wp\/v2\/pages\/144\/revisions"}],"predecessor-version":[{"id":145,"href":"https:\/\/demos.rednao.com\/pagebuilder\/wp-json\/wp\/v2\/pages\/144\/revisions\/145"}],"wp:attachment":[{"href":"https:\/\/demos.rednao.com\/pagebuilder\/wp-json\/wp\/v2\/media?parent=144"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}