Client Scripts for Preview Page

[mobhar]

There is Server Events for the "Preview Page", but we did not see Client Scripts for the "Preview Page".

Please add Client Scripts for "Preview Page". The main reason for this is since many things we want to do using jQuery in the Client side. For example, we want to customize the font-height, text-align for the Aggregate row, etc.

[Webmaster]

Preview page is used in the List page, you can use Client or Startup Script in the List page to subscribe the "preview" event, e.g.

$(document).on("preview", function(e, args) {
var $tabpane = args.$tabpane; // $tabpane is jQuery object of the tab, you can change the content as you wish by jQuery
// your code here
});

[mobhar]

Thanks, but it is too complicated using such way other than define the simpler jQuery code using "Startup Script" in the "Client Scripts" that belongs to the "preview" page only.

For example, when I want to customize the small part of the table (let's say only for the Aggregate row), then I have to clone and customize the related function to the "preview" functionality in "ewp.js" file. The following code I get from "ewpreview.js" file:

$tabpane.find("table." + EW_TABLE_CLASSNAME).each(ew_SetupTable);

As you can see, "ew_SetupTable" is a function that defined in "ewp.js" template file. Should I clone it from the ewp.js template file?

[Webmaster]

1. It is just 3 lines more than Client/Startup Script.
2. There is no need to clone. Be reminded that preview page is loaded into the List page by Ajax. The List page has ewp*.js already.
3. To change CSS for the aggregate values, just add your CSS as usual in the HTML -> Styles tab. Inspect HTML/CSS in your browser to find out the selector for the preview content. Or you can use jQuery .find() to find the row under $tabpane and set the style by .css().

[mobhar]

Okay, here is what I did, and it works.

1. Add this code from "Startup Script" under "Client Scripts" -> "Table-Specific" -> "List Page":

$(document).on("preview", function(e, args) {
var $tabpane = args.$tabpane; // $tabpane is jQuery object of the tab, you can change the content as you wish by jQuery
$tabpane.find("td:has(.ewAggregate)").css("text-align", "right");
$tabpane.find("td:has(.ewAggregate)").css("font-weight", "bold");
});

1. Add this code in "Page_Load" server event of "Table-Specific" -> "Preview" page:

Language()->setPhrase("Total", ""); // this will hide "Total" text in the Aggregate row

1. Add this code from HTML -> Styles tab:

.ewAggregate:after{content:" "} /* this will remove ":" chracter in the Aggregate row */

[Webmaster]

You can do all above in just one line:

$tabpane.find("td:has(.ewAggregate)").css({"text-align": "right", "font-weight": "bold"}).find(".ewAggregate").hide();

You can also do above by CSS only without the need of using event.

[mobhar]

Thank you, it works.