Comments (3)
You can click on an item, take the X position of the mouse and calculate what percentage of the item's width it is.
For example when you click at the end of an item you will get something like 100% and at the beginning you will get something like 0%.
Knowing what percentage of an item is clicked, you will know if progress was clicked - because progress is also a percentage.
You can even give yourself a margin of error like 10px or 10% - so you don't need to click perfectly on the pixel.
from gantt-schedule-timeline-calendar.
You can use slots to add click event on the item.
slots documentation
NOT TESTED EXAMPLE CODE:
function myItemSlot(vido, props) {
const { onChange } = vido;
function onClick() {
alert(props.item.id + " clicked!");
}
onChange((changedProps) => {
// if current element is reused to display other item data just update your data so when you click you will display right alert
props = changedProps;
});
// return render function
return (content) =>
vido.html`<div class="my-item-wrapper" @click=${onClick}>${content}</div>`;
}
const config = {
/* ... */
slots: {
'chart-timeline-items-row-item': { inner: [myItemSlot] },
},
/* ... */
};
from gantt-schedule-timeline-calendar.
Thank you!!. Your solution worked perfectly!.
from gantt-schedule-timeline-calendar.
Related Issues (20)
- The data I returned comes with a specific parameter, can the data border be dashed HOT 1
- Select a certain piece of data and click on split to see if it can be split into two parts HOT 2
- Split a progress bar into two progress bars HOT 1
- Updated chart items, how to update the view HOT 3
- 3.33.16 move out stacking items not update row height HOT 11
- Scroll multiplier doesn't work with float numbers and looks laggy HOT 5
- Unhandled typeerror out of nowhere reading 'dataIndex' HOT 2
- when the start date and end date is same the progress bar is not visible HOT 5
- Connection error HOT 1
- How to scroll to position vertically in coding?
- How to change the current column width by dragging the date cell like excel?
- Issue with Rendering Component After Upgrading GSTC to Latest Version HOT 2
- How to entegrate this plugin features to my .net core mvc html page ?
- How to disable selection for scrolling by grid drag on touch devices? HOT 4
- error is here HOT 1
- How to use gantt-schedule-timeline-calendar in a redux application? HOT 2
- Time bookmarks are not rendered correctly when mounting multiple components HOT 2
- Is there a weekly view? HOT 2
- Does it support multiple languages HOT 1
- Distribution size is too big HOT 6
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-schedule-timeline-calendar.