Gantt Wrapper does not update data source

9 posts, 0 answers
  1. Valcho Stoyanov
    Valcho Stoyanov avatar
    4 posts
    Member since:
    Nov 2009

    Posted 20 Sep 2018 Link to this post

    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!

  2. Stefan
    Admin
    Stefan avatar
    2894 posts

    Posted 21 Sep 2018 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. Valcho Stoyanov
    Valcho Stoyanov avatar
    4 posts
    Member since:
    Nov 2009

    Posted 21 Sep 2018 in reply to Stefan Link to this post

    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!

  4. Stefan
    Admin
    Stefan avatar
    2894 posts

    Posted 24 Sep 2018 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  5. Valcho Stoyanov
    Valcho Stoyanov avatar
    4 posts
    Member since:
    Nov 2009

    Posted 25 Sep 2018 Link to this post

    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!

  6. Stefan
    Admin
    Stefan avatar
    2894 posts

    Posted 25 Sep 2018 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  7. Valcho Stoyanov
    Valcho Stoyanov avatar
    4 posts
    Member since:
    Nov 2009

    Posted 25 Sep 2018 Link to this post

    Hello, Stefan,

     

    Unfortunately it returns 1.

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

     

    Best Regards!

  8. Stefan
    Admin
    Stefan avatar
    2894 posts

    Posted 27 Sep 2018 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  9. thanik
    thanik avatar
    1 posts
    Member since:
    Oct 2018

    Posted 05 Oct 2018 in reply to Valcho Stoyanov Link to this post

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

Back to Top