Show/Hide columns in gantt list

[Vedad]

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.

 

[Ivan Danchev]

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

[Ivan Danchev]

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

[Vedad]

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.

[Ivan Danchev]

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

[Vedad]

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

[Ivan Danchev]

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