Grid column template

[Harshit]

Hi,

In a scenario we require to show grid using DOM through typescript code.

In the first column I wanted to show Image & Name both. I'm not able to find how to access values of Image & Name in template.

    const dataSource = [

      {name: "Harshit", image: "xyz.png", occupancy: 20},

      {name: "Rahul", image: "abc.png", occupancy: 60}

    ]

    this.grid = new Grid({

      dataSource: dataSource,

      columns: [

        {headerText: 'Name', width: 100,

          template: 'Here I wanted to show both Image & Name'

        },

        { field: 'occupancy', headerText: 'Occupancy', width: 30 }

      ]

    })

[Santhosh Iruthayaraj]

Hi Harshit,

Greetings from Syncfusion Support.

To access the field value inside the template string, simply enclose the field name within curly braces and prefix it with the "$" symbol. Please find the code snippet and sample for your reference below:

[app.component.ts]

 

template:"<div class='emp-profile'><img src='${PhotoPath}' /><p>${FirstName}</p></div>"

 

Sample: https://stackblitz.com/edit/angular-grid-string-template

Please feel free to reach out if you have any further queries.

Regards,

Santhosh I