Googleドライブの選択としてどのようにvaadin-grid要素の選択を使用しますか？

Question

問題があります。

私は、ファイルエクスプローラとして<vaadin-grid>要素を使用しようとしている、と私は選択の問題を持っています。

• を私はちょうど1ライン（行上のどこでも）、他の行/非選択されている]をクリックすると：

  これは私が再現したいものです。

• 私は、チェックボックスの選択（またはCtrlキー）をクリックした場合は、事前に選択されたラインを維持し、私は複数の行を選択できるようになります。
• しかし、別の行をクリックすると（CTRLは表示されず、チェックボックスには表示されません）、このクリックされた行だけが選択されます。

（CTRLキーの場合は、コンテキスト外です。例:)）。

だから、それは、単一および複数選択のミックスです。行に私をクリックしたときに は現在、「マルチ」選択状態の

• は、この行が選択されていないと、この行がクリックされたことを伝えるためのイベントがない、唯一の方法は、上でクリックすることですチェックボックス。
• 「単一の」選択状態で、行をクリックするとこの行が選択されますが、複数の選択はできません。

は、私はそれを行うことができたり、より良いアプローチは何かあなたは知っていますか？

Answer 1

これは、jsfiddleの私のリクエストに応答する例です。私に答えたTomi VirkkiとJouni Koivuviitaに感謝します。

私の問題を解決するには、vaadin-grid（v2.0）の新しい繰り返しを使用することをお勧めします。 これは私が行をクリックし、行が選択され、私がチェックボックスを使用するカスタム選択を得るために、私が望む選択を得ることを可能にする（私の要求でCTRLキーはボーナスであった）。

これが機能コードであることを許可するには：

<dom-module id="test-component"> 
<template> 
    <iron-media-query query="(max-width: 350px)" query-matches="{{narrow}}"></iron-media-query> 

    <vaadin-grid id="grid" items="[[users]]" on-active-item-changed="activeItemChanged" page-size="20" size="1000000"> 

    <vaadin-grid-selection-column frozen> 
    </vaadin-grid-selection-column> 

    <vaadin-grid-column> 
     <template class="header">First</template> 
     <template>[[item.name.first]]</template> 
    </vaadin-grid-column> 

    <vaadin-grid-column hidden="[[narrow]]"> 
     <template class="header">Last</template> 
     <template>[[item.name.last]]</template> 
    </vaadin-grid-column> 

    </vaadin-grid> 

</template> 
<script> 
    document.addEventListener('WebComponentsReady', function() { 
    Polymer({ 
     is: 'test-component', 

     activeItemChanged: function(e) { 
     var activeItem = e.detail.value; 
     this.$.grid.selectedItems = [activeItem]; 
     }, 

     ready: function() { 
     this.$.grid.dataProvider = function(params, callback) { 
      var xhttp = new XMLHttpRequest(); 
      xhttp.onreadystatechange = function() { 
      if (this.readyState == 4 && this.status == 200) { 
       callback(JSON.parse(this.responseText).results); 
      } 
      }; 
      xhttp.open("GET", "https://randomuser.me/api?results=20", true); 
      xhttp.send(); 
     }; 
     } 
    }); 
    }); 
</script> 

この関数を呼び出すon-active-item-changed="activeItemChanged"属性のセルが選択されている場合、ラインだけ「アクティブ」を選択し、<vaadin-grid-selection-column frozen></vaadin-grid-selection-column>チェックボックス列に使用されます。