Question

I have a Tridion Date control added to a GUI Extension .aspx page I have created.

I’ve added this to the ASPX page with

<c:Date id="AdjustDate" runat="server" 
IsSeparateFields="false" AddClearButton="false" TabIndex="3"></c:Date>

and in my .JS I’ve added the following to

1. Give me a handle onto the Tridion Date Control (to select the date values etc.)

   c.AdjustDate =
   $controls.getControl($(“#AdjustDate”),
   “Tridion.Controls.Date”)

2. Capture changes in the date (after the user selects OK in the modaldialog)

   $evt.addEventHandler(c.AdjustDate, “change”,
   this.getDelegate(this._onHighlightDateChange));

I capture the event and perform some updates based on the date selected.

However, my GUI extension dialog is smaller in height than when the modal dialog is shown. I’d like to resize my ASPX dialog when the user clicks Select Date and the modal dialog is presented.

I’ve now captured the event of the user clicking the Select Date button

c.BtnDateSelect = $controls.getControl($("#AdjustDate_selectbutton"),
"Tridion.Controls.Button");
$evt.addEventHandler(c.BtnDateSelect, "click", 
this.getDelegate(this._onDateButtonClicked));

However – I can’t seem to access the height of the resulting dialog as I can’t add any events to tie in

1. the opening of the dialog itself
2. the user clicking OK or Cancel (to adjust the height again) or
3. the modal dialog being closed

Am I missing events to tie into?

I’ve tried to create a handle to the OK button using

BtnDateOKSelect = 
$controls.getControl($("html#DatePickerPopup.popup body center div#buttonContainer div#ButtonOk.tridion"),
 "Tridion.Controls.Button");

but the reference (and variations of it) return undefined – possibly as this is in an iframe so the script can’t access it?

Any pointers on working out what the events are I can tie into?
How to tie into those events (and when)?

Thanks

Answer 1

You cannot resize a dialog (modal) after it has been open. I wrote an extension where I had a similar problem, when my date picker was over my modal dialog, It look weird, so I made my dialog date picker bigger.

However I wasn’t using a date picker control, but a regular html button. Here the code:

So I retrieve button and add the handler to show the date picker:

c.BtnStartDate = $controls.getControl($("#startDate"), "Tridion.Controls.Button");
$evt.addEventHandler(c.BtnStartDate, "click", this.getDelegate(this._onStartDateButtonClicked));

This is the code in the event:

SetDateRange$_onStartDateButtonClicked(event) {    
    this._setDate(event, "#startDate");

};

And the setDate function:

SetDateRange.prototype._setDate = function SetDateRange$_setDate(event, controlSelector) {
    var p = this.properties;
    var currentDate = new Date();
    var c = p.controls;


    p.datePickerPopup = $popup.create(
        $cme.Popups.DATE_PICKER.URL, {
            width: 550,
            height: 350
        },
        {
            date: currentDate,
            popupType: Tridion.Controls.Popup.Type.MODAL_IFRAME
        }
    );

    function SetDateRange$DatePicker$onPopupCanceled(event) {
        if (p.datePickerPopup) {
            p.datePickerPopup.dispose();
            p.datePickerPopup = null;
        }
    }

    function SetDateRange$DatePicker$onPopupSubmitted(event) {
        var value = event.data.date;
        if (value) {
            var value = new Date(value);

            value = $localization.getFormattedDateTime(value, Tridion.Runtime.LocaleInfo.fullDateTimeFormat);
            jQuery(controlSelector).trigger('setdate', [value]);
        }
        p.datePickerPopup.dispose();
        p.datePickerPopup = null;
    }

    $evt.addEventHandler(p.datePickerPopup, "unload", SetDateRange$DatePicker$onPopupCanceled);
    $evt.addEventHandler(p.datePickerPopup, "submit", SetDateRange$DatePicker$onPopupSubmitted);
    $evt.addEventHandler(p.datePickerPopup, "close", SetDateRange$DatePicker$onPopupCanceled);

    p.datePickerPopup.open();
};

Again, it might not be the solution to your scenario, but this example shows how to open the date picker dialog and use the values it returns, without using the “Tridion Date Picker Control”.

Hope this helps.