Add ICON to column

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

Reply | Reply with quote

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.

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

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

Have to validate date value in other column field(Date field)
It’s enough to achieve grid rendering?
Can you please share the output image if possible.
Share your exact requirement with further more detail
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.

Reply | Reply with quote

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

Reply | Reply with quote

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.

<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>

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.

Reply | Reply with quote

William Morgenweck

Replied On October 14, 2019 12:23 PM UTC

FANTASTIC-- Thank you

Reply | Reply with quote

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.

Reply | Reply with quote

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

Reply | Reply with quote

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

}

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

Regards,

Thavasianand S.

Reply | Reply with quote

William Morgenweck

Replied On October 17, 2019 01:32 AM UTC

Great -- I was missing the

his.$refs.gridObj.refresh();

Reply | Reply with quote

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.

Reply | Reply with quote

Thread ID:	Created:	Updated:	Platform:	Replies:
148168	Oct 8,2019 09:35 PM UTC	Oct 17,2019 01:37 PM UTC	Vue	9

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US