DropDownList Client Template for Grid not working in when Grid is placed in boostrap dialog modal

Hi Alexander

Below is the code for the Modal

<div class="modal fade" id="ServiceDetailModal"  role="dialog" aria-labelledby="ServiceDetailModalLabel" aria-hidden="true"  data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog modal-lg modal-w90" role="dialog">
        <form id="ServiceDetailModalForm" autocomplete="off" >
            <div class="modal-content">
                <div class="modal-header pb-0">
                    <h6 class="h6Title"><label id="title"></label> Services Detail</h6>
                </div>
                <div class="modal-body serviceDetailTable ">
                
               
@(Html.Kendo().Grid<DSPJobServiceItems>()
.Name("modalServiceDetail_ServiceFeeItem")
.Editable(editable => editable.Mode(GridEditMode.InCell))
.Events(e => e.Edit("ServiceFeeEdit"))
.Navigatable(true)
.Columns(columns =>
{
columns.Bound(p => p.ServiceItemId).Hidden(true);
columns.Bound(p => p.ServiceItem).Title("Service Item").EditorTemplateName("DSPServiceItemSelector").ClientTemplate("#=ServiceItem ? ServiceItem :  '' ");


})
.DataSource(dataSource => dataSource
.Custom()
.Batch(true)
.BindTo(ViewBag.ItemList)
)
)
                        
                </div>

                <div class="modal-footer">
                    <input type="button" value="Done" class="k-button k-primary" id="btServiceDetailSave" onclick="btServiceDetailSave_Click()" />
                    &nbsp;&nbsp;
                    <button type="button" class="k-button btn-danger" onclick="btServiceDetailCancel_Click()">Cancel</button>
                </div>
            </div>
        </form>
    </div>
</div>

And Client Template

@(Html.Kendo().DropDownListFor(m => m)
    .DataValueField("Name")
    .DataTextField("Name")
    .HtmlAttributes(new { @class = "BundledServiceItemDDL"})
    .Events(e => e.Change("ServiceBuldedItemSelectorChange"))
    .Filter(FilterType.Contains)
    .AutoBind(true)
    .DataSource(source =>
    {
        source.Read(read =>
        {
            read.Url("?handler=GetServiceItemList").Data("ddlServiceItemParameterMap");
        });
    })
)

There is no error log on developer console.

When I place the Grid outside the Pop Up Modal, the client template dropdownlist appeared. But not inside the Popup Modal.

The Dropdownlist data source "?handler=GetServiceItemList" for the dropdownlist is called and data is returned when the row is entered into edit mode, but the dropdownlist is not appeared.

Hi Jimmy,

Thank you for the additional provided configuration, it is greatly appreciated.

Upon my initial observations, I noticed the following aspects that could potentially cause the DropDownList editor's omission inside the Bootstrap modal. Please allow me to elaborate on each of them in more detail:

It seems that the Grid is not entirely configured for Batch Editing operations. It is important to note that a unique field should be specified in the Model as the DataSource Model Id, as it is mandatory for the proper execution CRUD operations. For instance:

.Model(model=>
{
    model.Id(p => p.Id);
})

I would recommend reviewing the following resources that you might find helpful:

• Grid Batch Editing Documentation
• Grid Batch Editing Demo

When bound to a complex object field, a default value must also be provided within the DataSource configuration. This would be required in order to ensure, that upon creating a default model is being passed for the object field.

For example:

.Model(model=>
{
    model.Field(o => o.Category).DefaultValue(ViewData["defaultCategory"] as CategoryViewModel);
})

Additionally, I also noticed that a Custom DataSource has been configured. Normally a custom data source is primarily useful for scenarios that do not involve any of the built-in types. In this regard, could you please elaborate more on the reasoning behind this? 

Furthermore, I noticed that the .BindTo() configuration is utilized as well. At present, according to the Server-Side DataSource API, such a configuration is currently obscured. Hence, could you please share the currently utilized version on your end?

Providing such details would help me get a better understanding of the current scenario that is currently utilized on your end and based on the obtained evidence, provide further guidance.

Finally, for your convenience, I am also attaching a runnable sample in which the grid is initialized within a Bootstrap modal whilst having its editor intact.