image biding with conditions

[Sanghoon Hong]

Hi,

In my grid, there is a column that name is "state". And that column has values [release, working, waiting].

I want to binding image with this condition :

release state - grey dot image, working state - green dot image, and waiting state - red dot image.

How to bind image based on condition?

[Mohammed Ansar Sathik Ali]

Hi Sanghoon,

Greetings from Syncfusion support.

Query: image biding with conditions.

By analyzing your query, You want to bind an Image based on the Grid column’s values, so we suggest you to use column.template feature in the Grid column. In this feature, we have bound the image in the “Title” column based on conditions.

Please refer the below code example for more information.

[template]

<template v-slot:cTemplate="{data}">

            <div v-if="data. Title ====’Sales Representative’ ">

   <img :src="'source/grid/images/1 .png'" :alt=" data. Title "/>

     </div>

            <div v-else-if="data. Title ==== ‘Inside Sales Coordinator’ ">

   <img :src="'source/grid/images/2 .png'" :alt=" data. Title "/>

     </div>

</template> 

 

API: https://ej2.syncfusion.com/vue/demos/#/bootstrap5/grid/column-template.html

Please get back to us if you need further assistance on this.

Regards,

Mohammed Ansar.