-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathautocomplete_quirk.html
67 lines (65 loc) · 2.82 KB
/
autocomplete_quirk.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Test jExcel Dropdown Quirk</title>
<script src="https://bossanova.uk/jexcel/v3/jexcel.js"></script>
<script src="https://bossanova.uk/jsuites/v2/jsuites.js"></script>
<link rel="stylesheet" href="https://bossanova.uk/jsuites/v2/jsuites.css" type="text/css" />
<link rel="stylesheet" href="https://bossanova.uk/jexcel/v3/jexcel.css" type="text/css" />
</head>
<body>
<div id="spreadsheet"></div>
<script>
// autoSource = [ {'id':'1', 'name':'Fruits'}, {'id':'2', 'name':'Legumes'}, {'id':'3', 'name':'General Food'} ];
autoSource = [ {id:'1',name:'Fruits'} ];
spreadsheetDiv = document.getElementById('spreadsheet');
spreadsheet = jexcel(spreadsheetDiv, {
data: [
['Displays correctly because value is in source already.','1'],
['Only "Fruits" displays at first. "Legumes" will appear after envoking the dropdown.','1;2'],
['"General Food will appear after envoking the dropdown."','3'],
],
columns: [
{
type: 'text',
title: 'Title',
width: 400,
wordWrap: true,
align: 'left'
},
{
type: 'autocomplete',
title: 'Test 1',
width: 200,
multiple: true,
source: autoSource
}
],
minSpareRows: 1
});
//Mocking an async addition of dropdown values.
autoSource.push({'id':'2', 'name':'Legumes'});
autoSource.push({'id':'3', 'name':'General Food'});
// **What can I do here to make the 'Test 1' column refresh cell displays?**
// Example Async load of the dropdown. Even if the fetch is initiated
// at the top of the script, before the spreadsheet is, the fetch is still
// slow enough that the dropdown additions will appear in the array after
// the spreadsheet is.
// fetch('http://localhost:8000/jsonapi/taxonomy_term/subject')
// .then( (response) => response.json() )
// .then(function (terms) {
// terms.data.forEach(function (term) {
// // Add the term if it is NOT already in the dropdown.
// if (autoSource.findIndex( (existingTerm) => existingTerm.id === term.attributes.drupal_internal__tid) === -1) {
// term = {
// 'name': term.attributes.name,
// 'id': term.attributes.drupal_internal__tid
// };
// autoSource.push(term);
// }
// });
// });
</script>
</body>
</html>