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

Add fields to editor from EF objects

Thread ID:

Created:

Updated:

Platform:

Replies:

146425 Aug 2,2019 07:08 PM UTC Aug 12,2019 06:16 AM UTC ASP.NET Core - EJ 2 9
loading
Tags: Scheduler
Brad Shannon
Asked On August 2, 2019 07:08 PM UTC

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


Arun Palaniyandi [Syncfusion]
Replied On 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. 


Brad Shannon
Replied On 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');
            }
        }
    }

Brad Shannon
Replied On 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.

Arun Palaniyandi [Syncfusion]
Replied On 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. 



Brad Shannon
Replied On 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);
            }
        }
    }


Arun Palaniyandi [Syncfusion]
Replied On 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.  
 


Brad Shannon
Replied On August 9, 2019 03:18 PM UTC

Thanks!  So far so good!

Karthigeyan Krishnamurthi [Syncfusion]
Replied On August 12, 2019 06:16 AM UTC

Hi Brad,

 

We are happy that our solution fulfilled your requirements.

 

Regards,

Karthi


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon