Events in jqxKaban not working when id is setted on addItem method

[walterrabeloParticipant]

Hello guys,

All populated items loaded with jqxKanban with id on the data object will work fine with the events of the jqxKanban.
But in some cases you need to put items dynamically inside the Kanban, for that you use the addItem method.

When you insert id information on the data object, the kanban item will not respond to the previous registered events. Otherwise, if the only id information is not set, the kanban item will work fine.

If the id information is an important piece in your software this will become a problem. You may set that information in some other places of the kanban item element.

Example that don´t work:

 $(document).ready(function () {            
   var fields = [
             { name: "id", type: "string" },
             { name: "status", map: "state", type: "string" },
             { name: "text", map: "label", type: "string" },
             { name: "tags", type: "string" },
             { name: "color", map: "hex", type: "string" },
             { name: "resourceId", type: "number" }
    ];

    var source =
     {
         localData: [
                  { id: "1161", state: "new", label: "Combine Orders", tags: "orders, combine", hex: "#5dc3f0", resourceId: 3 },
                  { id: "1645", state: "work", label: "Change Billing Address", tags: "billing", hex: "#f19b60", resourceId: 1 },
                  { id: "9213", state: "new", label: "One item added to the cart", tags: "cart", hex: "#5dc3f0", resourceId: 3 },
                  { id: "6546", state: "done", label: "Edit Item Price", tags: "price, edit", hex: "#5dc3f0", resourceId: 4 },
                  { id: "9034", state: "new", label: "Login 404 issue", tags: "issue, login", hex: "#6bbd49" }
         ],
         dataType: "array",
         dataFields: fields
     };

    var dataAdapter = new $.jqx.dataAdapter(source);

    var resourcesAdapterFunc = function () {
        var resourcesSource =
        {
            localData: [
                  { id: 0, name: "No name", image: "../../jqwidgets/styles/images/common.png", common: true },
                  { id: 1, name: "Andrew Fuller", image: "../../images/andrew.png" },
                  { id: 2, name: "Janet Leverling", image: "../../images/janet.png" },
                  { id: 3, name: "Steven Buchanan", image: "../../images/steven.png" },
                  { id: 4, name: "Nancy Davolio", image: "../../images/nancy.png" },
                  { id: 5, name: "Michael Buchanan", image: "../../images/Michael.png" },
                  { id: 6, name: "Margaret Buchanan", image: "../../images/margaret.png" },
                  { id: 7, name: "Robert Buchanan", image: "../../images/robert.png" },
                  { id: 8, name: "Laura Buchanan", image: "../../images/Laura.png" },
                  { id: 9, name: "Laura Buchanan", image: "../../images/Anne.png" }
            ],
            dataType: "array",
            dataFields: [
                 { name: "id", type: "number" },
                 { name: "name", type: "string" },
                 { name: "image", type: "string" },
                 { name: "common", type: "boolean" }
            ]
        };

        var resourcesDataAdapter = new $.jqx.dataAdapter(resourcesSource);
        return resourcesDataAdapter;
    }

    var getIconClassName = function () {
        return "jqx-icon-plus-alt";
    }

    $('#kanban1').jqxKanban({
        template: "<div class='jqx-kanban-item' id=''>"
                + "<div class='jqx-kanban-item-color-status'></div>"
                + "<div style='display: none;' class='jqx-kanban-item-avatar'></div>"
                + "<div class='jqx-icon jqx-icon-close-white jqx-kanban-item-template-content jqx-kanban-template-icon'></div>"
                + "<div class='jqx-kanban-item-text'></div>"
                + "<div style='display: none;' class='jqx-kanban-item-footer'></div>"
        + "</div>",
        resources: resourcesAdapterFunc(),
        source: dataAdapter,
        itemRenderer: function(element, item, resource)
        {
            $(element).find(".jqx-kanban-item-color-status").html("<span style='line-height: 23px; margin-left: 5px; color:white;'>" + resource.name + "</span>");
        },
        columns: [
            { text: "Backlog", iconClassName: getIconClassName(), dataField: "new" },
            { text: "In Progress", iconClassName: getIconClassName(), dataField: "work" },
            { text: "Done", iconClassName: getIconClassName(), dataField: "done" }
        ]
    });

    $('#kanban1').on('itemMoved', function (event){
        console.log('Only populated items will move! Added ones no!');
    });
    
    $('#kanban1').on("itemAttrClicked", function (event) {
        var args = event.args;
        if (args.attribute == "template") {
            $('#kanban1').jqxKanban('removeItem', args.item.id);
        }
    });
    var itemIndex = 0;
    $('#kanban1').on('columnAttrClicked', function (event) {
        var args = event.args;
        if (args.attribute == "button") {
            args.cancelToggle = true;
            if (!args.column.collapsed) {
                var colors = ['#f19b60', '#5dc3f0', '#6bbd49', '#732794']
                var e= $('#kanban1').jqxKanban('addItem', { id: "JustAnInnocentId", status: args.column.dataField, text: "<input placeholder='(No Title)' style='width: 96%; margin-top:2px; border-radius: 3px; border-color: #ddd; line-height:20px; height: 20px;' class='jqx-input' id='newItem" + itemIndex + "' value=''/>", tags: "new task", color: colors[Math.floor(Math.random() * 4)], resourceId: Math.floor(Math.random() * 4) });
                debugger;
                console.log(e);
                var input =  $("#newItem" + itemIndex);
                input.mousedown(function (event) {
                    event.stopPropagation();
                });
                input.mouseup(function (event) {
                    event.stopPropagation();
                });

                input.keydown(function (event) {
                    if (event.keyCode == 13) {
                        $("<span>" + $(event.target).val() + "</span>").insertBefore($(event.target));
                        $(event.target).remove();
                    }
                });
                input.focus();
                itemIndex++;
            }
        }
    });
});

Example that works:

 $(document).ready(function () {            
   var fields = [
             { name: "id", type: "string" },
             { name: "status", map: "state", type: "string" },
             { name: "text", map: "label", type: "string" },
             { name: "tags", type: "string" },
             { name: "color", map: "hex", type: "string" },
             { name: "resourceId", type: "number" }
    ];

    var source =
     {
         localData: [
                  { id: "1161", state: "new", label: "Combine Orders", tags: "orders, combine", hex: "#5dc3f0", resourceId: 3 },
                  { id: "1645", state: "work", label: "Change Billing Address", tags: "billing", hex: "#f19b60", resourceId: 1 },
                  { id: "9213", state: "new", label: "One item added to the cart", tags: "cart", hex: "#5dc3f0", resourceId: 3 },
                  { id: "6546", state: "done", label: "Edit Item Price", tags: "price, edit", hex: "#5dc3f0", resourceId: 4 },
                  { id: "9034", state: "new", label: "Login 404 issue", tags: "issue, login", hex: "#6bbd49" }
         ],
         dataType: "array",
         dataFields: fields
     };

    var dataAdapter = new $.jqx.dataAdapter(source);

    var resourcesAdapterFunc = function () {
        var resourcesSource =
        {
            localData: [
                  { id: 0, name: "No name", image: "../../jqwidgets/styles/images/common.png", common: true },
                  { id: 1, name: "Andrew Fuller", image: "../../images/andrew.png" },
                  { id: 2, name: "Janet Leverling", image: "../../images/janet.png" },
                  { id: 3, name: "Steven Buchanan", image: "../../images/steven.png" },
                  { id: 4, name: "Nancy Davolio", image: "../../images/nancy.png" },
                  { id: 5, name: "Michael Buchanan", image: "../../images/Michael.png" },
                  { id: 6, name: "Margaret Buchanan", image: "../../images/margaret.png" },
                  { id: 7, name: "Robert Buchanan", image: "../../images/robert.png" },
                  { id: 8, name: "Laura Buchanan", image: "../../images/Laura.png" },
                  { id: 9, name: "Laura Buchanan", image: "../../images/Anne.png" }
            ],
            dataType: "array",
            dataFields: [
                 { name: "id", type: "number" },
                 { name: "name", type: "string" },
                 { name: "image", type: "string" },
                 { name: "common", type: "boolean" }
            ]
        };

        var resourcesDataAdapter = new $.jqx.dataAdapter(resourcesSource);
        return resourcesDataAdapter;
    }

    var getIconClassName = function () {
        return "jqx-icon-plus-alt";
    }

    $('#kanban1').jqxKanban({
        template: "<div class='jqx-kanban-item' id=''>"
                + "<div class='jqx-kanban-item-color-status'></div>"
                + "<div style='display: none;' class='jqx-kanban-item-avatar'></div>"
                + "<div class='jqx-icon jqx-icon-close-white jqx-kanban-item-template-content jqx-kanban-template-icon'></div>"
                + "<div class='jqx-kanban-item-text'></div>"
                + "<div style='display: none;' class='jqx-kanban-item-footer'></div>"
        + "</div>",
        resources: resourcesAdapterFunc(),
        source: dataAdapter,
        itemRenderer: function(element, item, resource)
        {
            $(element).find(".jqx-kanban-item-color-status").html("<span style='line-height: 23px; margin-left: 5px; color:white;'>" + resource.name + "</span>");
        },
        columns: [
            { text: "Backlog", iconClassName: getIconClassName(), dataField: "new" },
            { text: "In Progress", iconClassName: getIconClassName(), dataField: "work" },
            { text: "Done", iconClassName: getIconClassName(), dataField: "done" }
        ]
    });

    $('#kanban1').on('itemMoved', function (event){
        console.log('All will move in this configuration.');
    });
    
    $('#kanban1').on("itemAttrClicked", function (event) {
        var args = event.args;
        if (args.attribute == "template") {
            $('#kanban1').jqxKanban('removeItem', args.item.id);
        }
    });
    var itemIndex = 0;
    $('#kanban1').on('columnAttrClicked', function (event) {
        var args = event.args;
        if (args.attribute == "button") {
            args.cancelToggle = true;
            if (!args.column.collapsed) {
                var colors = ['#f19b60', '#5dc3f0', '#6bbd49', '#732794']
                var e= $('#kanban1').jqxKanban('addItem', { status: args.column.dataField, text: "<input placeholder='(No Title)' style='width: 96%; margin-top:2px; border-radius: 3px; border-color: #ddd; line-height:20px; height: 20px;' class='jqx-input' id='newItem" + itemIndex + "' value=''/>", tags: "new task", color: colors[Math.floor(Math.random() * 4)], resourceId: Math.floor(Math.random() * 4) });
                debugger;
                console.log(e);
                var input =  $("#newItem" + itemIndex);
                input.mousedown(function (event) {
                    event.stopPropagation();
                });
                input.mouseup(function (event) {
                    event.stopPropagation();
                });

                input.keydown(function (event) {
                    if (event.keyCode == 13) {
                        $("<span>" + $(event.target).val() + "</span>").insertBefore($(event.target));
                        $(event.target).remove();
                    }
                });
                input.focus();
                itemIndex++;
            }
        }
    });
});

[MartinParticipant]

Hello walterrabelo,

Thank you for your feedback!
This seems like an issue that needs to be fixed.
I will create a work item for this case.

Best Regards,
Martin

jQWidgets Team
http://www.jqwidgets.com/

[chrisaboParticipant]

Hi,

I this already solved? I also want to use my own ID’s when adding an item.
I changed the following in the code:
jqxkanban.js line 835
//newItem.data(“kanban-item-id”, newItemIndex);
newItem.data(“kanban-item-id”, id); //Changed by Master
But I would prefer to have my id in the additem as:
$(‘#kanban’).jqxKanban(‘addItem’, { id: myOwnId, ….

Best regards,
Chris Andries

[MartinParticipant]

Hello Chris Andries,

I have checked this case.
Unfortunately, the issue is still valid.

Best Regards,
Martin

jQWidgets Team
http://www.jqwidgets.com/

[hidertanureParticipant]

Hi,

I get the same problem.
I’am evaluating the jqxKanban to use it in my project.

For test purpose i resolved this issue edditing the jqxkanban.js file on my node_modules folder.

node_modules/jqwidgets-scripts/jqwidgets/jqxkanban.js
replacing the line bellow in the method addItem:
l.data("kanban-item-id", e);
to
l.data("kanban-item-id", b);

This works fine only with your own id.

They have some issue in the other part of code that set the “new id”:
var e = (n._source != null) ? n._source.length : 0;
You can’t get just the lenght of the array for a new id.
You will get a classic problem when add and remove itens…

I’m waiting the fix to, maybe, use it in my project…

Thx.

[MartinParticipant]

Hello hidertanure,

You can check our Release History page regularly to see the new fixes.

As a workaround, I would suggest you to use a ‘class’ instead of ‘id’ to avoid this issue:

$('#kanban').jqxKanban('addItem', { className: 'my-class', status: args.column.dataField, text: "<input placeholder='(No Title)' style='width: 96%; margin-top:2px; border-radius: 3px; border-color: #ddd; line-height:20px; height: 20px;' class='jqx-input' id='newItem" + itemIndex + "' value=''/>", tags: "new task" });

Best Regards,
Martin

jQWidgets Team
http://www.jqwidgets.com/

[Peter StoevKeymaster]

The fix will come with jQWidgets 8.1.3

[chrisaboParticipant]

Hi,

Today I downloaded the 8.2.3 version, and it seems this problem isn’t solved?
When I add an item with id, it still doesn’t trigger itemMoved event?

Best regards,
Chris Andries

[yahyaParticipant]

Hi,
After a lot of tests, i found that the only version that both functions additem and onItemmoved works together is the 8.1.2
Best reagards
yahya Ghardallou

[jpeszlenyParticipant]

This issue is still not fixed in 2023. Fix it please!

[jpeszlenyParticipant]

The API for removing items doesn’t work properly. Check out this fiddle. When removeItem is called, it doesn’t remove the item from the display.

[svetoslav_borislavovParticipant]

Hi,

Thank you for reporting that!

Best regards,
Svetoslav Borislavov

jQWidgets Team
https://www.jqwidgets.com/

[Author]

Posts