Add ICON to column

[William Morgenweck]

What's the easiest way to display an icon in a column based upon a value?  I would like to put some type of "NEW" icon if the items was added within the last 10 days.  One of the columns is dateAdded currently but I would like to give a better visual.  Thanks Also where are the icons stored that you use or do I need to reference my own source?  Thanks again

[Thavasianand Sankaranarayanan]

Hi William, 

Thanks for conducting Syncfusion support. 

We have validate your query “ Add Icon to column” at our end. 

For you requirement, we have prepared a sample for adding simple icon in column using Column Template. Please refer this below sample. 

Sample link: https://codesandbox.io/s/vue-template-qvjxc   

But for this case we need some clarification. So please share below details. 

1. Have to validate date value in other column field(Date field)
2. It’s enough to achieve grid rendering?
3. Can you please share the output image if possible.
4. Share your exact requirement with further more detail
5. Share you code snippet

We have already stored icons in our library . So please refer the below link 

Link : https://ej2.syncfusion.com/documentation/appearance/icons/ 

Please get back to us, if u need further assistance. 

Regards, 

Thavasianand S. 

[William Morgenweck]

Thank you for your sample it is very helpful.

However I get ""data is not defined"

In your example you reference data as import { gridData } from "./data";

and

return { data: gridData,

return { template: Vue.component("columnTemplate", { template: ` <span class="e-icons e-upload"></span>`, data: function() { return { data: {} }; } }) };

My Grid is defined

<ejs-grid id="pmidGrid" ref="grid" :dataSource="pmidList" :rowSelected="pmidRowSelected" :allowSorting="true" :selectionSettings="selectOptions" >

If I assign Data = pmidList the whole app does not load any data.

I've change the request a bit and I hope this is clearer.

I have working :valueAccessor="pubPending"

 pubPending: function(field, data, column) {

      let pending = data["Pending"];

      let ret = "";

      if (pending === "True") {

        ret = "X";

      }

      return ret;

    },

Is there a way to assign an ICON if pending = True ?

Thanks

[Thavasianand Sankaranarayanan]

Hi William, 

Thanks for you update. 

Based on your suggestion we have modified the sample and we have achieved your requirement using the valueAccessor property. 

 

Please refer the below code block and sample link. 

 

<template> 

      <ejs-grid . . . .    :toolbar="toolbar" > 

        <e-columns> 

          <e-column field="OrderID" headerText="Order ID" :isPrimaryKey="true" width="100"></e-column> 

          . . . . . 

          <e-column headerText="Icon" width="120" :valueAccessor="valueAccess"></e-column> 

        </e-columns> 

      </ejs-grid> 

</template> 

<script> 

export default { 

  name: "App", 

  data: () => { 

    return { 

      . . . .  

      toolbar: ["Add", "Edit", "Delete", "Update", "Cancel"] 

    }; 

  }, 

  methods: { 

    valueAccess: function(field, data, column) { 

      const date2 = new Date(); // current date 

      const date1 = data.OrderDate;  // Order date from data source 

      const diffTime = Math.abs(date2 - date1); // find difference 

      const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)); 

      if (diffDays <= 12) { 

        // you can apply whatever conditions you need 

        return '<span class="e-icons e-date"></span>'; // icons from our library 

      } else return '<span class="e-icons e-upload"></span>'; 

    } 

}; 

</script> 

<style> 

@import "https://cdn.syncfusion.com/ej2/material.css"; 

.e-upload:before { 

  content: "\e208"; 

} 

.e-date:before { 

  content: "\e901"; 

} 

.e-icons { 

  color: #00ffff; 

  font-size: 16px; 

} 

</style> 

We have modified the sample in the below link.  

 

Sample Link : https://codesandbox.io/s/vue-template-uxy17 

 

Refer the help documentation. 

 

Link: https://ej2.syncfusion.com/vue/documentation/grid/columns/#valueaccessor 

 

Regards, 

Thavasianand S. 

[William Morgenweck]

FANTASTIC-- Thank you

[Thavasianand Sankaranarayanan]

Hi William, 

 

Thanks for your update. 

 

We are happy that the problem has been resolved at your end. 

 

Regards, 

Thavasianand S.  

[William Morgenweck]

I have another question related to same item.  Is there a way to call valueAccess problematically?    I would like to change the condition that creates the icon.  So if I change the  data.OrderDate  in a function the icon would change 

   this.pmidList[this.pmid_list_index]["Pending"] = False  This would change the data but the    valueAccessor does not fire.

Thanks

[Thavasianand Sankaranarayanan]

Hi William, 

Thanks for your update. 

We have validated and achieved your requirement using grid refresh after changing the required field value in dataSource.  

Please refer the below code snippet. 

btnClick: function(event) {  //achieved in button click 

      this.$refs.gridObj.dataSource[0].OrderDate = new Date("5/5/2019");  // you can change the value whatever you want 

      this.$refs.gridObj.refresh(); 

    } 

Sample Link: https://codesandbox.io/s/vue-template-451ud 

 

Regards, 

Thavasianand S. 

[William Morgenweck]

Great -- I was missing the

his.$refs.gridObj.refresh(); 

[Thavasianand Sankaranarayanan]

Hi William, 

 

Thanks for your update. 

 

We are happy that the problem has been resolved at your end. 

 

Regards, 

Thavasianand S.