Our pure JavaScript Scheduler component


Post by shivambryntum01 »

Hi,
I am facing an issue with the resourceInfo columns. I am using BryntumScheduler from "@bryntum/scheduler-react". I have 2 props resources and columns and what i need is updating the columns array based on resources update(few more dependencies may also be there for which columns needs to be updated). Just for the test case, initially my resources state is empty and on a button click i am updating the resources state with dummy resources. With resources update, columns will be update again. But as soon as this is happening, viewpreset header just disappears. Could it be that columns prop need to be a static object and retriggering/updating it is causing rerendering issues? To note, when i am not re-updating the columns, its working fine. I am sharing few code snippets and the dependencies that i am using. Btw, i am running this in next. I am not sure if its a bug or i am missing something.

index.tsx

import type { NextPage } from "next";
import dynamic from "next/dynamic";
import { useMemo, useState } from "react";

//dynamic import for scheduler
const BryntumScheduler = dynamic(() => import("../import"), {
  ssr: false,
});
const resources = [
  { id: "r1", name: "Arcady", role: "LTL" },
  { id: "r2", name: "Dave", role: "LTL" },
  { id: "r3", name: "Henrik", role: "Gulf relay" },
  { id: "r4", name: "Linda", role: "Gulf relay" },
  { id: "r5", name: "Celia", role: "LTL" },
  { id: "r6", name: "Lisa", role: "LTL" },
  { id: "r7", name: "Angelo", role: "LTL" },
];

const Home: NextPage = () => {
  const [drivers, setDrivers] = useState([] as any);

  const getColumns = useMemo(
    () => [
      {
        type: "resourceInfo",
        text: "",
        width: 200,
        // renderer: (data: any) => {
        //   if (data?.record?.data?.status === "unassigned") {
        //     data?.row.eachElement(
        //       (el: any) => (el.style.background = "#DFE8F8")
        //     );
        //     return <Component1 />;
        //   } else {
        //     data?.row.eachElement(
        //       (el: any) => (el.style.background = "inherit")
        //     );
        //     return (
        //       <Component2 />
        //     );
        //   }
        // },
      },
    ],
    [drivers]
  );

  return (
    <>
      <button
        onClick={() => {
          setDrivers(resources);
        }}
      >
        Click
      </button>

  <BryntumScheduler
    resources={drivers}
    columns={getColumns}
  />
</>
  );
};
export default Home;

import.tsx

import { BryntumScheduler } from "@bryntum/scheduler-react";
export default BryntumScheduler;

package.json dependencies

  "dependencies": {
    "@bryntum/scheduler-react": "^5.2.4",
    "@bryntum/scheduler": "npm:@bryntum/scheduler-trial@5.2.4",
    "@emotion/react": "^11.9.3",
    "@emotion/styled": "^11.9.3",
    "@mui/icons-material": "^5.2.4",
    "@mui/material": "^5.9.2",
    "next": "12.2.3",
    "react": "18.2.0",
    "react-dom": "18.2.0"
  },
  "devDependencies": {
    "@types/node": "18.6.2",
    "@types/react": "18.0.15",
    "@types/react-dom": "18.0.6",
    "eslint": "8.20.0",
    "eslint-config-next": "12.2.3",
    "typescript": "4.7.4"
  }

Post by alex.l »

Hi shivambryntum01,

At a first glance it might be because column is readOnly config https://bryntum.com/products/scheduler/docs/api/Scheduler/view/Scheduler#property-columns
It cannot be updated after initialization. Please follow the link to see example how to manage that at runtime.

Accepts column definitions for the grid during initialization. They will be used to create Column instances that are added to a ColumnStore.

At runtime it is read-only and returns the ColumnStore.

All the best,
Alex


Post by shivambryntum01 »

Hi Alex,
So by looking at the docs the only way to dynamically update the columns is by using the store CRUD operation methods? https://bryntum.com/products/scheduler/docs/api/Core/data/mixin/StoreCRUD#function-add . What if am not maintaining the instance and also wouldn't this create a difference pattern in my own state and the bryntum store? I can use ref to update it but just to confirm is this the only way available right now to update the columns because it would be easier to simply update the columnStore like we have resourceStore and eventStore just by using class props?


Post by alex.l »

You can't bind, but you can set columnStore.data, same as for other stores.
https://bryntum.com/products/scheduler/docs/api/Grid/data/ColumnStore#property-data

Or add/remove/removeAll , as you mentioned.

All the best,
Alex


Post Reply