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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Is there a sample app using oData with the scheduler?

Thread ID:

Created:

Updated:

Platform:

Replies:

150917 Jan 24,2020 07:06 AM UTC Feb 14,2020 04:11 AM UTC ASP.NET Core - EJ 2 16
loading
Tags: Scheduler
Basil Buwalda
Asked On January 24, 2020 07:06 AM UTC

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 [Syncfusion]
Replied On January 27, 2020 10:26 AM UTC

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, 


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, 

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

Regards,  
Vengatesh 
 


Basil Buwalda
Replied On January 27, 2020 08:32 PM UTC

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 [Syncfusion]
Replied On January 28, 2020 11:29 AM UTC

Hi Basil, 

Thanks for the update. 

We are waiting to hear from you. 
 
Regards, 
Vengatesh 


Basil Buwalda
Replied On February 6, 2020 08:44 PM UTC

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
Replied On February 7, 2020 03:50 AM UTC

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 [Syncfusion]
Replied On February 7, 2020 04:54 AM UTC

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. 


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
Replied On February 7, 2020 05:06 AM UTC

Cool thanks I will have a play

Basil Buwalda
Replied On February 7, 2020 07:15 AM UTC

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 [Syncfusion]
Replied On February 10, 2020 09:55 AM UTC

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. 


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
Replied On February 10, 2020 08:47 PM UTC

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 [Syncfusion]
Replied On February 11, 2020 12:56 PM UTC

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, 


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: