JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › Table › Problems loading XML to table
Tagged: DataSource, smart.table
- This topic has 1 reply, 2 voices, and was last updated 2 years, 6 months ago by admin.
-
AuthorPosts
-
May 4, 2022 at 6:18 pm #103136M LParticipant
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’, 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>May 6, 2022 at 8:34 am #103144adminKeymasterHi,
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 StoevSmart UI Team
https://www.htmlelements.com/ -
AuthorPosts
- You must be logged in to reply to this topic.