Comments (5)
You can listen chart events on main gantt-elastic component
https://github.com/neuronetio/gantt-elastic/wiki/Mouse-&-touch-events
<gantt-elastic
@chart-project-click="doSomething"
@chart-task-mouseover="showYourTolltip"
@chart-task-mousemove="moveYourTooltip"
@chart-task-mouseout="hideYourTooltip"
... >
from gantt-elastic.
Thank you @neuronetio checking it out, will close this if there's no further questions.
from gantt-elastic.
@neuronetio I'm new to TS myself so please bare with me.....so I am starting with the project click and it's not recognizing my function.
My main component is
<gantt-elastic :tasks="tasks" :options="options"
@chart-project-click="onTaskClick"
></gantt-elastic>
then in the same TS snippet, I have declared:
function onTaskClick(event:any, data:any) {
console.log("fsafaf");
}
However I'm getting the following error:
vue.runtime.esm.js?63f0:619 [Vue warn]: Property or method "onTaskClick" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
found in
---> <BaseIterator> at src/views/Chart.vue
<QPageContainer>
<QLayout>
<LayoutDefault> at src/layouts/Default.vue
<App> at src/App.vue
<Root>
warn @ vue.runtime.esm.js?63f0:619
warnNonPresent @ vue.runtime.esm.js?63f0:2015
get @ vue.runtime.esm.js?63f0:2070
render @ Chart.vue?fb8a:11
Vue._render @ vue.runtime.esm.js?63f0:3542
updateComponent @ vue.runtime.esm.js?63f0:4048
get @ vue.runtime.esm.js?63f0:4456
Watcher @ vue.runtime.esm.js?63f0:4445
mountComponent @ vue.runtime.esm.js?63f0:4055
Vue.$mount @ vue.runtime.esm.js?63f0:8391
init @ vue.runtime.esm.js?63f0:3118
createComponent @ vue.runtime.esm.js?63f0:5955
createElm @ vue.runtime.esm.js?63f0:5902
createChildren @ vue.runtime.esm.js?63f0:6030
createElm @ vue.runtime.esm.js?63f0:5931
patch @ vue.runtime.esm.js?63f0:6454
Vue._update @ vue.runtime.esm.js?63f0:3927
updateComponent @ vue.runtime.esm.js?63f0:4048
get @ vue.runtime.esm.js?63f0:4456
Watcher @ vue.runtime.esm.js?63f0:4445
mountComponent @ vue.runtime.esm.js?63f0:4055
Vue.$mount @ vue.runtime.esm.js?63f0:8391
init @ vue.runtime.esm.js?63f0:3118
createComponent @ vue.runtime.esm.js?63f0:5955
createElm @ vue.runtime.esm.js?63f0:5902
createChildren @ vue.runtime.esm.js?63f0:6030
createElm @ vue.runtime.esm.js?63f0:5931
patch @ vue.runtime.esm.js?63f0:6454
Vue._update @ vue.runtime.esm.js?63f0:3927
updateComponent @ vue.runtime.esm.js?63f0:4048
get @ vue.runtime.esm.js?63f0:4456
Watcher @ vue.runtime.esm.js?63f0:4445
mountComponent @ vue.runtime.esm.js?63f0:4055
Vue.$mount @ vue.runtime.esm.js?63f0:8391
init @ vue.runtime.esm.js?63f0:3118
createComponent @ vue.runtime.esm.js?63f0:5955
createElm @ vue.runtime.esm.js?63f0:5902
patch @ vue.runtime.esm.js?63f0:6454
Vue._update @ vue.runtime.esm.js?63f0:3927
updateComponent @ vue.runtime.esm.js?63f0:4048
get @ vue.runtime.esm.js?63f0:4456
Watcher @ vue.runtime.esm.js?63f0:4445
mountComponent @ vue.runtime.esm.js?63f0:4055
Vue.$mount @ vue.runtime.esm.js?63f0:8391
init @ vue.runtime.esm.js?63f0:3118
createComponent @ vue.runtime.esm.js?63f0:5955
createElm @ vue.runtime.esm.js?63f0:5902
createChildren @ vue.runtime.esm.js?63f0:6030
createElm @ vue.runtime.esm.js?63f0:5931
patch @ vue.runtime.esm.js?63f0:6454
Vue._update @ vue.runtime.esm.js?63f0:3927
updateComponent @ vue.runtime.esm.js?63f0:4048
get @ vue.runtime.esm.js?63f0:4456
Watcher @ vue.runtime.esm.js?63f0:4445
mountComponent @ vue.runtime.esm.js?63f0:4055
Vue.$mount @ vue.runtime.esm.js?63f0:8391
init @ vue.runtime.esm.js?63f0:3118
createComponent @ vue.runtime.esm.js?63f0:5955
createElm @ vue.runtime.esm.js?63f0:5902
patch @ vue.runtime.esm.js?63f0:6493
Vue._update @ vue.runtime.esm.js?63f0:3927
updateComponent @ vue.runtime.esm.js?63f0:4048
get @ vue.runtime.esm.js?63f0:4456
Watcher @ vue.runtime.esm.js?63f0:4445
mountComponent @ vue.runtime.esm.js?63f0:4055
Vue.$mount @ vue.runtime.esm.js?63f0:8391
(anonymous) @ main.ts?cd49:54
./src/main.ts @ app.js:6199
__webpack_require__ @ app.js:724
fn @ app.js:101
0 @ app.js:6367
__webpack_require__ @ app.js:724
(anonymous) @ app.js:791
(anonymous) @ app.js:794
vue.runtime.esm.js?63f0:619 [Vue warn]: Invalid handler for event "chart-project-click": got undefined
found in
---> <GanttElastic> at node_modules/gantt-elastic/src/GanttElastic.vue
<QPage>
<BaseIterator> at src/views/Chart.vue
<QPageContainer>
<QLayout>
<LayoutDefault> at src/layouts/Default.vue
<App> at src/App.vue
<Root>
from gantt-elastic.
I don't know ts either
from gantt-elastic.
In js you must add this function to component methods
from gantt-elastic.
Related Issues (20)
- Calendar vue by chinese
- How to use gantt elastic with angular HOT 1
- gantt chart is not showing HOT 1
- Export Gantt Chart to PDF HOT 1
- Showing full year HOT 1
- "Unexpected value NaN% parsing width attribute" warning when adding task to chart HOT 4
- gantt-schedule-timeline-calendar Transition Schedule HOT 1
- blocks browser when no tasks given (empty array) HOT 5
- will this still be maintained? HOT 2
- style for calendar-wrapper not applied (width) HOT 7
- Subtasks roll up to parent task HOT 1
- Dayjs is not defined HOT 3
- gantt-elastic vs gantt-schedule-timeline-calendar HOT 1
- more tasks for line HOT 5
- exclude holidays HOT 1
- Does it support react? HOT 3
- Load events dynamically HOT 4
- Start hour and end hour in the chart task. HOT 1
- IE support HOT 1
- Calendar vue by weeks/Months/Years HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from gantt-elastic.