Change frozenColumns approach in demos

vaadin · Oct 27, 2016 · 0b16494 · 0b16494
1 parent 8d9e4b7
commit 0b16494
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 4 deletions.
diff --git a/demo/demo.html b/demo/demo.html
@@ -33,7 +33,7 @@
           white-space: nowrap;
         }
       </style>
-      <vaadin-grid id="component" data-source="[[dataSource]]" size="10000000" frozen-columns="1" on-item-changed="_itemChanged" multi-selection>
+      <vaadin-grid id="component" data-source="[[dataSource]]" size="10000000" on-item-changed="_itemChanged" multi-selection>
 
         <template is="row-details">
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
@@ -43,7 +43,7 @@
           <paper-input value="{{item.name}}"></paper-input>
         </template>
 
-        <vaadin-grid-column width="100px">
+        <vaadin-grid-column width="100px" frozen>
           <template>
             <span class="elItem">[[item.name]]</span>
           </template>

diff --git a/demo/dynamic.html b/demo/dynamic.html
@@ -200,7 +200,7 @@ <h1 main-title>Vaadin Grid Scroller</h1>
             </app-toolbar>
           </app-header>
 
-          <vaadin-grid id="component" size="[[size]]" frozen-columns="[[frozenColumns]]" row-count="2">
+          <vaadin-grid id="component" size="[[size]]" row-count="2">
             <vaadin-grid-column width="[[width]]px">
               <template>
                 <div class="elItem" style$="[[_getStyle(index, height)]]">#[[index]]</div>
@@ -282,6 +282,17 @@ <h1 main-title>Vaadin Grid Scroller</h1>
           }
         },
 
+        observers: [
+          '_onFrozenChanged(frozenColumns)'
+        ],
+
+        _onFrozenChanged: function(f) {
+          this.$.component.columns[this.$.component.columns.length - 1]
+          .forEach(function(c, i) {
+            c.toggleAttribute('frozen', i < f);
+          })
+        },
+
         iconForItem: function(item) {
           return item ? (item.integer < 50 ? 'star-border' : 'star') : '';
         },

diff --git a/demo/grp.html b/demo/grp.html
@@ -38,7 +38,7 @@
           }
         </style>
         <vaadin-grid id="component" data-source="[[dataSource]]" size="20" multi-selection>
-          <vaadin-grid-column class="C0" width="30px" flex="0">
+          <vaadin-grid-column class="C0" width="30px" flex="0" frozen>
             <template is="header" class="c0">TC0</template>
             <template>[[index]]</template>
           </vaadin-grid-column>