Skip to content

Instantly share code, notes, and snippets.


Block or report user

Report or block ShanikaNishadhi

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
View index.css
ganttChart.addEventListener('collapse', function (event) {
document.getElementById('log').innerHTML += '
' + event.type + 'Task # ' + ganttChart.getTaskIndex(event.detail.item);
ganttChart.addEventListener('expand', function (event) {
document.getElementById('log').innerHTML += '
' + event.type + 'Task # ' + ganttChart.getTaskIndex(event.detail.item);
View index.css
smart-gantt-chart {
height: auto;
smart-gantt-chart .product-team {
--smart-gantt-chart-task-color: rgb(94, 99, 181);
--smart-gantt-chart-task-label-color: white;
--smart-gantt-chart-task-label-color-selected: white;
View index.js
window.onload = function () {
const gantt = document.querySelector('smart-gantt-chart');
gantt.treeSize = '30%';
gantt.durationUnit = 'hour';
gantt.taskColumns = [
label: 'Tasks',
value: 'label',
size: '60%'
View index.html
<body class="viewport">
View index.html
<!DOCTYPE html>
<link rel="stylesheet" href="./../../source/styles/smart.default.css" type="text/css" />
<script type="text/javascript" src="../../source/smart.element.js"></script>
<script type="text/javascript" src="../../source/smart.button.js"></script>
<script type="text/javascript" src="../../source/smart.scrollbar.js"></script>
<script type="text/javascript" src="../../source/smart.splitter.js"></script>
<script type="text/javascript" src="../../source/"></script>
<script type="text/javascript" src="../../source/smart.tree.js"></script>
View folders.csv
Folders Description
/demos This is a demo folder containing the quick-start demo files. You can open them through a web server instead of the folder from the file system else it would break the Ajax data requests.
/source This folder contains the minified files of JavaScript used for the projects.
/source/modules/ This folder contains the Javascript modules used for creating components.
/source/styles This folder contains the minified CSS files and themes used for styling your project.
/scripts This contains the javascript files used in the demos.
/images This contains image files used in the demos.
readme.htm This provides the Smart HTML Elements release notes
View command.txt
npm i @smarthtmlelements/smart-core // for core version source file.
npm i @smarthtmlelements/smart-elements // Commercial version source file
npm i @smarthtmlelements/smart-custom-element // Library for Custom Elements Development
View App.tsx
public render() {
return (
<JqxGrid onCellbeginedit={this.cellBeginEditEvent} onCellendedit={this.cellEndEditEvent}
// @ts-ignore
width={getWidth('grid')} source={this.state.source} columns={this.state.columns}
editable={true} enabletooltips={true} selectionmode={'multiplecellsadvanced'} />
<div style={{ fontSize: '12px', fontFamily: 'Verdana', marginTop: '30px' }}>
<div ref={this.beginEdit} />
<div ref={this.endEdit} style={{ marginTop: '10px' }} />
View App.tsx
this.cellBeginEditEvent = this.cellBeginEditEvent.bind(this);
this.cellEndEditEvent = this.cellEndEditEvent.bind(this);
View App.tsx
private onPageChanged(event: any): void {
this.eventsLog.current!.style.display = 'block';
const loggedElements = document.getElementsByClassName('logged');
if (loggedElements.length >= 5) {
const args = event.args;
const eventData = 'pagechanged <div>Page:' + args.pagenum + ', Page Size: ' + args.pagesize + '</div>';
this.myPanel.current!.prepend('<div class="logged" style="margin-top: 5px;">' + eventData + '</div>');
// get page information.
You can’t perform that action at this time.