Opened 6 years ago

Closed 3 years ago

#17027 closed defect (patchwelcome)

Gantt Chart won't inherit 100% width from parent div

Reported by: dekowski411 Owned by: Evan
Priority: undecided Milestone: 1.13
Component: Dojox Version: 1.8.3
Keywords: Cc: JayZ(zhouxiang)
Blocked By: Blocking:


dojox.ganttchart is defaulted @ 600 width by 400 height; cannot override the inherited default to a height and width of 100%, can only declare height/width as integer. If set to 100% the Gantt Chart does not render, will only render if width and height is declared or commented out to initiate the default. See example below:

<script> ... var ganttChart = new dojox.gantt.GanttChart?({

readOnly : false, height: 100%, width: 100%, withResource : false

}, "gantt");


Initialize and Render ganttChart.init();


... </script>

<div style="width: 75%; padding: 0px;" data-dojo-type="dijit.layout.BorderContainer?" data-dojo-props="region: 'right',liveSplitters:false">

<div id="mapDivTarget">

<div id="mapDiv" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'center'" style="padding:0px"></div> <applet codebase="js/renderer" code="sec.web.renderer.SECWebRenderer" archive="SECRenderer.jar,JavaLineArray?-0.0.5-SNAPSHOT.jar,JavaRenderer?-0.0.5-SNAPSHOT.jar,JavaRendererPluginInterface?-0.0.5-SNAPSHOT.jar,JavaRendererServer?-0.0.5-SNAPSHOT.jar,JavaRendererUtils?-0.0.5-SNAPSHOT.jar" height="1" width="1" name="SECRenderer" id="SECRenderer"></applet>

</div> <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'trailing'" style="width: 250px">

<div data-dojo-type="dijit/layout/AccordionContainer" style="margin: -8px;">

<div data-dojo-type="dijit/layout/AccordionPane" title="Unit Palette">

<div id="unitPalette"></div>

</div> <div data-dojo-type="dijit/layout/AccordionPane" title="Task Palette">

<div id="taskPalette"></div>

</div> <div data-dojo-type="dijit/layout/AccordionPane" title="Area Palette">

<div id="AreaPalette?"></div>

</div> <div data-dojo-type="dijit/layout/AccordionPane" title="Draw Palette">

<div id="drawPalette"></div>



</div> <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'bottom', splitter: true" style="height: 16%; margin-left: -8px">

<!--Gantt Chart-->

<div id="gantt"></div>

<!--<div style="background-color: #333333; width: 100%; height: 100%"></div>-->



Change History (3)

comment:1 Changed 6 years ago by Adam Peller

Cc: JayZ(zhouxiang) added
Owner: changed from Adam Peller to Evan
Status: newassigned

comment:2 Changed 6 years ago by shauki

I am developing an application with bottom tabs like Excel sheets whith each sheet containing a separate Gantt chart. I have implemented the complete filling of the sheet with the chart by mixing in with the original GanttChart? and adding the following modifications that can be inserted into the bottom of test_Gantt.html:

var ShaukiGanttChart? = dojo.declare("dojox.gantt.ShaukiGanttChart?", GanttChart?, {

postBindEvents: function() {

var pos = domGeometry.position(this.tableControl, true); /*has("dom-addeventlistener") && */this._events.push(

on(this.tableControl, "mousemove", lang.hitch(this, function(event) {

var elem = event.srcElement if (elem === this.panelNames.firstChild;
elem === this.contentData.firstChild) {

var rowHeight = this.heightTaskItem + this.heightTaskItemExtra; var hlTop = parseInt(event.layerY / rowHeight - 1) * rowHeight + this.panelTimeHeight - this.contentData.scrollTop; if (hlTop !== this.oldHLTop && hlTop < (pos.h - 50)) {

if (this.highLightDiv) {

domStyle.set(this.highLightDiv, "top", (pos.y + hlTop) + "px");

} else {

this.highLightDiv = domConstruct.create("div", {

className: "ganttRowHighlight"

}, this.tableControl/*win.body()*/); domStyle.set(this.highLightDiv, {

top: (/*pos.y + */hlTop) + "px", left: "0px", right: "20px", height: rowHeight + "px"



} this.oldHLTop = hlTop;




}, shaukiFitOnPage: function() {

this.contentHeight = - this.panelTimeHeight; domStyle.set(this.content, {

width: "100%", height: this.contentHeight + "px"

}); var pos = domGeometry.position(this.content, true); this.contentWidth = pos.w;

domStyle.set(this.contentData, "height", (this.contentHeight - this.panelTimeHeight) + "px"); domStyle.set(this.panelNames, "height", (this.contentHeight - this.panelTimeHeight - this.scrollBarWidth) + "px"); domStyle.set(this.contentData, "width", (this.contentWidth - this.maxWidthPanelNames) + "px"); domStyle.set(this.panelTime, "width", (this.contentWidth - this.maxWidthPanelNames - this.scrollBarWidth) + "px"); this.refresh(1, 1, 1); this.postBindEvents();



var ganttChart = new ShaukiGanttChart?({

withTaskId: true, withResource: false

}, "gantt" + ui); ganttChart.addProject(projectDev);

dojo.connect(window, "onresize", dojo.hitch(ganttChart, function() {



ganttChart.init(); ganttChart.shaukiFitOnPage();

I hope above can be helpful improving the original GanttChart? prototype soon.

comment:3 Changed 3 years ago by dylan

Milestone: tbd1.12
Resolution: patchwelcome
Status: assignedclosed

Given that no one has shown interest in creating a patch in the past 2+ years, I'm closing this as patchwelcome.

Note: See TracTickets for help on using tickets.