IBM / gantt-chart

IBM Gantt Chart Component, integrable in Vanilla, jQuery, or React Framework.
https://ibm.github.io/gantt-chart/packages/ibm-gantt-chart-docs/storybook
Apache License 2.0
215 stars 52 forks source link

Clickable entry with link #25

Closed macinos closed 3 years ago

macinos commented 3 years ago

Hello, the plugin as really nice, but there is one important feature which I cannot set:

We need to make the entries clickable, so when we click an entry it opens a link with a parameter specific to the entry. I want to add the parameter somewhere in the HTML attribute of the entry so a click listener can pick it up from there.

I was unable to do this so far, is there any solution I am missing?

image

Best Regards Martin Nekula

TomasKadlcek commented 3 years ago

Hi, Found a possible workaround:

Each ID for the entry in table consists from a prefix ("timeTableRow_" in my case) and a combination of resources id (or name) and activities id (or name).

While retrieving Data make sure both the ids are unique, beacause each row has a id consisting of prefix and resource id and the activity itself consists of the rowID plus activity ID. From the .AJAX function call a method which can generate desired IDs according to the structure of your resource and activity data. Place the function to the end of

Here is a simple illustration how it would work:

/**
 * Gets info from ajax data and uses given info to set up onClick method.
 */
function generateOfferVersionInfoList(data) {
    let offersArray = new Array(data.length);
    for (let i = 0; i < data.length; i++) {
        let offerVersionId = data[i].offers[0].id;
        let offerVersionHtmlId = "#timeTableRow_" + data[i].id + offerVersionId;

        offersArray[i] = {
            "offerVersionHtmlId": offerVersionHtmlId,
            "url" : getOfferVersionDetailURL(offerVersionId)
        };
    }
// At the end call setOnClick method to add functionality to activities
    setOnClick(offersArray);
}
/**
 * Creates details URL for given offer version and its root type ID.
 */
function getOfferVersionDetailURL(offerVersionID) {
    let offerPath;
// Any logic to generate desired URL path

    return offerPath;
}
/**
 * Sets all table id as onClick
 * @param offers
 */
function setOnClick(offers) {

// make sure you use it like I do with JQuery on body and after that state desired ID

    for (let i = 0; i < offers.length; i++) {
        $('body').on('click', offers[i].offerVersionHtmlId, function(){
        window.open(offers[i].url, "_blank");
        })
    }
}

Hope this helps other people with the same issue :)

Kind Regards, Tomas Kadlcek

macinos commented 3 years ago

Nice, thanks for the solution! :)