Scroll Timescale by Pixel
You can scroll the GanttSheet timescale by pixels, and it will scroll to the nearest tick.
Note: A positive pixel amount will scroll forward, whereas a negative pixel amount will scroll backward.
Scroll Timescale by One Tick
You can scroll the timescale by one tick:
Scroll Timescale by Specified Unit
You can also scroll the timescale by a specific count of units.
The scroll unit is GC.Spread.Sheets.GanttSheet.TimescaleUnit, and it contains:
years
halfYears
quarters
months
thirdsOfMonth
weeks
days
hours
minutes
Note： Timescale will scroll to the nearest tick. Positive pixel amounts will scroll forward, negative pixel amounts will scroll backward.
Scroll Timescale by Specific Date
You can scroll the timescale to a specific date.
Note: The timescale will scroll to the nearest tick.
You can control the location as a percentage of the viewport where the target date want to scroll to.
The default is 0, and will scroll to the target date at the left of viewport.
/*REPLACE_MARKER*/
/*DO NOT DELETE THESE COMMENTS*/
var myTable;
var ganttSheet;
var isForward = false;
window.onload = function() {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 0 });
initSpread(spread);
initSplitView(spread);
};
function initSpread(spread) {
spread.suspendPaint();
initDataSource(spread);
initGanttSheet(spread);
spread.resumePaint();
}
function initDataSource(spread) {
var tableName = "Gantt_Id";
var baseApiUrl = getBaseApiUrl();
var apiUrl = baseApiUrl + "/" + tableName;
var dataManager = spread.dataManager();
myTable = dataManager.addTable("myTable", {
batch: true,
remote: {
read: {
url: apiUrl
}
},
schema: {
hierarchy: {
type: "Parent",
column: "parentId"
},
columns: {
id: { isPrimaryKey: true },
taskNumber: { dataType: "rowOrder" }
}
}
});
}
function initGanttSheet(spread) {
ganttSheet = spread.addSheetTab(0, "GanttSheet", GC.Spread.Sheets.SheetType.ganttSheet);
var view = myTable.addView("ganttView", [
{ value: "taskNumber", caption: "NO.", width: 60 },
{ value: "name", caption: "Task Name", width: 200 },
{ value: "duration", caption: "Duration", width: 90 },
{ value: "predecessors", caption: "Predecessors", width: 120 }
]);
view.fetch().then(function() {
ganttSheet.bindGanttView(view);
});
initSidePanel(ganttSheet);
}
function initSidePanel(ganttSheet) {
var scrollPixelInput = document.getElementById("scroll-pixel");
var scrollByPixelButton = document.getElementById("scroll-by-pixel");
var isForwardCheckbox = document.getElementById("is-forward");
var scrollOneTickButton = document.getElementById("scroll-one-tick");
var scrollUnitSelect = document.getElementById("scroll-unit");
var scrollCountInput = document.getElementById("scroll-count");
var scrollByUnitButton = document.getElementById("scroll-by-unit");
var scrollDateInput = document.getElementById("scroll-date");
var scrollPercentInput = document.getElementById("scroll-percent");
var scrollToButton = document.getElementById("scroll-to");
var currentDate = new Date();
scrollDateInput.value = `${currentDate.getFullYear()}/${currentDate.getMonth() + 1}/${currentDate.getDate()}`;
scrollByPixelButton.addEventListener("click", function() {
var scrollPixel = Number(scrollPixelInput.value);
ganttSheet.project.timescale.scroll(scrollPixel);
});
isForwardCheckbox.addEventListener("click", function() {
if (isForwardCheckbox.classList.contains("active")) {
isForwardCheckbox.classList.remove("active");
isForward = false;
isForwardCheckbox.innerHTML = "Backward";
} else {
isForwardCheckbox.classList.add("active");
isForward = true;
isForwardCheckbox.innerHTML = "Forward";
}
});
scrollOneTickButton.addEventListener("click", function() {
ganttSheet.project.timescale.scrollOneTick(isForward);
});
scrollByUnitButton.addEventListener("click", function() {
var scrollCount = Number(scrollCountInput.value);
var scrollUnit = Number(scrollUnitSelect.value);
ganttSheet.project.timescale.scrollBy(scrollCount, scrollUnit);
});
scrollToButton.addEventListener("click", function() {
var scrollDate = new Date(scrollDateInput.value);
var scrollPercent = Number(scrollPercentInput.value);
ganttSheet.project.timescale.scrollTo(scrollDate, scrollPercent);
});
}
function getBaseApiUrl() {
return window.location.href.match(/http.+spreadjs\/demos\//)[0] + 'server/api';
}
function initSplitView(spread) {
var host = document.getElementById("split-view");
var content = host.getElementsByClassName("split-content")[0];
var panel = host.getElementsByClassName("split-panel")[0];
new SplitView({
host: host,
content: content,
panel: panel,
refreshContent: function() {
spread.refresh();
}
});
}
<!doctype html>
<html style="height:100%;font-size:14px;">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<link rel="stylesheet" type="text/css" href="$DEMOROOT$/spread/source/splitView/splitView.css">
<!-- Promise Polyfill for IE, https://www.npmjs.com/package/promise-polyfill -->
<script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"></script>
<script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets-tablesheet/dist/gc.spread.sheets.tablesheet.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets-ganttsheet/dist/gc.spread.sheets.ganttsheet.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/splitView/splitView.js" type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div id="split-view">
<div id="ss" class="split-content"></div>
<div class="split-panel">
<div class="option-row option-title">
Scroll the ganttsheet chart area.
</div>
<div class="option-block">
<div class="option-row input-box">
<label for="scroll-pixel">Scroll Pixel</label>
<input type="text" id="scroll-pixel" value="50" />
<div class="option-info valid">* valid value: integer, could be negative</div>
</div>
<div class="option-row">
<input type="button" id="scroll-by-pixel" class="option-button" value="Scroll By Pixel" />
</div>
</div>
<div class="option-block">
<div class="option-row">
<label class="option-checkbox" id="is-forward">Backward</label>
<div class="option-info">* checkbox toggle between "Forward" and "Backward"</div>
</div>
<div class="option-row">
<input type="button" id="scroll-one-tick" class="option-button" value="Scroll One Tick" />
</div>
</div>
<div class="option-block">
<div class="option-row selection-box">
<label for="scroll-unit">Scroll Unit</label>
<select id="scroll-unit">
<option value="1">years</option>
<option value="2">halfYears</option>
<option value="3">quarters</option>
<option value="4">months</option>
<option value="5">thirdsOfMonth</option>
<option value="6">weeks</option>
<option value="7" selected>days</option>
<option value="8">hours</option>
<option value="9">minutes</option>
</select>
</div>
<div class="option-row input-box">
<label for="scroll-count">Scroll Count</label>
<input type="text" id="scroll-count" value="1" />
<div class="option-info valid">* valid value: integer, could be negative</div>
</div>
<div class="option-row">
<input type="button" id="scroll-by-unit" class="option-button" value="Scroll By Unit" />
</div>
</div>
<div class="option-block">
<div class="option-row input-box">
<label for="scroll-date">Scroll Date</label>
<input type="text" id="scroll-date" />
<div class="option-info valid">* valid value: format 2022/1/3 or 2022/1/3 12:00:00</div>
</div>
<div class="option-row input-box">
<label for="scroll-percent">Percent Of Viewport</label>
<input type="text" id="scroll-percent" value="0.5" />
<div class="option-info valid">* valid value: number between 0~1</div>
</div>
<div class="option-row">
<input type="button" id="scroll-to" class="option-button" value="Scroll To Date" />
</div>
</div>
</div>
</div>
</html>
.option-block {
background: #fff;
padding: 8px;
margin: 12px 0;
border-radius: 4px;
border: 1px dashed #82bc00;
box-shadow: 0px 0 6px 0 rgba(0,0,0,0.1);
}
.option-block.toggle {
border: 1px dotted #f7a711;
}
.option-row {
font-size: 14px;
box-sizing: border-box;
padding: 4px 0;
}
.option-title {
font-weight: bold;
color: #656565;
}
.option-info {
font-size: 12px;
color: #919191;
margin-top: 6px;
font-weight: normal;
}
.option-info.valid {
color: #82bc00;
}
.option-info.toggle {
color: #f7a711;
}
.option-button {
width: 100%;
padding: 0;
line-height: 20px;
background: #82bc00;
color: #fff;
transition: 0.3s;
cursor: pointer;
outline: none;
border-radius: 4px;
box-sizing: border-box;
box-shadow: 0 1px 4px 0 rgba(0,0,0,0.3);
border: none;
}
.option-button:hover {
background: #82bc00;
color: #fff;
box-shadow: 0 3px 8px 0 rgba(0,0,0,0.4);
}
.option-checkbox {
background: #fff;
border: 1px dashed #f7a711;
color: #f7a711;
padding: 2px 4px;
transition: 0.3s;
box-sizing: border-box;
cursor: pointer;
}
.option-checkbox.active {
color: #fff;
background: #f7a711;
box-shadow: 0 1px 4px 0 rgba(0,0,0,0.3);
border-radius: 4px;
}
.selection-box {
position: relative;
}
.selection-box > select {
text-align: left;
width: 100%;
height: 20px;
padding: 0;
line-height: 20px;
background: transparent;
border: none;
border-bottom: 2px solid #656565;
color: #656565;
transition: 0.3s;
cursor: pointer;
outline: none;
box-sizing: border-box;
}
.selection-box > select > option {
background: white;
}
.selection-box > select:focus {
border-bottom: 2px solid #82bc00;
color: #82bc00;
box-shadow: 0 2px 6px 0 rgba(0,0,0,0.3);
}
.selection-box > label {
position: absolute;
cursor: pointer;
font-size: 12px;
color: #fff;
background: #656565;
padding: 0 4px;
right: 0;
top: 6px;
box-shadow: 0 1px 4px 0 rgba(0,0,0,0.3);
}
.input-box {
position: relative;
}
.input-box > input[type=text] {
width: 100%;
background: transparent;
border: none;
color: #656565;
border-bottom: 2px solid #656565;
outline: none;
box-sizing: border-box;
transition: 0.3s;
}
.input-box > input[type=text]:focus {
color: #82bc00;
border-bottom: 2px solid #82bc00;
}
.input-box > label {
cursor: pointer;
position: absolute;
right: 0;
top: 5px;
font-size: 12px;
color: #fff;
background: #656565;
padding: 0 4px;
box-shadow: 0 1px 4px 0 rgba(0,0,0,0.3);
}
