Using the guidance at https://community.skuid.com/t/edit-mode-button?topic-reply-list%5Bsettings%5D%5Bfilte…, if a Field Editor starts in “Edit” mode, when changing to “Read” mode, the event delegates for the fields (hover, dblclick, etc.) are not attached.

This appears to be due to the way the editor itself is initially created as the delegates are only established if the editor is in “read” mode initially. Additionally, there doesn’t appear to be a way to force the delegates to attach.

This becomes an issue for pages that start in “edit” mode (e.g. New, Edit, etc.) but allow toggling to “read” mode.

Is there a way to force the delegates to attach that I might be overlooking or any thoughts on how to trigger the desired behavior?

Steps to reproduce:

1. Create page using XML below


2. Open page picking any Account


3. On initial display, the top Field Editor starts in “Edit” mode, the bottom one in “read” mode. The “hover”, “dblclick”, etc. work on the bottom editor.


4. Click the “Flip to Edit” mode button - both editors go to “Edit” mode


5. Click the “Flip to Read” mode button - both editors go to “Read” mode

Actual Result

Top editor hover, dblclick, etc. do not work while bottom editor does

Expected Result

Top editor has event delegates hooked after toggling to read mode

Sample Page XML

<skuidpage unsavedchangeswarning="yes" showsidebar="true" showheader="true" tabtooverride="Account">   <models>

      <model id="Account" limit="1" query="true" createrowifnonefound="false" sobject="Account">

         <fields>

            <field id="Name"/>

            <field id="CreatedDate"/>

         </fields>

         <conditions>

            <condition type="param" enclosevalueinquotes="true" operator="=" field="Id" value="id"/>

         </conditions>

         <actions/>

      </model>

   </models>

   <components>

      <pagetitle model="Account">

         <maintitle>

            <template>{{Name}}</template>

         </maintitle>

         <subtitle>

            <template>{{Model.label}}</template>

         </subtitle>

         <actions>

            <action type="custom" label="Flip to Edit" snippet="flipToEdit"/>

            <action type="custom" label="Flip to Read" snippet="flipToRead"/>

            <action type="savecancel" window="self"/>

         </actions>

      </pagetitle>

      <basicfieldeditor showsavecancel="false" showheader="true" model="Account" mode="edit" buttonposition="" layout="">

         <columns>

            <column width="100%">

               <sections>

                  <section title="Edit Mode to Start" collapsible="no">

                     <fields>

                        <field id="Name"/>

                     </fields>

                  </section>

               </sections>

            </column>

         </columns>

      </basicfieldeditor>

      <basicfieldeditor showheader="true" showsavecancel="false" model="Account" buttonposition="" mode="read" layout="">

         <columns>

            <column width="100%">

               <sections>

                  <section title="Read With In-line Edit to Start" collapsible="no">

                     <fields>

                        <field id="Name"/>

                     </fields>

                  </section>

               </sections>

            </column>

         </columns>

      </basicfieldeditor>

   </components>

   <resources>

      <labels/>

      <css/>

      <javascript>

         <jsitem location="inline" name="modeFlipper" cachelocation="false" url="">(function(skuid){

    var $ = skuid.$;

    

    var flipMode = function(mode) {

        $('.nx-basicfieldeditor:visible').each(function() {

        var componentElem = this

        , component = $( componentElem ).data( 'component' )

        , componentType = component.getType();

        

        // Currently, this snippet only supports toggling tables and field editors

        // However, it would be relatively easy to add other types of components

        // as appropriate by adding a "case" statement below:

        switch ( componentType ){

        case 'skootable':

        case 'basicfieldeditor':

        var componentObject = $( componentElem ).data( 'object' );

        if (!componentObject || !componentObject.list || !componentObject.list.mode) {

        console.log('component b' + componentElem.id + '] does not contain skuid object.  Possibly conditionally rendered out of page.');

        } else if ((componentObject.mode !== mode) || (componentObject.list.mode !== mode)) {

        componentObject.mode = componentObject.list.mode = mode;

        componentObject.list.render({doNotCache:true});

        } else {

        console.log('jfco__updateComponentMode - Component already in target mode, no need to change');

        }

        break; 

        

        // case 'othertype':

        //    ...

        //    break;

        }

        });

    };

    

    skuid.snippet.registerSnippet('flipToEdit', function() {

    flipMode('edit');

    });

    

    skuid.snippet.registerSnippet('flipToRead', function() {

    flipMode('read');

    });

})(skuid);</jsitem>

      </javascript>

   </resources>

</skuidpage>