When using two MultiSelect widgets, only one renders

[Anna]

I need to use two MultiSelect widgets side by side and only one will render. The second <select> element just gets completely omitted from the DOM. There are no javascript errors and both widgets are getting initialized. The second one just doesn't show up. I was unable to replicate the issue with a simple working example but I have included my HTML, the HTML that gets rendered, and my javascript for initializing the widgets. Thanks in advance for any help.

My HTML:

<div id="scheduleToolContainer" class="wrapper">
    <div class="notificationPrompt"></div>

    <div id="scheduleToolContent">

        <button id="btnPrevDate" type="button" class="btn btn-light border"><i class="fas fa-arrow-left"></i></button>
        <input id="scheduleDatePicker" title="datepicker" />
        <button id="btnNextDate" type="button" class="btn btn-light border"><i class="fas fa-arrow-right"></i></button>

        <select id="ddAttendingProvider" style="width:250px" data-target-url="@Url.Action("GetAttendingProviders", "ScheduleTool", new { area = "PatientLists" })" />
        <select id="ddInsurance" style="width:250px" data-target-url="@Url.Action("GetInsuranceList", "ScheduleTool", new { area = "PatientLists" })" />

        <button id="btnViewSchedule" class="btn btn-primary">Apply</button>

        <div id="scheduleGrid" class="mt-2 rounded" data-schedule-url="@Url.Action("GetScheduleItems", "ScheduleTool",  new { area = "PatientLists" })"></div>

    </div>

    <button id="btnPrintEncounters" class="btn btn-light border mt-2" data-target-url="@Url.Action("PrintSelectedEncounters", "ScheduleTool", new { area = "PatientLists" })"><i class="fas fa-file-medical-alt fa-2x"></i></button>

    <div id="gridLoadingSpinner" class="text-center text-secondary"><i class="fas fa-spinner fa-spin fa-3x"></i></div>

</div>

HTML in the DOM:

Javascript (get's called when the page loads):

function loadFilters() {
    $("#ddAttendingProvider").kendoMultiSelect({
        placeholder: 'All',
        dataSource: {
            transport: {
                read: {
                    url: attProvidersUrl,
                    type: "POST",
                    data: function () {
                        return {
                            filter: Filters.toRequestFilter(),
                            date: $('#scheduleDatePicker').val()
                        }
                    }
                }
            }
        }
    });

    $("#ddInsurance").kendoMultiSelect({
        placeholder: 'All',
        dataSource: {
            transport: {
                read: {
                    type: "POST",
                    url: insuranceListUrl,                 
                    data: function () {
                        return {
                            filter: Filters.toRequestFilter(),
                            date: $('#scheduleDatePicker').val()
                        }
                    }
                }
            }
        }
    });
}

 

 

[Martin]

Hello, Anna,

The <select> tag is not self-closing like the <input/> tag. Please add the corresponding closing </select> tags.

Regards,
Martin
Progress Telerik