This is a migrated thread and some comments may be shown as answers.

Show/Hide columns in gantt list

6 Answers 75 Views
Gantt
This is a migrated thread and some comments may be shown as answers.
Vedad
Top achievements
Rank 1
Iron
Veteran
Iron
Vedad asked on 14 Nov 2019, 11:22 AM

Hi,

I am aware that hideColumn/showColumn is not current option for gantt widget, but I need to provide different views of columns based on user preferences (click on menu). Also, I already upvoted feature request.

Is there any reasonable way to do this beside deleting and redrawing complete gantt with different settings.

Use case is something like:

Default view contains Title, Start, End

View One contains: Title, Start, End, Percent

View Two contains: Title, Percent 

When I click button "View One" it simply adds column percent to the view (data is present in datasource).

 

Thank you and regards.

 

6 Answers, 1 is accepted

Sort by
0
Ivan Danchev
Telerik team
answered on 18 Nov 2019, 11:15 AM

Hello Vedad,

Consider hiding/showing the columns with jQuery, for example in the Gantt's dataBound event handler:

$(".k-gantt .k-gantt-layout th").eq(3).hide();
$(".k-gantt .k-gantt-layout .k-grid-content tr td:last-child").hide();

Regards,
Ivan Danchev
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Ivan Danchev
Telerik team
answered on 18 Nov 2019, 11:37 AM

Vedad,

A small correction to the second selector, so that only the cells in the treelist section are affected:

$(".k-gantt .k-gantt-layout th").eq(3).hide();
$(".k-gantt .k-gantt-layout .k-treelist .k-grid-content tr td:last-child").hide();

Regards,
Ivan Danchev
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Vedad
Top achievements
Rank 1
Iron
Veteran
Iron
answered on 18 Nov 2019, 01:37 PM

Hi Ivan, 

Thank you for the response and suggestion. I do similar things on grid, but problem is that here columns positions may vary depending on client choice, thats why I tried to work by name.

However, I will try and let you know.

Thank you very much.

0
Ivan Danchev
Telerik team
answered on 20 Nov 2019, 10:16 AM

Hi Vedad,

You can use the title of the column to find it, then get its index and hide the header and the cells in that column. Here's an example for a column with title "Start Time":

var index = $(".k-gantt .k-gantt-layout th[data-title='Start Time']").index();
$(".k-gantt .k-gantt-layout th[data-title='Start Time']").hide();
$(".k-gantt .k-gantt-layout .k-treelist  .k-grid-content tr td:nth-child(" + index + ")").hide();

Regards,
Ivan Danchev
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Vedad
Top achievements
Rank 1
Iron
Veteran
Iron
answered on 21 Apr 2020, 01:56 PM

Hi Ivan, sorry for waiting for so long to answer. I finally got to try your suggestion, and I had to adjust a little bit. 

$(".k-gantt .k-gantt-layout .k-treelist .k-grid-content tr td:nth-child(" + index + ")").hide();

index here should be +1 as far as I remember nth-child starts from 1.

Also I had problems because my columns had width, so I had to add resizing of the columns like:

$(".k-gantt .k-gantt-layout .k-treelist .k-grid-header-wrap col:nth-child(1)").width(0);
$(".k-gantt .k-gantt-layout .k-treelist .k-grid-content col:nth-child(1)").width(0);

Basically, this solves problem as well (even without hide).

0
Accepted
Ivan Danchev
Telerik team
answered on 23 Apr 2020, 01:11 PM

Hi Vedad,

I'm glad you've found an alternative approach - setting the columns width, and nice catch of that oversight on my part with regard to the index. Indeed the "nth-child" selector index starts with 1 so the index should be incremented accordingly.

Regards,
Ivan Danchev
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Tags
Gantt
Asked by
Vedad
Top achievements
Rank 1
Iron
Veteran
Iron
Answers by
Ivan Danchev
Telerik team
Vedad
Top achievements
Rank 1
Iron
Veteran
Iron
Share this question
or