Change variable icon based on the information obtained from the datasource

[Demian]

I get the data through ajax

and at the end assigning the result to the datagrid

Something like that

const data = resultJson.data;

griddata.dataSource = data;

I am trying the following way but I am not getting the result I need

<script type="text/x-jsrender" id="columnTemplate">

    {{if gesDocEliminado == "true"}}

    <i class="fas fa-times-circle textPink"></i>

    {{else}}

    <i class="fas fa-check-circle textPink"></i>

    {{/if}}

</script>

thank you

[Demian]

hello also the attempt with the javascript option, but without result

<script type="text/x-jsrender" id="columnTemplate">

    ${if(gesDocEliminado === true)}

    <i class="fas fa-times-circle textPink"></i>

    ${else}

    <i class="fas fa-check-circle textPink"></i>

    ${/if}

</script>

thank you

[Rajapandiyan Settu]

Hi Demian,

Thanks for contacting Syncfusion support.

By using the following code example, you can dynamically render the icon based on the Boolean values. You can refer to the below documentation for more information.

ColumnTempate with condition: https://ej2.syncfusion.com/aspnetcore/documentation/grid/columns/column-template#using-condition-template

 

<e-grid-column field="Verified" headerText="Verified" template="#columnTemplate" width="120"></e-grid-column>

 

<script id="columnTemplate" type="text/x-template">

    <div>

        <div>

            ${if(Verified)}  // use the field name only for Boolean type column

            <span class="fa fa-bug"></span>

            ${else}

            <span class="fa fa-trash"></span>

            ${/if}

        </div>

    </div>

</script>

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/core_3_grid_conditon_coltemplate-1494201944.zip

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

Regards,

Rajapandiyan S

[Demian]

thanks it worked perfectly.

I am trying to find that if a cell is not empty put an icon for example:

{{if columnname.length > 0}}

    <i class="fa-solid fa-icon textPink"></i>

{{/if}}

But I can't get it to work.

I would appreciate your support

thanks 

[Rajapandiyan Settu]

Hi Demian,

Thanks for your update.

You can achieve your requirement by using queryCellInfo event. In that event, you can dynamically add the class based on the cell value.

queryCellInfo: https://ej2.syncfusion.com/javascript/documentation/api/grid/#querycellinfo

 

<e-grid-column field="Verified" headerText="Verified" template="#columnTemplate" width="120"></e-grid-column>

 

<script id="columnTemplate" type="text/x-template">

            <span class="iconcell"></span> // render empty element

</script>

 

<script>   

function queryCellInfo(args) {

  if (args.column.field == 'Verified') {

    // add the font icon class based on the row data

    if (typeof args.data['Verified'] == 'boolean') { // use the condition as you want

      args.cell.querySelector('.iconcell').classList.add('fa', 'fa-bug');

    }

    if (typeof args.data['Verified'] == 'string' && args.data['Verified'] != '') {

      args.cell.querySelector('.iconcell').classList.add('fa', 'fa-bug');

    }

  }

}

</script>

 

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

Regards,

Rajapandiyan S

[Demian]

Thanks but I can't get it to work. This is my datagrid where the stamped column contains a text in base64, my idea was to search by the length of the string with length, what I want is that if the length of the string is greater than 0 or if it contains text, put an icon of it Otherwise put another.

<ejs-grid id="gvbooks" commandClick="commandClick" allowPaging="true" locale="es" queryCellInfo="customiseCell">

            <e-grid-pagesettings pageCount="5"></e-grid-pagesettings>

            <e-grid-columns>

                <e-grid-column field="idBook" headerText="IdBook" textAlign="Right" width="120" visible="false" isPrimaryKey="true"></e-grid-column>

                <e-grid-column field="stampedBook" headerText="Timbrado" textAlign="Left" width="120"></e-grid-column>

                <e-grid-column headerText="stamped" template="#columnTemplate" textAlign="Center" width="80"></e-grid-column>

                <e-grid-column headerText="Imágenes" width="80" commands="commands"></e-grid-column>

            </e-grid-columns>

        </ejs-grid>

<script type="text/x-jsrender" id="columnTemplate">

    <i class="fas fa-check-circle textPink"></i>

</script>

<script>

    function customiseCell(args) {

        if (args.column.field === ' stamped ') {

            if (args.data[' stamped '].length > 0) {

<i class="fas fa-check-circle textPink"></i>

            }

            else {

<i class="fas fa-times-circle textPink"></i>

            }

        }

</script>

[Rajapandiyan Settu]

Hi Demian,

Thanks for your update.

You can achieve your requirement by using queryCellInfo event. In that event, you can dynamically create the element with a base64 string based on the cell value.

queryCellInfo: https://ej2.syncfusion.com/javascript/documentation/api/grid/#querycellinfo

 

<e-grid-column field="Stamped" headerText="Stamped" template="#StampedTemplate" width="150"></e-grid-column>

 

<script id="StampedTemplate" type="text/x-template">

    <div class="images"></div>

</script>

 

<script>   

    function queryCellInfo(args) {

       if (args.column.field == 'Stamped') {

           if(args.data['Stamped'] && args.data['Stamped'].length > 0){

               var img = new Image();

               img.src = args.data.Stamped; // bind base64 string

               args.cell.querySelector('.images').appendChild(img); // append the image element to the cell

           }else{

               var icon = document.createElement('i');

               icon.classList.add('fa', 'fa-bug');

               args.cell.querySelector('.images').appendChild(icon); // append the icon element to the cell

           }

       }

    }

</script>

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/core_3_grid_base64_img-1136098011.zip

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

Regards,

Rajapandiyan S

[Demian]

Thanks after analyzing the provided code what I needed was the following:

Thanks for replying, it's solved now.

<script>

   function queryCellInfo(args) {

        if (args.column.field == 'Stamped') {

            if (args.data['Stamped'] && args.data['Stamped'].length > 0) {

                var icon = document.createElement('i');

                icon.classList.add('fas', 'fa-check-circle');

                args.cell.querySelector('.images').appendChild(icon);

            } else {

                var icon = document.createElement('i');

                icon.classList.add('fas', 'fa-times-circle');

                args.cell.querySelector('.images').appendChild(icon);

            }

        }

    }

</script>

[Rajapandiyan Settu]

Hi Demian,

We are glad that you have achieved your requirement with the provided solution.

Please get back to us if you need further assistance.

Regards,

Rajapandiyan S