0

I'm trying to add a data table to my page but no matter what I try I keep getting an exception being thrown.

My view:

public class SessionsView extends ViewWithUiHandlers<ISessionsUiHandlers> implements SessionsPresenter.MyView {
interface Binder extends UiBinder<Widget, SessionsView> {
}

@UiField MaterialDataTable<SessionDTO> activeTable;

@Inject
SessionsView(Binder uiBinder) {
    initWidget(uiBinder.createAndBindUi(this));

}
}

My ui.xml:

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
    xmlns:g='urn:import:com.google.gwt.user.client.ui'
    xmlns:m='urn:import:gwt.material.design.client.ui'
    xmlns:ma="urn:import:gwt.material.design.addins.client">

<ui:with field="tokens" type="ca.davidcarter.sessionmanager.client.place.NameTokens"/>

<m:MaterialPanel>
    <m:MaterialPanel ui:field="titlePanel" backgroundColor="BLUE_DARKEN_2" textColor="WHITE"  padding="10" paddingLeft="110" shadow="0">
        <m:MaterialRow marginBottom="0" >
            <m:MaterialColumn grid="s6">
                <m:MaterialLabel ui:field="title" text="Sessions" fontSize="2.3em"/>
            </m:MaterialColumn>
            <m:MaterialColumn textAlign="RIGHT" grid="s6">
                <m:MaterialLink ui:field="create" iconType="ADD_TO_PHOTOS" waves="DEFAULT" textColor="WHITE" />
            </m:MaterialColumn>
        </m:MaterialRow>
    </m:MaterialPanel>

    <m:MaterialRow>
        <m:table.MaterialDataTable ui:field="activeTable"
                                       shadow="1"
                                       rowHeight="60"
                                       height="calc(100vh - 131px)"
                                       useStickyHeader="true"
                                       useCategories="true"
                                       useRowExpansion="true"
                                       selectionType="SINGLE"/>
    </m:MaterialRow>
</m:MaterialPanel>

When I run it as is, the code throws an exception and the result is a blank display. If I comment out the table (and UiField in the view), things display fine.

Using the Firefox debugger, I can trace it to the call to initWidget(). It throws the following error:

Paused on exception
TypeError: $wnd.$ is not a function

The line of code where the error is thrown is in gwt.material.design.client.ui.table.Table:

public Table(Element element) {
    super(element);

    this.element = JsTableElement.$(getElement());
}

Specifically it's the Javascript call to getElement() that is causing the exception.

I've tried everything I can think of but I don't know how to proceed beyond this point.

Suggestions?

David Carter
  • 11
  • 3
  • JQuery should be in there. pom.xml: com.github.gwtmaterialdesign gwt-material-jquery ${gwt-material.version} .gwt.xml: – David Carter Nov 20 '19 at 18:21
  • Can you post your GWT modules *.gwt.xml here? This can happen when the GWT Material entry point isn't loaded before the main applications entry point is fired. This can happen in frameworks like GWTP where the entry point is customized (though I'm not familiar with the specifics). You can load JQuery manually yourself in the index.html and use gwt.material.design.GwtMaterialDesign to confirm it. – Ben Dol Nov 25 '19 at 04:07

0 Answers0