Hi,
I am trying to customize cell styles by following the example given in https://ej2.syncfusion.com/vue/documentation/grid/cell/#customize-cell-styles.
:allowPaging="true" :pageSettings='pageSettings'
:dataBound="dataBound"
:searchSettings='searchOptions' :toolbar='toolbarOptions'
:allowTextWrap='true' :textWrapSettings='wrapSettings'
:queryCellInfo='customiseCell'
>
computed:{
...mapState({
case_list: state => state.caseList.case_list
}),
},
created() {
this.$store.dispatch('getCaseList', {id: this.$route.params.suite_id, level: 1})
},
methods: {
customiseCell: function(args) {
if (args.column.field === 'case_valid') {
console.log(args)
if (args.data['case_valid'] === 1) {
args.cell.classList.add('valid');
}
else if (args.data['case_valid'] === 0) {
args.cell.classList.add('not-valid');
}
}
}
}
After the data is populated in grid, I can see the class of the case_valid column has valid or not-valid (shown as class="e-rowcell valid" or class="e-rowcell not-valid"), but the css style is not in effect. And the console output from console.log(args) is pointing to the cell of the last column of each row.
I wrote one sample: https://codesandbox.io/s/8np6rr2819
