Announcement

Collapse
No announcement yet.
X
  • Filter
  • Time
Clear All
new posts

    AceEditor issue in ListGrid expansion component

    SmartGWT Version
    v12.1p_2021-07-24 / LGPL Edition

    Browser
    Chrome Version 92.0.4515.107 (Official Build) (x86_64)


    Hello,

    I am having an issue where a third party widget (Ace Editor) is scrolling by itself in a ListGrid Expansion component. I have put a sample module below.

    The sample module has 2 top level components.

    The first component is the AceEditor by itself as a member of an HLayout. When you enter text in this editor, everything works as expected.

    The second top level component is the AceEditor in a ListGrid's expansion component. When you enter text in this AceEditor, it scrolls to the right, hiding the text that has been typed. The issue goes away when the browser is resized.

    I haven't included the AceGwt project, but it's available at https://github.com/daveho/AceGWT. I'd be happy to provide the AceGWT code if it would help.

    Please let me know if I'm doing something wrong or if there is a workaround to this issue. Thanks in advance :-)



    AceEditorModule.java
    Code:
    import com.google.gwt.core.client.EntryPoint;
    import com.smartgwt.client.widgets.Canvas;
    import com.smartgwt.client.widgets.grid.ListGrid;
    import com.smartgwt.client.widgets.grid.ListGridField;
    import com.smartgwt.client.widgets.grid.ListGridRecord;
    import com.smartgwt.client.widgets.layout.HLayout;
    import com.smartgwt.client.widgets.layout.VLayout;
    import edu.ycp.cs.dh.acegwt.client.ace.AceEditor;
    
    public class AceEditorModule implements EntryPoint {
        @Override
        public void onModuleLoad() {
            final ListGridRecord record = new ListGridRecord();
            record.setAttribute("id", 1);
            record.setAttribute("description", "Lorem Ipsum");
    
            final ListGrid listGrid = new ListGrid() {
                @Override
                protected Canvas getExpansionComponent(final ListGridRecord record) {
                    VLayout layout = new VLayout(5);
                    layout.addMember(getAceEditorInstance("AceEditor in expansion component."));
                    layout.setHeight(500);
                    return layout;
                }
            };
            listGrid.setCanExpandRecords(true);
            listGrid.setHeight100();
            listGrid.setWidth100();
            listGrid.setFields(new ListGridField("id", "Id", 40), new ListGridField("description", "Description"));
            listGrid.setRecords(new ListGridRecord[]{record});
    
            final HLayout layout = new HLayout(4);
            layout.setPadding(4);
            layout.setWidth100();
            layout.setHeight100();
            layout.addMember(getAceEditorInstance("AceEditor in layout"));
            layout.addMember(listGrid);
            layout.draw();
        }
    
        private AceEditor getAceEditorInstance(String text) {
            AceEditor aceEditor = new AceEditor();
            aceEditor.startEditor();
            aceEditor.setHeight("100%");
            aceEditor.setWidth("100%");
            aceEditor.setValue(text);
            return aceEditor;
        }
    }
    index.html
    Code:
    <!doctype html>
    <html>
    <head>
        <link href="AceEditorModule/sc/skins/Graphite/skin_styles.css" rel="stylesheet"></link>
        <script src="AceEditorModule/AceEditorModule.nocache.js"></script>
        <script src="AceEditorModule/sc/modules/ISC_Core.js"></script>
        <script src="AceEditorModule/sc/modules/ISC_Foundation.js"></script>
        <script src="AceEditorModule/sc/modules/ISC_Containers.js"></script>
        <script src="AceEditorModule/sc/modules/ISC_Grids.js"></script>
        <script src="AceEditorModule/sc/modules/ISC_Forms.js"></script>
        <script src="AceEditorModule/sc/modules/ISC_RichTextEditor.js"></script>
        <script src="AceEditorModule/sc/modules/ISC_Calendar.js"></script>
        <script src="AceEditorModule/sc/modules/ISC_DataBinding.js"></script>
        <script src="AceEditorModule/sc/modules/ISC_Drawing.js"></script>
        <script src="AceEditorModule/sc/modules/ISC_PluginBridges.js"></script>
    
        <!-- ***** Include the ace javascript files*****-->
    
        <script src="AceEditorModule/ace/ace.js"></script>
        <script src="AceEditorModule/ace/mode-javascript.js"></script>
    
        <!-- **********-->
    
    
        <script>
            var isomorphicDir="AceEditorModule/sc/";
            isc.Page.setSkinDir("AceEditorModule/sc/skins/Graphite/")
        </script>
        <script src="AceEditorModule/sc/skins/Graphite/load_skin.js"></script>
    </head>
    <body>
    </body>
    </html>
    AceEditorModule.gwt.xml
    Code:
    <?xml version="1.0" encoding="UTF-8"?>
    <module rename-to='AceEditorModule'>
        <inherits name='com.google.gwt.user.User'/>
    
        <inherits name="com.smartgwt.debug.SmartGwtDebug"/>
        <inherits name="com.smartgwt.SmartGwtNoScript"/>
        <inherits name="com.smartclient.theme.graphite.Graphite"/>
    
    
        <!-- ***** Inherit the AceGWT Component *****-->
    
        <inherits name="edu.ycp.cs.dh.acegwt.AceGWT"/>
    
        <!-- ***** *****-->
    
    
        <entry-point class='com.collegenet.ace.AceEditorModule'/>
    
        <source path='ace'/>
    </module>
    Last edited by lucasmilne; 6 Aug 2021, 08:01.

    #2
    Sorry guys, this is an issue with a third-party component which is likely a bug in that component rather than an issue with our framework, and, you let your support lapse years ago. We won’t be looking into this, but we can of course help if you want to purchase consulting hours.

    If you want to attempt to resolve it on your own, we would suggest looking for APIs in the AceEditor that would allow you to force it to scroll left, or taking an alternative approach such as a pop-up editor.

    Comment

    Working...
    X