SelectedItem / grid

[Anis Helaui]

Hello,

How can I get the selected item in the exemple grid "Custom Toolbar items" from : https://help.syncfusion.com/angular/grid/toolbar#custom-toolbar-items?

import {Component, ViewEncapsulation, ViewChild } from '@angular/core';
    @Component({
      selector: 'ej-app',
      templateUrl: 'app/app.component.html',  //give the path file for Grid control html file.
    })
    export class AppComponent {
        public gridData;
        public right;
        @ViewChild("grid") gridIns: EJComponents<any, any>; 
    constructor()
        {
            //The datasource "(window as any).gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
            this.gridData = (window as any).gridData;
            this.groupSettings = {groupedColumns: ["ShipCity"]},
            this.toolbarSettings={showToolbar:true,customToolbarItems:["Collapse", {templateID: "<a class='e-toolbaricons e-icon refresh' />"}]};
        }
        toolbar(e:any){
            var toolbarObject = $(e.target),
            grid = this.gridIns.widget;

            // grid. ???? // get the selected item as object ??
        }
}

Best regads

Anis Helaoui

[Vignesh Natarajan]

Hi Anis, 

 

Thanks for using Syncfusion products. 

 

We have analyzed your requirement and we have achieved your requirement using getSelectedRecords() method in the toolbar click event of the Grid. 

 

Refer the below code snippet 

[HTML] 

 

<ej-grid id="grid" #grid [allowPaging]="true" [selectionType]="multiple"  [dataSource]="gridData" [toolbarSettings]="toolbarSettings" (toolbarClick)=toolbar($event)> 

    <e-columns> 

  

 

 

[TS] 

 

  this.toolbarSettings={showToolbar:true,customToolbarItems:["selected"]}; 

    this.multiple = ej.Grid.SelectionType.Multiple; 

    }    

    toolbar(e:any){ 

     var toolbarObject = $(e.target), 

     grid = this.gridIns.widget; 

     if(toolbarObject.hasClass("selected")) 

     console.log(grid.getSelectedRecords()); 

} 

 

 

Refer the below screenshot for the output 

 

 

 

Note: on the clicking the custom toolbar icon, selected records get logged in the console window.  

 

For your convenience we have prepared a sample which can be downloaded from below link 

 

Sample: http://www.syncfusion.com/downloads/support/forum/135669/ze/angular2-seeds-918793282  

 

Refer our help documentation for your reference 

 

https://help.syncfusion.com/api/angular/ejgrid#methods:getselectedrecords  

 

Regards, 

Vignesh Natarajan 

[Anis Helaui]

Thank you very much.

Regards

Anis Helaoui

[Vignesh Natarajan]

Hi Anis, 

 

Thanks for the update. 

 

You are welcome.  

 

 

Please get back to us know if you need any other assistance. 

 

 

Regards, 

Vignesh