How do I include jscript in a edit popup template?

2 posts, 0 answers
  1. Jane
    Jane avatar
    15 posts
    Member since:
    Oct 2016

    Posted 25 May 2017 Link to this post

    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?

  2. Jane
    Jane avatar
    15 posts
    Member since:
    Oct 2016

    Posted 26 May 2017 in reply to Jane Link to this post

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