Firing a javascript function onLaunch of a custom template

2 posts, 0 answers
  1. COMM
    COMM avatar
    21 posts
    Member since:
    Oct 2014

    Posted 03 May Link to this post

    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?
  2. COMM
    COMM avatar
    21 posts
    Member since:
    Oct 2014

    Posted 04 May in reply to COMM Link to this post

    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.

  3. Kendo UI is VS 2017 Ready
Back to Top