CODEWITHSUNDEEP
angularjskendo-gridtelerik-gridkendo-ui-angular2
Venkateswararao
Venkateswararao

Reputation: 353

How to select Multiple rows in Kendogrid with out select Checkbox in Angular5

I am working KendoUi angular 5. I need How to select Multiple rows with out Using Ctrl key And check check boxes in kendogrid in angular 5? I am able to Select Multiple rows using Ctrl key or select check boxes as per telerik kendo grid but i want to select multiple rows with out select check box or Ctrl key

Upvotes: 1

Views: 2159

Answers (2)

chillNZ
chillNZ

Reputation: 319

I found an alternate workaround which doesn't require rebuilding the row selection, which I prefer as it feels less risky.

All this does is hijacks any click event on a row in the grid, hides it from Kendo, and then sends a fake click event with ctrl down instead; therefore causing Kendo to do the proper selection behaviour for us.

It must be done in databind as when the page is changed or a filter added the event needs to be bound to the new rows.

$("#yourGrid").kendoGrid({
            ...
            dataBound: dataBound
            ...
        });
...
function dataBound() {
    $(".k-master-row").click(function (e) {
        // Prevent stack overflow by exiting if we have already done the below logic
        // and let kendo handle it
        if (e.ctrlKey === true)
            return;

        // Prevent Kendo from handling this click event as we are going to send another one with ctrl this time
        e.preventDefault();
        e.stopPropagation();

        // Create a fake click with ctrl pressed on this particular row (Kendo will keep previous rows selected in this case)
        var e2 = jQuery.Event("click");
        e2.ctrlKey = true;     // Ctrl key pressed
        $(this).trigger(e2);
    });
}

Upvotes: 0

topalkata
topalkata

Reputation: 2098

You can use the rowSelected function and override the built-in Grid selection behavior, replacing it with a custom one:

DOCS

For example you can use the cellClick event handler where the data item, associated with the row the clicked cell is in, is available as event data and store the selected items in a collection that you can manipulate as necessary:

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;
}

PLUNKER EXAMPLE

Upvotes: 2

Related Questions