How to get sected row data when user check the checkbox in kedo ui grid.Angular2

Question

I have a kendo ui grid.Each row of grid having checkbox.When user checked the checkbox then I am trying to get the data of selected row.How can I get the data of selected row when user check the check box of grid. Please help me thanks in advance.

 <kendo-grid [data]="activeTabData" [selectable]="selectableSettings" [height]="410">
          <kendo-grid-column field="" title="" width="1" [locked]="false">
          </kendo-grid-column>

            <kendo-grid-column field="" title="" width="70" [locked]="true">
                <ng-template kendoGridCellTemplate let-dataItem let-idx="rowIndex">
                    <input type="checkbox" [kendoGridSelectionCheckbox]="idx" [(ngModel)]="checkboxOnly" (change)="setSelectableSettings()"/>
                </ng-template>
            </kendo-grid-column>

          <ng-template ngFor [ngForOf]="tableKeys" let-column>
            <kendo-grid-column
              width="180"
              field="{{column}}"
            >
            </kendo-grid-column>
          </ng-template>

           <ng-template kendoGridToolbarTemplate>
                <button type="button" kendoGridExcelCommand><span class="k-icon k-i-file-excel"></span>Export to Excel</button>
            </ng-template>
          <kendo-grid-excel fileName="Products.xlsx"></kendo-grid-excel>
        </kendo-grid>

xmycomp.ts file below

setSelectableSettings() {
       console.log("THis is King",this.checkboxOnly)
        this.selectableSettings = {
            checkboxOnly: this.checkboxOnly,
            mode: this.mode
        }
        console.log("HEHEH",this.activeTabData,this.selectableSettings);
    }

Vikas Mahajan · Accepted Answer · 2017-08-27 12:34:24Z

1

 <kendo-grid-column field="Discontinued" title="Discontinued" width="120">
      <ng-template kendoGridCellTemplate let-dataItem>
           <input type="checkbox" [checked]="dataItem.Discontinued" 
               (click)=SetSelectedItem(dataItem) />
       </ng-template>
  </kendo-grid-column>

dataItem - Object to get

SetSelectedItem(dataItem){
  console.log(dataItem);
  dataItem.Discontinued=!dataItem.Discontinued; //change the value
  if(dataItem.Discontinued){
    this.selectedItemIDs.push(dataItem.ProductID)
  }
  else{
    let index: number = this.selectedItemIDs.indexOf(dataItem.ProductID);
    if (index !== -1) {
    this.selectedItemIDs.splice(index, 1);
    } 
  }
  console.log('selectedItemIds:',this.selectedItemIDs);
}

On external action (Button click) see plunk

Plunker

answered Aug 27, 2017 at 12:34

Vikas Mahajan

3551 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Mohit Over a year ago

Could you please add select all checkbox in first column header.Thanks in advance.

Mohit Over a year ago

Thank you work for me.Could you tell me how to add custom dropdown in header of kendo grid.I have custom dropdown multi checkbox and I want to add custom dropdown to kendo grid header.Please help me

Vikas Mahajan Over a year ago

hi, i have update the plunker and also, added a dropdown in the header with exposed events.let me know it works for you.

Mohit Over a year ago

Instead of kendo grid select I want to add my own custom dropdown.How can I add custom dropdown in kendo grid header.I have a dropdown with multi checkbox and filter also.Thanks in advance.Please help me.It should be in Angular2 or angular4.

Vikas Mahajan Over a year ago

just change the kendo-dropdownlist with your custom control and give required input to control like [data]="listItems" whatever you have defined/declared.

Collectives™ on Stack Overflow

How to get sected row data when user check the checkbox in kedo ui grid.Angular2

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related