DHTMLX: how to put formatting into <afterInit> section in order to have the same result in all browsers? - dhtmlx

If I have the following my.xml file:
<rowset>
<head>
<column width="60" hidden="false" type="ro">Col A</column>
<column width="60" hidden="true" type="ro">Col B</column>
<column width="60" hidden="false" type="ro">Col C</column>
<column width="60" hidden="false" type="ro">Col D</column>
<afterInit>
<call command="attachHeader">
<param>A,B,C,D</param>
<param>color:green;,color:red;,color:blue;,color:yellow;</param>
</call>
</afterInit>
</head>
<row id="1">
<cell>value1</cell>
<cell>value2</cell>
<cell>value3</cell>
<cell>value4</cell>
</row>
<row id="2">
<cell>value5</cell>
<cell>value6</cell>
<cell>value7</cell>
<cell>value8</cell>
</row>
<row id="3">
<cell>value-11</cell>
<cell>value-12</cell>
<cell>value-13</cell>
<cell>value-14</cell>
</row>
</rowset>
and the following .html file
<body>
<div id="myGridContainer" width="799px" height="799px"></div>
</body>
<script>
myGrid = new dhtmlXGridObject('myGridContainer');
myGrid.setSkin("xp");
myGrid.xml.top="rowset";
myGrid.attachHeader("A,B,C,D",["color:green","color:red;","color:blue;","color:yellow;"]);
myGrid.load("my.xml");
</script>
then I will receive bad output in Firefox and Chrome. IE works fine. I will create the .xml manually, so I will not use .attachHeader(). But how to create the <afterInit> section with color definitions to have the same result?

Your provided code should work well. If the problem still occurs for you, please provide us a demo link or a complete demo, where the problem can reconstructed.

Instead of <afterInit> should be used <beforeInit>

Related

Find the first node with a specific attribute value

<document>
<para>
<heading id="1" type="new" level="1" />
<span />
<heading id="2" type="new" level="2" />
<span />
</para>
<para>
<heading id="3" type="new" level="1" />
<span />
<heading id="4" type="new" level="2" />
<span />
</para>
<para>
<heading id="5" type="old" level="2" />
<span />
</para>
<para>
<heading id="6" type="old" level="2" />
<span />
</para>
<para>
<heading id="7" type="old" level="2" />
<span />
</para>
<para>
<heading id="8" type="old" level="2" />
<span />
</para>
<para>
<span />
</para>
</document>
Hello,
I'm parsing the above XML node-by-node in Javascript. Assuming that I'm currently at "heading id='8'" node, how would I look backwards and find the first node that has it's level set to "2" (same as the level on the node that I'm currently parsing) and type set to "new" using XPath expressions?
So, in the above exapmple, the element with id="4" must be selected.
Thanks!
You can use preceding axis and use index to return only the nearest preceding element :
preceding::*[#level='2' and #type='new'][1]
xpathtester demo
output :
<heading id="4" level="2" type="new"/>
In the demo, I use //*[#id='8'] to select element with id=8 first, to simulate context element, and then continue selecting the target element using the above mentioned XPath.
Actually I thought you wanted this.
How would I look backwards and find the first node that has it's level set to the same as the level on the node that I'm currently parsing and type set to new using XPath expressions?
Oh well, leaving this here for future reference ...
[#type='new' and #level=current()/#level]

BI Publisher Ring Chart Thickness

I am relatively new to BI Publisher and I have to date only worked with line and bar charts.
I am working on a report that uses Ring Charts, and the default thickness of the chart is too much. I want it to look like a hoola hoop and not a doughnut, as below. But I dont know what node to change in the XML, can someone advise?
Chart Currently looks like this:
I would like it to look like this:
Any help is greatly appreciated.
Thanks
Chart Code
<Graph seriesEffect="SE_NONE" graphType="RING">
<LegendArea visible="false" />
<SeriesItems>
<Series id="0" color="#447A27" />
<Series id="1" color="#96b27f" />
<Series id="2" color="#c4c5c7" />
<Series id="3" color="#EA4848" />
<Series id="4" color="#C41C24" />
</SeriesItems>
<SliceLabel visible="false">
<ViewFormat decimalDigit="0" decimalDigitUsed="true" />
</SliceLabel>
<LocalGridData colCount="1" rowCount="{count(.//DATASET[condition='Test'])}">
<RowLabels>
<xsl:for-each select=".//DATASET[condition='Test']" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<Label>
<xsl:value-of select="QUALITY_LEVEL" />
</Label>
</xsl:for-each>
</RowLabels>
<DataValues>
<xsl:for-each select=".//DATASET[condition='Test']" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<RowData>
<Cell>
<xsl:value-of select="COUNT" />
</Cell>
</RowData>
</xsl:for-each>
</DataValues>
</LocalGridData>
<RingTotalLabel>
<GraphFont size="50" fontColor="#c4c5c7" />
</RingTotalLabel>
</Graph>

How can I make even-width columns?

I am very perplexed with the XUL's 'Box Model' layout.
I want to make a table-like layout of elements.
The layout should consist of one row and three columns.
The columns should have the same width and occupy the whole width of the page.
I will put different elements inside the columns, but the width of the columns should remain the same
and the elements should have their normal sizes, not stretched out.
Say, first column is empty, second contains an image, third contains a button.
How can I achieve that?
I tried boxes and grids, but the columns just seem to assume arbitrary width.
Thank you.
This does not work:
<grid>
<columns flex="1">
<column/>
<column/>
<column/>
</columns>
<rows>
<row>
<spacer flex="1"/>
<image src="MyImage.png"/>
<button id="MyButton" label="MyButton"/>
</row>
</rows>
</grid>
Specify the min and max width of each column and make each cell in the grid an hbox width specific widths and heights. Something like this:
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window id="yourwindow" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:h="http://www.w3.org/1999/xhtml">
<grid>
<columns flex="1">
<column maxwidth="100" minwidth="100"/>
<column maxwidth="100" minwidth="100"/>
<column maxwidth="100" minwidth="100"/>
</columns>
<rows>
<row>
<hbox maxwidth="100">
xxxx xxxxxxxx xxxx xxxxx xxxxxxxx xxxxxxxx
</hbox>
<hbox maxwidth="100" minwidth="100" maxheight="10">
<button id="MyButton1" label="MyButton1"/>
</hbox>
<hbox maxwidth="100" minwidth="100" maxheight="30">
<button id="MyButton1" label="MyButton2"/>
</hbox>
<hbox maxwidth="100" minwidth="100" maxheight="40">
<button id="MyButton3" label="MyButton3"/>
</hbox>
</row>
</rows>
</grid>
</window>
In Xul, the width and length attributes are always in pixels. You cannot specify a percentage like you can with css. This means you will have to know your page width in advance and specify widths accordingly if you want the columns to be evenly spaced and extend to the page width.
Here's another way. Use this:
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window id="yourwindow" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
xmlns:html="http://www.w3.org/1999/xhtml" xmlns:h="http://www.w3.org/1999/xhtml">
<grid>
<columns>
<column flex="1"/>
<column flex="1"/>
<column flex="1"/>
</columns>
<rows>
<row>
<button label="MyButton1"/>
<button label="MyButton2"/>
<button label="MyButton3"/>
</row>
</rows>
</grid>
</window>
to create this:
The buttons/columns will adjust as the window size is changed.
I suggest to use in combo with flex="1" on the column elements
<columns equalsize="always">
<column flex="1">
...
a/p documentation
https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/equalsize
you can also use equalsize="always" on the rows as well, this is how it is accomplished in the Thunderbird Lightning calendar layout

Formatting legend in Anychart included with Application Express

I am trying to format the legend within Application Express Anychart Flash chart. Here is the relevant XML section:
<legend enabled="true" position="Right" align="Near" elements_layout="Vertical">
<title enabled="true">
<text>Legend</text>
<font family="Tahoma" size="10" color="0x000000" />
</title>
<icon>
<marker enabled="true" />
</icon>
<font family="Tahoma" size="10" color="0x000000" />
</legend>
I am simply trying to add two line items, Sales and Tickets, to describe the lines in my chart with a correctly colored line icons but instead I get two generic entries - Value and Value. Can anyone help me sort out the proper code for this XML?
When I change it to the following:
<legend enabled="true" position="Right" align="Near" elements_layout="Vertical" ignore_auto_item="True">
<title enabled="true">
<text>Legend</text>
<font family="Tahoma" size="10" color="0x000000" />
</title>
<items>
<item>
<text>This is a test</text>
</icon></item>
<item><text>Item 2</text>
</item>
</items>
<icon>
<marker enabled="true" />
</icon>
<font family="Tahoma" size="10" color="0x000000" />
</legend>
This gives me the two series I want but no icon.
Please forgive my ignorance here. I still am not getting the simple legend I want. I am using two series queries, Total_Sales and Total_Tickets:
SELECT NULL Link,
trunc(tix.timestamp) AS label,
sum(tixp.Price) AS value
FROM LS_tickets tix LEFT OUTER JOIN
LS_ticket_prices tixP
ON tixp.series_prefix = tix.ticket_series
WHERE tix.event_id = :P145_event_id
and tix.event_id = tixp.event_id
and tix.voided_flag != 'Y'
GROUP BY trunc(tix.timestamp)
ORDER BY trunc(tix.timestamp) ASC
And
SELECT NULL Link,
trunc(tix.timestamp) AS label,
sum( tixp.quantity ) AS value
FROM LS_tickets tix LEFT OUTER JOIN
LS_ticket_prices tixP
ON tixp.series_prefix = tix.ticket_series
WHERE tix.event_id = :P145_event_id
and tix.event_id = tixp.event_id
and tix.voided_flag != 'Y'
GROUP BY trunc(tix.timestamp)
ORDER BY 1
But I am getting an empty legend whenever i try and add ICON information specific for each label as follows:
<legend enabled="true" position="Right" align="Near" elements_layout="Vertical" ignore_auto_item="True">
<title enabled="true">
<text>Legend</text>
<font family="Tahoma" size="10" color="0x000000" />
</title>
<icon><marker enabled="true" /></icon>
<items>
<item source="Series" series="Total_Sales">
<text>{%Icon} Sales</text>
</item>
<item source="Series" series="Total_Tickets"><text>{%Icon} Tickets</text>
</item>
</items>
<font family="Tahoma" size="10" color="0x000000" />
</legend>
It depends on what data structure you are using. You can specify what data should be shown in legend using these xml settings.
Each automatic item have attributes source which can be "Points" or "Series" and series, that specifies the series name:
http://www.anychart.com/products/anychart/docs/users-guide/index.html?legend-text-formatting.html#automatic-items
In case of custom line items you can add your own items with any information:
http://www.anychart.com/products/anychart/docs/users-guide/index.html?legend-text-formatting.html#custom-items
Here is a list of all keywords that you can use to format the items values:
http://www.anychart.com/products/anychart/docs/users-guide/index.html?legend-text-formatting.html#keywords
it looks like the issue occurs while apex working with the series, all of them are created with the name set to "VALUE. Here is a solution for the similar problem:
https://community.oracle.com/message/12637203#12637203

ZKUI sorting by 'id' and not column

I am a zkui newbie and I have a Listmodel with live data. There is a sorting attribute that is set on the view which should sort the data by the column clicked but actually sorts by the id- sort="auto".
I found it at this site
Here is some sample code extracted from the site:
<columns menupopup="auto">
<column label="Author" sort="auto" />
<column label="Title" sort="auto" />
<column label="Publisher" sort="auto" />
<column label="Hardcover" />
</columns>
<rows>
<row>
<label value="Philip Hensher" />
<label value="The Northern Clemency" />
<label value="Knopf (October 30, 2008)" />
<label value="608 pages" />
</row>
<rows>
I researched a solution but I only found similar unanswered questions like the one here
I wonder if the issue might be the fact that I'm working with live data.
Please tell me what to do to ensure that the data is sorted according to the clicked column.
I am using grails to develop the application and this is my list.gsp:
<z:grid id="grid"
emptyMessage="${message(code:'emptyMessage',default:'No Record')}">
<z:columns sizable="true">
<z:column
label="${message(code: 'app.name.label', default: 'Name')}" sort="auto" />
<z:column
label="${message(code: 'app.status.label', default: 'Status')}" sort="auto"/>
In your list.gsp, try specifying the object attribute to be used in the sorting, like sort="auto(app.id)", sort="auto(app.name)" or whatever.

Resources