adding a custom button to the kanban card template

[Gene Allen]

Hello, I'm trying to add a button that will call some javascript to the card template but can't get the syntax right.

here's what I have for the onclick

     onclick="onCollaborate(${TaskId})"

I need single quotes around the TaskId so Javascript will be happy but everything I've tried doesn't work.

for example, when I try 

     onclick="onCollaborate('${TaskId}')"

the render HTML is 

     onclick="onCollaborate(" 02b4a776-c3a1-4c11-8625-f38085572abe')'

Which isn't right.  

Can you tell me the magic syntax?

thanks,

Gene

[Meghana]

Hey, 

'Know more about this issue at http://www.dotnet.idn-kxchange.com/forums/recent_topics

[Gene Allen]

Did SyncFusion outsource it's support to this site?

[Hareesh Balasubramanian]

Hi Gene, 

Greetings from Syncfusion Support..! 

We have prepared a sample based on your shared query “I'm trying to add a button that will call some javascript to the card template but can't get the syntax right” using dataBound event of the Kanban component and same can be available in following  link. 

Sample: https://stackblitz.com/edit/kanban-card-template?file=index.js  

    dataBound: function() { 

    if (flag) { 

      var btnEle = document.querySelectorAll(".e-btn"); 

      for (var i = 0; i < btnEle.length; i++) { 

        btnEle[i].onclick = function(args) { 

          var path = args.path[7]; 

          var kanbanObj = document.querySelector(".e-kanban").ej2_instances[0]; 

          var data = kanbanObj.getCardDetails(path); 

          console.log("Card details : " + data.Title); 

        }; 

      } 

      flag = false; 

    } 

  }, 

Q1: “Did SyncFusion outsource it's support to this site?” 

 

No, we don’t support or outsource to that site. 

Kindly try the above solution and get back to us if you need any further assistance. 

Regards, 

Hareesh 

[Gene Allen]

Thank you Hareesh.  

Following your example, I was able to pick up the button click.  

Although I had to use args.path[5] instead of args.path[7] and I found that by trial and error.

What is the args.path for and why did you use 7 while I had to use 5?  

Is there a better way to pick the correct entry in the array?

thank you,

Gene

[Hareesh Balasubramanian]

Hi Gene, 

Thanks for the update. 

We have validated your shared query “What is the args.path for and why did you use 7 while I had to use 5?” and your requirement is to get the Card details based on the target element and for that you can make use of the getCardDetails public method of the Kanban component which will fetch the card details based on the Card ID rendered in that element and we should get the element (class = “e-card e-template e-draggable”) based on it. 

https://ej2.syncfusion.com/javascript/documentation/api/kanban/#getcarddetails  

Kindly try the above solution and get back to us if you need any further assistance. 

We will happy to assist you. 

Regards, 

Hareesh 

[Gene Allen]

Thanks Hareesh,

I'm not following.  

I know I have to use getCardDetails to get to the actual data.  

My question is HOW did you know to use args.path[7]?

And why did I have to use args.path[5]?

Where did the 7 or the 5 come from?

Gene

[Nevitha Ravi]

Hi Gene, 

Thanks for your update. 

To get the card details, you need to pass the current card element to the public method getCardDetails. In onClick event of button, you need to get the card element for which we have used args.path in which we have more elements. From which we need to get the card element, in our shared sample we got the card element in args.path[7]. Please refer the following image. 

 

Please get back to us if you need any further assistance. 

Regards, 

Nevitha 

[Gene Allen]

Sorry for being so dense, but is this how I'm supposed to do this?

            var path = '';

            for (var i = 0; i < args.path.length; i++) {

                if ((args.path[i].nodeName == 'DIV') && 

                    (args.path[i].className == 'e-card e-template e-draggable'))

                {

                    path = args.path[i];

                    break;

                }

            }

basically look for the div with the e-card class?

[Nevitha Ravi]

Hi Gene, 

Thanks for your update. 

Yes, the shared code is the standard way to find the card element. Please get back to us if you need any assistance. 

Regards, 

Nevitha