Execute javascript on kendo popup editor

Question

I have popup editors for my grids and scheduler. The editors are defined with a kendo-template (MVVM). I would like to execute some javascript when these editors are opened, with access to the model currently being edited. I know the trick to execute JS, but not how to get access to the model.

<script id="my-editor" type="text/x-kendo-template" title="Edit Event">
    <div class="k-edit-form-container">
        <input type="hidden" data-bind="value: taskId" />

        <div class="k-edit-label">
            <label for="title">Title</label>
        </div>
        <div data-container-for="title" class="k-edit-field">
            <input type="text" class="k-input k-textbox" name="title" data-bind="value:title">
        </div>

        <div class="k-edit-label">
            <label for="start">Start Date</label>
        </div>
        <div data-container-for="start" class="k-edit-field">
            <input id="eventStartInput" type="text" data-role="datepicker" name="start" data-bind="value:start">
        </div>

        <div class="k-edit-label">
            <label for="currentHatId">Hat</label>
        </div>
        <div id="hatContainer" data-container-for="currentHatId" class="k-edit-field" disabled>
        </div>

    <script>

        jQuery(function(){


            jQuery('<select data-bind="value: currentHatId" name="currentHatId"/>')
                .appendTo(jQuery('#hatContainer'))
                .kendoDropDownList({
                    dataTextField: 'Name',
                    dataValueField: 'HatId',
                    optionLabel: '-- choose hat --',
                    dataSource: { type: 'odata-v4', transport: { read: { url: 'odata/Hats' } } }
                });

            //I want access to the 'bound' model here!
        })
    <\/script>
</script>

What is the easiest way to accomplish this?

Answer 1

In the edit event of the scheduler, I have access to the model being edited. So I tried the following:

I configuered the Scheduler to create a new ScheduleEditor instance:

edit: (e: kendo.ui.SchedulerEditEvent) => { new ScheduleEditor(e); }

Then my ScheduleEditor looks like this:

class ScheduleEditor
{
    private _event: kendo.ui.SchedulerEditEvent;

    constructor(e: kendo.ui.SchedulerEditEvent)
    {
        this._event = e;
        e.event.bind('change', (x: any) => { this.eventChanged(x) });
    }

    private eventChanged(x: any)
    {
        console.log('{0} changed', x.field);
    }

    public static initDropDowns(): void
    {
        jQuery('<select data-bind="value: currentHatId" name="currentHatId"/>')
            .appendTo(jQuery('#hatContainer'))
            .kendoDropDownList({
                dataTextField: 'Name',
                dataValueField: 'HatId',
                valuePrimitive: true,
                optionLabel: '-- choose hat --',
                dataSource: { type: 'odata-v4', transport: { read: { url: 'odata/Hats' } } }
            });
    }
}

Note the valuePrimitive = true, as this was a problem for me.

Calling initDropdowns() from the constructor did not initialize drop downs to correct value, so call it from the template:

    </div>
</div>
<script>

    jQuery(function(){
        ScheduledRecipeEditor.initDropDowns();
    })
<\/script>

Now in my ScheduleEditor instance I can react to changes in the model. Hope this helps someone. It should be the same for the popup editor on a grid as well.