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: 

 

 

Code snippet: 

In EventDatasController.cs file, 

        // POST: odata/EventDatas 

        [AcceptVerbs("POST", "OPTIONS")] 

        public void Post([FromBody]CrudData eventData) 

        { 

            EventData insertData = new EventData(); 

            insertData.Id = (db.EventDatas.ToList().Count > 0 ? db.EventDatas.ToList().Max(p => p.Id) : 1) + 1; 

            insertData.StartTime = Convert.ToDateTime(eventData.StartTime).ToLocalTime(); 

            insertData.EndTime = Convert.ToDateTime(eventData.EndTime).ToLocalTime(); 

            insertData.Subject = eventData.Subject; 

            insertData.IsAllDay = eventData.IsAllDay; 

            insertData.Location = eventData.Location; 

            insertData.Description = eventData.Description; 

            insertData.State = eventData.State; 

            insertData.City = eventData.City; 

            insertData.RecurrenceRule = eventData.RecurrenceRule; 

            insertData.RecurrenceID = eventData.RecurrenceID; 

            insertData.RecurrenceException = eventData.RecurrenceException; 

            insertData.StartTimezone = eventData.StartTimezone; 

            insertData.EndTimezone = eventData.EndTimezone; 

            insertData.GuidId = Guid.NewGuid(); 

            db.EventDatas.Add(insertData); 

            db.SaveChanges(); 

        } 

        // PATCH: odata/EventDatas(5) 

        [AcceptVerbs("PATCH", "MERGE", "OPTIONS")] 

        public void Patch([FromBody]CrudData eventData) 

        { 

            EventData updateData = db.EventDatas.Find(Convert.ToInt32(eventData.Id)); 

            if (updateData != null) 

            { 

                updateData.StartTime = Convert.ToDateTime(eventData.StartTime).ToLocalTime(); 

                updateData.EndTime = Convert.ToDateTime(eventData.EndTime).ToLocalTime(); 

                updateData.Subject = eventData.Subject; 

                updateData.IsAllDay = eventData.IsAllDay; 

                updateData.Location = eventData.Location; 

                updateData.Description = eventData.Description; 

                updateData.State = eventData.State; 

                updateData.City = eventData.City; 

                updateData.RecurrenceRule = eventData.RecurrenceRule; 

                updateData.RecurrenceID = eventData.RecurrenceID; 

                updateData.RecurrenceException = eventData.RecurrenceException; 

                updateData.StartTimezone = eventData.StartTimezone; 

                updateData.EndTimezone = eventData.EndTimezone; 

                updateData.GuidId = eventData.GuidId; 

                db.SaveChanges(); 

            } 

        } 

Kindly try the above sample and revert us for further assistance. 

 

Regards, 

Vengatesh 

[Basil Buwalda]

Hi, Thank you for guiding me. I am churning through my example so please keep an eye on this thread. I was thinking of logging them in new threads but my questions are unfortunately too closely related to this example/thread. Please bear with me, your patience is greatly appreciated...

My next question... 

Some of my custom fields are set in the background, for example, my appointment carries an OrganisationId and that is not set in the front end of the scheduler, the client does not select an organisation they are in a calendar of one and I need to set the id of that on the scheduler...

....on the ejs-grid I set it like this:

        <e-grid-columns>

            <e-grid-column field="Id" headerText="Id" isPrimaryKey="true" isIdentity="true" visible="false"></e-grid-column>

            <e-grid-column field="OrganisationId" defaultValue="@ViewBag.Organisation.Id" visible="false"></e-grid-column>

            <e-grid-column field="IsActive" defaultValue="true" visible="false"></e-grid-column>

Where and how do you do this on the ejs-schedule, I assume its somewhere here?? and what does the syntax look like??

<div class="control-section">

    <div class="content-wrapper">

        <ejs-schedule id="schedule" width="100%" height="670px" selectedDate=@ViewBag.Today popupOpen="onPopupOpen" popupClose="onPopupClose" editorTemplate="#EditorTemplate">

            <e-schedule-eventsettings>

                <e-data-manager url="/OData/Appointments"

                                adaptor="ODataV4Adaptor"

                                crossDomain="true"

                                headers='@new Object[]{ new Dictionary<string, object>{ { "organisationid", ViewBag.Organisation.Id} } }'>

                </e-data-manager>

            </e-schedule-eventsettings>

        </ejs-schedule>

    </div>

</div>

[Vengatesh Maniraj]

Hi Basil, 

Thanks for the update. 

Based on your requirement, we have modified our previously updated sample by using an custom header to the request made by DataManager using the headers property and it is working properly at our end. And the CRUD sample can be downloaded from the following links, 

Service: https://www.syncfusion.com/downloads/support/forum/150917/ze/servie-10151241  

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

And for further reference kindly refer the below code snippet and output image, 

Code snippet: 

<ejs-schedule id="schedule" height="100%" selectedDate="new DateTime(2018,10,4)" currentView="Month" popupOpen="onPopupOpen"> 

    <e-schedule-eventsettings query="new ej.data.Query().from('EventDatas')"> 

        <e-data-manager Url="http://localhost:25255/odata" adaptor="ODataV4Adaptor" headers='@new Object[]{ new Dictionary<string, object>{ { "organisationid", ViewBag.organisationId} } }' crossDomain="true"> 

        </e-data-manager> 

    </e-schedule-eventsettings> 

</ejs-schedule> 

Output Image: 

 

 

Kindly try the above sample, if you have any other concerns kindly revert us back for the better serve. 

Regards, 

Vengatesh 

[Basil Buwalda]

Hi, yes the header works fine but what I need to know is where and how do I save it away to the database without showing it on the interface...just like what we do in the ej-grid...

....on the ejs-grid I set it like this:

        <e-grid-columns>

            <e-grid-column field="Id" headerText="Id" isPrimaryKey="true" isIdentity="true" visible="false"></e-grid-column>

            <e-grid-column field="OrganisationId" defaultValue="@ViewBag.Organisation.Id" visible="false"></e-grid-column>

            <e-grid-column field="IsActive" defaultValue="true" visible="false"></e-grid-column>

[Hareesh Balasubramanian]

Hi Basil, 

Thanks for the update. 

We have validated your reported scenario but we couldn’t able to achieve your requirement like grid. Because in grid, we have handled the viewBag data in its property. But in Schedule, we did not handle this in any Schedule’s property. 

If you have any other concerns, kindly revert us back for the better serve. 

Regards, 

Hareesh 

[Basil Buwalda]

Hi,

So there is no way to set the default values on the scheduler?

If I am logged in as a service provider and logging appointments on a database that has 1 million providers I have to enter that details every time because it cannot be set in the background? 

Another example is when I am looking at an organisation calendar and adding appointments I want to save the organization id to the database and there should be no need to change it.

Surely there should be a way to set the default values?

Regards

[Hareesh Balasubramanian]

Hi Basil, 

Thanks for the update. 

We have tried to understand your requirement at our side but we couldn’t and we suspect that your requirement is need to store the OrganisationId as additional field for the appointments in DataBase. Kindly share more details like use case scenario / video demo / reference sample (if possible) for the better serve.  

 

Regards, 

Hareesh 

[Basil Buwalda]

I will wrap my mind around it and replay soon... Thanks