e-column problems

[Tomasz Tomczykiewicz]

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

[Pooja Priya Krishna Moorthy]

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. 

Sample – https://www.syncfusion.com/downloads/support/directtrac/general/ze/quickstart-924418272 

 

Please get back to us if you require further assistance on this. 

 

Regards, 

Pooja Priya K. 

[Tomasz Tomczykiewicz]

Thanks for the reply. It helped me.

Best regards,

Tomasz Tomczykiewicz

[Pooja Priya Krishna Moorthy]

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