Skip to content

Commit 279692d

Browse files
budnixbudnix
committed
Added example for dynamically generated context menu
1 parent ae811d3 commit 279692d

File tree

2 files changed

+136
-0
lines changed

2 files changed

+136
-0
lines changed

‎examples/dynamically-generated-context-menu.html‎

Lines changed: 135 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,135 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>&lt;hot-table&gt;</title>
6+
7+
<!-- Importing Web Component's Polyfill -->
8+
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
9+
10+
<!-- Code highlighter -->
11+
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/styles/default.min.css">
12+
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/highlight.min.js"></script>
13+
14+
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>
15+
<link rel="stylesheet" href="css/main.css"/>
16+
17+
<!-- Importing Custom Elements -->
18+
<link rel="import" href="../hot-table.html">
19+
<link rel="import" href="../../google-map/google-map.html">
20+
<link rel="import" href="components/google-map/google-map-search.html">
21+
<link rel="import" href="components/bold-renderer.html">
22+
<link rel="import" href="components/colored-renderer.html">
23+
<link rel="import" href="components/age-renderer.html">
24+
<link rel="import" href="components/language-editor.html">
25+
</head>
26+
<body>
27+
28+
<div id="wrapper">
29+
<header>
30+
<h1>&lt;hot-table&gt;</h1>
31+
<h2 class="logo-desc">Dynamically generated context menu demo</h2>
32+
</header>
33+
34+
<h2>Simple Example</h2>
35+
36+
<div class="example">
37+
<template id="tpl" is="dom-bind">
38+
<hot-table id="example" width="570" height="280" datarows="{{ people }}" row-headers context-menu="{{ contextMenu }}">
39+
<hot-column width="125" value="name" header="Full Name"></hot-column>
40+
<hot-column width="125" value="address" header="Address"></hot-column>
41+
<hot-column width="125" value="registered" header="Registered" type="date"></hot-column>
42+
<hot-column width="125" value="balance" header="Balance" type="numeric">
43+
<template data-hot-role="renderer" is="dom-template">
44+
<bold-renderer value="{{ value }}"></bold-renderer>
45+
</template>
46+
</hot-column>
47+
</hot-table>
48+
</template>
49+
</div>
50+
51+
<p>
52+
Click the button to generate dynamically different context menu commands.
53+
Generate for <button class="mini admin-button">admin</button> or <button class="mini user-button">regular user</button>.
54+
</p>
55+
56+
<h2>Code</h2>
57+
58+
<pre><code class="html">
59+
&#x3C;template id=&#x22;tpl&#x22; is=&#x22;dom-bind&#x22;&#x3E;
60+
&#x3C;hot-table id=&#x22;example&#x22; width=&#x22;570&#x22; height=&#x22;280&#x22; datarows=&#x22;{{ people }}&#x22; row-headers context-menu column-sorting sort-indicator persistent-state manual-column-resize manual-column-move manual-row-resize manual-row-move&#x3E;
61+
&#x3C;hot-column width=&#x22;125&#x22; value=&#x22;name&#x22; header=&#x22;Full Name&#x22;&#x3E;&#x3C;/hot-column&#x3E;
62+
&#x3C;hot-column width=&#x22;125&#x22; value=&#x22;address&#x22; header=&#x22;Address&#x22;&#x3E;&#x3C;/hot-column&#x3E;
63+
&#x3C;hot-column width=&#x22;125&#x22; value=&#x22;registered&#x22; header=&#x22;Registered&#x22; type=&#x22;date&#x22;&#x3E;&#x3C;/hot-column&#x3E;
64+
&#x3C;hot-column width=&#x22;125&#x22; value=&#x22;balance&#x22; header=&#x22;Balance&#x22; type=&#x22;numeric&#x22;&#x3E;
65+
&#x3C;template data-hot-role=&#x22;renderer&#x22; is=&#x22;dom-template&#x22;&#x3E;
66+
&#x3C;bold-renderer value=&#x22;{{ value }}&#x22;&#x3E;&#x3C;/bold-renderer&#x3E;
67+
&#x3C;/template&#x3E;
68+
&#x3C;/hot-column&#x3E;
69+
&#x3C;/hot-table&#x3E;
70+
&#x3C;/template&#x3E;
71+
</code></pre>
72+
73+
<script>
74+
var pDomChange = new Promise(function(resolve, reject) {
75+
window.addEventListener('dom-change', resolve);
76+
});
77+
78+
function initUntill() {
79+
Promise.all(arguments).then(function(responses) {
80+
var tpl = document.getElementById('tpl');
81+
var hot = document.querySelector('#example');
82+
83+
tpl.people = responses[0];
84+
tpl.genderList = ['Male', 'Female'];
85+
tpl.contextMenu = makeMenuForUser()
86+
87+
document.querySelector('.admin-button').addEventListener('click', function() {
88+
tpl.contextMenu = makeMenuForAdmin();
89+
});
90+
document.querySelector('.user-button').addEventListener('click', function() {
91+
tpl.contextMenu = makeMenuForUser();
92+
});
93+
});
94+
}
95+
96+
function _hotData(data) {
97+
initUntill(Promise.resolve(data), pDomChange);
98+
}
99+
100+
function makeMenuForAdmin() {
101+
return {
102+
items: {
103+
logged_as: {
104+
name: 'Menu for: <b>admin</b>',
105+
disabled: true
106+
},
107+
hsep0: '---------',
108+
row_above: true,
109+
row_below: true,
110+
hsep1: '---------',
111+
remove_row: {},
112+
hsep2: '---------',
113+
make_read_only: true,
114+
}
115+
};
116+
}
117+
function makeMenuForUser() {
118+
return {
119+
items: {
120+
logged_as: {
121+
name: 'Menu for: <b>user</b>',
122+
disabled: true
123+
},
124+
hsep0: '---------',
125+
make_read_only: true,
126+
}
127+
};
128+
}
129+
</script>
130+
<script async defer src="js/data.js"></script>
131+
<script>hljs.initHighlightingOnLoad();</script>
132+
</div>
133+
134+
</body>
135+
</html>

‎index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -121,6 +121,7 @@ <h2>More demos</h2>
121121
<li><a href="examples/editors.html">Custom Editors</a></li>
122122
<li><a href="examples/dashboard.html">Dashboard</a></li>
123123
<li><a href="examples/persistent-state.html">Saving table state (persistent state)</a></li>
124+
<li><a href="examples/dynamically-generated-context-menu.html">Dynamically generated context menu</a></li>
124125
<li>Nested Tables (comming soon)</li>
125126
</ul>
126127

0 commit comments

Comments
 (0)