Image in a cell

[Zack]

I'm trying to figure out how I would display images in the grid? I wanted to insert a little pencil icon in a column that will be used to pop out a modal and edit the row

[Saravanan Arunachalam]

Hi Zack, 

Thanks for contacting Syncfusion’s support. 

We have already discussed this query in the following Knowledge Base document. 

https://www.syncfusion.com/kb/4104/how-to-place-icons-in-command-column-buttons-instead-of-text  

And also refer to the corresponding angular 2 code example to enable the unbound column. 

[TS file] 

export class GridComponent { 

    public gridData: any; 

       public command: any 

    constructor() { 

              this.command = [{ type: ej.Grid.UnboundType.Edit, buttonOptions: { contentType: "imageonly", size: "normal", prefixIcon: "e-icon e-edit" } }]; 

        . . . 

    } 

} 

[JS file] 

<ej-grid [allowPaging]="true" [allowSorting]="true" [dataSource]="gridData"> 

    <e-columns> 

             . . .      

              <e-column headerText="Manage Records" width="130" [commands]="command"></e-column>    </e-columns> 

</ej-grid> 

  

Regards, 

Saravanan A. 

[Zack]

Thanks that got the icons there. Now I remain unsure of how to get the context when I click on the edit button. I want to be able to say something like this

this.command = [

      { 

        type: ej.Grid.UnboundType.Edit, 

        buttonOptions: { 

          contentType: "imageonly", 

          size: "normal", 

          prefixIcon: "e-icon e-edit",

          click: this.clickEditButton.bind(this)

        } 

      }

    ]; 

which works with click to call a function but I don't know how to get the index of the datasource array of the clicked icon into the this.clickEditButton method

[Zack]

Looking through the documentation it appears there is something like what I am looking for for a column but I need to be able to get the row.

[Zack]

I think I'm close, I found rowSelected, I think all I need to do is use the rowSelected event to return the row index and then populate the modal with those values. I understand the jQuery but I'm not sure how to translate it into Angualr 2. 

[Zack]

Very Happy to say I figured it out

Simply did this in ej-grid

(rowSelected)='rowSelected($event)'

Then made use of 

  rowSelected(args: any){

    this.row = args.rowIndex

  }

worked exactly as I hoped!

[Pavithra Subramaniyam]

Hi Zack,

Thanks for your update.          

We are happy that the provided information helped you.

Regards,

Pavithra S.