Is there a sample app using oData with the scheduler?

[Basil Buwalda]

I need to know how to add and update the appointment data into my SQL database.

I have extra fields on my appointment that has foreign keys to different tables for example client, horse and organisation.

The clientid and horseid is a cascade dropbox, how do I implement that on the scheduler detail screen?

[Vengatesh Maniraj]

Hi Basil, 

Greetings from Syncfusion Support. 

Based on your requirement, we have prepared a CRUD sample using ODataV4 adaptor with the cascading dropdown fields using popupOpen event. And the sample can be downloaded from the following link, 

Service: https://www.syncfusion.com/downloads/support/forum/150917/ze/service-770050053  

Sample: https://www.syncfusion.com/downloads/support/forum/150917/ze/sample-1135494243  

Kindly refer the below code snippets for achieving the cascading dropdowns using change event of the DropDown component, 

   function onPopupOpen(args) { 

        if (args.type === 'Editor') { 

            // Create required custom elements in initial time 

            if (!args.element.querySelector('.custom-field-row')) { 

                var row = new ej.base.createElement('div', { className: 'custom-field-row' }); 

                var formElement = args.element.querySelector('.e-schedule-form'); 

                formElement.firstChild.insertBefore(row, args.element.querySelector('.e-title-location-row')); 

                var container = new ej.base.createElement('div', { className: 'custom-field-container' }); 

                var inputEle = new ej.base.createElement('input', { 

                    className: 'e-field', id: 'state', attrs: { name: 'State' } 

                }); 

                container.appendChild(inputEle); 

                row.appendChild(container); 

                var drowDownList = new ej.dropdowns.DropDownList({ 

                    dataSource: [ 

                        { StateName: "New York", CountryId: "1", StateId: "101" }, 

                        { StateName: "Queensland", CountryId: "2", StateId: "104" }, 

                        { StateName: "Tasmania ", CountryId: "2", StateId: "105" }, 

                        { StateName: "Victoria", CountryId: "2", StateId: "106" }, 

                        { StateName: "Virginia ", CountryId: "1", StateId: "102" }, 

                        { StateName: "Washington", CountryId: "1", StateId: "103" } 

                    ], 

                    change: function () { 

                        var cityObj = args.element.querySelector('#city').ej2_instances[0]; 

                        var stateObj = args.element.querySelector('#state').ej2_instances[0]; 

                        // enable the city DropDownList 

                        cityObj.enabled = true; 

                        // Query the data source based on state DropDownList selected value 

                        var tempQuery1 = new ej.data.Query().where('StateId', 'equal', stateObj.value); 

                        // set the framed query based on selected value in city DropDownList. 

                        cityObj.query = tempQuery1; 

                        //clear the existing selection 

                        cityObj.text = null; 

                        // bind the property change to city DropDownList 

                        cityObj.dataBind(); 

                    }, 

                    fields: { value: 'StateId', text: 'StateName' }, 

                    value: args.EventType, 

                    floatLabelType: 'Always', placeholder: 'State' 

                }); 

                drowDownList.appendTo(inputEle); 

                inputEle.setAttribute('name', 'State'); 

            } 

            if (!args.element.querySelector('.custom-field-row1')) { 

                var row = new ej.base.createElement('div', { className: 'custom-field-row1' }); 

                var formElement = args.element.querySelector('.e-schedule-form'); 

                formElement.firstChild.insertBefore(row, args.element.querySelector('.e-title-location-row')); 

                var container = new ej.base.createElement('div', { className: 'custom-field-container' }); 

                var inputEle = new ej.base.createElement('input', { 

                    className: 'e-field', id: 'city', attrs: { name: 'City' } 

                }); 

                container.appendChild(inputEle); 

                row.appendChild(container); 

                var drowDownList = new ej.dropdowns.DropDownList({ 

                    dataSource: [ 

                        { CityName: "Aberdeen", StateId: "103", CityId: '207' }, 

                        { CityName: "Alexandria", StateId: "102", CityId: '204' }, 

                        { CityName: "Albany", StateId: "101", CityId: '201' }, 

                        { CityName: "Beacon ", StateId: "101", CityId: '202' }, 

                        { CityName: "Brisbane ", StateId: "104", CityId: '211' }, 

                        { CityName: "Cairns", StateId: "104", CityId: '212' }, 

                        { CityName: "Colville ", StateId: "103", CityId: '208' }, 

                        { CityName: "Devonport", StateId: "105", CityId: '215' }, 

                        { CityName: "Emporia", StateId: "102", CityId: '206' }, 

                        { CityName: "Geelong", StateId: "106", CityId: '218' }, 

                        { CityName: "Hampton ", StateId: "102", CityId: '205' }, 

                        { CityName: "Healesville ", StateId: "106", CityId: '217' }, 

                        { CityName: "Hobart", StateId: "105", CityId: '213' }, 

                        { CityName: "Launceston ", StateId: "105", CityId: '214' }, 

                        { CityName: "Lockport", StateId: "101", CityId: '203' }, 

                        { CityName: "Melbourne", StateId: "106", CityId: '216' }, 

                        { CityName: "Pasco", StateId: "103", CityId: '209' }, 

                        { CityName: "Townsville", StateId: "104", CityId: '210' } 

                    ], 

                    fields: { text: 'CityName', value: 'CityId' }, 

                    value: args.EventType, 

                    floatLabelType: 'Always', placeholder: 'City' 

                }); 

                drowDownList.appendTo(inputEle); 

                inputEle.setAttribute('name', 'City'); 

            } 

        } 

And for further reference kindly refer the below API and UG link, 

https://ej2.syncfusion.com/aspnetcore/documentation/schedule/data-binding/?no-cache=1#using-odatav4adaptor 

https://ej2.syncfusion.com/aspnetcore/documentation/schedule/data-binding/?no-cache=1#scheduler-crud-actions 

https://ej2.syncfusion.com/javascript/documentation/api/schedule/#popupopen 

https://ej2.syncfusion.com/javascript/documentation/api/drop-down-list#change 

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

Regards,  

Vengatesh 

 

[Basil Buwalda]

Thanks for your great response I will work through the sample, I might have some questions just to wrap my mind around the scheduler

[Vengatesh Maniraj]

Hi Basil, 

Thanks for the update. 

We are waiting to hear from you. 

 

Regards, 

Vengatesh 

[Basil Buwalda]

Hi,

When adding to the Scheduler I get errors around some fields that I don't have on my model.

If I add them and what is the best way to set their default values in the background without showing them

And how do I switch some of them off?

Sample of the error is:

Exception = "The property 'StartTimezone' does not exist on type 'EQUIAVIA.KYS.DataModel.Models.Appointment'. Make sure to only use property names that are defined by the type."

Regards

[Basil Buwalda]

Not tooo sure what I need to do with this Exception = "The property 'Guid' does not exist on type 'EQUIAVIA.KYS.DataModel.Models.Appointment'. Make sure to only use property names that are defined by the type."

This exception I get when I create my appointments outside the scheduler and update them in the scheduler

[Vengatesh Maniraj]

Hi Basil, 

Thanks for the update. 

We have validated your reported problem and checked our previously updated CRUD sample using ODataV4 Adaptor at our end in that the StartTimezone and EndTimezone fields are working properly and for the same, we have taken a video demo for it. And we suspect that in your server end DB fields may differ from the client end fields for the appointments that could be the reason for the reported issue. 

Video Demo: https://www.syncfusion.com/downloads/support/forum/150917/ze/scheduler_video_demo-1771201046  

Kindly refer the below screenshot for the DB fields in server end, 

 

Note: The DB fields and field name at the serve end needs to be similar with client end fields for the appointments. 

Kindly refer the above demo link, If the issue still persists at your end kindly replicate the issue in our previously provided sample / share the DB structure with scheduler rendering code / working sample (if possible) for the better serve. 

Regards, 

Vengatesh 

[Basil Buwalda]

Cool thanks I will have a play

[Basil Buwalda]

Hi,

On saving an update I find that I have an 

Exception = "The property 'Guid' does not exist on type 'EQUIAVIA.KYS.DataModel.Models.Appointment'. Make sure to only use property names that are defined by the type." 

Please see attached file...

So, On update, it posts a GUID value how do I switch it off. 

Attachment: Annotation_20200207_201232_8c64bbb1.zip

[Vengatesh Maniraj]

Hi Basil, 

Thanks for the update. 

Based on the shared image, we have modified our previously updated service file by adding additional field as GuidId with Guid type and the same can be downloaded from the following links. 

Service: https://www.syncfusion.com/downloads/support/forum/150917/ze/servie1882975709  

Sample: https://www.syncfusion.com/downloads/support/forum/150917/ze/sample2021194750  

And for further reference kindly refer the below highlighted field in the image1, events in the image2 and the code snippet, 

Image1: 

 

Image2: