Multiple Resources on an appointment

[Gene Allen]

I'm having trouble getting multiple resources to populate with a simple example, here's the html:

                <ejs-schedule id="schedule" views="viewOption">

                    <e-schedule-resources>

                        <e-schedule-resource dataSource="@ViewBag.Rooms" field="RoomId" title="Room" name="Rooms" textField="RoomText" idField="Id" colorField="RoomColor" allowMultiple="false"></e-schedule-resource>

                        <e-schedule-resource dataSource="@ViewBag.Owners" field="OwnerId" title="Owners" name="Owners" textField="text" idField="id" colorField="color" allowMultiple="false"></e-schedule-resource>

                    </e-schedule-resources>

                </ejs-schedule>

(I lifted the code from your examples page)

The problem I'm having is, only the first resource is populated on the appointment screen...in fact, if I switch the order of them (e.g. put the owners first), it's populated but the rooms isn't.

I put the screenshots in the attached zip.

To me, that sounds like a syntax problem...but I can't see it.

Can you point me to what I'm doing wrong?

Attachment: owner_first_369b0507.zip

[Ruksar Moosa Sait]

Hi Gene,

Greetings from Syncfusion support.

We have checked on your shared codes and suspect that you have not mapped the parent resource to the child resource using the groupID field as highlighted below and it might be the root cause of the problem. We have prepared a working sample based on your shared code snippet kindly try it and let us know if this has resolved your issue.

[Index.cshtml]

<e-schedule-resource dataSource="@ViewBag.Rooms" field="RoomId" title="Room" name="Rooms" textField="RoomText" idField="Id" colorField="RoomColor" allowMultiple="false"></e-schedule-resource>

<e-schedule-resource dataSource="@ViewBag.Owners" field="OwnerId" title="Owner" name="Owners" textField="OwnerText" idField="Id" groupIDField="OwnerGroupId" colorField="OwnerColor" allowMultiple="true"></e-schedule-resource>

Output:

Regards,

Ruksar Moosa Sait

Attachment: Asp.netCoreResourceGrouping_e4f2f73d.zip

[Gene Allen]

Thank you Ruksar,

Adding an groupIdField changed the UI.

Is there anyway to have multiple resources on an appointment while keeping the normal calendar view?

>>>>>>>>>

To be more clear.  

What I'm looking for is the how to add multiple resources to an appointment.

For example, let's take a company that teaches music lessons.  Each appointment needs:  Instructor, Student, Room, Equipment and who knows what else (not counting date, time slot, etc..)

Am I taking the wrong approach trying to get the default appointment screen to support this?

[Ruksar Moosa Sait]

Hi Gene,

We have checked on your query and let you know that you can have multiple resources for an appointment with help of Schedule editorTemplate with custom input fields like the below code.

[Index.cshtml]

<script id="EventEditorTemplate" type="text/x-template">

    <table class="custom-event-editor" width="100%" cellpadding="5">

        <tbody>

            <tr>

                <td class="e-textlabel">Summary</td>

                <td colspan="4">

                    <input id="Subject" class="e-field e-input" type="text" value="" name="Subject" style="width: 100%" />

                </td>

            </tr>

            <tr>

                <td class="e-textlabel">From</td>

                <td colspan="4">

                    <input id="StartTime" class="e-field" type="text" name="StartTime" />

                </td>

            </tr>

            <tr>

                <td class="e-textlabel">To</td>

                <td colspan="4">

                    <input id="EndTime" class="e-field" type="text" name="EndTime" />

                </td>

            </tr>

            <tr>

                <td class="e-textlabel">Room</td>

                <td colspan="4">

                    <input type="text" id="RoomId" name="RoomId" class="e-field"

                     style="width: 100%" />

                </td>

            </tr>

            <tr>

                <td class="e-textlabel">Owner</td>

                <td colspan="4">

                    <input type="text" id="OwnerId" name="OwnerId" class="e-field"

                     style="width: 100%" />             

                </td>

            </tr>

            <tr>

                <td class="e-textlabel">Reason</td>

                <td colspan="4">

                    <textarea id="Description" class="e-field e-input"

                    name="Description" rows="3" cols="50"

                    style="width: 100%; height: 60px !important; resize: vertical">

                    </textarea>

                </td>

            </tr>

        </tbody>

    </table>

</script>

function onPopupOpen (args) {

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

            var roomData = @Html.Raw(Json.Serialize(ViewBag.Rooms));

            var ownerData = @Html.Raw(Json.Serialize(ViewBag.Owners));

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

            }

           var roomElement = args.element.querySelector('#RoomId');

            if (!roomElement.classList.contains('e-multiselect')) {

                var multiSelectObject = new ej.dropdowns.MultiSelect({

                    placeholder: 'Select a room',

                    dataSource: roomData,

                    fields: { text: 'roomText', value: 'roomId' },

                });

                multiSelectObject.appendTo(roomElement);

            }

            var ownerElement = args.element.querySelector('#OwnerId');

            if (!ownerElement.classList.contains('e-multiselect')) {

                var multiSelectObject = new ej.dropdowns.MultiSelect({

                    placeholder: 'Select a owner',

                    dataSource: ownerData,

                    fields: { text: 'ownerText', value: 'ownerId' },

                });

                multiSelectObject.appendTo(ownerElement);

            }

        }

    }

Output:

Kindly try the attached sample and let us know if this meets your requirement.

UG:

https://ej2.syncfusion.com/aspnetcore/documentation/schedule/editor-template#customizing-event-editor-using-template

https://ej2.syncfusion.com/aspnetcore/documentation/schedule/editor-template#how-to-add-resource-options-within-editor-template

Demo:

https://ej2.syncfusion.com/aspnetcore/Schedule/EditorTemplate#/material

Regards,

Ruksar Moosa Sait

Attachment: Asp.netCoreEditorWindowwithtwoResources_220d7858.zip

[Gene Allen]

Thank you Ruksar, that's certainly closer to what I need.

You replaced the entire dialog, which means I don't get the benefits of the built in one (e.g. recurring events, timezone, all day, etc...)

While I can recreate all that in a custom dialog...is it possible to leverage the existing dialog or maybe you have the code to recreate it somewhere?

If not, I'll move forward with the custom dialog

Thank you again!

[Satheesh Kumar Balasubramanian]

Hi Gene,

You can add additional fields to the default editor window using popupOpen event.

https://ej2.syncfusion.com/aspnetcore/Schedule/EditorCustomField#/material

[Index.cshtml]

<script type="text/javascript">

    function onPopupOpen(args) {

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

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

                    var roomData = @Html.Raw(Json.Serialize(ViewBag.Rooms));

                    var ownerData = @Html.Raw(Json.Serialize(ViewBag.Owners));

                    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 inputEle = ej.base.createElement('input', {

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

                    });

                    container.appendChild(inputEle);

                    row.appendChild(container);

                    var roomList = new ej.dropdowns.MultiSelect({

                        dataSource: roomData,

                        fields: { text: 'roomText', value: 'roomId' },

                        value: [1],

                        placeholder: 'Select a room'

                    });

                    roomList.appendTo(inputEle);

                    inputEle.setAttribute('name', 'RoomId');

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

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

                    });

                    container.appendChild(ownerElement);

                    row.appendChild(container);

                    var ownerList = new ej.dropdowns.MultiSelect({

                        dataSource: ownerData,

                        fields: { text: 'ownerText', value: 'ownerId' },

                        value: [1],

                        placeholder: 'Select a owner'

                    });

                    ownerList.appendTo(ownerElement);

                    ownerElement.setAttribute('name', 'OwnerId');

                }

            }

        }

</script>

Kindly try the attached sample and let us know if this meets your requirement.

Regards,

Satheesh Kumar B

Attachment: MultipleResources_70733bbb.zip

[Gene Allen]

Thank you  Satheesh.

That's looks like it'll do the trick!

I just need to add a header and move them to the right place on the dialog.

[Satheesh Kumar Balasubramanian]

Hi Gene,

 

We suspect that you need to show a header text above multiselect. We suggest you to use floatLabelType as Always to show a header text above multiselect and below customized style to move them right place on the dialog.

 

Index.cshtml:

<style>

        .custom-field-row {

            margin-bottom: 20px;

        }

        .e-multiselect.e-input-group .e-searcher .e-label-top {

            text-align: right;

        }

</style>

 

 

<script type="text/javascript">

    function onPopupOpen(args) {

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

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

                    container.appendChild(inputEle);

                    row.appendChild(container);

                    var roomList = new ej.dropdowns.MultiSelect({

                        dataSource: roomData,

                        cssClass: 'roomId',

                        fields: { text: 'roomText', value: 'roomId' },

                        value: [1],

                        placeholder: 'Select a room',

                        floatLabelType: 'Always'

                    });

                    roomList.appendTo(inputEle);

                    inputEle.setAttribute('name', 'RoomId');

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

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

                    });

                    container.appendChild(ownerElement);

                    row.appendChild(container);

                    var ownerList = new ej.dropdowns.MultiSelect({

                        dataSource: ownerData,

                        cssClass: 'ownerId',

                        fields: { text: 'ownerText', value: 'ownerId' },

                        value: [1],

                        placeholder: 'Select a owner',

                        floatLabelType: 'Always'

                    });

                    ownerList.appendTo(ownerElement);

                    ownerElement.setAttribute('name', 'OwnerId');

                }

            }

        }

</script>

 

Kindly try the attached sample and let us know if this meets your requirement.

 

Regards,

Satheesh Kumar B

Attachment: MultipleResources_96ccb3d9.zip