Customizing event editor using template WITH RESOURCE SELECTORS

[Guillermo]

Hello

I am customizing the event editor according to the guide:

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

My scheduler shows the events in Resource grouping (Rooms / Owners) and I would like to be able to choose the two types of resources in the same way that it appears in the default editor.

It's possible?

Thank you very much

[Vengatesh Maniraj]

Hi Guillermo, 

Greetings from Syncfusion Support. 

We have validated your requirement “multilevel resource rendering in editor template” at our end and based on that, we have prepared the sample. This is available in the below link. 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ScheduleCore729652672  

Kindly check the above sample and get back to us for further assistance. 

Regard, 

Vengatesh 

[Guillermo]

Hello again.

Controls have been added successfully, but when editing an event the selected resources are not initially displayed in the placeholder ('1 selected' appears.)

I have tried a dropwdown in the same way as the example for Eventtype, but the same thing happens.

Attachment 'index.cshmtl' with the tests carried out.

Thank you very much again.

Attachment: Index_67774b60.zip

[Vengatesh Maniraj]

Hi Guillermo, 

Thanks for the update. 

We have validated your query and we suggest you please use the mode option for MultiSelect dropdown control to overcome this issue like below, 

<script type="text/javascript"> 

    function onPopupOpen (args) { 

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

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

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

            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 roomEle = args.element.querySelector('#RoomId'); 

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

                var multiSelectObject = new ej.dropdowns.MultiSelect({ 

                    width: "100%", 

                    placeholder: 'Select a room', 

                    dataSource: roomData, 

                    fields: { text: 'text', value: 'id' }, 

                    value: (args.data.OwnerId instanceof Array) ? args.data.OwnerId : [args.data.OwnerId], 

                    mode: 'Box' 

                }); 

                multiSelectObject.appendTo(roomEle); 

            } 

 

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

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

                var multiSelectObject = new ej.dropdowns.MultiSelect({ 

                    placeholder: 'Select a owner', 

                    dataSource: ownerData, 

                    fields: { text: 'text', value: 'id' }, 

                    value: (args.data.OwnerId instanceof Array) ? args.data.OwnerId : [args.data.OwnerId], 

                    mode: 'Box' 

                }); 

                multiSelectObject.appendTo(processElement); 

            } 

        } 

    } 

</script> 

Kindly make the above changes and get back to us if you need any further assistance. 

Regards, 

Vengatesh  

[Karam Ramadan]

Hello Vengatesh ,

I tried your code, but it did not work for me.

What I'm doing, is that I have a button inside the Event Editor, that Button will open a dialog with a grid in it.

so I open the dialog with 11K records loaded in the grid with pagination. I select only one value and that value should be saved in a multi-select in the Event Editor. So that I can have the id of the selected value in controller .. when I make crud operations.

So this is what i did so far:

in the onPopupSchedule:

let firmen = args.element.querySelector('#Firma');
if (!firmen.classList.contains('e-multiselect')) {
   let multiSelectObject = new ej.dropdowns.MultiSelect({
        fields: {
            text: 'Firma',
            value: 'Id'
        },
        value: (args.data.Id instanceof Array) ? args.data.Id : [args.data.Id],
        width: 200,
    });
    multiSelectObject.appendTo(firmen);
} 

so as you see, I have no dataSource defined yet.

after selecting a record from the grid, I hit save, and then I change the dataSource of the multiselect, then I change the selected value by selecting this one record (the only added record ), do this in the onOpenDialog -> onClickSave:

var Firma = document.getElementById('Firma').ej2_instances[0];
Firma.dataSource = [{Firma:selectedRecord[0].Firma,Id:selectedRecord[0].Id}];
Firma.value = [selectedRecord[0].Id];

after this record is selected in the multi-select, I hit save, and that will trigger the updateMethod in Controller, I debug and I find no value in the RecidFirmen.

this how this multi-select in the event editor template looks like:

<div class="col-4 ThirdColumn">
    <div class="row r01">
        <div class="col">
            <span class="fieldName">Firma</span>
        </div>
    </div>
    <div class="row r02">
        <div class="col-8">
            <input type="text" id="Firma" name="RecidFirmen" class="e-field"/>
        </div>
        <div class="col-4 row-btn" style="padding:0 5px">
            <button id="FirmaBtn" name="FirmaBtn" class="e-field e-btn" onclick="onClickFirmen()">FIR</button>
        </div>
    </div>
</div>

Thanks in advance

Regards,

Karam

[Balasubramanian Sattanathan]

Hi Karam, 

Thanks for contacting Syncfusion Support. 

We have analyzed your reported scenario and checked it by preparing the below sample at our end. In the below sample, the scheduler editor window has a button and once it’s clicked the dialog will open with grid records and also the multi select dropdown data-source will be updated based on the selected records in the grid. Since the data-source for multi select dropdown is updated properly at our end. So we would suggest you to refer and follow the below sample. 

function onRowSelected(args) { 

    var dialog = document.getElementById("dialog").ej2_instances[0]; 

    dialog.hide(); 

    var multi = document.getElementById("EventType").ej2_instances[0]; 

    multi.dataSource = [args.data.Type]; 

} 

Sample: https://www.syncfusion.com/downloads/support/forum/154277/ze/schedule_with_dialog_grid1670158936.zip 

Kindly refer to the above solution and let us know the below details if the problem is not resolved. 

• Try to reproduce the problem in the above sample
• Share an issue reproduced sample which would help us to proceed further.

Regards, 

Balasubramanian S