jQuery UI Widgets › Forums › Layouts › Kanban › Kanban and external CSV

Tagged: , , , ,

This topic contains 5 replies, has 2 voices, and was last updated by  Hristo 7 years, 4 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Kanban and external CSV Posts
  • May 26, 2017 at 1:25 pm Kanban and external CSV #93880

    paulcobben
    Participant

    Hi,

    Is it possible to use instead of local data a csv file.
    We’ve tried to change the default sample (on http://jqwidgets.com/jquery-widgets-demo/demos/jqxkanban/index.htm#demos/jqxkanban/kanban-fluid-size.htm) with an external csv file.
    We did not get a working sample.

    Webpage
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title id='Description'>Kanban Fluid Size.</title>
    <meta name="description" content="jQuery Kanban with Responsive Layout" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxsortable.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxkanban.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="scripts/demos.js"></script>
    <style>
    html, body {
    padding: 0; margin: 0; width:100%; height: 100%; overflow: hidden;
    }
    </style>
    <script type="text/javascript">
    $(document).ready(function () {
    var fields = [
    { name: "id", type: "string" },
    { name: "state", type: "string" },
    { name: "label", type: "string" },
    { name: "tags", type: "string" },
    { name: "hex", type: "number" },
    { name: "resourceId", type: "number" }
    ];
    var source =
    {
    datatype: "csv",
    url: "data/kanban.csv",
    columndelimiter: ";",
    dataFields: fields
    };
    var dataAdapter = new $.jqx.dataAdapter(source);
    var resourcesAdapterFunc = function () {
    var resourcesSource =
    {
    localData: [
    { id: 0, name: "No name", image: "images/common.png", common: true },
    ],
    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;
    }
    $('#kanban').jqxKanban({
    resources: resourcesAdapterFunc(),
    source: dataAdapter,
    width: '100%',
    height: '100%',
    columns: [
    { text: "Intake", dataField: "Intake" },
    { text: "Packaging", dataField: "Packaging" },
    { text: "Testing", dataField: "Testing" },
    { text: "Deployment", dataField: "Deployment" },
    { text: "Productie", dataField: "Productie" }
    ]
    });
    });
    </script>
    </head>
    <body>
    <div id="kanban"></div>
    </body>
    </html>

    CSV contents
    1;Intake;Adobe Reader 16.0 R1.0 NL;Paul Cobben;#5dc3f0
    2;Productie;Notepad++ Notepad++ 1.5.3 R1.0 NL;Ronald Vonk;#5dc3f0
    3;Testing;TLC Videoplayer 2.3.11.2 R1.0 NL;Bart Andriessen;#5dc3f0
    4;Intake;IgorPavlov 7-Zip 9.1.2 R1.0 NL;Paul Cobben;#5dc3f0
    5;Packaging;Microsoft Office 2016 R1.0 NL;Stijn Teurlings;#5dc3f0
    6;Testing;Winzip Winzip 17.54 R1.0 NL;Stijn Teurlings;#5dc3f0

    Thanks in advance
    Paul Cobben

    May 29, 2017 at 8:28 am Kanban and external CSV #93914

    Hristo
    Participant

    Hello Paul Cobben,

    Please, take a look at this example:
    https://www.jseditor.io/?key=kanban-cusotm-from-csv

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com

    May 29, 2017 at 8:49 am Kanban and external CSV #93916

    paulcobben
    Participant

    Hello Hristo,

    Thanks for the response, but in the example that you have given, there is still local data.
    What I need, is a dataAdapter that connects to a csv.
    So when I update the CSV file, the kanban will be updated.

    May 30, 2017 at 8:03 am Kanban and external CSV #93947

    Hristo
    Participant

    Hello Paul Cobben,

    I cannot provide you such example that to connect to a server with same data.
    You could easy change localData: data with url: ../yourfolder/csvfile.txt.
    Please, take a look at this example:
    http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxdataadapter/bindingtocsv.htm?light
    (This example shows how to bind the jqxDataAdapter to CSV)

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com

    May 31, 2017 at 9:25 am Kanban and external CSV #93986

    paulcobben
    Participant

    Hello Hristo,

    I’ve changed it according your latest answer, but my page is white.
    I’ve have looked again at the jqxdatadapter as I already have done the 1st time in my first message (above)

    My page is now showing three columns (Backlog, In Progress and Done) but no data gets included.
    I have no idea why the data is not showing.

    Please take a look at my code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title id='Description'>Kanban Fluid Size.</title>
    <meta name="description" content="jQuery Kanban with Responsive Layout" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxsortable.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxkanban.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="scripts/demos.js"></script>
    <style>
    html, body {
    padding: 0; margin: 0; width:100%; height: 100%; overflow: hidden;
    }
    </style>
    <script type="text/javascript">
    $(document).ready(function () {
    var fields = [
    { name: "id", type: "string" },
    { name: "state", type: "string" },
    { name: "label", type: "string" },
    { name: "tags", type: "string" },
    { name: "hex", type: "number" },
    { name: "resourceId", type: "number" }
    ];
    var source =
    {
    datatype: "csv",
    url: "data/kanban.csv",
    columndelimiter: ";",
    dataFields: fields
    };
    var dataAdapter = new $.jqx.dataAdapter(source);

    var resourcesAdapterFunc = function () {
    var resourcesSource =
    {
    localData: [
    { id: 0, name: "No name", image: "https://www.jqwidgets.com/jquery-widgets-demo/images/common.png", common: true },
    { id: 1, name: "Andrew Fuller", image: "https://www.jqwidgets.com/jquery-widgets-demo/images/andrew.png" },
    { id: 2, name: "Janet Leverling", image: "https://www.jqwidgets.com/jquery-widgets-demo/images/janet.png" },
    { id: 3, name: "Steven Buchanan", image: "https://www.jqwidgets.com/jquery-widgets-demo/images/steven.png" },
    { id: 4, name: "Nancy Davolio", image: "https://www.jqwidgets.com/jquery-widgets-demo/images/nancy.png" },
    { id: 5, name: "Michael Buchanan", image: "https://www.jqwidgets.com/jquery-widgets-demo/images/Michael.png" },
    { id: 6, name: "Margaret Buchanan", image: "https://www.jqwidgets.com/jquery-widgets-demo/images/margaret.png" },
    { id: 7, name: "Robert Buchanan", image: "https://www.jqwidgets.com/jquery-widgets-demo/images/robert.png" },
    { id: 8, name: "Laura Buchanan", image: "https://www.jqwidgets.com/jquery-widgets-demo/images/Laura.png" },
    { id: 9, name: "Laura Buchanan", image: "https://www.jqwidgets.com/jquery-widgets-demo/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;
    }

    $('#kanban').jqxKanban({
    width: '100%',
    height: '100%',
    resources: resourcesAdapterFunc(),
    source: dataAdapter,
    columns: [
    { text: "Backlog", dataField: "new" },
    { text: "In Progress", dataField: "work" },
    { text: "Done", dataField: "done" }
    ]
    });
    });
    </script>
    </head>
    <body>
    <div id="kanban"></div>
    </body>
    </html>

    And the CSV File
    1;Intake;Adobe Reader 16.0 R1.0 NL;Paul Cobben;#5dc3f0;new
    2;Productie;Notepad++ Notepad++ 1.5.3 R1.0 NL;Ronald Vonk;#5dc3f0;work
    3;Testing;TLC Videoplayer 2.3.11.2 R1.0 NL;Bart Andriessen;#5dc3f0;done
    4;Intake;IgorPavlov 7-Zip 9.1.2 R1.0 NL;Paul Cobben;#5dc3f0;done
    5;Packaging;Microsoft Office 2016 R1.0 NL;Stijn Teurlings;#5dc3f0;work
    6;Testing;Winzip Winzip 17.54 R1.0 NL;Stijn Teurlings;#5dc3f0;new

    June 1, 2017 at 10:37 am Kanban and external CSV #94018

    Hristo
    Participant

    Hello Paul Cobben,

    I would suggest you look at the previously posted example from me.
    There are differences. When using “CSV” format it is important the order of the ‘datafields’ and also, their naming.
    Another important thing is CaseSensitive type of the properties of the DataAdapter – columnDelimiter: ";".
    I would like to suggest you use the example that I provide you for a base and change only “localdata” with url.

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.