Как выбрать несколько строк в Kendogrid без установленного флажка в Angular5 - PullRequest
Новая
       44

Как выбрать несколько строк в Kendogrid без установленного флажка в Angular5

0 голосов
/ 15 мая 2018

Я работаю в KendoUi angular 5. Мне нужно Как выбрать несколько рядов без использования клавиши Ctrl И установить флажки в kendogrid в angular 5?Я могу выбрать несколько строк с помощью клавиши Ctrl или установить флажки в соответствии с сеткой Telerik Kendo, но я хочу выбрать несколько строк без флажка выбора или клавиши Ctrl

1 Ответ

0 голосов
/ 16 мая 2018

Вы можете использовать функцию rowSelected и переопределить встроенное поведение выбора Grid, заменив его на пользовательское:

DOCS

Например, вы можете использоватьобработчик события cellClick, в котором элемент данных, связанный со строкой, в которой находится выбранная ячейка, доступен в качестве данных события и сохраняет выбранные элементы в коллекции, которой можно манипулировать по мере необходимости: 

import { Component } from '@angular/core';
import { products } from './products';
import { RowArgs } from '@progress/kendo-angular-grid';

@Component({
    selector: 'my-app',
    template: `
        <kendo-grid
            [data]="gridData"
            [height]="500"
            [selectable]="true"
            [rowSelected]="isRowSelected"
            (cellClick)="onCellClick($event)"
            >
            <kendo-grid-column field="ProductName" title="Product Name" [width]="300"></kendo-grid-column>
            <kendo-grid-column field="UnitsInStock" title="Units In Stock"></kendo-grid-column>
            <kendo-grid-column field="UnitsOnOrder" title="Units On Order"></kendo-grid-column>
            <kendo-grid-column field="ReorderLevel" title="Reorder Level"></kendo-grid-column>
        </kendo-grid>
    `
})
export class AppComponent {
    public gridData: any[] = products;
    public mySelection: any[] = [];

    public onCellClick({dataItem}) {
      const idx = this.mySelection.indexOf(dataItem.ProductID);

      if(idx > -1) {
        // item is selected, remove it
        this.mySelection.splice(idx, 1);
      } else {
        // add item to the selection
        this.mySelection.push(dataItem.ProductID);
      }
    }

    // Use an arrow function to capture the 'this' execution context of the class.
    public isRowSelected = (e: RowArgs) => this.mySelection.indexOf(e.dataItem.ProductID) >= 0;
}

ПРИМЕР ПЛАНКЕРА

...