[Solved] How do I include jscript in a edit popup template?

[Jane]

I want to include an active x object on a grid edit popup and it has an associated change event specified in jscript so I need to include the script for that. 

$(gridID).kendoGrid({
        dataSource: dataSource,
        navigatable: true,
        pageable: true,
        editable: {
            mode: "popup",
            template: function(data){return getPopupTemplate(data) }
        },
etc....

function getPopupTemplate(data) {
    var s =
             '<object id="ChemistryQuery" codebase="MDL.Draw.Editor.dll#-1,-1,-1,-1" height="240" width="240" classid="CLSID:FCE57399-E34B-45ce-881B-5FDFF3583307" class="drawingbox" >' +
                '<param name="ShowHydrogens" value="False">' +
                '<param name="ChimeString" id="ChimeString" value="' + data.NEW_CHEMISTRY + '">' +
             '</object>' +
             '<input type="hidden" name="NEW_CHEMISTRY" class="form-control" id="NEW_CHEMISTRY" />' +
             '<input type="text" name="TEXT_DESCRIPTOR" class="form-control" id="TEXT_DESCRIPTOR" />' +
             '<script language="jscript">' +
                'function ChemistryQuery::ComStructureChanged(){ ' +
                    'if (ChemistryQuery.ChimeString) {' +
                        'NEW_CHEMISTRY.value = ChemistryQuery.ChimeString;' +
                    '}' +
                '}' +
             '</script>';
    return s;
}

 

However, this results in an error  stating the ChemistryQuery object can't be found.

I have done something similar to this on a dialog using Kendo UI for JSP and that works fine.

<kendo:dialog name="dialog" title="Enter Reaction Schema" closable="false" modal="true" close="onDrawerClose" visible="false" initOpen="initDialogFields"
        content='<div class="form-group">
                     <label for="description" class="col-md-3 control-label k-label">Description</label>
                     <input type="text" name="description" class="reactionSchemaWidth k-input" id="description" />
                     <span class="required">*</span>
                </div>
                <div class="form-group">
                     <object id="ChemistryQuery" codebase="MDL.Draw.Editor.dll#-1,-1,-1,-1" height="240" width="240" classid="CLSID:FCE57399-E34B-45ce-881B-5FDFF3583307" class="drawingbox">
                        <param name="ShowHydrogens" value="False">
                        <param name="ChimeString" id="ChimeString">
                     </object>
                </div>
                <div class="form-group">
                    <div class="error formerror" id="dialogError"><span> </span></div>
                </div>
                <div class="form-group">
                    <input type="hidden" name="molstructure" id="molstructure" />
                </div>
                <script language="jscript">
                    function ChemistryQuery::ComStructureChanged(){
                        if (ChemistryQuery.ChimeString) {
                            molstructure.value = ChemistryQuery.ChimeString;
                        }
                    }
                </script>'>
        <kendo:dialog-actions>
            <kendo:dialog-action text="Done" primary="true" action="validateDrawForm" />
            <kendo:dialog-action text="Cancel" />
        </kendo:dialog-actions>
    </kendo:dialog>

 

So there must be a difference in the rendering timing of the two approaches.  I've tried using the kendo.template but I couldn't get the syntax right because of the <script? tags.  I've also tried changing the content in a edit handler for the grid but this loses the bindings on the other input fields.

I realise you can't work with this because you don't have my active-x control but could you please suggest a way to insert this jscript at the appropriate time?

[Jane]

I've worked this out.  For reference, I used a js eval in the edit event which defined the callback function.