Creating GWT Material Design MaterialDataTable results in exception being thrown

389 Views Asked by At

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?

0

There are 0 best solutions below