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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Add ICON to column

Thread ID:

Created:

Updated:

Platform:

Replies:

148168 Oct 8,2019 09:35 PM UTC Oct 17,2019 01:37 PM UTC Vue 9
loading
Tags: Data Grid
William Morgenweck
Asked On October 8, 2019 09:35 PM UTC

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 [Syncfusion]
Replied On 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. 


William Morgenweck
Replied On 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


Thavasianand Sankaranarayanan [Syncfusion]
Replied On 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. 


William Morgenweck
Replied On October 14, 2019 12:23 PM UTC

FANTASTIC-- Thank you

Thavasianand Sankaranarayanan [Syncfusion]
Replied On 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.  


William Morgenweck
Replied On 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

Thavasianand Sankaranarayanan [Syncfusion]
Replied On 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. 


William Morgenweck
Replied On October 17, 2019 01:32 AM UTC

Great -- I was missing the

his.$refs.gridObj.refresh(); 



Thavasianand Sankaranarayanan [Syncfusion]
Replied On 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.  


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon