Filter field not updated when replacing column with same id

[marciogurka]

Forum post

Using the following code on our Basic Scheduler Typescript example

/**
 * Application
 */
import "./App.scss";
import { BryntumScheduler } from "@bryntum/scheduler-react";
import { useEffect, useRef, useState } from "react";
import React from "react";
import { ColumnConfig, ColumnStore, DateHelper, GridColumnConfig, PresetManager, TreeColumnConfig } from "@bryntum/scheduler";

function AccessDenied() {
  //region Data
  const schedulerRefcheck = useRef<BryntumScheduler>(null);
  const schedulerRefcheck1 = useRef<BryntumScheduler>(null);
  const // Group by capacity, in steps of 50
    sizeGrouper = ({ deptName }: any) => `${deptName}`;
  const [isTreeView, setIsTreeView] = useState(false);
  const [presetData, setpresetData] = useState("dayAndWeek");
  const [firstDate, setFirstDate] = useState(new Date(2017, 0, 1));
  const [endDate, setEndDate] = useState(new Date(2017, 0, 7));

  const [colmunforview, setcolmunforview] = useState<Partial<GridColumnConfig>[]>([
    {
      type: "tree",
      id: "name",
      text: "Name",
      field: "name",
      width: 130,
      filterable: {
        filterField: {
          type: "text",
          value: "",
          placeholder: "Search by Resource",
        },
      }
    }
  ]);

  const [colmunforview1, setcolmunforview1] = useState([
    { type: "tree", text: "Name", field: "name", width: 130 },
  ]);

  const [featuresforview, setfeaturesforview] = useState({
    filterBar: true,
    tree: true,
    treeGroup: {
      // Initially transformed with a single parent level based on capacity
      levels: [sizeGrouper],
    },
  });

  useEffect(() => {}, [isTreeView]);
  const [resourceData, setResourceData] = React.useState<any[]>([
    { id: "r1", name: "Mike", deptName: "abc" },
    { id: "r2", name: "Linda", deptName: "mmm" },
    { id: "r3", name: "Don", deptName: "abm" },
    { id: "r4", name: "Karen", deptName: "pqr" },
    { id: "r5", name: "Doug", deptName: "mnv" },
    { id: "r6", name: "Peter", deptName: "pqr" },
    { id: "r7", name: "Sam", deptName: "abc" },
    { id: "r8", name: "Melissa", deptName: "mnv" },
    { id: "r9", name: "John", deptName: "abc" },
    { id: "r10", name: "Ellen", deptName: "pqr" },
  ]);

  const [eventsData, seteventsData] = React.useState<any[]>([
    {
      id: 1,
      resourceId: "r1",
      startDate: new Date(2017, 0, 1, 10),
      endDate: new Date(2017, 0, 1, 12),
      name: "Click me",
      iconCls: "b-fa b-fa-mouse-pointer",
    },
    {
      id: 2,
      resourceId: "r2",
      startDate: new Date(2017, 0, 1, 12),
      endDate: new Date(2017, 0, 1, 13, 30),
      name: "Drag me",
      iconCls: "b-fa b-fa-arrows-alt",
    },
    {
      id: 3,
      resourceId: "r3",
      startDate: new Date(2017, 0, 1, 14),
      duration: 2,
      durationUnit: "h",
      name: "Double click me",
      eventColor: "purple",
      iconCls: "b-fa b-fa-mouse-pointer",
    },
    {
      id: 4,
      resourceId: "r4",
      startDate: new Date(2017, 0, 1, 8),
      endDate: new Date(2017, 0, 1, 11),
      name: "Right click me",
      iconCls: "b-fa b-fa-mouse-pointer",
    },
    {
      id: 5,
      resourceId: "r5",
      startDate: new Date(2017, 0, 1, 15),
      endDate: new Date(2017, 0, 1, 17),
      name: "Resize me",
      iconCls: "b-fa b-fa-arrows-alt-h",
    },
    {
      id: 6,
      resourceId: "r6",
      startDate: new Date(2017, 0, 1, 16),
      endDate: new Date(2017, 0, 1, 19),
      name: "Important meeting (read-only)",
      iconCls: "b-fa b-fa-exclamation-triangle",
      eventColor: "red",
      readOnly: true,
    },
    {
      id: 7,
      resourceId: "r6",
      startDate: new Date(2017, 0, 1, 6),
      endDate: new Date(2017, 0, 1, 8),
      name: "Sports event",
      iconCls: "b-fa b-fa-basketball-ball",
    },
    {
      id: 8,
      resourceId: "r7",
      startDate: new Date(2017, 0, 1, 9),
      endDate: new Date(2017, 0, 1, 11, 30),
      name: "Dad's birthday!",
      iconCls: "b-fa b-fa-birthday-cake",
      // Custom styling from data
      style: "background-color : teal; font-size: 18px",
      // Prevent default styling
      eventStyle: "none",
    },
  ]);

  const resources = [
      { id: "r1", name: "Mike", deptName: "abc" },
      { id: "r2", name: "Linda", deptName: "mmm" },
      { id: "r3", name: "Don", deptName: "abm" },
      { id: "r4", name: "Karen", deptName: "pqr" },
      { id: "r5", name: "Doug", deptName: "mnv" },
      { id: "r6", name: "Peter", deptName: "pqr" },
      { id: "r7", name: "Sam", deptName: "abc" },
      { id: "r8", name: "Melissa", deptName: "mnv" },
      { id: "r9", name: "John", deptName: "abc" },
      { id: "r10", name: "Ellen", deptName: "pqr" },
    ],
    events = [
      {
        id: 1,
        resourceId: "r1",
        startDate: new Date(2017, 0, 1, 10),
        endDate: new Date(2017, 0, 1, 12),
        name: "Click me",
        iconCls: "b-fa b-fa-mouse-pointer",
      },
      {
        id: 2,
        resourceId: "r2",
        startDate: new Date(2017, 0, 1, 12),
        endDate: new Date(2017, 0, 1, 13, 30),
        name: "Drag me",
        iconCls: "b-fa b-fa-arrows-alt",
      },
      {
        id: 3,
        resourceId: "r3",
        startDate: new Date(2017, 0, 1, 14),
        duration: 2,
        durationUnit: "h",
        name: "Double click me",
        eventColor: "purple",
        iconCls: "b-fa b-fa-mouse-pointer",
      },
      {
        id: 4,
        resourceId: "r4",
        startDate: new Date(2017, 0, 1, 8),
        endDate: new Date(2017, 0, 1, 11),
        name: "Right click me",
        iconCls: "b-fa b-fa-mouse-pointer",
      },
      {
        id: 5,
        resourceId: "r5",
        startDate: new Date(2017, 0, 1, 15),
        endDate: new Date(2017, 0, 1, 17),
        name: "Resize me",
        iconCls: "b-fa b-fa-arrows-alt-h",
      },
      {
        id: 6,
        resourceId: "r6",
        startDate: new Date(2017, 0, 1, 16),
        endDate: new Date(2017, 0, 1, 19),
        name: "Important meeting (read-only)",
        iconCls: "b-fa b-fa-exclamation-triangle",
        eventColor: "red",
        readOnly: true,
      },
      {
        id: 7,
        resourceId: "r6",
        startDate: new Date(2017, 0, 1, 6),
        endDate: new Date(2017, 0, 1, 8),
        name: "Sports event",
        iconCls: "b-fa b-fa-basketball-ball",
      },
      {
        id: 8,
        resourceId: "r7",
        startDate: new Date(2017, 0, 1, 9),
        endDate: new Date(2017, 0, 1, 11, 30),
        name: "Dad's birthday!",
        iconCls: "b-fa b-fa-birthday-cake",
        // Custom styling from data
        style: "background-color : teal; font-size: 18px",
        // Prevent default styling
        eventStyle: "none",
      },
    ];

  //endregion

  function onbuttonclick() {
    setfeaturesforview({
      filterBar: true,
      tree: true,
      treeGroup: {
        // Initially transformed with a single parent level based on capacity
        levels: [sizeGrouper],
      },
    });

    if (!isTreeView) {
      (schedulerRefcheck.current?.instance.columns as ColumnStore).remove(
        "name"
      );
      (schedulerRefcheck.current?.instance.columns as ColumnStore).insert(0, {
        type: "tree",
        id: "name",
        text: "project",
        field: "name",
        width: 150,
        filterable: {
          filterField: {
            type: "text",
            value: "",
            placeholder: "test placeholder 2",
          },
        },
      });

      setResourceData([
        { id: "r1", name: "Mike", deptName: "stp" },
        { id: "r2", name: "Linda", deptName: "stp" },
        { id: "r3", name: "Don", deptName: "stp" },
        { id: "r4", name: "Karen", deptName: "stp" },
        { id: "r5", name: "Doug", deptName: "stp" },
        { id: "r6", name: "Peter", deptName: "stp" },
        { id: "r7", name: "Sam", deptName: "stp" },
        { id: "r8", name: "Melissa", deptName: "stp" },
        { id: "r9", name: "John", deptName: "stp" },
        { id: "r10", name: "Ellen", deptName: "stp" },
      ]);

      console.log("sdf");
      setIsTreeView(true);
    } else {
      (schedulerRefcheck.current?.instance.columns as ColumnStore).remove(
        "name"
      );
      (schedulerRefcheck.current?.instance.columns as ColumnStore).insert(0, {
        type: "tree",
        id: "name",
        text: "cost",
        field: "name",
        width: 150,
        filterable: {
          filterField: {
            type: "text",
            value: "",
            placeholder: "test placeholder 3",
          },
        },
      });

      setResourceData([
        { id: "r1", name: "Mike", deptName: "abc" },
        { id: "r2", name: "Linda", deptName: "mmm" },
        { id: "r3", name: "Don", deptName: "abm" },
        { id: "r4", name: "Karen", deptName: "pqr" },
        { id: "r5", name: "Doug", deptName: "mnv" },
        { id: "r6", name: "Peter", deptName: "pqr" },
        { id: "r7", name: "Sam", deptName: "abc" },
        { id: "r8", name: "Melissa", deptName: "mnv" },
        { id: "r9", name: "John", deptName: "abc" },
        { id: "r10", name: "Ellen", deptName: "pqr" },
      ]);
      console.log("sdf1");
      setIsTreeView(false);
    }
  }
  return (
    <>
      <div
        style={{ display: isTreeView ? "block" : "block", height: "3000px" }}
      >
        <BryntumScheduler
          resources={resourceData}
          events={eventsData}
          startDate={firstDate}
          endDate={endDate}
          presets={newPresets}
          viewPreset={presetData}
          rowHeight={50}
          barMargin={5}
          multiEventSelect={true}
          columns={colmunforview}
          ref={schedulerRefcheck}
          features={featuresforview}
        />
      </div>

      <div style={{ display: !isTreeView ? "block" : "block" }}></div>
      {/* } */}

      <div onClick={onbuttonclick}>clickhere</div>
      {/* <div style={{ display: "flex", alignItems: "center", justifyContent: "center", height: "100vh" }}>

                <div>
                    <img src={accessDenied} style={{ display: "block", marginLeft: "auto", marginRight: "auto", width: "20%" }} />

                    <p style={{ textAlign: "center", fontWeight: "bold", fontSize: "x-large" }}>
                        Missing Permissions
                    </p>
                    <p style={{ textAlign: "center" }}>
                        Your profile does not allow access to the Resource Scheduler. Please contact your system administrator to obtain access.
                    </p>
                </div>
            </div> */}
    </>
  );
}

// //Registering the preset for timeaxiscolunmn into preset manager

PresetManager.registerPreset("twelveHoursPreset", {
  name: "twelveHoursPreset", // A human-readable name provided to be used in GUI, e.i. preset picker, etc.
  tickWidth: 60, // Time column width in horizontal mode
  tickHeight: 50, // Time column height in vertical mode
  displayDateFormat: "DD/MM/YYYY HH:mm", // Controls how dates will be displayed in tooltips etc

  shiftIncrement: 1, // Controls how much time to skip when calling shiftNext and shiftPrevious.
  shiftUnit: "day", // Valid values are 'millisecond', 'second', 'minute', 'hour', 'day', 'week', 'month', 'quarter', 'year'.
  defaultSpan: 12, // By default, if no end date is supplied to a view it will show 12 hours

  timeResolution: {
    // Dates will be snapped to this resolution
    unit: "hour", // Valid values are 'millisecond', 'second', 'minute', 'hour', 'day', 'week', 'month', 'quarter', 'year'.
    increment: 12,
  },

  headers: [
    // This defines your header rows from top to bottom
    {
      // For each row you can define 'unit', 'increment', 'dateFormat', 'renderer', 'align', and 'thisObj'
      unit: "day",
      dateFormat: "ddd DD/MM",
    },
    {
      unit: "hour",
      dateFormat: "HH:mm",
      increment: 12,
    },
  ],

  columnLinesFor: 1,
});

PresetManager.registerPreset("sixHoursPreset", {
  name: "sixHoursPreset", // A human-readable name provided to be used in GUI, e.i. preset picker, etc.
  tickWidth: 60, // Time column width in horizontal mode
  tickHeight: 50, // Time column height in vertical mode
  displayDateFormat: "DD/MM/YYYY HH:mm", // Controls how dates will be displayed in tooltips etc

  shiftIncrement: 1, // Controls how much time to skip when calling shiftNext and shiftPrevious.
  shiftUnit: "day", // Valid values are 'millisecond', 'second', 'minute', 'hour', 'day', 'week', 'month', 'quarter', 'year'.
  defaultSpan: 12, // By default, if no end date is supplied to a view it will show 12 hours
  columnLinesFor: 1,
  timeResolution: {
    // Dates will be snapped to this resolution
    unit: "hour", // Valid values are 'millisecond', 'second', 'minute', 'hour', 'day', 'week', 'month', 'quarter', 'year'.
    increment: 6,
  },

  headers: [
    // This defines your header rows from top to bottom
    {
      // For each row you can define 'unit', 'increment', 'dateFormat', 'renderer', 'align', and 'thisObj'
      unit: "day",
      dateFormat: "ddd DD/MM",
    },
    {
      unit: "hour",
      dateFormat: "HH:mm",
      increment: 6,
    },
  ],
});

PresetManager.registerPreset("threeHoursPreset", {
  name: "threeHoursPreset", // A human-readable name provided to be used in GUI, e.i. preset picker, etc.
  tickWidth: 60, // Time column width in horizontal mode
  tickHeight: 50, // Time column height in vertical mode
  displayDateFormat: "DD/MM/YYYY HH:mm", // Controls how dates will be displayed in tooltips etc

  shiftIncrement: 1, // Controls how much time to skip when calling shiftNext and shiftPrevious.
  shiftUnit: "day", // Valid values are 'millisecond', 'second', 'minute', 'hour', 'day', 'week', 'month', 'quarter', 'year'.
  defaultSpan: 12, // By default, if no end date is supplied to a view it will show 12 hours

  timeResolution: {
    // Dates will be snapped to this resolution
    unit: "hour", // Valid values are 'millisecond', 'second', 'minute', 'hour', 'day', 'week', 'month', 'quarter', 'year'.
    increment: 3,
  },
  columnLinesFor: 1,

  headers: [
    // This defines your header rows from top to bottom
    {
      // For each row you can define 'unit', 'increment', 'dateFormat', 'renderer', 'align', and 'thisObj'
      unit: "day",
      dateFormat: "ddd DD/MM",
    },
    {
      unit: "hour",
      dateFormat: "HH:mm",
      increment: 3,
    },
  ],
});

PresetManager.registerPreset("oneHourPreset", {
  name: "oneHourPreset", // A human-readable name provided to be used in GUI, e.i. preset picker, etc.
  tickWidth: 40, // Time column width in horizontal mode
  tickHeight: 50, // Time column height in vertical mode
  displayDateFormat: "DD/MM/YYYY HH:mm", // Controls how dates will be displayed in tooltips etc

  shiftIncrement: 1, // Controls how much time to skip when calling shiftNext and shiftPrevious.
  shiftUnit: "day", // Valid values are 'millisecond', 'second', 'minute', 'hour', 'day', 'week', 'month', 'quarter', 'year'.
  defaultSpan: 12, // By default, if no end date is supplied to a view it will show 12 hours
  columnLinesFor: 1,
  timeResolution: {
    // Dates will be snapped to this resolution
    unit: "hour", // Valid values are 'millisecond', 'second', 'minute', 'hour', 'day', 'week', 'month', 'quarter', 'year'.
    increment: 1,
  },

  headers: [
    // This defines your header rows from top to bottom
    {
      // For each row you can define 'unit', 'increment', 'dateFormat', 'renderer', 'align', and 'thisObj'
      unit: "day",
      dateFormat: "ddd DD/MM",
    },
    {
      unit: "hour",
      dateFormat: "HH:mm",
      increment: 1,
    },
  ],
});

PresetManager.registerPreset("dayNightShift", {
  name: "Day/night shift (custom)",
  tickWidth: 35,
  rowHeight: 32,
  displayDateFormat: "DD/MM/YYYY HH:mm",
  shiftIncrement: 15,
  shiftUnit: "minute",
  timeResolution: {
    unit: "minutes",
    increment: 15,
  },
  defaultSpan: 24,
  mainHeaderLevel: 1,
  columnLinesFor: 2,
  headers: [
    {
      unit: "day",
      increment: 1,
      dateFormat: "dddd, MMMM Do YYYY",
    },
    {
      unit: "hour",
      increment: 1,
      dateFormat: "H",
    },
    {
      unit: "minutes",
      increment: 15,
      dateFormat: "mm",
    },
  ],
});

PresetManager.registerPreset("dayAndWeek", {
  name: "dayAndWeek",
  displayDateFormat: "DD/MM/YYYY HH:mm",
  timeResolution: {
    unit: "hour",
    increment: 24,
  },
  headers: [
    {
      unit: "week",
      increment: 1,
      renderer: (startDate: Date) =>
        `W. ${DateHelper.format(startDate, "WW MMM YYYY")}`,
    },
    {
      dateFormat: "dd DD",
      increment: 1,
      originalDateFormat: "dd DD",
      unit: "day",
    },
  ],
});

PresetManager.registerPreset("weekAndMonth", {
  name: "Weeks",
  tickWidth: 35,
  rowHeight: 32,
  displayDateFormat: "DD/MM/YYYY HH:mm",
  timeResolution: {
    unit: "day",
    increment: 1,
  },
  headers: [
    {
      unit: "month",
      increment: 1,
      dateFormat: "MMM YYYY",
      originalDateFormat: "MMM YYYY",
    },
    {
      unit: "week",
      increment: 1,
      dateFormat: "DD MMM",
      originalDateFormat: "DD MMM",
    },
  ],
});

const newPresets = PresetManager.records
  .sort(function compareFn(firstEl, secondEl) {
    return firstEl.internalId - secondEl.internalId;
  })
  .slice(24, 29);

export default AccessDenied;

When we click the button at the bottom of the screen, the placeholder of the filter input doesn't update properly.

Bryntum.Scheduler.-.Basic.setup.in.TypeScript.React.-.24.May.2023.mp4