CODEWITHSUNDEEP
dojoxpages
Steve Zavocki
Steve Zavocki

Reputation: 1840

Dojo Tree Grid not being styled correctly

I have created a Dojo Tree Grid using this blog post from Brad Balassatis: http://xcellerant.net/2013/05/28/categorized-dojo-grid/

The grid is created, but the styling is totally off.

It should look like this:

enter image description here

But instead it looks like this:

enter image description here

These are the things I have tried:

Here is the resources loaded:

    <xp:this.resources>
    <xp:dojoModule name="dojox.grid.TreeGrid"></xp:dojoModule>
    <xp:dojoModule name="dijit.tree.ForestStoreModel"></xp:dojoModule>
    <xp:dojoModule name="dojo.data.ItemFileWriteStore"></xp:dojoModule>
    <xp:styleSheet href="/.ibmxspres/dojoroot/dojox/grid/resources/Grid.css"></xp:styleSheet>
    <xp:styleSheet href="/.ibmxspres/dojoroot/dijit/themes/tundra/tundra.css"></xp:styleSheet>
    <xp:styleSheet href="/.ibmxspres/dojoroot/dojox/grid/resources/tundraGrid.css"></xp:styleSheet>
</xp:this.resources>

Here is the code that loads the grid in the clientside onClientLoad event

var layout = [
  { name: "Arrival Date", field: "state", width: "200px"},
  { name: "PO Number", field: "poNumber", width: "200px"},
  { name: "PO Type", field: "typePO", width: "200px"}
];

var jsonStore = new dojo.data.ItemFileWriteStore({ url: "xReadCategorizedView.xsp"});

var treeModel = new dijit.tree.ForestStoreModel({
  store: jsonStore,
  query: {type: 'state'},
  rootId: 'personRoot',
  rootLabel: 'People',
  childrenAttrs: ['children']
});

var grid = new dojox.grid.TreeGrid({
  treeModel: treeModel,
  structure: layout
}, 'treeGrid');

grid.startup();

dojo.connect(window, "onresize", grid, "resize");

Complete code as requested.

CC containing the grid:

    <?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlns:xe="http://www.ibm.com/xsp/coreex" dojoTheme="true" dojoParseOnLoad="true">

    <xp:this.afterPageLoad><![CDATA[#{javascript:if(userStore == "vendor" & vendorBean.vendorNum == null){refreshVendorBean();}}]]></xp:this.afterPageLoad>
    <xp:this.resources>
        <xp:dojoModule name="dojox.grid.TreeGrid"></xp:dojoModule>
        <xp:dojoModule name="dijit.tree.ForestStoreModel"></xp:dojoModule>
        <xp:dojoModule name="dojo.data.ItemFileWriteStore"></xp:dojoModule>
        <xp:styleSheet href="/.ibmxspres/dojoroot/dojox/grid/resources/Grid.css">    </xp:styleSheet>
        <xp:styleSheet href="/.ibmxspres/dojoroot/dijit/themes/tundra/tundra.css"></xp:styleSheet>
        <xp:styleSheet     href="/.ibmxspres/dojoroot/dojox/grid/resources/tundraGrid.css"></xp:styleSheet>
    </xp:this.resources>



    <xe:keepSessionAlive id="keepSessionAlive1" delay="300"></xe:keepSessionAlive>
    <xp:br></xp:br>
    <xp:panel>
        <xp:div style="text-align:left">
            <xp:label value="By Arrival Date" id="label1"
                style="font-weight:bold;font-style:italic;color:rgb(0,0,64);font-size:14pt;padding-left:3.0em">
            </xp:label>
        </xp:div>
        <xp:div style="width:100%;height:1000px">
            <div id="treeGrid"></div>
        </xp:div>


    </xp:panel>
    <xp:eventHandler event="onClientLoad" submit="false">
        <xp:this.script><![CDATA[var layout = [
  { name: "Arrival Date", field: "state", width: "200px"},
  { name: "PO Number", field: "poNumber", width: "200px"},
  { name: "PO Type", field: "typePO", width: "200px"}
];           
var jsonStore = new dojo.data.ItemFileWriteStore({ url: "xReadCategorizedView.xsp"});

var treeModel = new dijit.tree.ForestStoreModel({
  store: jsonStore,
  query: {type: 'state'},
  rootId: 'personRoot',
  rootLabel: 'People',
  childrenAttrs: ['children']
});

var grid = new dojox.grid.TreeGrid({
  treeModel: treeModel,
  structure: layout
}, 'treeGrid');

grid.startup();

dojo.connect(window, "onresize", grid, "resize");]]></xp:this.script>
    </xp:eventHandler>
    </xp:view>

XPage containing the CC that contains the grid:

    <?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlns:xc="http://www.ibm.com/xsp/custom" xmlns:xe="http://www.ibm.com/xsp/coreex">

    <xp:this.beforePageLoad><![CDATA[#{javascript:if(session.getEffectiveUserName() == "Anonymous"){
    context.redirectToPage("Home.xsp")
}}]]></xp:this.beforePageLoad>
    <xc:layout>
        <xc:Submitted_By_Arrival_CC /></xc:layout></xp:view>

Layout CC that everything is wrapped in. Uses Bootstrap 2

    <?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlns:xc="http://www.ibm.com/xsp/custom">
    <link href='http://fonts.googleapis.com/css?family=Bitter'
        rel='stylesheet' type='text/css' />
    <!-- Fix for IE8 -->
    <xp:text escape="false" id="computedField1"
        rendered="#{javascript:context.getUserAgent().isIE(0,8)}">
        <xp:this.value><![CDATA[#{javascript:"<style type='text/css'>body {padding-top: 45px; padding-bottom: 40px; }</style>"}]]></xp:this.value>
    </xp:text>

    <div class="container-fluid">
        <xc:header showCategories="true" />
        <div class="row-fluid">

            <div id="mainContent" class="span12">
                <xp:callback />
            </div>
            <div id="rightColumn" class="span0 visible-desktop">
                <xp:callback facetName="rightColumn" />
            </div>
        </div>
    </div>
</xp:view>

My theme, originally based on Collaboration Today from openNTF:

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="platform:/plugin/com.ibm.designer.domino.stylekits/schema/stylekit.xsd">

<resources>
    <styleSheet type="text/css" href="bootstrap-2.0.4.combined.min.css"/>
    <styleSheet type="text/css" href="custom.css"/>

    <script src="jquery-1.7.1.min.js" clientSide="true" type="text/javascript"/>
    <script src="bootstrap-2.0.4.min.js" clientSide="true" type="text/javascript"/>
    <script src="/custom.js" clientSide="true" type="text/javascript"/>
    <metaData name="viewport" content="width=device-width, initial-scale=1,  maximum-scale=1"/>
</resources>

<control override="false">
    <name>ViewRoot</name>
    <property>
        <name>pageTitle</name>
        <value>Harmons Purchase Orders</value>
    </property>
</control>
<control>
    <name>ViewRoot</name>
    <property>
        <name>pageIcon</name>
        <value>/favicon.ico</value>
    </property>
</control>

Upvotes: 2

Views: 830

Answers (1)

Brad Balassaitis
Brad Balassaitis

Reputation: 301

I tested the sample code and found that the problem is fixed when adding this attribute to the theme's <theme> tag:

extends="webstandard"

Upvotes: 1

Related Questions