We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

Unable to refresh schedule after external drag&drop

Thread ID:

Created:

Updated:

Platform:

Replies:

128289 Jan 12,2017 09:52 AM Jan 19,2017 07:11 AM ASP.NET MVC 4
loading
Tags: Schedule
CLAUDIO RICCARDI
Asked On January 12, 2017 09:52 AM

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
Replied On January 12, 2017 11:35 AM

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 [Syncfusion]
Replied On January 13, 2017 10:13 AM

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. 
 
  
Kindly revert us, if you need any further assistance. 
  
Regards, 
Sellakumar K

CLAUDIO RICCARDI
Replied On January 18, 2017 05:16 AM

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 [Syncfusion]
Replied On January 19, 2017 07:11 AM

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: 
 
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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;