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

Change variable icon based on the information obtained from the datasource

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



8 Replies

DE Demian April 12, 2022 02:02 AM UTC

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




RS Rajapandiyan Settu Syncfusion Team April 12, 2022 12:55 PM UTC

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



DE Demian April 13, 2022 03:25 AM UTC

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 



RS Rajapandiyan Settu Syncfusion Team April 15, 2022 10:20 AM UTC

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



DE Demian replied to Rajapandiyan Settu April 20, 2022 08:28 PM UTC

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>







RS Rajapandiyan Settu Syncfusion Team April 21, 2022 02:20 PM UTC

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



DE Demian replied to Rajapandiyan Settu April 22, 2022 04:23 AM UTC

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>



RS Rajapandiyan Settu Syncfusion Team April 25, 2022 04:44 AM UTC

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


Loader.
Up arrow icon