Below are the steps to integrate Javascript and CSS files into your asp.net webform app.
To begin, create two folders named Css and Javascript within your web app.
Next, download the required css and js files and place them in their respective folders.
https://i.stack.imgur.com/4gvdT.png
Then, add the following code to reference these files:
<script src="Javascript/index.js"></script>
<script src="https://jsuites.net/v4/jsuites.js"></script>
<link rel="stylesheet" href="Css/jexcel.css" type="text/css" />
<link rel="stylesheet" href="https://jsuites.net/v4/jsuites.css" type="text/css" />
Since the jsuites file was not found, an online reference is used instead.
Lastly, use this code snippet to create an online sheet:
<body>
<div>Below is the table</div>
<div id="spreadsheet"></div>
</body>
<script>
var data = [
['Jazz', 'Honda', '2019-02-12', '', true, '$ 2.000,00', '#777700'],
['Civic', 'Honda', '2018-07-11', '', true, '$ 4.000,01', '#007777'],
];
jspreadsheet(document.getElementById('spreadsheet'), {
data: data,
columns: [
{ type: 'text', title: 'Car', width: 120 },
{ type: 'dropdown', title: 'Make', width: 200, source: ["Alfa Romeo", "Audi", "Bmw"] },
{ type: 'calendar', title: 'Available', width: 200 },
{ type: 'image', title: 'Photo', width: 120 },
{ type: 'checkbox', title: 'Stock', width: 80 },
{ type: 'numeric', title: 'Price', width: 100, mask: '$ #.##,00', decimal: ',' },
{ type: 'color', width: 100, render: 'square', }
]
});
</script>
Result:
https://i.stack.imgur.com/rIUqV.png