We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Image in a cell

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

6 Replies

SA Saravanan Arunachalam Syncfusion Team January 2, 2017 10:15 AM UTC

Hi Zack, 
Thanks for contacting Syncfusion’s support. 
We have already discussed this query in the following Knowledge Base document. 
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. 



ZA Zack January 3, 2017 08:30 PM UTC

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


ZA Zack January 3, 2017 09:12 PM UTC

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.


ZA Zack January 3, 2017 09:25 PM UTC

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. 


ZA Zack January 3, 2017 09:45 PM UTC

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!


PS Pavithra Subramaniyam Syncfusion Team January 4, 2017 06:05 AM UTC

Hi Zack,
Thanks for your update.          
We are happy that the provided information helped you.
Regards,
Pavithra S.


Loader.
Up arrow icon