1. Home
  2. Forum
  3. ASP.NET Core - EJ 2
  4. Custom Field (Multi-Select) within Schedule-Editor-Window

Custom Field (Multi-Select) within Schedule-Editor-Window

I would like to create a Multi-Select-Field within the Schedule-Editor.
I have:
- Scheduler with remote data working; the returned objects already contain this extra property "CrewList".
- The Data for the Multi-Select is present in the view Model, and already works like this:
<ejs-multiselect id="SailCrewList" placeholder="Add Crew" dataSource="@Model.Users">
        <e-multiselect-fields id="Id" text="DisplayName" value="Id"></e-multiselect-fields>
</ejs-multiselect>

How do I add this, ideally just above "Description", in the Schedule editor window?

Unfortunately this very topic https://ej2.syncfusion.com/aspnetcore/documentation/schedule/data-binding.html#passing-additional-parameters mentions the "query" parameter but the example doesn't actually include it.

Thank you for your time.

7 Replies
VD Vinitha Devi Murugan Syncfusion Team September 13, 2018 06:32 PM UTC

Hi Stefan,  
  
Thanks for contacting Syncfusion support. 
  
To place a multiSelect control within the editor, need to define and render it within the scheduler’s “popupOpen” event with appropriate dataSource assigned to it. We have prepared the editor custom field sample with multiselect field where the changes are highlighted below, and the same can be downloaded from the following location. 
 
.cshtml 
 
 
@using Syncfusion.EJ2 
 
    <div class="control-section"> 
        <ejs-schedule id="schedule" width="100%" height="550px" selectedDate="new DateTime(2018, 2, 15)" popupOpen="onPopupOpen"> 
            <e-schedule-eventsettings dataSource="@ViewBag.datasource"> 
            </e-schedule-eventsettings> 
        </ejs-schedule> 
    </div> 
 
    <style> 
        .custom-field-row { 
            margin-bottom: 20px; 
        } 
    </style> 
 
    <script type="text/javascript"> 
        function onPopupOpen(args) { 
            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-description-row')); 
                    var container = ej.base.createElement('div', { className: 'custom-field-container' }); 
                    var inputEle = ej.base.createElement('input', { 
                        className: 'e-field', attrs: { name: 'SailCrewList' } 
                    }); 
                    container.appendChild(inputEle); 
                    row.appendChild(container); 
 
                    var multiselectList = new ej.dropdowns.MultiSelect({ 
                        dataSource: [ 
                            { text: 'Public Event', value: 'public-event' }, 
                            { text: 'Maintenance', value: 'maintenance' }, 
                            { text: 'Commercial Event', value: 'commercial-event' }, 
                            { text: 'Family Event', value: 'family-event' } 
                        ], 
                        fields: { text: 'text', value: 'value' }, 
                        value: (args.data).SailCrewList, 
                        floatLabelType: 'Always', placeholder: 'Event Type' 
                    }); 
                    multiselectList.appendTo(inputEle); 
                    inputEle.setAttribute('name', 'SailCrewList'); 
                } 
            } 
        } 
 
    </script> 
 


Kindly try with the above sample and let us know, if you need any further assistance on this. 

Regards,  
M. Vinitha devi. 


ST Stefan September 16, 2018 09:50 AM UTC

Hi Vinitha
Thank you very much for your example.
Is there a Tag helper or sth similar to defined the data manager portion?

What's the best way to turn the Razor Tag Helper Code
<ejs-multiselect id="SailCrewList" placeholder="Add Crew" dataSource="@Model.Users">
        <e-multiselect-fields id="Id" text="DisplayName" value="Id"></e-multiselect-fields>
</ejs-multiselect>

into the javascript below? Especially the datasource:
dataSource: [ 
                            { text: 'Public Event', value: 'public-event' }, 
                            { text: 'Maintenance', value: 'maintenance' }, 
                            { text: 'Commercial Event', value: 'commercial-event' }, 
                            { text: 'Family Event', value: 'family-event' } 
                        ], 

That would be very helpful to know.
Thank you very much.
Stefan

VS Velmurugan S Syncfusion Team September 17, 2018 04:34 PM UTC

Hi Stefan, 

You are Welcome. 

We believe that your requirement is to load the multi select control data from server side (i.e. controller page) using the data manager and for the same, we modified the previously shared sample, which can be downloaded from the following location. 
 
 
Please refer to the following code example to load the MultiSelect control data from server side. 
Index.cshtml page: 
<script type="text/javascript"> 
        function onPopupOpen(args) { 
            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-description-row')); 
                    var container = ej.base.createElement('div', { className: 'custom-field-container' }); 
                    var inputEle = ej.base.createElement('input', { 
                        className: 'e-field', attrs: { name: 'EventType' } 
                    }); 
                    container.appendChild(inputEle); 
                    row.appendChild(container); 
 
                    var multiselectList = new ej.dropdowns.MultiSelect({ 
                        dataSource: new ej.data.DataManager( 
                            { 
                                url: '@Url.Action("GetData","Home")', 
                                adaptor: new ej.data.UrlAdaptor() 
                            }), 
                        fields: { text: 'Text', value: 'Value' }, 
                        value: args.data.EventType, 
                        floatLabelType: 'Always', placeholder: 'Event Type' 
                    }); 
                    multiselectList.appendTo(inputEle); 
                } 
            } 
        } 
 
</script> 
 
HomeController Page: 
public List<EventType> GetData() 
        { 
            List<EventType> eventTypes = new List<EventType>(); 
            eventTypes.Add(new EventType { Text = "Public Event", Value = "public-event" }); 
            eventTypes.Add(new EventType { Text = "Maintenance", Value = "maintenance" }); 
            eventTypes.Add(new EventType { Text = "Commercial Event", Value = "commercial-event" }); 
            eventTypes.Add(new EventType { Text = "Family Event", Value = "family-event" }); 
            return eventTypes.ToList(); 
        } 
 
        public class EventType 
        { 
            public string Text { set; get; } 
            public string Value { set; get; } 
        } 
 
Kindly try with the above sample and code example and let us know if you need any further assistance on this or share some more information about your requirement if we misunderstood your requirement. 
Regards, 
Velmurugan

ST Stefan December 27, 2018 12:13 PM UTC

Dear Support-Team,
please accept my apologies for the late reply, it is only now that I can return to this project.
Unfortunately it appears as though I haven't been clear about the requirement:

What I would like to do is to use the tag helpers (if at all possible) to define my extra elements. The data source for the extra field in the schedule editor window is static, and is added to the view through a view model.
My view model looks like this:

public class ScheduleViewModel
    {
        public List<ResourceGroups> ResourceGroups;
        public List<Resources> Resources;
        public List<CrewListUserViewModel> Users;
    }

The first two are used to configure the Schedule resources. The Users List contains Names and Ids of Users that can be added to an appointment.
In the view I'm configuring the Schedule using Tag Helpers; <ejs-schedule ....>, which all works fine including the data manager.

I can configure and render my user list easily using tag helpers as well:
<div>
    <ejs-multiselect id="SailCrewList" placeholder="Add crew" dataSource="@Model.Users">
        <e-multiselect-fields id="Id" text="DisplayName" value="Id"></e-multiselect-fields>
    </ejs-multiselect>
</div>

Now the question is whether I can use these tag helpers to add the generated output to my javascript instead of rendering it directly on the page? In pseudo code:

<script type="text/javascript"> 
        function onPopupOpen(args) {
          ....
          <ejs-multiselect id=""...>

If this is not possible, how would I define a datamanger in javascript to use a property of my view's model?

So instead of
var multiselectList = new ej.dropdowns.MultiSelect({ 
                        dataSource: [ 
                            { text: 'Public Event', value: 'public-event' }, 
                            { text: 'Maintenance', value: 'maintenance' },

use dataSource="@Model.Users" there?

Thank you very much for your reply.

NR Nevitha Ravi Syncfusion Team December 31, 2018 12:22 PM UTC

Hi Stefan, 

Thanks for your update. 

It is not possible to define the tag helpers within the JavaScript, but you can access the view’s model as shown in the following highlighted code example. We have also modified the previously shared example in which dataSource for multiselect has been retrieved from models that can be downloaded from the following link. 

<script type="text/javascript"> 
        var eventData = JSON.parse('@Html.Raw(ViewBag.Data)');  
        function onPopupOpen(args) { 
            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-description-row')); 
                    var container = ej.base.createElement('div', { className: 'custom-field-container' }); 
                    var inputEle = ej.base.createElement('input', { 
                        className: 'e-field', attrs: { name: 'EventType' } 
                    }); 
                    container.appendChild(inputEle); 
                    row.appendChild(container); 
                    var multiselectList = new ej.dropdowns.MultiSelect({ 
                        dataSource: eventData, 
                        fields: { text: 'Text', value: 'Value' }, 
                        value: args.data.EventType, 
                        floatLabelType: 'Always', placeholder: 'Event Type' 
                    }); 
                    multiselectList.appendTo(inputEle); 
                } 
            } 
        } 
</script> 
Controller: 
        public IActionResult Index() 
        { 
            ViewBag.datasource = new ScheduleData().GetScheduleData(); 
            ViewBag.Data = JsonConvert.SerializeObject(new ScheduleData().GetEventData()); 
            return View(); 
        } 
Model: 
        public List<EventType> GetEventData() 
        { 
            List<EventType> eventTypes = new List<EventType>(); 
            eventTypes.Add(new EventType { Text = "Public Event", Value = "public-event" }); 
            eventTypes.Add(new EventType { Text = "Maintenance", Value = "maintenance" }); 
            eventTypes.Add(new EventType { Text = "Commercial Event", Value = "commercial-event" }); 
            eventTypes.Add(new EventType { Text = "Family Event", Value = "family-event" }); 
            return eventTypes.ToList(); 
        } 
    } 
 
    public class EventType 
    { 
        public string Text { set; get; } 
        public string Value { set; get; } 
    } 
 
Please check the above sample and let us know if you need any further assistance on this. 

Regards, 
Nevitha. 


CA Casper May 1, 2019 07:19 AM UTC

I have a similar situation and this example works great. The only thing I cannot get to work (due to my inexperience)  is how I can post the value of the EventType back. I used the other CRUD example with

 public JsonResult UpdateData(EditParams param)
 
The chosen value of the EventType is not set in param. Can you tell me how to post back the EventType field?

Many thanks,

Casper

KK Karthigeyan Krishnamurthi Syncfusion Team May 2, 2019 11:09 AM UTC

Hi Casper,  
 
Greetings from Syncfusion. 
 
We have prepared the CRUD sample with extra field EventType which can be download from the below link. 
 
Regards, 
Karthi 


Loader.
Up arrow icon