AceEditor issue in ListGrid expansion component

lucasmilne

Registered Developer

Join Date: Jun 2012
Posts: 8

AceEditor issue in ListGrid expansion component

6 Aug 2021, 05:44

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.

Tags: None

Isomorphic

Administrator

Join Date: May 2006

Posts: 55297
#2

6 Aug 2021, 11:12

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

Previous template Next

Announcement

AceEditor issue in ListGrid expansion component

Comment