1. Home
  2. Forum
  3. ASP.NET Core - EJ 2
  4. Add fields to editor from EF objects

Add fields to editor from EF objects

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.

9 Replies
BS Brad Shannon August 3, 2019 09:08 PM UTC

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');
            }
        }
    }


AP Arun Palaniyandi Syncfusion Team August 5, 2019 01:17 PM UTC

 
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. 
 
 
 
Please let us know if you need further assistance. 
 
Regards, 
Arun P. 


BS Brad Shannon August 5, 2019 01:27 PM UTC

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');
            }
        }
    }

BS Brad Shannon August 5, 2019 02:52 PM UTC

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.

AP Arun Palaniyandi Syncfusion Team August 6, 2019 01:17 PM UTC

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. 




Regards, 
Arun P. 



BS Brad Shannon August 6, 2019 04:50 PM UTC

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);
            }
        }
    }


AP Arun Palaniyandi Syncfusion Team August 7, 2019 01:20 PM UTC

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.  
 


BS Brad Shannon August 9, 2019 03:18 PM UTC

Thanks!  So far so good!

KK Karthigeyan Krishnamurthi Syncfusion Team August 12, 2019 06:16 AM UTC

Hi Brad,

 

We are happy that our solution fulfilled your requirements.

 

Regards,

Karthi


Loader.
Up arrow icon