RemoteSaveAdaptor with MVC Schedule

[Halilu]

Good day,

I was wondering if it is possible to use the RemoteSaveAdapter with your MVC Schedule component.

Have tried to get it working but with no success. Am I missing something obvious?

If it's not possible, can you give me pointers on how to achieve the same functionality? That is bind all the data just once (and preferrably from the server directly), but do CRUD remotely.

Thanks

[Karthigeyan Krishnamurthi]

Hi Halilu, 

 

Syncfusion greetings. 

 

We have prepared the below CRUD sample with RemoteSaveAdaptor. Please refer it. 

https://www.syncfusion.com/downloads/support/forum/146108/ze/ScheduleSample-RemoteSaveData-1909236913 

 

Regards, 

Karthi 

 

[Halilu]

Apologies for late reply.

Have tried it, nearly working but not quite there yet please.

I cannot get your sample to work on my machine (yet) because of some Sql Server issues on my end, but the code you provide does work on my project. The only problem is, when using the RemoteSaveAdapter, changes made do not reflect on the schedule. I have to reload the whole page before it shows any changes I make to appointments.

I have tried it using the URLAdapter and it works as expected with it, changes reflect etc. I have a listener on the onActionComplete event, and it reports that everything is fine.

I have tried looking for how to refresh the schedule manually in the onActionComplete event, but with no luck. The javascript refreshAppointment method does not seem to exist with MVC, and I can't find any suitable method when I look at the schedule object in the browser's debugger.

Any suggestions on how to solve my problem? (Can you also show me how to refresh the schedule as well please)

Thanks

[Arun Palaniyandi]

 

Hi Halilu, 

 

Thanks for you update.  

 

We can able to get your issue. Since in the RemoteSaveAdapter, there is no url is maintained to get the data, the data is saved in the DB but not reflected in the Schedule UI. Even if we call the refresh() method, it won’t affect the Schedule because there is no url to load data back. To overcome this issue, we suggest you to manually raise a AJAX post to get the updated new data to update in the Schedule datasource. Kindly refer to the following code to avoid your issue. 

 

 

 

    @Html.EJS().Schedule("schedule").Width("100%").Height("650px").Views(view => 

{ 

    view.Option(View.Day).Add(); view.Option(View.Week).Add(); 

    view.Option(View.Month).Add(); 

}).CurrentView(View.Week).SelectedDate(new DateTime(2018, 8, 1)).EventSettings(es=>es.DataSource(dataManager =>{dataManager.Json(ViewBag.dataSource.ToArray()).CrudUrl("/Home/UpdateData").Adaptor("RemoteSaveAdaptor"); 

})).EditorTemplate("#EventEditorTemplate").ShowQuickInfo(false).PopupOpen("onPopupOpen").ActionComplete("onActionComplete").Render(); 

 

 

 

 

<script> 

    function onActionComplete(args) { 

        if (args.requestType == "eventChanged") { 

            $.ajax({ 

                type: "GET", 

                url: "/Home/LoadData", 

                dataType: "json", 

                success: function (data) { 

                    var obj = document.getElementById('schedule').ej2_instances[0]; 

                    obj.eventSettings.dataSource = data;  // set as datasource 

                } 

            }) 

        }       

    } 

</script> 

 

  

  

We have attached the below sample for your reference. 

 

Sample: https://www.syncfusion.com/downloads/support/forum/146108/ze/SAMPLE~1-424114037 

 

 

Please let us know if you need further assistance. 

 

Regards, 

Arun P. 

[Halilu]

Thanks!

That nearly solved the issue. There's just another problem that pops up which I could use some help with please.

After it makes the AJAX request, it stops making any other subsequent requests to the CRUD url. So the first request works fine, but then from there on out no subsequent requests are made to the CRUD url (unless, of course, you reload the whole page).

Looking at the javascript debugger again, it seems the dataModule.dataManager.dataSource (among other things) for the schedule is changed significantly sometime after the new datasource is set in the AJAX call. For instance, the aforementioned dataSource has a CRUD url when the page first loads, but after the AJAX call the CRUD url (along with any other urls) disappear.

Any ideas on how to work around this please? I'm guessing I have to reset a datamanager/adapter somewhere after the AJAX call as well?

Thanks

[Hareesh Balasubramanian]

Hi Halilu, 

 

Sorry for the delay post. 

 

We have modified our previous sample, such that the reported CRUD action request issue has been resolved. Kindly verify the below code snippet and the sample can be downloaded from the following link, 

https://www.syncfusion.com/downloads/support/directtrac/146108/ze/Sample-1010677844 

 

 function onActionComplete(args) {
        if (args.requestType == "eventChanged") {
            $.ajax({
                type: "GET",
                url: "/Home/LoadData",
                dataType: "json",
                success: function (data) {
                    var obj = document.getElementById('schedule').ej2_instances[0];
                    var dataManger = new ej.data.DataManager({ crudUrl: "/Home/UpdateData", adaptor: new ej.data.RemoteSaveAdaptor() });
                    dataManger.dataSource.json = data;
                    obj.eventSettings = { dataSource: dataManger };
                    obj.dataBind();
                }
            });
        }
    } 

 

 

Please try the above sample, if you have any concerns please revert us back for further assistance. 

 

 

Regards, 

Hareesh B 

[Halilu]

Apologies for late reply

Have tried it and it's working great. Thanks!

Kind regards

[Nevitha Ravi]

Hi Halilu, 

We are glad that our solution helped you, let us know if you need any assistance. 

Regards, 

Nevitha