Rank 1
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 }); } 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!
8 Answers, 1 is accepted
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
Rank 1
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!
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
Rank 1
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
- 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.
- 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!
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 1If 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
Rank 1
Hello, Stefan,
Unfortunately it returns 1.
I will try to setup example decoupled from SharePoint, so i can send it to you.
Best Regards!
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
Rank 1