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
});
});
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! 