Skip to content

Commit

Permalink
docs: move keep-editor-open demo [skip ci] (#59)
Browse files Browse the repository at this point in the history
  • Loading branch information
web-padawan committed Feb 13, 2019
1 parent 82d7d51 commit ab3392c
Showing 1 changed file with 14 additions and 14 deletions.
28 changes: 14 additions & 14 deletions demo/grid-pro-edit-column-demos.html
Original file line number Diff line number Diff line change
Expand Up @@ -103,42 +103,42 @@ <h3>Editor Type and Options</h3>
</template>
</vaadin-demo-snippet>

<h3>Use Enter to Focus Next Row</h3>
<h3>Keep Editor Open</h3>
<p>
When <code>enterNextRow</code> is set on the grid element, the following keys <b>change behavior</b>:
When <code>keepEditorOpen</code> is set on the grid element, focusing the next editable cell from keyboard will activate edit mode for it.
</p>
<ul>
<li><kbd>Enter</kbd> - save changes, exit the edit mode <b>and</b> focus the editable cell in the next row</li>
<li><kbd>Shift</kbd> + <kbd>Enter</kbd> - save changes, exit the edit mode <b>and</b> focus the editable cell in the previous row</li>
</ul>
<vaadin-demo-snippet id="grid-pro-edit-column-demos-enter-next-row" when-defined="vaadin-grid-pro">
<vaadin-demo-snippet id="grid-pro-edit-column-demos-keep-editor-open" when-defined="vaadin-grid-pro">
<template preserve-content>
<vaadin-grid-pro enter-next-row>
<vaadin-grid-pro keep-editor-open>
<vaadin-grid-pro-edit-column path="name.first" header="First name (edit)"></vaadin-grid-pro-edit-column>
<vaadin-grid-column path="name.last" header="Last name (view)"></vaadin-grid-column>
<vaadin-grid-pro-edit-column path="name.last" header="Last name (edit)"></vaadin-grid-pro-edit-column>
</vaadin-grid-pro>
<script>
window.addDemoReadyListener('#grid-pro-edit-column-demos-enter-next-row', function(document) {
window.addDemoReadyListener('#grid-pro-edit-column-demos-keep-editor-open', function(document) {
document.querySelector('vaadin-grid-pro').items = Vaadin.GridDemo.getUsers();
});
</script>
</template>
</vaadin-demo-snippet>

<h3>Keep Editor Open</h3>
<h3>Use Enter to Focus Next Row</h3>
<p>
When <code>keepEditorOpen</code> is set on the grid element, focusing the next editable cell from keyboard will activate edit mode for it.
When <code>enterNextRow</code> is set on the grid element, the following keys <b>change behavior</b>:
</p>
<vaadin-demo-snippet id="grid-pro-edit-column-demos-keep-editor-open" when-defined="vaadin-grid-pro">
<ul>
<li><kbd>Enter</kbd> - save changes, exit the edit mode <b>and</b> focus the editable cell in the next row</li>
<li><kbd>Shift</kbd> + <kbd>Enter</kbd> - save changes, exit the edit mode <b>and</b> focus the editable cell in the previous row</li>
</ul>
<vaadin-demo-snippet id="grid-pro-edit-column-demos-enter-next-row" when-defined="vaadin-grid-pro">
<template preserve-content>
<vaadin-grid-pro keep-editor-open enter-next-row>
<vaadin-grid-pro enter-next-row keep-editor-open>
<vaadin-grid-pro-edit-column path="name.first" header="First name (edit)"></vaadin-grid-pro-edit-column>
<vaadin-grid-column path="name.last" header="Last name (view)"></vaadin-grid-column>
<vaadin-grid-pro-edit-column path="name.last" header="Last name (edit)"></vaadin-grid-pro-edit-column>
</vaadin-grid-pro>
<script>
window.addDemoReadyListener('#grid-pro-edit-column-demos-keep-editor-open', function(document) {
window.addDemoReadyListener('#grid-pro-edit-column-demos-enter-next-row', function(document) {
document.querySelector('vaadin-grid-pro').items = Vaadin.GridDemo.getUsers();
});
</script>
Expand Down

0 comments on commit ab3392c

Please sign in to comment.