BootStrap Modal - Proper way to intialize control (read as ANY EJs)

[Morgan]

I have run into this weird behavior of your controls... No matter if I try via script or taghelper or razor tag the controls flat out don't work in a modal spawned via data-toggle

 <div id="modal-container" class="modal fade hidden-print" tabindex="-1" role="dialog">

            <div class="modal-dialog">

                <div class="modal-content">

                </div>

           </div>

   </div>

    $('#modal-container').on('show.bs.modal', function (event) {

        //button that raised the event

        var button = $(event.relatedTarget);

        //url attached to button clicked.

        var url = button.attr("rel='nofollow' href");

        //the modal

        var modal = $(this);

        // note that this will replace the content of modal-content ever time the modal is opened

        modal.find('.modal-content').load(url);

    });

    $('#modal-container').on('hidden.bs.modal', function () {

        // remove the bs.modal data attribute from it

        $(this).removeData('bs.modal');

        // and empty the modal-content element

        $('#modal-container .modal-content').empty();

    });

<a class="btn btn-primary" data-target="#modal-container" data-toggle="modal" asp-action="Create">New &nbsp;<span class="fa fa-plus"></span></a>

@await Html.PartialAsync("_ModalHeader", new ModalHeader() { Title = "New Airline" })

<div class="modal-body">

    <form asp-action="Create" method="post" id="NewAirline" asp-antiforgery="true">

        <div class="form-horizontal">

            <div asp-validation-summary="ModelOnly" class="text-danger"></div>

            <div class="form-group">

                <label asp-for="Name" class="col-md-2 control-label">Airline</label>

                <div class="col-md-10">

                    <input asp-for="Name" class="form-control" />

                    <span asp-validation-for="Name" class="text-danger"></span>

                </div>

            </div>

            <div class="form-group">

                <label asp-for="Type" class="col-md-2 control-label">Type</label>

                <div class="col-md-10">       

                   @* DOES NOT RENDER*@         

                    <ej-drop-down-list id="Type" datasource="@(IEnumerable<AirlineType>)ViewBag.AirlineTypes" >                        

                        <e-drop-down-list-fields text="TypeName" value="AirlineTypeId" />

                    </ej-drop-down-list>

                    <span asp-validation-for="Type" class="text-danger"></span>

                </div>

            </div>

            &nbsp;

            @*<div class="modal-footer">

                    <div class="col-md-offset-2 col-md-10">

                        <input type="submit" id="CreateAirline" value="Save" class="btn btn-default" />

                    </div>

                </div>*@

            @await  Html.PartialAsync("_ModalFooter", new ModalFooter() { })

        </div>

    </form>

</div>

[Keerthana Rajendran]

Hi Morgan 

 

Thank you for contacting Syncfusion Support. 

 

We have checked the reported issue with the provided code. Since there is no code related to controller , we have reloaded the same view page inside bootstrap modal through create action based on our understanding. If this is your case, please assign the list for ViewBag again in create action since this will not be maintained on loading inside modal dialog. Please refer to the below code 

 

 

View: 

 

@using SyncfusionASPNETCoreApplication1.Controllers; 

<div id="modal-container" class="modal fade hidden-print" tabindex="-1" role="dialog"> 

    <div class="modal-dialog"> 

        <div class="modal-content"> 

 

        </div> 

    </div> 

</div> 

 

<script> 

    

    $('#modal-container').on('show.bs.modal', function (event) { 

        //button that raised the event 

        var button = $(event.relatedTarget); 

        //url attached to button clicked. 

        var url = button.attr("rel='nofollow' href"); 

        //the modal 

        var modal = $(this); 

        // note that this will replace the content of modal-content ever time the modal is opened 

        modal.find('.modal-content').load(url); 

         

    }); 

 

    $('#modal-container').on('hidden.bs.modal', function () { 

 

        // remove the bs.modal data attribute from it 

        $(this).removeData('bs.modal'); 

 

        // and empty the modal-content element 

        $('#modal-container .modal-content').empty(); 

 

    }); 

 

</script> 

<a class="btn btn-primary" data-target="#modal-container" data-toggle="modal" asp-action="Create">New &nbsp;<span class="fa fa-plus"></span></a> 

<div class="modal-body"> 

    <form asp-action="Create" method="post" id="NewAirline" asp-antiforgery="true"> 

        <div class="form-horizontal"> 

            <div asp-validation-summary="ModelOnly" class="text-danger"></div> 

            <div class="form-group"> 

                <label class="col-md-2 control-label">Airline</label> 

                <div class="col-md-10"> 

                    <input  class="form-control" /> 

                    <span class="text-danger"></span> 

                </div> 

            </div> 

            <div class="form-group"> 

                <label class="col-md-2 control-label">Type</label> 

                <div class="col-md-10"> 

                    @* DOES NOT RENDER*@ 

                    <ej-drop-down-list id="Type" datasource="@(IEnumerable<AirlineType>)ViewBag.AirlineTypes"> 

                        <e-drop-down-list-fields text="TypeName" value="AirlineTypeId" /> 

                    </ej-drop-down-list>                    

                    <span class="text-danger"></span> 

                </div> 

            </div> 

            &nbsp; 

        </div> 

    </form> 

</div> 

 

 

Controller: 

 

 

        public ActionResult Create() 

        { 

 

            Airline.Add(new AirlineType { TypeName = "American Airlines", AirlineTypeId = "AL1" }); 

            Airline.Add(new AirlineType { TypeName = "United Airlines", AirlineTypeId = "AL2" }); 

            Airline.Add(new AirlineType { TypeName = "NorthWest Airlines", AirlineTypeId = "AL3" }); 

            ViewBag.AirlineTypes = Airline; 

 

            return View("DropdownlistFeatures"); 

        } 

 

We have attached a sample for your reference which can be downloaded from the below link 

 

http://www.syncfusion.com/downloads/support/forum/136774/ze/DDL233240796 

 

If we have misunderstood , kindly modify the above sample to reproduce the issue in our end along with replication procedure , product version and bootstrap version so that we can proceed further. 

 

 

Regards, 

Keerthana. 

 

[Morgan]

turns out the script manager even though included in the layout .cshtml, was necessary to put it in the partial, which is very odd, taghelper

[Keerthana Rajendran]

Hi Morgan    

   

Script manager will be included in layout.cshtml page, but partial view pages will not have reference to the layout page. So, it is mandatory to add script manager in partial view page for control rendering.   

   

Please refer to the below given document.   

   

https://help.syncfusion.com/aspnetmvc/dropdownlist/howto#render-the-dropdownlist-in-partial-view-using-normal-mode   

   

Regards,   

Keerthana.