how to remove the new event if inline event edit text is blank

In the latest build (8.1.1914), the onEventEdit/onEventEdited events are now also fired when the editing was canceled using <esc> or when the text is unchanged.

The canceled editing is indicated using args.canceled.

See the updated demo in the sandbox:
http://javascript.daypilot.org/sandbox/scheduler/eventinlineediting.html

dp.onTimeRangeSelected = function(args) {
    var e = new DayPilot.Event({
        start: args.start,
        end: args.end,
        id: DayPilot.guid(),
        resource: args.resource,
        text: "",
        tags: {justCreated: true}
    });
    dp.events.add(e);
    dp.clearSelection();
    dp.events.edit(e);
};

dp.onEventEdit = function(args) {
    if (args.e.tag("justCreated")) {
        if (args.canceled || args.newText === "") {
            dp.events.remove(args.e);
        }
    }
    args.e.data.tags.justCreated = false;
};

Note: I'm removing the "lite" tag from this question - inline editing is only available in the Pro version.

Thank you, that's just what I was looking for! ;)

Is there a way to set the property tags from the MVC controller?

Just for your information: args.e.data.tags.justCreated = false; throws an exception. Maybe it has to be args.e.tags.justCreated?

PS Sorry for the wrong tagging of the thread

> Is there a way to set the property tags from the MVC controller?

If you are using the MVC version you can specify the custom fields using DataTagFields property.

If you load events manually using an AJAX call you can just add it to the event data - see also below.

> Just for your information: args.e.data.tags.justCreated = false; throws an exception. Maybe it has to be args.e.tags.justCreated?

The "tags" field is initialized in onTimeRangeSelected:

    var e = new DayPilot.Event({
        start: args.start,
        end: args.end,
        id: DayPilot.guid(),
        resource: args.resource,
        text: "",
        tags: {justCreated: true}                           // <- here
    });

And yes - you should check if args.e.data.tags exists in onEventEdit before using it. Or you can move it inside the conditional block:

dp.onEventEdit = function(args) {
    if (args.e.tag("justCreated")) {
        if (args.canceled || args.newText === "") {
            dp.events.remove(args.e);
        }
    args.e.data.tags.justCreated = false;
    }
};

Hi Dan,

I'm using the javascript lib included in the mvc bundle at version 2051.

With the code below the box for editing the event is not showing up. You can see the same behaviour in your demo page for inline editing.

dp.onTimeRangeSelected = function(args) {
var e = new DayPilot.Event({
start: args.start,
end: args.end,
id: DayPilot.guid(),
resource: args.resource,
text: "",
tags: {justCreated: true}
});
dp.events.add(e);
dp.clearSelection();
dp.events.edit(e); // <- here
};

Am I doing something wrong?

Thank you.

I'll try to explain myself in a better way.

Before the latest update (mvc 8.1 SP2), once I clicked on an empty cell (timerange) an empty event was created and the box for editing it showed up immediatly.

Now the onEventEdit event is fired, so I can handle the tag "justCreated" like your example, but there is no way to get the box for editing showing up immediatly like before.

how can I restore this behaviour for inline editing?

Thank you.

And which control do you use - Calendar or Scheduler?

Scheduler

It looks like the problem is with the latest implementation of dp.events.add() which is now optimized to run just one update for all updates made within a single block of code. You should be able to fix it using the following code:

dp.onTimeRangeSelected = function(args) { 
  var e = new DayPilot.Event({ 
    start: args.start, 
    end: args.end, 
    id: DayPilot.guid(), 
    resource: args.resource, 
    text: "", 
    tags: {justCreated: true} 
  }); 
  dp.events.add(e); 
  dp.clearSelection(); 
  setTimeout(function() {
    dp.events.edit(e);
  });
};

Note the setTimeout wrapper. Let me know if it didn't help.

I already tried this solution before writing to you, with no success. I tried with 500, 1000, 2000, 3000 but the box didn't show up.

I have temporarily modified the main Scheduler demo in the sandbox:

http://mvc.daypilot.org/sandbox/Scheduler/

By adding this:

<script>
    function createAndEdit(start, end, resource) {
        var e = new DayPilot.Event({
            start: start,
            end: end,
            id: DayPilot.guid(),
            resource: resource,
            text: "",
            tags: { justCreated: true }
        });
        dps.events.add(e);
        dps.clearSelection();
        setTimeout(function () {
            dps.events.edit(e);
        });
    }

</script>


@Html.DayPilotScheduler("dps", new DayPilotSchedulerConfig {
    BackendUrl = Url.Action("Backend", "Scheduler"),
    // ...
    TimeRangeSelectedHandling = TimeRangeSelectedHandlingType.JavaScript,
    TimeRangeSelectedJavaScript = "createAndEdit(start, end, resource);",
})

It seems to work fine (Chrome, Firefox, IE11). (The event disappears after entering the text because OnEventEdit is not implemented on the server side.)

Are you able to reproduce the issue in the sandbox?

In the sandbox now works perfect! Do I have to wait an update or is it a change I can implement now?

Thank you for the effective support.

There are no changes in the core library (just in the demo). So it should work with 8.1 SP2 as well. You can try copying the configuration from the sandbox to see how it works with your code.

Ok, it works. I found a typo in my code. I still have to use the timeout. Do you think that in the next updates I won't need the timeout anymore?

Thank you for all.

Yes, in the next release the setTimeout call won't be necessary.