Modify EventHeight and e.HTML based on a variable

Asked by Ed
20 days ago.

Hi,

Building a custom print function for my monthly calendar. Basically, I’m using JavaScript to intercept Cntl+P, presenting a modal with instructions, and providing a button that runs another JavaScript function. That function sets a value on a hidden field, gets filter preferences from another field, arrays startDate and the filter value, and then does a commandCallBack…here’s the js code:

function doPrintSetup() {

document.getElementById('hf_isPrintMode').value = '1';

const hiddenEventFilterField = document.getElementById('hidden_eventTypePrefs').value;

setTimeout(() => {

const date = dpm.startDate;

var EventFilterArray = [date, hiddenEventFilterField]

dpm.commandCallBack('print', EventFilterArray);

}, 100);

$find('modal_print').hide();

}

In BeforeEventRender (VB.NET code-behind), I have a variable that is supposed to get its value from the “hf_isPrintMode” hidden field, and I have conditionals that change EventHeight and the format of e.HTML based on the value of the variable:

Protected Sub DayPilot1_BeforeEventRender(ByVal sender As Object, ByVal e As DayPilot.Web.Ui.Events.Month.BeforeEventRenderEventArgs)

Dim varPrintSetup As String = If(hf_isPrintMode.Value = "", "0", "1")

If varPrintSetup = "1" Then

DayPilotMonth1.EventHeight = "50"

varHtmlStr = varTailNum & " [" & varAircraftSn & "]<br />" & CStr(e.DataItem("itinerary")) & "<br />" & varTimeRange & " " & varConflictPrintTag

End If

In my “DayPilot_Command(…)” sub, I have a case statement that includes the above-mentioned “print” option:

Protected Sub DayPilot1_Command(sender As Object, e As CommandEventArgs)

Case "print"

Dim startDate = CStr(e.Data(0))

Dim eventTypeFilterVal = CStr(e.Data(1))

DayPilotMonth1.StartDate = startDate

DayPilotMonth1.DataSource = GetData(DayPilotMonth1.VisibleStart, DayPilotMonth1.VisibleEnd, eventTypeFilterVal, "")

DayPilotMonth1.DataBind()

DayPilotMonth1.Update(DayPilot.Web.Ui.Enums.CallBackUpdateType.Full)

I know the js function is working - had a different start date set initially and calendar indexed to that date when I ran the function. However, I don’t get any change in the UI; no EventHeight change, no change in the format of my data string that is applied to e.HTML. I can also confirm that the value is being written to the hf_isPrintMode field.

In testing I discovered that the code in BeforeEventRender does work. Setting either the variable or the hidden field to a “1” results in the UI displays the modified format…it’s just not dynamically updating. I thought that is might be an issue with page life or when BeforeEventRender runs but according to Google (grain of salt there…) BeforeEventRender runs with every callback.

Any ideas? The printed result looks great (using css, etc. vs ExportAs) just need to get it to work without having to manually setting the variable value.

Thanks - Ed

Comment posted by Ed
20 days ago.

UPDATE: Fixed the e.HTML part of the problem…looks like it was an issue with the update panel that the dpm resides in. Still unable to dynamically change the size of the event; event height sitting at 23px so any help on that would be appreciated. Note that I did try sending the height via commandCallBack…also no luck.

Thanks - EW

Answer posted by Ed
18 days ago.

OK, I’ve figured out how to do this in my case - in the function that runs when the button in the modal is clicked, set the hidden field value, then run the main function that calls commandCallBack and does the formatting work. After that, run a local JavaScript function to change the event height (example shamelessly stolen from a Google search):

function changeEventHeight(newHeight) {

if (typeof dpm !== 'undefined') {

dpm.eventHeight = newHeight;

dpm.update();

}

}

Set a 2-second timeout and then invoke window.print() to get the print dialog. Once the print dialog is run or dismissed, wait another 2 seconds (probably don’t have to but…) and then reload the page. I’ll probably refine that last command since it resets the page back to the end user’s default filter preferences but for now working reliably.

End result - on Ctl+P the modal pops up with instructions. Clicking the print button changes the e.HTML string to the proper content and format, then the event height changes from 23 to 50 and the print dialog opens. Once printing is done, the page resets to normal height.

Thanks

New Reply
This reply is
Attachments:
or drop files here