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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

e-column problems

Thread ID:

Created:

Updated:

Platform:

Replies:

145651 Jul 2,2019 11:28 AM UTC Jul 4,2019 05:14 PM UTC Vue 3
loading
Tags: Gantt Chart
Tomasz Tomczykiewicz
Asked On July 2, 2019 11:28 AM UTC

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 [Syncfusion]
Replied On 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. 


Tomasz Tomczykiewicz
Replied On July 3, 2019 01:32 PM UTC

Thanks for the reply. It helped me.

Best regards,
Tomasz Tomczykiewicz

Pooja Priya Krishna Moorthy [Syncfusion]
Replied On 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 
 


CONFIRMATION

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.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon 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.Close Icon

Live Chat Icon For mobile
Live Chat Icon