Often times we want to display the View Page in Modal dialog when a row is being clicked in List Page.
To do that, let's say we use demo2026 project, and we focus on orders table.
First of all, make sure you have already enabled Modal dialog option for View Page under Table setup of that table.
After that, then simply put this following code in Startup Script of List Page of that table:
<?php if (Security()->canView()) { // don't forget this for security ?>
$('#tbl_<?php echo CurrentPage()->TableName ?>list tbody tr').click(function(e) { // click event for table id and row selector
//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 } ?>
To see it in action, then go to the generated web application, open List Page of orders table, then try to click on a row in that List Page.
Edited 3 hours later, by changing the table name (orders) to <?php echo CurrentPage()->TableName ?> so that we don't need to adjust the table name manually; just copy-paste that code above to any Startup Script of any List Page.