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

Add ICON to column

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


9 Replies

TS Thavasianand Sankaranarayanan Syncfusion Team October 9, 2019 01:53 PM UTC

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. 


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 

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



WM William Morgenweck October 12, 2019 04:39 PM UTC

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



TS Thavasianand Sankaranarayanan Syncfusion Team October 14, 2019 07:30 AM UTC


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> 

.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.  
 
 
Refer the help documentation. 
 
 
Regards, 
Thavasianand S. 



WM William Morgenweck October 14, 2019 12:23 PM UTC

FANTASTIC-- Thank you


TS Thavasianand Sankaranarayanan Syncfusion Team October 14, 2019 01:29 PM UTC

Hi William, 
 
Thanks for your update. 
 
We are happy that the problem has been resolved at your end. 
 
Regards, 
Thavasianand S.  



WM William Morgenweck October 14, 2019 05:52 PM UTC

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


TS Thavasianand Sankaranarayanan Syncfusion Team October 15, 2019 01:12 PM UTC

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(); 
    } 

 
Regards, 
Thavasianand S. 



WM William Morgenweck October 17, 2019 01:32 AM UTC

Great -- I was missing the

his.$refs.gridObj.refresh(); 




TS Thavasianand Sankaranarayanan Syncfusion Team October 17, 2019 01:37 PM UTC

Hi William, 
 
Thanks for your update. 
 
We are happy that the problem has been resolved at your end. 
 
Regards, 
Thavasianand S.  


Loader.
Live Chat Icon For mobile
Up arrow icon