Unable to refresh schedule after external drag&drop

[CLAUDIO RICCARDI]

Hi,

In my web page I have a Grid and a Schedule.

When I drag a grid row into the schedule, I open a custom dialog and then update the appointment using a ajax call to a controller method.

The schedule is defined as follows:

        <div id="COL2">

            @(Html.EJ().Schedule("WorkActivitySchedule")

                    .Locale("it-IT")

                    .Width("100%")

                    .Height("800px")

                    .Views(view)

                    .Orientation(Orientation.Horizontal)

                    .ShowCurrentTimeIndicator(true)

                    .CategorizeSettings(fields => fields.Datasource(ViewBag.categorize).Enable(true).AllowMultiple(false).Id("id").Text("text").Color("color").FontColor("fontColor"))

                    .DateFormat("dd/MM/yyyy")

                    .AllowDragDrop(true)

                    .EnableAppointmentResize(true)

                    .CurrentDate(System.DateTime.Now)

                    .Resources(res =>

                    {

                        res.Field("OperatorId").Title("Operator").Name("Operators").AllowMultiple(true)

                            .ResourceSettings(flds => flds.Datasource((IEnumerable)ViewBag.Operators).Text("text").Id("id").GroupId("groupId").Color("color")).Add();

                    })

                    .Group(gr =>

                    {

                        gr.Resources(ViewBag.Resources);

                    })

                    .AppointmentSettings(fields => fields.Datasource(ds => ds.Json((IEnumerable<PlannedWorkActivity>)Model).Adaptor(AdaptorType.UrlAdaptor))

                        .Id("Id")

                        .Subject("Subject")

                        .StartTime("StartTime")

                        .EndTime("EndTime")

                        .Description("Description")

                        .AllDay("False")

                        .Recurrence("")

                        .RecurrenceRule("")

                        .Categorize("Categorize")

                        .ResourceFields("OperatorId")

                    )

                    .ScheduleClientSideEvents(evt =>

                        evt.Create("onCreate")

                            .CellClick("onCellClick")

                            .AppointmentClick("onAppointmentClick")

                            .AppointmentSaved("onAppointmentSaved")

                            .AppointmentEdited("onAppointmentEdited")

                            .ResizeStop("onResizeStop")

                            .ActionComplete("onActionComplete")

                            .DragStop("onDragStop")

                    ))

        </div>

The grid is defined as follows:

<div style="padding: 10px; text-align: center">

    @(Html.EJ().Grid<SlimHub.ViewModels.WorkActivityToPlan>("WorkActivitiesGrid")

          .Datasource(ds => ds.URL("../WorkActivity/WorkActivitiesToPlan").Adaptor(AdaptorType.UrlAdaptor))

          .AllowResizing()

          .AllowTextWrap(true)

          .AllowRowDragAndDrop()

          .AllowPaging()

          .AllowFiltering()

          .FilterSettings(filter => { filter.FilterType(FilterType.Excel); })

          .Columns(col =>

          {

              col.Field("WorkActivityId").HeaderText("Id").HeaderTextAlign(TextAlign.Center).Visible(false).Add();

              col.Field("WorkCode").HeaderText("Attività").Template("#ActivityToPlanTemplate").HeaderTextAlign(TextAlign.Center).TextAlign(TextAlign.Right).Width(30).Add();

          })

          .ClientSideEvents(s => s.RowDrop("onRowDrop").RowDragStart("onRowDrag"))

          )

</div>

After dropping the row on the schedule, the appointment (that is the PlannedWork object) is correctly updated on the database, but the schedule doesnn't refresh, so I can see the planned activity only after the page is reloaded. 

Is there a way to refresh the schedule without loading the whole page?

Thank you.

Claudio

[CLAUDIO RICCARDI]

Hi,

I have used this function linked to the save button of the custom appointment template:

    function save() {

        var obj = {};

        debugger;

        var formelement = $("#customWindow").find("#custom").get(0);

        for (var index = 0; index < formelement.length; index++) {

            var columnName = formelement[index].name, $element = $(formelement[index]);

            if (columnName != undefined) {

                if (columnName == "WorkActivityId")

                    var value = formelement[index].value;

                if (columnName == "WorkId")

                    var value = formelement[index].value;

                if (columnName == "Subject")

                    var value = formelement[index].value;

                if (columnName == "Desctiption")

                    value = formelement[index].value;

                if (columnName == "StartTime")

                    value = new Date(formelement[index].value);

                if (columnName == "EndTime")

                    value = new Date(formelement[index].value);

                if (columnName == "OperatorId")

                    value = formelement[index].value;

                if (columnName != "Resource")

                    obj[columnName] = value;

            }

        }

        $("#customWindow").ejDialog("close");

        var owners = null;

        $.ajax({

            type: "POST",

            dataType: 'json',

            async: false,

            data: JSON.stringify({ "pwork": obj, "owners": owners }),

            contentType: 'application/json; charset=utf-8',

            url: "../../Work/UpdateWork"

        });

        var schObj = $("#WorkActivitySchedule").data("ejSchedule");

        schObj.refreshAppointments();

    }

I used the async: false parameter because I want the controller method to have completed before executing the highlighted code.

But nothing happens...the newly created appoitment is not added...

Claudio

[Sellakumar]

Hi Claudio, 

  

Thank you for contacting Syncfusion support. 

  

We have prepared the sample to meet your requirement based on the given code example, which can be download from the below location. 

 

Download  

  

Kindly revert us, if you need any further assistance. 

  

Regards, 

Sellakumar K

[CLAUDIO RICCARDI]

Hi,

when I drop the object from the grit to the schedule and click on the SAVE button of the custom appointment window, I receive the following script error (attached):

ej.web.all.min.js:10 Uncaught TypeError: Cannot read property 'AppTaskId' of undefined

    at Object.saveAppointment (ej.web.all.min.js:10)

    at save (WorkScheduler:400)

    at HTMLButtonElement.onclick (WorkScheduler:604)

The exception is raised on the highlighted line of code:

    function save() {

        var scheduleObj = $("#WorkActivitySchedule").ejSchedule("instance");

        var obj = {};

        debugger;

        var formelement = $("#customWindow").find("#custom").get(0);

        for (var index = 0; index < formelement.length; index++) {

            var columnName = formelement[index].name, $element = $(formelement[index]);

            if (columnName != undefined) {

                if (columnName == "Id")

                    var value = formelement[index].value;

                if (columnName == "WorkId")

                    var value = formelement[index].value;

                if (columnName == "Subject")

                    var value = formelement[index].value;

                if (columnName == "Desctiption")

                    value = formelement[index].value;

                if (columnName == "StartTime")

                    value = new Date(formelement[index].value);

                if (columnName == "EndTime")

                    value = new Date(formelement[index].value);

                if (columnName == "OperatorId")

                    value = formelement[index].value;

                if (columnName != "Resource")

                    obj[columnName] = value;

            }

        }

        obj["AllDay"] = false;

        obj["Recurrence"] = false;

        obj["RecurrenceRule"] = "";

        $("#customWindow").ejDialog("close");

        scheduleObj.saveAppointment(obj);             ---> EXCEPTION!!

        clearFields();

        var owners = null;

    }

[Karthigeyan Krishnamurthi]

Hi Claudio, 

 

Thanks for your update. 

 

We have checked your scenario with the provided code example and unable to reproduce the reported issue at our end and for the same we have prepared the sample for your reference which can be download from the below location: 

http://www.syncfusion.com/downloads/support/forum/128289/ze/Sample-56009966 

 

Kindly try the above sample and if the issue persists, try to reproduce the error in the sample and revert it back to us. Or else you can share your runnable sample (if possible) to proceed further. 

 

Regards, 

Karthigeyan