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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Image in a cell

Thread ID:

Created:

Updated:

Platform:

Replies:

128068 Dec 29,2016 05:01 PM UTC Jan 4,2017 06:05 AM UTC Angular 6
loading
Tags: ejGrid
Zack
Asked On December 29, 2016 05:01 PM UTC

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 [Syncfusion]
Replied On 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. 


Zack
Replied On 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

Zack
Replied On 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.

Zack
Replied On 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. 

Zack
Replied On 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!

Pavithra Subramaniyam [Syncfusion]
Replied On 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.


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

or the page will be automatically redirected to sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;