Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #103136
    M L
    Participant
    Up
    0
    Down

    Hello all together,

    I’m new to this and I used the search function and the documentation, but I’m not able to figure out how to use the dataSourceType: ‘xml’. I tried different things to give the data to the smart-table.

    I hope someone could explain to me, how I could use the xml directly.

    Cheers

    <!DOCTYPE html>
    <html lang=”en”>
    <head>
    <link rel=”stylesheet” href=”smart-webcomponents-community/source/styles/smart.default.css” type=”text/css” />
    <script type=”text/javascript” src=”smart-webcomponents-community/framework/smart.element.js”></script>
    <script type=”text/javascript” src=”smart-webcomponents-community/source/modules/smart.table.js”></script>
    <title>Table Retrieving Data Through HTTP Demo</title>
    <meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0″ />
    <script type=”text/javascript” src=”smart-webcomponents-community/export/data.js”></script><
    <script Access-Control-Allow-Origin: *></script>
    </head>
    <body class=”viewport”>
    <div class=”demo-description”>
    This demo showcases how to retrieve data through HTTP in smart-table.
    </div>
    <smart-table id=”table”></smart-table>
    <script type=”module”>

    const tableColumns = [
    { label: ‘Title’, dataField: ‘<title>’, dataType: ‘string’ },
    { label: ‘Author’, dataField: ‘author’, dataType: ‘string’ },
    { label: ‘Year’, dataField: ‘year’, dataType: ‘integer’ },
    { label: ‘Price’, dataField: ‘price’, dataType: ‘float’ }
    ];
    const tableData=[];

    openXML();
    window.Smart(‘#table’, class {
    get properties() {
    return {
    dataSource: new window.Smart.DataAdapter({
    dataSource: window.tableData,
    dataSourceType: ‘xml’,
    dataFields: [
    ‘title: string’,
    ‘author: string’,
    ‘year: integer’,
    ‘price: float’
    ]
    }),
    paging: true,
    pageIndex: 0,
    pageSize: 10,
    columns: tableColumns
    };
    }
    });
    function openXML() {
    fetch(‘http://localhost:8984/rest/books/books.xml&#8217;, credentials:”include”})
    .then(function(response){
    // console.log(response.text());
    return response.text();
    })
    .then(function(str) {
    var parser, xmlDoc;
    parser = new DOMParser();
    xmlDoc = parser.parseFromString(str, ‘text/xml’);
    //console.log(xmlDoc);
    window.tableData = xmlDoc;
    console.log(window.tableData);
    });
    };
    </script>
    </body>
    </html>

    • This topic was modified 2 weeks ago by M L.
    • This topic was modified 2 weeks ago by M L.
    #103144
    admin
    Keymaster
    Up
    0
    Down

    Hi,

    We have an example for data binding to XML. You can take a look at https://www.htmlelements.com/demos/grid/datagrid-bind-to-xml/. The data binding approach for Table and Grid is the same.

    Hope this helps.

    Best regards,
    Peter Stoev

    Smart UI Team
    https://www.htmlelements.com/

Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.