Add fields to editor from EF objects

[Brad Shannon]

How can I add a dropdown list that is populated from my EF object to the popup editor?  For example, on my Schedule object I have a field called 'Route' and this field would return a list of routes that are available.  I need to show these routes in a dropdown list on the popup editor.

[Brad Shannon]

Here is what I have so far and I'm getting this error...

Uncaught TypeError: ej.DataManager is not a function

    function onPopupOpen(args) {

        var dataRoutes = ej.DataManager({ url: "Routes/LoadData", adaptor: "UrlAdaptor" });

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

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

                var row = 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 = ej.base.createElement('div', { className: 'custom-field-container' });

                var inputRoute = ej.base.createElement('input', {

                    className: 'e-field', attrs: { name: 'Route' }

                });

                container.appendChild(inputRoute);

                row.appendChild(container);

                var ddlRoutes = new ej.dropdowns.DropDownList({

                    dataSource: dataRoutes,

                    fields: { text: 'Name', value: 'RouteID' },

                    floatLabelType: 'Always', placeholder: 'Route'

                });

                ddlRoutes.appendTo(inputRoute);

                inputRoute.setAttribute('name', 'Route');

            }

        }

    }

[Arun Palaniyandi]

 

Hi Brad , 

 

Greetings from Syncfusion.  

 

We have checked your reported issue and this issue is because you have called the EJ1 Datamanager instead of EJ2 Datamanager. Kindly refer to the following code to avoid your issue. 

 

 

 

function onPopupOpen(args) { 

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

 

            var dataRoutes = ej.data.DataManager({ url: "Routes/LoadData", adaptor: "UrlAdaptor" }); // give like this 

 

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

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

                    var row = 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 = ej.base.createElement('div', { className: 'custom-field-container' }); 

 

                    var inputRoute = ej.base.createElement('input', { 

                        className: 'e-field', attrs: { name: 'Route' } 

                    }); 

                    container.appendChild(inputRoute); 

                    row.appendChild(container); 

                    var ddlRoutes = new ej.dropdowns.DropDownList({ 

                        dataSource: dataRoutes, 

                        fields: { text: 'Name', value: 'RouteID' }, 

                        floatLabelType: 'Always', placeholder: 'Route' 

                    }); 

                    ddlRoutes.appendTo(inputRoute); 

                    inputRoute.setAttribute('name', 'Route'); 

                } 

            } 

        } 

    } 

 

  

  

We have attached the below sample for your reference. 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/146425/ze/ScheduleSample-EF1502813255 

 

 

Please let us know if you need further assistance. 

 

Regards, 

Arun P. 

[Brad Shannon]

Thanks! I updated my code and now I'm getting this error when I click on a cell in the Scheduler.

manager.js:20 Uncaught TypeError: Cannot add property dateParse, object is not extensible

    function onPopupOpen(args) {

        var dataRoutes = ej.data.DataManager({ url: "Routes/LoadData", adaptor: "UrlAdaptor" });

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

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

                var row = 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 = ej.base.createElement('div', { className: 'custom-field-container' });

                var inputRoute = ej.base.createElement('input', {

                    className: 'e-field', attrs: { name: 'Route' }

                });

                container.appendChild(inputRoute);

                row.appendChild(container);

                var ddlRoutes = new ej.dropdowns.DropDownList({

                    dataSource: dataRoutes,

                    fields: { text: 'Name', value: 'RouteID' },

                    floatLabelType: 'Always', placeholder: 'Route'

                });

                ddlRoutes.appendTo(inputRoute);

                inputRoute.setAttribute('name', 'Route');

            }

        }

    }

[Brad Shannon]

I decided to fully implement the method in the sample you provided, and I'm getting this...

I have @using Syncfusion.EJ2.Schedule at the top of the page and I have the latest Syncfusion.EJ2.AspNet.Core installed.

[Arun Palaniyandi]

Hi Brad ,  

Thanks for your update. 

We regret the inconvenience caused. We need to add the new keyword before the Datamanager since we are created this dynamically like below. 

function onPopupOpen(args) { 

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

 

            var dataRoutes =  new ej.data.DataManager({ url: 'https://ej2services.syncfusion.com/production/web-services/api/Employees', adaptor: "WebApiAdaptor" , crossDomain: true }); 

 

            var statusElement = args.element.querySelector('#EmployeeId'); 

            if (!statusElement.classList.contains('e-dropdownlist')) { 

                var dropDownListObject = new ej.dropdowns.DropDownList({ 

                    placeholder: 'Choose status', value: args.data.EmployeeId, 

                    dataSource: dataRoutes, 

                    query: new ej.data.Query(), 

                    fields: { text:"FirstName", value:"EmployeeID" } 

 

                }); 

                dropDownListObject.appendTo(statusElement); 

                statusElement.setAttribute('name', 'EmployeeId'); 

            } 

            var startElement = args.element.querySelector('#StartTime'); 

            if (!startElement.classList.contains('e-datetimepicker')) { 

                new ej.calendars.DateTimePicker({ value: new Date(startElement.value) || new Date() }, startElement); 

            } 

            var endElement = args.element.querySelector('#EndTime'); 

            if (!endElement.classList.contains('e-datetimepicker')) { 

                new ej.calendars.DateTimePicker({ value: new Date(endElement.value) || new Date() }, endElement); 

            } 

        } 

    }; 

We have also modified our sample to EJ2 Core application and please find the below sample for more reference. 

https://www.syncfusion.com/downloads/support/forum/146425/ze/ScheduleSampleCRUD513821774 

Regards, 

Arun P. 

[Brad Shannon]

Thanks!  I got the editor popup to open, but now the Dropdown List control won't populate.  Here's the error and my code...

    function onPopupOpen(args) {

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

            var dataRoutes = new ej.data.DataManager({ url: 'Routes/LoadData', adaptor: 'UrlAdaptor', crossDomain: true });

            var statusElement = args.element.querySelector('#RouteID');

            if (!statusElement.classList.contains('e-dropdownlist')) {

                var dropDownListObject = new ej.dropdowns.DropDownList({

                    placeholder: 'Choose Route',

                    value: args.data.RouteID,

                    dataSource: dataRoutes,

                    query: new ej.data.Query().select(['Name', 'RouteID']),

                    fields: { value: 'Name' },

                });

                dropDownListObject.appendTo(statusElement);

                statusElement.setAttribute('name', 'RouteID');

            }

            var startElement = args.element.querySelector('#StartTime');

            if (!startElement.classList.contains('e-datetimepicker')) {

                new ej.calendars.DateTimePicker({ value: new Date(startElement.value) || new Date() }, startElement);

            }

            var endElement = args.element.querySelector('#EndTime');

            if (!endElement.classList.contains('e-datetimepicker')) {

                new ej.calendars.DateTimePicker({ value: new Date(endElement.value) || new Date() }, endElement);

            }

        }

    }

[Arun Palaniyandi]

Hi Brad ,   

 

Thanks for your update.  

 

We regret the inconvenience caused. We need to add the new keyword before the Adaptor same like that of the Datamanager since we are created this dynamically like below.  

function onPopupOpen(args) { 

 

        var dataRoutes = new ej.data.DataManager({ url: 'Routes/LoadData', adaptor: new ej.data.UrlAdaptor(), crossDomain: true }); 

 

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

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

                var row = 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 = ej.base.createElement('div', { className: 'custom-field-container' }); 

 

                var inputRoute = ej.base.createElement('input', { 

                    className: 'e-field', attrs: { name: 'Route' } 

                }); 

                container.appendChild(inputRoute); 

                row.appendChild(container); 

                var ddlRoutes = new ej.dropdowns.DropDownList({ 

                    dataSource: dataRoutes, 

                    fields: { text: 'Name', value: 'RouteID' }, 

                    floatLabelType: 'Always', placeholder: 'Route' 

                }); 

                ddlRoutes.appendTo(inputRoute); 

                inputRoute.setAttribute('name', 'Route'); 

            } 

        } 

    } 

 

Regards,  

Arun P.  

 

[Brad Shannon]

Thanks!  So far so good!

[Karthigeyan Krishnamurthi]

Hi Brad,

 

We are happy that our solution fulfilled your requirements.

 

Regards,

Karthi