Checkbox is not working on board

[zhagnyu]

I think this is good kanban plugin, but there is an issue.
I added checkbox on each card of boards.

I can check/uncheck these checkbox but checkbox status is not changed.
It is always showing unchecked.

please help me. thank you

[oCyex]

I have the same issue

[marcosrocha85]

Hello and thank you for using jKanban. Actually, when you change "checkbox DOM" aren't changing internal jKanban "DOM". So without some code you won't achieve that. Please take a look at this fiddle and let me know if you have any other question.

[oCyex]

I see
Thank you for your answer

[zhagnyu]

Thank you for your answer. But it is not easy to use because I have too many checkbox in kanban.
Anyway it will be helped for me.

[oCyex]

I did a fake checkbox with css (just a button element); When the user click on it, that toggle the data-id (true or false) and toggle a css class for the apparence.
And since after I parse the DOM, I store also this data-id.
It works for my use

[zhagnyu]

Hello and thank you for using jKanban. Actually, when you change "checkbox DOM" aren't changing internal jKanban "DOM". So without some code you won't achieve that. Please take a look at this fiddle and let me know if you have any other question.

[zhagnyu]

link is not working.
You added a link in this fiddle second feature, but link is not working. I need your help again

[marcosrocha85]

link is not working. You added a link in this fiddle second feature, but link is not working. I need your help again

What do you mean for "not working"? What is "second feature" for you?
jKanban is a Vanilla Javascript Kanban. Any feature must be implemented or pull requested. You need to be more clear.

[WriterStat]

Hi @zhagnyu - This note is a few months old. But zhagnyu is right, click event propagation has been turned off inside a jkanban item.

You can test this quickly when the right-click browser context menu won't show up. Right-click a jkanban item and you'll see what I mean.

Instead of hacking up the code with adding new code to re-implement the browser click event for each element inside an item, you may instead just simply need to turn back on event propagation for the click event.

Here's the answer:

Add this to the bottom of your jKanban object instantiation code:

propagationHandlers: ["click"],
// the event callback specified in the above will not be canceled ... values: "click", "context"

ex:

var kanban = new jKanban({
// stuff
// more stuff ,
propagationHandlers: ["click"]
});

Hope this helps, you can find/see the info on the jKanban Usage area on main page. Not sure if this will cause something else. =) Or why it's turned off? But this will turn it back on.

[WriterStat]

@zhagnyu This will also fix your problem with the link not working, the click event propagation will then work on the link allowing you to click it. Hope helps.

@marcosrocha85 he means the second kanban item in the fiddle you provided. Click the link in the second item you provided to see... no click event propagation, so no click event is recognized on the link you put in there. Also, the button in the fiddle you suggested doesn't work either without a click event.

Hope this helps someone else. Best, -C

P.s. @zhagnyu was really clear in his report, there was only 1 link in your fiddle, and I understood them fine. Sometimes the help is in the current existing code. Again hope helps.

[marcosrocha85]

@zhagnyu This will also fix your problem with the link not working, the click event propagation will then work on the link allowing you to click it. Hope helps.

@marcosrocha85 he means the second kanban item in the fiddle you provided. Click the link in the second item you provided to see... no click event propagation, so no click event is recognized on the link you put in there. Also, the button in the fiddle you suggested doesn't work either without a click event.

Hope this helps someone else. Best, -C

P.s. @zhagnyu was really clear in his report, there was only 1 link in your fiddle, and I understood them fine. Sometimes the help is in the current existing code. Again hope helps.

Oh now I see. Anyways, dragula "eats" some events and you must be creative in order to achieve some features. It's not a jKanban issue itself.

[WriterStat]

Actually, it really is a jKanban feature/issue that you were a part of, in this instance, and it's not dragula.

Hope this helps you,

It's a leftover from an earlier pull request I believe, that you were a part of, that turns off browser event propagation in jKanban in certain places.

Here's the pull request where you discussed it:

... #141

jKanban in its code turns on/off the browser event propagation for some things, from the jKanban code, for some things like so that a person can instead have their own "context" menus instead of the browser context menu in some places etc...

In the above pull request discussion, the author of the pull asked that the browser propagation events be respected first. But you stated that, that would be a mistake.

I would also suggest the browser propagation events be respected first because that's the developer expectation. Then add something in the code to turn it off if a developer wants to, or leave it to the developer to turn it off.

It shouldn't default to browser propagation events turned off, because we expect click events to work in a browser as do users. As did you when you created the fiddle.

To have it default to browser events off and to be turned back on, when a developer doesn't know they are turned off, is truly confusing...against expectation for a web app.

Hope this helps. Figured I should respond to this as it might be something where a better fix here can be created in the lib.

Best, -C

[WriterStat]

The other reason jKanban might turn off browser click events is so that clicking on items inside a board to drag them allows only just dragging/no element interaction.

Basically limiting the user interaction of other item elements inside an item on a board to only allow either dragging or just the internal jKanBan full item coded click event function to work.

Note: it should always be up to a developer using the lib to turn off propagation if this was their wish in that respect. So they'd know it was turned off. Hope helps.

As a side note: The above drag/click entire item to drag gets in the way in jKanban mobile/tablet/touch screen drag/scroll applications.

To get that to work reliably you have to instead use a drag handle and some css anyways because otherwise both the item and the entire page drag/scrolls separately and entirely differently, causing item drag issues.

So maybe best to leave the turning off of browser event propagation to the developer,,, in the lib notes.

[marcosrocha85]

If I remember right, I wasn't able to capture event click with jKanban. I can't remember the reason. Do you mind how to achieve that?

[WriterStat]

Hi, If you quick read up in this thread I give the answer and reason to zhagnyu. Or you can read about the issue in the pull request you approved with/for ngmy's pull request. ... #141

But here's a quick recap from above:

You first need to turn Browser event propagation back on in jKanban.js.

So the events can flow through and reach the browser dom elements inside a board's items to be captured.

After that, you can easily capture:

Add this code to the very bottom of your jKanban plugin instantiation js code to turn back on browser left-click events in the dom for elements inside a board item:

propagationHandlers: ["click"]
// the event callback specified in the above will not be canceled by jKanban.js ... values: "click", "context"

example:

var kanban = new jKanban({
// stuff
// more stuff ,
propagationHandlers: ["click"]
});

Then just use js to capture click event either by using the element by getting its class or id, or using jQuery, or even js event delegation.

ex:
document.querySelector(".box").addEventListener("click", function(){ alert("Hello World!"); });
document.getElementById("box").addEventListener("click", function(){ alert("Hello World!"); });

Or you can use other js ways.
Hope this helps, let me know if I misunderstood the question.

Best, -C

[canerksk]

This problem continues,

[WriterStat]

Hi! Jkanban turns off/reroutes the click and the context menu click inside its code by default for inside an item, for any of the things inside an item.

Have you tried:

var kanban = new jKanban({ propagationHandlers: ["click"] });

Then just use js to capture click event for stuff inside an item or change to capture contest menu click. Works on my test server.

If you could show your code will try and help. -C
Note: I'm not the author or the care taker, but willing to help some.

[canerksk]

Hi! Jkanban turns off/reroutes the click and the context menu click inside its code by default for inside an item, for any of the things inside an item.

Have you tried:

`var kanban = new jKanban({

propagationHandlers: ["click"]

});`

Then just use js to capture click event for stuff inside an item or change to capture contest menu click. Works on my test server.

If you could show your code will try and help. -C

Note: I'm not the author or the care taker, but willing to help some.

Yes, I tried, but this is in the latest version of jlanban, in the latest version it needs dragula externally and when we import the latest version of dragula, other problems seem to arise.

[WriterStat]

canerksk wrote above: Yes, I tried, but this is in the latest version of jlanban, in the latest version it needs dragula externally and when we import the latest version of dragula, other problems seem to arise.

Ok here's what I'm hearing, let me know here if I got this wrong.

Please note: I'm not the author here. But will try and help.

But it sounds like you are having other problems than this one. Sounds like you are having problems when importing the latest version of Dragula., as you mentioned.

You'll want to open separate issue notes for something like: 'when we import the latest version of dragula this happens, and other problems seem to arise.' And possibly different issue notes related to the import of the latest version of dragula. Which this specific issue is not a part of. So that shouldn't be addressed here.

There you will want to list your code and the errors you are experiencing and ask about approved versions etc...

Without an issue opened, or any code or version information given, or any problems you are facing listed or an open issue of the problems listed after importing new external Dragula, it's hard to help.

But will try to help if you want me to, when you open some issues, state the problems encountered, list the versions you are using etc...

Maybe I've got this wrong, but you haven't given me anything to work with quite yet/no info. And this appears to be a separate issue.

Best, -C

Note: This issue note here is very specific to only the Jkanban code and is only in the Jkanban code. And isn't a part of the dragula code or in the dragula code at all/in any way and is not associated to dragula from what I can tell.

[WriterStat]

To the author or maintainer, I suggest you close this specific issue because it's been addressed in your library code in the original specific case that was requested. Which will then allow others to open their own specific issues on other things as they go along.

[marcosrocha85]

@riktar, can you close this issue, please?