Premium support for our pure JavaScript UI components


Post by david10sing »

Hi,

I am loading the following via project.loadCrudManagerData

{
    "resourceTimeRanges": {
        "rows": [
            {
                "id": 1,
                "resourceId": 15887,
                "startDate": "2021-05-20T00:00:00",
                "endDate": "2021-05-21T00:00:00",
                "name": "Lunch"
            }
        ]
    }
}

I am getting the following error

TypeError: Cannot read property 'getEvents' of undefined
    at ResourceInfoColumn.template (VM471 vendors-node_modules_babel_runtime_helpers_esm_createSuper_js-node_modules_date-io_date-fns_b-28d77b.iframe.bundle.js:376453)
    at ResourceInfoColumn.defaultRenderer (VM471 vendors-node_modules_babel_runtime_helpers_esm_createSuper_js-node_modules_date-io_date-fns_b-28d77b.iframe.bundle.js:376529)
    at Row.renderCell (VM471 vendors-node_modules_babel_runtime_helpers_esm_createSuper_js-node_modules_date-io_date-fns_b-28d77b.iframe.bundle.js:310191)
    at Row.render (VM471 vendors-node_modules_babel_runtime_helpers_esm_createSuper_js-node_modules_date-io_date-fns_b-28d77b.iframe.bundle.js:310040)
    at RowManager.renderRows (VM471 vendors-node_modules_babel_runtime_helpers_esm_createSuper_js-node_modules_date-io_date-fns_b-28d77b.iframe.bundle.js:311466)
    at VM471 vendors-node_modules_babel_runtime_helpers_esm_createSuper_js-node_modules_date-io_date-fns_b-28d77b.iframe.bundle.js:367181
    at SchedulerPro.runWithTransition (VM471 vendors-node_modules_babel_runtime_helpers_esm_createSuper_js-node_modules_date-io_date-fns_b-28d77b.iframe.bundle.js:362318)
    at HorizontalRendering.refreshResources (VM471 vendors-node_modules_babel_runtime_helpers_esm_createSuper_js-node_modules_date-io_date-fns_b-28d77b.iframe.bundle.js:367177)
    at HorizontalRendering.onEventStoreChange (VM471 vendors-node_modules_babel_runtime_helpers_esm_createSuper_js-node_modules_date-io_date-fns_b-28d77b.iframe.bundle.js:366781)
    at SchedulerPro.onInternalEventStoreChange (VM471 vendors-node_modules_babel_runtime_helpers_esm_createSuper_js-node_modules_date-io_date-fns_b-28d77b.iframe.bundle.js:364622)
Last edited by david10sing on Wed May 19, 2021 1:06 pm, edited 1 time in total.

Post by saki »

Give us please more information, ideally a showcase that exhibits this issue. I've tried to call project.loadCrudManagerData with the above data on https://bryntum.com/examples/scheduler-pro/percent-done/ without the above error.


Post by david10sing »

Hi Saki,

I tried to reproduce on your demos but in vain.

Let me see if it still happens on v4.1.3. I am currently on v4.1.0.

Just another question, with your NPM registry, if we were to use it, would that work in our CI/CD pipeline?


Post by saki »

I don't see any reasons why it shouldn't work. Anyway, if you encounter any problems, just let us know and we'll help you to fix them.

Note: Please create a new thread for CI/CD if necessary.


Post by david10sing »

Thank you Saki.

Upgraded to 4.1.3 still getting that error about getEvents. Is the resourceTimeRange extending the resource model?


Post by david10sing »

Saki

Would you guys have a codepen for a react demo and try loadCrudManagerData in a react demo?


Post by saki »

It's enough if you zip the showcase without node_modules and build directory and post it here.


Post by david10sing »

This doesn't work.


const schedulerInstance: Ref<BryntumSchedulerPro> = useRef(null);

useEffect(() => {
    if (rpState.filters && rpState.schedulerInstance) {
      /**
       * Because we are switching from group by project
       * and the other group by options, we need to
       * nullify the tooltipData.
       */
      setTooltipData(null);
      rpDispatch({
        type: Actions.fetchData,
      });

  /**
   * Append filters to url params
   */
  withDeepLink.appendFiltersToURL(rpState.filters);

  /**
   * Need to do this because if the view is grouped
   * a server request will throw an error client side.
   * So we need to expand all the headers first to prevent
   * the error.
   * Also removing all the resources so expanding the groups
   * is not shown client side
   */
  const scheduler = schedulerInstance.current.instance;  <<<<<<< DOESN'T WORK
  scheduler.expandAll();
  scheduler.resourceStore.removeAll();
  scheduler.refresh();

  fetchResources(rpState)
    .then(res => {
      if (!res) {
        throw new Error();
      }
      return res;
    })
    .then(res => {
      /**
       * Loop through the bookings to set time on PTO bookings
       * so they render properly.
       *
       * Also filter out any bookings that end up on a weekend
       */
      res.events.rows = res.events.rows
        .map(event => {
          const isoStartDate = parseISO(event.startDate);
          const isoEndDate = parseISO(event.endDate);
          if (isWeekend(isoStartDate) && isWeekend(isoEndDate)) {
            return;
          }
          if (event.ptoRequestId && isSameDay(isoStartDate, isoEndDate)) {
            event.endDate = event.endDate.replace('00:00:00', '23:59:59');
          }
          return event;
        })
        .filter(event => event);
      rpDispatch({
        type: Actions.setLoadingFalse,
      });
      /**
       * There is an error with group by project and
       * it has been reported to Bryntum.
       *
       * If error occurs, then we force a reload of the page
       */
      try {
        scheduler.project.loadCrudManagerData(res);
      } catch (err) {
        console.log(err);
        window?.utilities?.notification.danger('An error occured. Refreshing Page.');
        setTimeout(() => window.location.reload(), 2000);
      }
    })
    .catch(error => {
      IS_DEV && console.log(error);
    });
}
  }, [rpState.filters, rpState.jq, rpState.reload]);

This block worked when I used the schedulerInstance in a react context.


const schedulerInstance: Ref<BryntumSchedulerPro> = useRef(null);

useEffect(() => {
    if (rpState.filters && rpState.schedulerInstance) {
      /**
       * Because we are switching from group by project
       * and the other group by options, we need to
       * nullify the tooltipData.
       */
      setTooltipData(null);
      rpDispatch({
        type: Actions.fetchData,
      });

  /**
   * Append filters to url params
   */
  withDeepLink.appendFiltersToURL(rpState.filters);

  /**
   * Need to do this because if the view is grouped
   * a server request will throw an error client side.
   * So we need to expand all the headers first to prevent
   * the error.
   * Also removing all the resources so expanding the groups
   * is not shown client side
   */
  const scheduler = rpState.schedulerInstance;  <<<<<<< WORKS
  scheduler.expandAll();
  scheduler.resourceStore.removeAll();
  scheduler.refresh();

  fetchResources(rpState)
    .then(res => {
      if (!res) {
        throw new Error();
      }
      return res;
    })
    .then(res => {
      /**
       * Loop through the bookings to set time on PTO bookings
       * so they render properly.
       *
       * Also filter out any bookings that end up on a weekend
       */
      res.events.rows = res.events.rows
        .map(event => {
          const isoStartDate = parseISO(event.startDate);
          const isoEndDate = parseISO(event.endDate);
          if (isWeekend(isoStartDate) && isWeekend(isoEndDate)) {
            return;
          }
          if (event.ptoRequestId && isSameDay(isoStartDate, isoEndDate)) {
            event.endDate = event.endDate.replace('00:00:00', '23:59:59');
          }
          return event;
        })
        .filter(event => event);
      rpDispatch({
        type: Actions.setLoadingFalse,
      });
      /**
       * There is an error with group by project and
       * it has been reported to Bryntum.
       *
       * If error occurs, then we force a reload of the page
       */
      try {
        scheduler.project.loadCrudManagerData(res);
      } catch (err) {
        console.log(err);
        window?.utilities?.notification.danger('An error occured. Refreshing Page.');
        setTimeout(() => window.location.reload(), 2000);
      }
    })
    .catch(error => {
      IS_DEV && console.log(error);
    });
}
  }, [rpState.filters, rpState.jq, rpState.reload]);

Why would this matter just because I am now sending resourceTimeRanges in the response payload?


Post by saki »

I can only guess as we can only read the above code.

Let's take our resource-histogram SchedulerPro example, simplified App.js file as a reference:

function App() {
    const schedulerRef = useRef(null);
    const histogramRef = useRef(null);

    // setup partnership between scheduler and histogram
    useEffect(() => {
        histogramRef.current.instance.partner = schedulerRef.current.instance;
    }, []);

    // ... etc
    return (
        <Fragment>
            <BryntumSchedulerPro ref={schedulerRef} {...schedulerConfig} />
            <BryntumResourceHistogram ref={histogramRef} {...histogramConfig} />
        </Fragment>

As we can see here, we use 2 refs schedulerRef and histogramRef that are passed into the tags as ref={...}. Then we can use them in useEffect().

Is your case any different?

Again, we could provide you much faster and more effective help if we could run your code; if we had a runnable showcase.


Post by david10sing »

Hi Saki,

I am doing exactly this but don't know why it's causing an issue. I've also got an instance save in a react context and when I load on that it works.


Post Reply