Feature Request: destroy api

[marcosrocha85]

Can you explain your need a little bit?

[liu-minjie]

when datasource change, I want to destroy the jkanban then recreate it. or in a SPA app, when route change, the component should be destroyed.

[tiagoperesduarte]

Try something like, check if the element is already created, if it is, you don't recreate it, just remove the boards and put it back.

kanbanElement.removeBoard(...) kanbanElement.addBoards(...)

[marcosrocha85]

Try something like, check if the element is already created, if it is, you don't recreate it, just remove the boards and put it back.

kanbanElement.removeBoard(...) kanbanElement.addBoards(...)

I agree, removing and recreate entire kanban is a bad thing. You can remove boards or items to achieve what you want.

[liu-minjie]

so the "recreate" scene can be resolved by removeBoard and addBoards. suppose that the jkanban in a react component. when the component invoke componentWillUnmount, what else should i do about the jkanban instance?

[marcosrocha85]

If I'm right, you need that because jKanban does not "cleans" DOM elements when you "recreate" page in React, so I'm thinking you need to destroy jKanban instance in order to load some other content into a main div. That's a "workaround" to make jKanban work nicely with reactive languages. If that's the case, I think it is good to have a destroy api.

[liu-minjie]

yes, I want to clean all resource created by jKanban.

[tiagosimoesdev]

Anyone found any solution to destroy it so we can make it sort of "reactive" ?

[marcosrocha85]

@tiagosimoesdev I'm a little busy these days. I started a wrapper in Vue.js but as I have no time, I stopped a little bit the development.

[diegofcap]

You can remove the container div a create again.

<div id="kt_container">
</div>

<script>
    $(document).ready(function () {
        LoadData();
    });

    function LoadData()
    {
        $("#kt_container").html("<div id='kt_kanban_4'></div>");

        $.ajax({
            cache: false,
            type: "GET",
            url: "yoururl",
            data: postData,
            success: function (data, textStatus, jqXHR) {
                var kanban = new jKanban({
                    element: '#kt_kanban_4',
                    responsivePercentage: true,
                    dragItems        : false,
                    dragBoards       : false,
                    boards: data
                });
            }
        });
    }
</script>```

[marcosrocha85]

You can remove the container div a create again.

<div id="kt_container">
</div>

<script>
    $(document).ready(function () {
        LoadData();
    });

    function LoadData()
    {
        $("#kt_container").html("<div id='kt_kanban_4'></div>");

        $.ajax({
            cache: false,
            type: "GET",
            url: "yoururl",
            data: postData,
            success: function (data, textStatus, jqXHR) {
                var kanban = new jKanban({
                    element: '#kt_kanban_4',
                    responsivePercentage: true,
                    dragItems        : false,
                    dragBoards       : false,
                    boards: data
                });
            }
        });
    }
</script>```

That's how I implemented a board of mine. Not "destroying" the entire board, but managing some "automatic" moving features. Like some user moved item 34 and all other users see the item were moved.

[Brecht272727]

IF we use this code we have a flashing effect on the reloaded div. It would be better to have a destroy API or reinit API without reloading this div. Now it is the same as doing a location.reload() function...

It can be used for editing or deleting boards or items and dataset is coming from database on ajax success.