search envelope-o feed check
Home Unanswered Active Tags New Question
user comment-o

onEventEditKeyDown acces current text

Asked by Anonymous
21 days ago.

I’m implementing inline Edit in a react app, It seems to be impossible to access the current text while editing,

I tried with the function onEventEditKeyDown, but while when i print the args out i can see multiple places where the current text is but if i try to access it I always keep getting the old text. Here is a min version of my problem. you can there see in the print out that args.e and args.element.event show the current text, but if a try to access it with args.e.data.text or args.element.event.data.text I will only get the old text.

import React from 'react';
import logo from './logo.svg';
import './App.css';
import {DayPilot, DayPilotScheduler} from "daypilot";



function App() {

    const startDate = DayPilot.Date.today().firstDayOfYear();
    const resources = [];
    for (let i = 0; i < 12; i++) {
        const month = startDate.addMonths(i);
        resources.push({
            name: month.toString("MMMM"),
            start: month,
            end: month.addMonths(1),
        });
    }
    const events = [
        {
            start: startDate.addMonths(2).addDays(0),
            end: startDate.addMonths(2).addDays(1),
            id: DayPilot.guid(),
            text: "Event 1",
        },
        {
            start: startDate.addMonths(3).addDays(2),
            end: startDate.addMonths(3).addDays(10),
            id: DayPilot.guid(),
            text: "Event 2",
        },
    ];
    const onBeforeCellRender =  (args) => {
        const belongsToCurrentMonth = args.cell.x + 1 === args.cell.start.getDay();

        if (!belongsToCurrentMonth) {
            args.cell.properties.backColor = "#dddddd";
        }
        else {
            args.cell.properties.fontColor = "#dddddd";
            args.cell.properties.text = args.cell.start.toString("ddd");
            args.cell.properties.verticalAlignment = "center";
            args.cell.properties.horizontalAlignment = "center";
        }
};

    const onEventSelected = (args) => {
        console.log(args)
    }

    const onTimeRangeDoubleClick = (args) => {
        console.log(args)
    }
    const onRectangleSelect = (args) => {
        console.log(args)
    }

    const  onEventEditKeyDown = (args)=> {
        console.log(args.e,args.e.data,args.e.data.text,args.element.event,args.element.event.data.text);
    }


return (
      <DayPilotScheduler
          eventClickHandling = "Edit"
          onEventEditKeyDown={onEventEditKeyDown}
          allowMultiMove={true}
          allowMultiSelect={true}
          onEventSelected={onEventSelected}
          onTimeRangeDoubleClick={onTimeRangeDoubleClick}
          rectangleSelectMode={"Free"}
          rectangleSelectHandling={"Enabled"}
          timeRangeDoubleClickHandling="Enabled"
          onRectangleSelect={onRectangleSelect}
          days={31}
          scale="Day"
          resources={resources}
          startDate={startDate}
          allowMultiRange={true}
          events={ events}
          onBeforeCellRender = {onBeforeCellRender}
      />
  );
}

export default App;
Answer posted by Dan Letecky [DayPilot]
21 days ago.

In onEventEditKeyDown, the args.element property stores the <textarea> element used for editing. You can get the current text using args.element.value.

Comment posted by Anonymous
17 days ago.

Thanks for the response but args.element.value gives me the text before the keydown so the last typed letter is missing.

Comment posted by Dan Letecky [DayPilot]
17 days ago.

Yes, the primary purpose of this event is to intercept the keydown event and handle hotkeys. The keydown event is fired before the key is applied.

For this, you will need to handle input or keyup events - you can add your own event listener using onAfterEventEditRender event:

onAfterEventEditRender: args => {
  args.element.addEventListener("input", () => {
    console.log(args.element.value);
  });
}
Comment posted by Anonymous
15 days ago.

Thanks this works!

New Reply
This reply is
Attachments:
or drop files here
Your name (optional):