javascript - vaadin-grid selection not working -
the row selection not working me. selecteditems array changes if select @ once. not sure if got wrong or if bug.
selecteditems: array contains selected items. https://www.webcomponents.org/element/vaadin/vaadin-grid/elements/vaadin-grid
<link rel="import" href="../bower_components/polymer/polymer-element.html"> <link rel="import" href="../bower_components/vaadin-grid/vaadin-grid.html"> <link rel="import" href="../bower_components/vaadin-grid/vaadin-grid-selection-column.html"> <dom-module id="schedule-vaadin-test"> <template> <vaadin-grid id="material" aria-label="array data example" items="[[items]]" selected-items="{{selecteditems}}"> <vaadin-grid-selection-column auto-select> </vaadin-grid-selection-column> <vaadin-grid-column width="50px" flex-grow="0"> <template class="header">#</template> <template>[[index]]</template> </vaadin-grid-column> <vaadin-grid-column> <template class="header">first name</template> <template>[[item.firstname]]</template> </vaadin-grid-column> <vaadin-grid-column> <template class="header">last name</template> <template>[[item.lastname]]</template> </vaadin-grid-column> </vaadin-grid> </template> <script> /** * @customelement * @polymer */ class schedulevaadintest extends polymer.element { static is() { return 'schedule-vaadin-test'; } static properties() { return { items: { type: array, value: [{"firstname":"foo", "lastname":"bar"}, {"firstname":"foo", "lastname":"bar"}, {"firstname":"foo", "lastname":"bar"}] }, selecteditems: { type: array, observer: 'selecteditemschanged' } }; } static observers() { return [] } selecteditemschanged() { console.log(this.selecteditems); } } customelements.define(schedulevaadintest.is, schedulevaadintest); </script> </dom-module>
complex observers declared in observers array. complex observers can monitor 1 or more paths. these paths called observer's dependencies.
i forgot use complex observer. not sure why objects changes twice on selection. going updated answer know.
[edit: observer changed observe splice only. value of array not changing twice printing on console twice since using wildcard(*) observer. called observer first when observed splices , when observed change in length of array. ]
<link rel="import" href="../bower_components/polymer/polymer-element.html"> <link rel="import" href="../bower_components/vaadin-grid/vaadin-grid.html"> <link rel="import" href="../bower_components/vaadin-grid/vaadin-grid-selection-column.html"> <dom-module id="schedule-vaadin-test"> <template> <vaadin-grid id="material" aria-label="array data example" items="[[items]]" selected-items="{{selecteditems}}"> <vaadin-grid-selection-column> </vaadin-grid-selection-column> <vaadin-grid-column width="50px" flex-grow="0"> <template class="header">#</template> <template>[[index]]</template> </vaadin-grid-column> <vaadin-grid-column> <template class="header">first name</template> <template>[[item.firstname]]</template> </vaadin-grid-column> <vaadin-grid-column> <template class="header">last name</template> <template>[[item.lastname]]</template> </vaadin-grid-column> </vaadin-grid> </template> <script> /** * @customelement * @polymer */ class schedulevaadintest extends polymer.element { static is() { return 'schedule-vaadin-test'; } static properties() { return { items: { type: array, value: [{"firstname":"foo1", "lastname":"bar1"}, {"firstname":"foo2", "lastname":"bar2"}, {"firstname":"foo3", "lastname":"bar3"}] }, /*activeitem: { type: array, observer: '_activeitemchanged' },--this not being used*/ selecteditems: { type: array } }; } static observers() { return [ //'_selecteditemschanged(selecteditems.*)' '_selecteditemschanged(selecteditems.splices)' ] } _selecteditemschanged() { console.log(this.selecteditems); } } customelements.define(schedulevaadintest.is, schedulevaadintest); </script> </dom-module>
Comments
Post a Comment