This is a migrated thread and some comments may be shown as answers.

Firing a javascript function onLaunch of a custom template

1 Answer 79 Views
Scheduler
This is a migrated thread and some comments may be shown as answers.
COMM
Top achievements
Rank 1
COMM asked on 03 May 2016, 02:03 PM
I have a Kendo scheduler that contains a Custom editor template for the add/edit item form.

The form contains radio buttons.

<fieldset>
<label><input type="radio" name="use_oib_framework_nb" value="1" required="required" data-bind="checked:use_oib_framework_nb" onClick="javascript:toggleExtContFields('none');" /> #getResource("template.yes")#</label>
<label><input type="radio" name="use_oib_framework_nb" value="0" required="required" data-bind="checked:use_oib_framework_nb" onClick="javascript:toggleExtContFields('block');" /> #getResource("template.no")#</label>
</fieldset>

When one of these radio buttons is clicked, it runs a very simple Javascript...

function toggleExtContFields(property) {
document.getElementById('extContFields').style.display = property;
}

...which shows or hides a div.

<div style="display:none;" id="extContFields">[content]</div>

However, when the Custom editor template launches, I need to run the function passing it the current value of the use_oib_framework_nb radio buttons so it knows whether to make the div visible or not. Something like, "on popup window launch, look at the value of use_oib_framework_nb and run the function toggleExtContFields()".

How do I do that?

1 Answer, 1 is accepted

Sort by
0
COMM
Top achievements
Rank 1
answered on 04 May 2016, 08:31 AM

I found a solution.

In the editable node, I added a window node and inside that a call to a proxy JS function;

, editable: {
        template: $("##addEditPopup").html()
        , destroy: false
        , window: {
            open: proxyToggleExtContFields 
        }
}

I then wrote my logic in the proxy function...

function proxyToggleExtContFields() {
    if (document.getElementById("use_oib_framework_nb_0").checked == true) {
        toggleExtContFields('block');
    }
}

Which calls my original function:

function toggleExtContFields(property) {
    document.getElementById('extContFields').style.display = property;
}

 

Fiddly, but effective.

Tags
Scheduler
Asked by
COMM
Top achievements
Rank 1
Answers by
COMM
Top achievements
Rank 1
Share this question
or