www.hkvforums.com

Sometimes you need to display the View Page in Modal Dialog by simply clicking on the row in table of the List Page. In other words, you don't want to display it by only clicking on the "magnifying glass" icon as you did until now. This is very useful if you want to give your end-users the ability to display the View Page in Modal Dialog quickly and easily, moreover if you enable UseDropDownButton and UseButtonGroup options in order to group and display several buttons in each row of the table. You will save two clicks event for this, of course.

So here is the mixing PHP + jQuery code below that you can use. Simply put it in "Startup Script" of the "List Page". In this example, we use the "models" table from the demo project. Make sure also you have already enabled "Modal dialog" under "Table" setup -> "Table Options" -> "View Page" that belongs to the "models" table before regenerating all the script files.

<?php if (Security()->canView()) { // don't forget this for security ?>
$(document).ready(function() {
$('#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("onclick"); // get the modal dialog javascript syntax
var view_url = view_modal.substring(view_modal.lastIndexOf(":'") + 2, view_modal.lastIndexOf("'")); // get the url that belongs to each row
ew.modalDialogShow({lnk:this, url: view_url}); // display the View Page in modal dialog
});
});
<?php } ?>

The limitation of this code:
If you enable "UseDropDownButton" and "UseButtonGroup" options, then when you click on the dropdown button in each row, that code above will always be executed, so that code needs to be improved in order to exclude the click event of dropdown button in each row of the table. Not sure we can do this, any feedback or improvement are welcome.

Enjoy the code, everyone! :-)

And how to open the view page without modal?

To display the normal View Page (without Modal dialog), simply try this instead:

<?php if (Security()->canView()) { // don't forget this for security ?>
$(document).ready(function() {
$('#tbl_modelslist tr').click(function() { // click event for table id and row selector; adjust it to your table id!
var view_page = $(this).find("a.ew-row-link.ew-view").attr("href"); // get the href
window.location.href = view_page; // open the view page
});
});
<?php } ?>

Thank you! :-)

Thanks,
how would you modify this so it can be added at global level?
cheers

Simply change this code:
'#tbl_modelslist tr'

to:
'.table.ew-table tr'

and move all those code into "Startup Script" under "Client Scripts" -> "Global" -> "Pages with header/footer".

mobhar wrote:
The limitation of this code:
If you enable "UseDropDownButton" and "UseButtonGroup" options, then when you click
on the dropdown button in each row, that code above will always be executed,

You can cancel <tr onclick> with <td onclick>. Use: event.stopPropagation()

useful,thanks

mobhar wrote:
Simply change this code:
'#tbl_modelslist tr'

to:
'.table.ew-table tr'

and move all those code into "Startup Script" under "Client
Scripts" -> "Global" -> "Pages with header/footer".

Brilliant and Thank you.

mobhar wrote:
To display the normal View Page (without Modal dialog), simply try this instead:

<?php if (Security()->canView()) { // don't forget this for security ?>
$(document).ready(function() {
$('#tbl_modelslist tr').click(function() { // click event for table id and row
selector; adjust it to your table id!
var view_page =
$(this).find("a.ew-row-link.ew-view").attr("href"); // get the
href
window.location.href = view_page; // open the view page
});
});
<?php } ?>

Hi.

Thank you again.

As I also needed to enable edit, I added the double click option as below:

<?php
if (Security()->canEdit()) { ?>
$(document).ready(function() {
$('#tbl_shop_infolist tr').dblclick(function() {
//$('.table.ew-table tr').click(function() {
var edit_page = $(this).find("a.ew-row-link.ew-edit").attr("href");
window.location.href = edit_page;
});
});
<?php } ?>

//v2018 View

<?php if (Security()->canView()) { // don't forget this for security ?>
$(document).ready(function() {
$('#tbl_modelslist tr').click(function() { // click event for table id and row
selector; adjust it to your table id!
var view_page =
$(this).find("a.ewRowLink.ewView").attr("href"); // get the
href
window.location.href = view_page; // open the view page
});
});
<?php } ?>

//v2018 Edit

<?php
if (Security()->canEdit()) { ?>
$(document).ready(function() {
$('#tbl_shop_infolist tr').dblclick(function() {
//$('.table.ew-table tr').click(function() {
var edit_page = $(this).find("a.ewRowLink.ewEdit").attr("href");
window.location.href = edit_page;
});
});
<?php } ?>

hi,

your solution is great. it works fine in phpmaker 2020.0.11.

very great idea my lord!

one question : to complete the behaviour, did you manage to add the "cursor click icon" on the mouse cursor to help the user to understand he can click there ? (mouse over icon must change when an action is available by clicking).
i guess it might me somewhere in the template css....

Have a great day