Gantt Wrapper does not update data source

[Valcho Stoyanov]

Hello,

Straight to the problem:

My parent component prepares the data for the Gantt

async componentDidMount() {
    const items = await this.utility.GetListItems();
    const taskDataSourceWithInformation = await this.utility.GetKendoGanttDataSource(items);
    this.setState({
      data: taskDataSourceWithInformation,
      allProjects: items
    });
  }

public render(): React.ReactElement<IGanttViewProps> {
    const result = this.state.data ? (
      <div>
        <IconButton onClick={() => this.setState({showPanel: true})} />
        <GanttContainer data={this.state.data} />
      </div>
    ) : null;
    return result;
  }

 

First problem: When I click the button, that sets the showPanel variable to true (it does only that), the Gantt loses all its data, then when I click one of the Gantt view buttons, the data shows back.

However, i managed to workaround that with this method (i am not proud of it). I will appreciate it, if you give me better solution.

private onFilterButtonClick = async () => {
  this.selected = $("li.k-state-selected");

  this.setState(
    {
      showPanel:true
    },
    () => {
      $("li." + this.selected[0].classList[1]).click();
    }
  );
};

 

Ok. Now i want to filter my Gantt data. When i pass different, filtered data source to the "GanttContainer" components (which contains the Gantt), it does not update.

I tried to set it with setDataSource, but i dont know where that must happen and how to do it.

Can you help me with both my problems please.

 

Best Regards!

[Stefan]

Hello, Valcho,

Thank you for the details and the code.

Regarding the questions:

1) I tried replicating this issue, but it never occurred on my end and I think I have a small detail missing. At the end of this post, I will link an example, where you can try to replicate it and I will be happy to take a look at it.

2) As for changing the data. I can suggest for example to use the componentWillReceiveProps event and using the data method of the dataSource to set the new data:

https://docs.telerik.com/kendo-ui/api/javascript/data/datasource/methods/data

I made an example demonstrating this:

https://stackblitz.com/edit/react-adpdjh?file=app/main.js

I will be expecting the modified example to continue working on the first listed issue.

Regards,
Stefan
Progress Telerik

[Valcho Stoyanov]

Hello, Stefan,

Thank you for your answer.

For some reason, i get "TypeError: Cannot read property 'dataSource' of undefined" when the code reaches "componentWillReceiveProps". Do you have any clue why is that?

 

Best Regards!

[Stefan]

Hello, Valcho,

This can occur if the Gantt DOM element is not visible on the page at that time.

In the first post, it was mentioned that the Gantt is inside a container that is shown and hidden.

I can suggest placing a debbuger inside the "componentWillReceiveProps" event to observe if the Gantt DOM element is on the page.

If it is not, please investigate if there is a code in the application that removes it.

If sending an example is possible, I will be happy to take a look and it and help in locating of the issue.


Regards,
Stefan
Progress Telerik

[Valcho Stoyanov]

Hello, Stefan,

Sorry for the lack of information in my previous post.

public componentWillReceiveProps(props) {
  let ganttElement = $('[data-role="gantt"]');
  let gantt = ganttElement.data("kendoGantt"); <-- This one is undefined
  gantt.dataSource.data(this.props.data);
}

 

The Two difference between my code and the example, that you first send  

1. the way that i get the data for the Gantt. I don't think that is the problem, because it is populated with data on the initial loading, the problem is with updating the DS.
2. I have two custom views

 

Some things, that i will mention, but i don't think they are relevant:

I am in Sharepoint Framework context.

I use these versions for the Gantt:

"@progress/kendo-gantt-react-wrapper": "^2018.2.719",
"@progress/kendo-theme-default": "^2.54.1",
"@progress/kendo-ui": "^2018.2.806",

The imports in the file with the Gantt control in it are 

import "@progress/kendo-theme-default/dist/all.css";
import "@progress/kendo-ui";
import { Gantt } from "@progress/kendo-gantt-react-wrapper";

 

Best Regards!

[Stefan]

Hello, Valcho,

Thank you for the additional details.

The gantt variable is undefined, but this could be because the actual DOM element is not available.

Please check if an element with data-role gantt is found:

componentWillReceiveProps(props){
  let ganttElement = $('[data-role="gantt"]');
  console.log(ganttElement.length) <--- This should return 1

If it returns 0, please try setting a setTimeout function as the element may not be available at that exact moment.

If this returns 1, and the error keep persists, we will need a runnable example of this, so we can closely debug what could be causing this. 

Regards,
Stefan
Progress Telerik

[Valcho Stoyanov]

Hello, Stefan,

 

Unfortunately it returns 1.

I will try to setup example decoupled from SharePoint, so i can send it to you.

 

Best Regards!

[Stefan]

Hello, Valcho,

The issue turned out to be connected to an unmodified version of jQuery that is available during the componentWillReceiveProps event.

A possible solution, in this case, will be to get the widget reference in a variable inside the componentDidMount event and then use the same reference when need in the componentWillReceiveProps event or any other place.

Regards,
Stefan
Progress Telerik

[thanik]

ขอบคุณมากครับสำหรับความรู้เป็นประโยชน์มากเลยนะ :AO