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.
Thread ID: |
Created: |
Updated: |
Platform: |
Replies: |
| 149146 | Nov 15,2019 04:11 PM UTC | Nov 28,2019 12:43 PM UTC | Vue | 5 |
|
Tags: Data Grid |
|
<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>
|
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.
This page will automatically be redirected to the sign-in page in 10 seconds.
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.
