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. Image for the cookie policy date

e-column problems

Hi,

I defined custom columns by <e-column> tag and I have two problems. 

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

Best regards,
Tomasz Tomczykiewicz

3 Replies

PP Pooja Priya Krishna Moorthy Syncfusion Team July 3, 2019 11:56 AM UTC

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. 



TT Tomasz Tomczykiewicz July 3, 2019 01:32 PM UTC

Thanks for the reply. It helped me.

Best regards,
Tomasz Tomczykiewicz


PP Pooja Priya Krishna Moorthy Syncfusion Team July 4, 2019 05:14 PM UTC

Hi Thomasz, 
 
Most welcome. Kindly get in touch with us, if you require further assistance. We are always happy in assisting you.   
 
Regards, 
Pooja Priya K 
 


Loader.
Live Chat Icon For mobile
Up arrow icon