Row Editing

The Scheduler component supports inline editing of row header headers. You can use this feature to let users edit the resource name and/or resource properties that are displayed in additional columns.

Activating the Edit Mode

1. You can set the click event to trigger the inline editing mode:

rowClickHandling: "Edit"

2. You can also use the double-click event:

rowDoubleClickHandling: "Edit"

3. To start start the editing programmatically, use the rows.edit() method:

const row = scheduler.rows.find("A");
scheduler.rows.edit(row);

Editing

Users can confirm the new value by pressing <enter> or by clicking outside of the active cell.

Pressing <esc> will cancel the editing without changing the value.

After the editing ends, the Scheduler fires onRowEdit and onRowEdited event handlers. You can use them to save the new value to the database.

onRowEdited: async (args) => {
  if (args.canceled) {
    return;
  }
  const params = {
    row: args.row.id,
    property: dp.rowHeaderColumns[args.x].display,
    value: args.newText
  };
  const {data} = await DayPilot.Http.post('/resource/update', params);
}

Row Header Columns

When your Scheduler component displays custom row header columns, you can also edit the additional row header cells. This feature is available since version 2023.1.5513 (in previous version, only the name in the first column was supported).

The index of the column that was edited is available as args.x in onRowEdit and onRowEdited handlers.

When activating the edit mode using rows.edit(), you can specify the column using the second argument:

const row = scheduler.rows.find("C");
scheduler.rows.edit(row, 1);

Live Demo

• JavaScript Scheduler Inline Row Editing Demo

JavaScript Scheduler

This example shows how to map inline event editing to a row header click event in the JavaScript Scheduler.

const scheduler = new DayPilot.Scheduler("dp", {
  rowClickHandling: "Edit",
  onRowEdited: (args) => {
    scheduler.message("Row text changed to " + args.newText);
  }
});
scheduler.init();

Angular Scheduler

In the Angular Scheduler component, you can define the onRowEdited event handler using the config object:

import {Component, ViewChild, AfterViewInit} from '@angular/core';
import {DayPilot, DayPilotSchedulerComponent} from 'daypilot-pro-angular';

@Component({
  selector: 'scheduler-component',
  template: `<daypilot-scheduler [config]="config"></daypilot-scheduler>`,
  styles: [``]
})
export class SchedulerComponent implements AfterViewInit {

  config: DayPilot.SchedulerConfig = {
    rowClickHandling: "Edit",
    onRowEdited: args => {
      console.log("Row updated", args);
    }
    // ...
  };

}

React Scheduler

You can use the rowClickHandling and onRowEdited attributes of the React Scheduler component to enable the inline row editing feature.

import React from 'react';
import {DayPilotScheduler} from "daypilot-pro-react";

function Scheduler() {

  function onRowEdited(args) {
    console.log("Row updated", args);
  }

  return (
    <div>
      <DayPilotScheduler
        rowClickHandling={"Edit"}
        onRowEdited={onRowEdited}
      />
    </div>
  );

}

export default Scheduler;

Vue Scheduler

In the Vue Scheduler component, use the rowClickHandling and onRowEdited properties of the config object.

<template>
  <DayPilotScheduler id="dp" :config="config" />
</template>

<script setup>
import {DayPilotScheduler} from 'daypilot-pro-vue'

const config = {
  rowClickHandling: "Edit",
  onRowEdited: args => {
    console.log("Row updated", args);
  },
  // ...
};

</script>

<DayPilot:DayPilotScheduler 
  ...
  RowClickHandling="Edit" 
  RowEditHandling="CallBack"
  OnRowEdit="DayPilotScheduler1_OnRowEdit"
  ...
  />

protected void DayPilotScheduler1_OnRowEdit(object sender, RowEditEventArgs e)
{
  e.Resource.Name = e.NewText;
  setDataSourceAndBind();
  DayPilotScheduler1.UpdateWithMessage("Resource name changed to : " + e.NewText);
}

@Html.DayPilotScheduler("dps", new DayPilotSchedulerConfig {
  BackendUrl = Url.Action("Backend", "Scheduler"),
  // ...
  RowClickHandling = RowClickHandlingType.Edit,
  RowEditHandling = RowEditHandlingType.CallBack
})

protected override void OnRowEdit(RowEditArgs e)
{
  e.Resource.Name = e.NewText;
  Update(CallBackUpdateType.Full);
}