jQWidgets Forums

jQuery UI Widgets Forums Layouts Kanban Kanban: Source JSON

This topic contains 6 replies, has 3 voices, and was last updated by  lourivalos83 8 years, 10 months ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
  • Kanban: Source JSON #83750

    ksaidi
    Participant

    Hi everybody,

    The source code of the kanban example is a little to complicated for me.
    I wanna know how can we populate a kanban with a json format.
    For example :
    {“identity”:”Steven Buchanan”,”text”:”One item added to the cart”,”color”:”#D8D8D8″}

    Thx for your help.

    KS

    Kanban: Source JSON #83756

    ivailo
    Participant

    Hi ksaidi,

    To populate jqxKanban from json you have to use a dataAdapter.
    In this dataAdapter you have to map kanban’s dataFields to the existing ones in your data source.
    In this demo is demonstrated populating from an array, but the approach is the same.

    Here is the dataAdapter’s demo with json binding. It also can be helpful for you.

    Best Regards,
    Ivailo Ivanov

    jQWidgets Team
    http://www.jqwidgets.com

    Kanban: Source JSON #83758

    ksaidi
    Participant

    Hi Ivailo,

    Thx for your reactivity.
    I’m gonna try right now…

    KS

    Kanban: Source JSON #83770

    ksaidi
    Participant

    Yep,

    Hard to make it work !!!!
    Need help…
    here is my code :

    var fields = [
                     { name: "lastname",     type: "string" },
                     { name: "firstname",  type: "string" },
                     { name: "role", map: "label", type: "string" },
                     { name: "customer",  type: "string" },
                     { name: "color",   type: "string" }
            ];
    
            var source =
             {
                 localData: [{"lastname":"AAAAAA","firstname":"BBBBB","label":"NOT SPECIFIED","customer":"CCCCC","color":"#D8D8D8"}],
                 dataType: "json",
                 dataFields: fields
             };
    
    var dataAdapter = new $.jqx.dataAdapter(source, {
                    loadComplete: function (records) {
                        // get data records.
                        var records = dataAdapter.records;
                        // get the length of the records array.
                        var length = records.length;
                        // loop through the records and display them in a table.
                        var html = "";
                        for (var i = 0; i < 20; i++) {
                            var record = records[i];
                            html += "<tr>";
                            html += "<td>" + record.lastname + "</td>";
                            html += "<td>" + record.firstname+ "</td>";
                            html += "<td>" + record.role+ "</td>";
                            html += "<td>" + record.customer+ "</td>";
                            html += "<td>" + record.color+ "</td>";
                            html += "</tr>";
                        }
                        console.log(html);
                        
                    },
                    loadError: function (jqXHR, status, error) {
                    },
                    beforeLoadComplete: function (records) {
    
                    }
                });
                // perform data binding.
                dataAdapter.dataBind();

    An error on console log : record undefined.
    I don’t know what is wrong…

    Kanban: Source JSON #83886

    ivailo
    Participant

    Hi ksaidi,

    Please, try this demo.
    Here the kanban widget is populated from your source.

    Best Regards,
    Ivailo Ivanov

    jQWidgets Team
    http://www.jqwidgets.com

    Kanban: Source JSON #83988

    ksaidi
    Participant

    Thx ivailo !!!
    it works for me…

    Kanban: Source JSON #85654

    lourivalos83
    Participant

    Hi Everyone,

    I populated the Kanban with JSON, but my problem is to update the itens with DataAdapter, I buld a sample here:
    https://www.jseditor.io/?key=kanban-databind

    My problem is how to update itens using dataAdapter.dataBind();, all my itens was just duplicated everytime I click on “Refresh data 1” link.

    What is the correc approach to refresh existing itens on Kanban? Nowdays I’m calling ‘destroy’, and rebuilding the Kanban from scratch.

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

You must be logged in to reply to this topic.