Page 1 of 1
How to Display ViewPage in Modal Dialog on Row Click (v2022)
Posted: Mon Aug 30, 2021 12:48 pm
by mobhar
For those of you who have been implementing this code for v2019, then here is the code for v2022:
<?php if (Security()->canView()) { // don't forget this for security ?>
$('#tbl_modelslist tr').click(function() { // click event for table id and row selector; adjust it to your table id!
var view_modal = $(this).find("a.ew-row-link.ew-view").attr("data-url"); // get the url
ew.modalDialogShow({lnk:this, url: view_modal}); // display the View Page in modal dialog
});
<?php } ?>
This code is much simpler than for v2019, since we can get the URL from data-url attribute that belongs to the a href link.
Re: How to Display ViewPage in Modal Dialog on Row Click (v2022)
Posted: Wed Sep 01, 2021 12:01 am
by SilentNight
I edited it a bit to only affect the table body since clicking on elements in the table header would cause the page to hang. I also added exclusions for specific classes for things such as buttons and checkboxes, don't want the view page coming up when trying to use multi select functionality. Probably excluded more classes than necessary but I was tired of messing with it.
<?php if (Security()->canView()) { // don't forget this for security ?>
$('#tbl_Assetslist tbody tr').click(function(e) { // click event for table id and row selector; adjust it to your table id!
//exclude troubled classes in the if statement below
if (!$(e.target).hasClass('btn') && !$(e.target).hasClass('ew-preview-row-btn') && !$(e.target).hasClass('custom-control-label') && !$(e.target).hasClass('btn-group') && !$(e.target).hasClass('btn') && !$(e.target).hasClass('btn-group') && !$(e.target).hasClass('ew-icon') && !$(e.target).hasClass('icon-edit') && !$(e.target).hasClass('icon-view') && !$(e.target).hasClass('ew-row-link') && !$(e.target).hasClass('btn-default') && !$(e.target).hasClass('ew-list-option-body') && !$(e.target).hasClass('form-check') && !$(e.target).hasClass('ew-multi-select') && !$(e.target).hasClass('ew-table-header')) {
var view_modal = $(this).find("a.ew-row-link.ew-view").attr("data-url"); // get the url
ew.modalDialogShow({lnk:this, url: view_modal}); // display the View Page in modal dialog
}
});
<?php } ?>
Re: How to Display ViewPage in Modal Dialog on Row Click (v2022)
Posted: Wed Sep 01, 2021 9:37 am
by mobhar
Thanks. It was a very helpful customization.
Re: How to Display ViewPage in Modal Dialog on Row Click (v2022)
Posted: Fri Sep 10, 2021 3:25 am
by SilentNight
Anyone know how to do this for just opening a page regularly (not in modal)? From my understanding Master/Detail View doesn't support Modal.
Tried the following but it doesn't work:
var view_page = $(this).find("a.ew-row-link.ew-detail-view").attr("href"); // get the url for detail page
window.location.href = view_page; // open page
Re: How to Display ViewPage in Modal Dialog on Row Click (v2022)
Posted: Fri Sep 10, 2021 2:41 pm
by mobhar
Your code should be enclosed by the table selector id to trigger the click event, for example:
$('#tbl_orderslist tbody tr').click(function(e) { // click event for table id and row selector; adjust it to your table id!
var view_page = $(this).find("a.ew-row-link.ew-detail-view").attr("href"); // get the url for detail page
window.location.href = view_page; // open page
});
Re: How to Display ViewPage in Modal Dialog on Row Click (v2022)
Posted: Thu Sep 16, 2021 3:48 am
by SilentNight
It is, still doesn't work.
Re: How to Display ViewPage in Modal Dialog on Row Click (v2022)
Posted: Thu Sep 16, 2021 10:23 am
by mobhar
You may press F12 from your browser and check whether any Javascript error message returned.
Re: How to Display ViewPage in Modal Dialog on Row Click (v2022)
Posted: Thu Sep 30, 2021 5:58 am
by SilentNight
All my pages have Uncaught SyntaxError: Unexpected token '<' at {tablename]:587 but that's all.
Even with this error all pages seem to be working fine. My Inventory page has this error but the click to view in modal dialog works fine.