jQuery UI Widgets Forums Layouts Kanban Events in jqxKaban not working when id is setted on addItem method

This topic contains 6 replies, has 5 voices, and was last updated by  Peter Stoev 2 months, 3 weeks ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author

  • walterrabelo
    Participant

    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++;
                }
            }
        });
    });
    
    • This topic was modified 1 year, 3 months ago by  walterrabelo.

    Martin
    Participant

    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/


    chrisabo
    Participant

    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


    Martin
    Participant

    Hello Chris Andries,

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

    Best Regards,
    Martin

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


    hidertanure
    Participant

    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.


    Martin
    Participant

    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 Stoev
    Keymaster

    The fix will come with jQWidgets 8.1.3

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.