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.
|
<template>
<div id="app">
<div id="test">
<ejs-grid ref="grid" :dataSource="data" ...>
<e-columns>
<e-column field="OrderID" headerText="Order ID" textAlign="Right" width="100"></e-column>
<e-column field="CustomerID" headerText="Customer ID" :visible="false" width="100"></e-column> //set visible as false
<e-column field="ShipCountry" :valueAccessor="valueAccess" headerText="Customer name(SC)" width="100"></e-column>
</e-columns>
</ejs-grid>
</div>
</div>
</template>
<script>
...
export default {
data() {
...
},
methods: {
valueAccess(field, data, column) {
return (
". <b><a rel='nofollow' rel='nofollow' href='https://www.ncbi.nlm.nih.gov/pubmed/" +
"' target='_blank'>" +
data["CustomerID"] +
"</a></b> <i> " +
data["ShipCountry"] +
"</i><b> "
);
}
},
...
};
</script>
... |
|
App.vue
<ejs-grid
ref="grid"
:dataSource="data"
:actionBegin="actionBegin"
:queryCellInfo="queryCellInfo"
:actionComplete="actionComplete"
:enableHover='false'
:toolbar="toolbar"
allowPaging="true"
>
</ejs-grid>
methods: {
actionBegin: function(args) {
if (args.requestType === "searching") {
if (args.searchString === "") {
this.flag = false; // prevents the text highlighting when empty string searched
} else {
this.flag = true;
word = args.searchString;
word.toLowerCase(); // this is used for abnormal casing in the text
}
}
},
actionComplete: function(args) {
if (args.requestType === "searching") { // remove the highlight when searching finished
this.flag = false;
}
},
queryCellInfo: function(args) {
if (this.flag === true) {
var cellContent = args.data[args.column.field];
cellContent = cellContent.toString().toLowerCase();
if (cellContent.indexOf(word) >= 0) { // search the character with each cell elements
args.cell.classList.add("customcss"); // add the css to the cell elements
}
}
};
</script>
<style>
@import "https://cdn.syncfusion.com/ej2/material.css";
.e-grid .e-rowcell.customcss { // css for highlighting the text
color: red;
}
</style>
|
