Hello,
I'm having an issue with the Grid react component. Whenever I right-click a column in the grid, the dropdown shows up. All options work except for the submenu's and I can't click anywhere else to make it disappear. I don't think I've done anything weird. I've included the code below that doesn't work for me.
// grid.js
import { TimeStringHelper, __ } from "global";
import { Component } from "react";
import { BryntumGrid } from "@bryntum/grid-react";
import { Task } from "../stores/task.store";
import * as React from "react";
export default class Grid extends Component {
grid = React.createRef();
configuration = {
id: "to-be-planned",
store: {
modelClass: Task,
readUrl: "/api/v1/planning/events/unassigned",
autoLoad: true,
headers: {
"X-CSRF-TOKEN": document.querySelector("meta[name='csrf-token']").getAttribute("content")
}
},
tbar: [`<h4>${__("To be planned")}</h4>`],
features: {
stripe: true,
sort: "name"
},
columns: [
{
text: __("Unassigned tasks"),
field: "name",
htmlEncode: false,
renderer: ({ record }) => `<i class="${record.iconCls}"></i>${record.name}`
},
{
text: __("Site"),
field: "site.name",
htmlEncode: false
},
{
text: __("Start date"),
type: "date",
editor: false,
field: "visualStartDate",
format: "DD-MM-YYYY"
},
{
text: __("End date"),
type: "date",
editor: false,
field: "visualEndDate",
format: "DD-MM-YYYY",
hidden: true
},
{
text: __("Duration"),
type: "number",
editor: false,
field: "total_duration",
renderer: ({ record }) => TimeStringHelper.parseSeconds(record.total_duration)
}
]
};
render() {
return <BryntumGrid {...this.configuration} ref={this.grid} />;
}
}
// calendar.js
// React
import SplitterLayout from "react-splitter-layout";
import React, { Component } from "react";
// Bryntum
import BryntumCalendar from "../components/bryntum-calendar";
import { Popup } from "@bryntum/calendar/calendar.umd";
// To be planned grid
import Grid from "../components/grid";
// Stores
import { Resource } from "../stores/resource.store";
import { Task } from "../stores/task.store";
export default class CalendarPlanning extends Component {
calendar = React.createRef();
grid = React.createRef();
state = {
plannedTasks: "",
dayStartTime: "6:00",
dayEndTime: "18:00",
usersColumn: true,
positionColumn: true,
cityColumn: true,
finalize: false,
showAdvancedFiltersClass: ""
};
resources = null;
crudManager = {
eventStore: {
modelClass: Task
},
resourceStore: {
modelClass: Resource
},
transport: {
load: {
url: "/api/v1/planning/crud",
headers: {
"X-CSRF-TOKEN": document.querySelector("meta[name='csrf-token']").getAttribute("content")
}
},
sync: {
url: "/api/v1/planning/crud",
method: "PATCH",
headers: {
"X-CSRF-TOKEN": document.querySelector("meta[name='csrf-token']").getAttribute("content")
}
}
},
autoLoad: true
};
editor = {
items: {
siteSelector: {
name: "site",
type: "siteSelector",
label: "Site",
weight: 110
},
total_duration: {
name: "total_duration",
type: "textfield",
label: "Duration",
weight: 610
},
resourceField: {
label: "Employee",
multiSelect: true
}
},
editorConfig: {
autoClose: false
},
showRecurringUI: allowed("Planning", "addRecurrence")
};
constructor(props) {
super(props);
const storage = window.localStorage;
const dayStartTime = storage.getItem("calendar_day_start_time") || "6:00";
const dayEndTime = storage.getItem("calendar_day_end_time") || "18:00";
const state = {
...this.state,
dayStartTime,
dayEndTime
};
this.state = state;
}
getGrid() {
return this.grid.current.grid.current.gridInstance;
}
getCalendar() {
return this.calendar?.current?.calendarInstance;
}
settings(event) {
const { dayStartTime, dayEndTime } = this.state;
let startDate = new Date();
let endDate = new Date();
const startHour = +dayStartTime.split(":")[0];
const startMinute = +dayStartTime.split(":")[1];
const endHour = +dayEndTime.split(":")[0];
const endMinute = +dayEndTime.split(":")[1];
startDate.setHours(startHour, startMinute, 0, 0);
endDate.setHours(endHour, endMinute, 0, 0);
new Popup({
forElement: event.source.currentElement,
items: [
{
type: "container",
itemCls: "b-popup-horizontal",
items: [
{
type: "timefield",
label: "Start time",
value: startDate,
step: "1h",
format: "HH:mm",
onChange: this.setDayStartTime.bind(this)
},
{
type: "timefield",
label: "End time",
value: endDate,
step: "1h",
format: "HH:mm",
onChange: this.setDayEndTime.bind(this)
}
]
}
]
});
}
setDayStartTime(event) {
const dayStartTime = event.value.getHours() + ":" + event.value.getMinutes();
this.setState({ dayStartTime });
const storage = window.localStorage;
storage.setItem("calendar_day_start_time", dayStartTime);
}
setDayEndTime(event) {
const dayEndTime = event.value.getHours() + ":" + event.value.getMinutes();
this.setState({ dayEndTime });
const storage = window.localStorage;
storage.setItem("calendar_day_end_time", dayEndTime);
}
render() {
const { dayStartTime, dayEndTime } = this.state;
const calendarConfig = {
style: "height: 100%",
ref: this.calendar,
crudManager: this.crudManager,
weekStartDay: 1,
modes: {
week: {
dayStartTime,
dayEndTime,
},
},
scheduleMenuFeature: true,
externalEventSourceFeature: {
grid: "to-be-planned"
}
};
return (
<SplitterLayout percentage={true} secondaryInitialSize={40}>
<BryntumCalendar {...calendarConfig} />
<Grid ref={this.grid} />
</SplitterLayout>
);
}
}
//bryntum-calendar.js
import { BryntumCalendar as Calendar } from "@bryntum/calendar-react";
export default class BryntumCalendar extends Calendar {
featureNames = [
"cellEditFeature",
"cellMenuFeature",
"cellTooltipFeature",
"columnAutoWidthFeature",
"columnDragToolbarFeature",
"columnLinesFeature",
"columnPickerFeature",
"columnReorderFeature",
"columnResizeFeature",
"contextMenuFeature",
"dependenciesFeature",
"dependencyEditFeature",
"externalEventSourceFeature",
"eventContextMenuFeature",
"eventDragCreateFeature",
"eventDragFeature",
"eventDragSelectFeature",
"eventEditFeature",
"eventFilterFeature",
"eventMenuFeature",
"eventResizeFeature",
"eventTooltipFeature",
"excelExporterFeature",
"filterBarFeature",
"filterFeature",
"groupFeature",
"groupSummaryFeature",
"headerContextMenuFeature",
"headerMenuFeature",
"headerZoomFeature",
"labelsFeature",
"loadOnDemandFeature",
"nonWorkingTimeFeature",
"panFeature",
"pdfExportFeature",
"printFeature",
"quickFindFeature",
"regionResizeFeature",
"resourceTimeRangesFeature",
"rowReorderFeature",
"scheduleContextMenuFeature",
"scheduleMenuFeature",
"scheduleTooltipFeature",
"searchFeature",
"simpleEventEditFeature",
"sortFeature",
"stickyCellsFeature",
"stripeFeature",
"summaryFeature",
"timeAxisHeaderMenuFeature",
"timeRangesFeature",
"treeFeature",
"weekExpanderFeature"
];
}
when I replace the BryntumCalendar with a simple <div></div> it starts working fine. So I'm not entirely sure what's going on.