Hi Tomasz,
Please find the response as below.
Query 1: I want to have empty header text, but when I pass an empty string to :header-text props it displays the name of the field.
Response:
By using Gantt headerCellInfo client-side event, we can modify the header text. Please find the code example below.
|
<template>
<div>
<ejs-gantt ref='gantt' :dataSource="data" id="GanttContainer"
:taskFields="taskFields" :height="height" :headerCellInfo="headerCellInfo">
//...
</ejs-gantt>
</div>
</template>
<script>
export default {
//...
methods: {
headerCellInfo: function(args) {
if(args.cell.colIndex == 0){
args.node.innerText = ""
}
}
},
};
</script>
|
We can also pass an empty string(with a space) to a header text property of gantt columns to have empty header text. Please find the code example below.
|
<ejs-gantt ref='gantt' :dataSource="data" id="GanttContainer"
:taskFields="taskFields" :height="height" :headerCellInfo="headerCellInfo">
<e-columns>
<e-column field='StartDate' headerText=' ' width='150'></e-column>
//...
</e-columns>
</ejs-gantt> |
Query 2: I want to dynamically hide/show column but :visibility props works only for the first time and after that, it ignores the value of this props.
Response:
We can dynamically hide/show the columns by using hideColumn and ShowColumn methods of Gantt control.
Please find the code example below.
|
<template>
<div>
<ejs-button ref='hide' @click.native='hideshow'>Hide/Show</ejs-button>
<ejs-gantt ref='gantt' :dataSource="data" id="GanttContainer">
//...
</ejs-gantt>
</div>
</template>
<script>
export default {
//...
methods: {
hideshow: function() {
if(this.$refs.gantt.getGridColumns()[1].visible)
this.$refs.gantt.hideColumn('TaskName','field')
else
this.$refs.gantt.ShowColumn('TaskName','field')
},
},
};
</script> |
Please find the code example below.
Please get back to us if you require further assistance on this.
Regards,
Pooja Priya K.
