Grid in Bootstrap 4 Modal can drag but cannot drop

[Jimmy]

HI

I have a grid with row reorder enabled in bootstrap 4 pop up modal. 

I can drag the row but cannot drop the row to another position., It works outside of modal. 

Can I know is there anything extra to set or need a hack to allow the dropping of row to reorder them?

My code below:

Note: Datasource is set on document ready script.

<div class="modal fade" id="ServiceDetailModal" role="dialog" aria-labelledby="ServiceDetailModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog" role="dialog">

        <form id="ServiceDetailModalForm" autocomplete="off" >

            <div class="modal-content">

                <div class="modal-header pb-0">
                    Services Detail
                </div>
                <div class="modal-body">

@(
Html.Kendo().Grid<DSPJobServiceItems>()
.Name("modalServiceDetail_ServiceFeeItem")
.Editable(editable => editable.Mode(GridEditMode.InCell))
.Navigatable(true)
.Reorderable(r => r.Rows(true))
.Events(e => e.Edit("ServiceFeeEdit").RowReorder("modalServiceDetail_ServiceFeeItemRowReorder"))
.Columns(columns =>
{
columns.Template("").Width(50).Draggable(true); 
columns.Bound(p => p.GeneralServiceTitle).Title("Service Item");
})
)

</div>

                <div class="modal-footer">
                    <button type="button" class="k-button btn-danger">Close</button>
                </div>
            </div>
        </form>
    </div>
</div>

[Alexander]

Hi Jimmy,

The issue could potentially be related to several factors. Please allow me to outline them in a more numerical-like manner:

 1) The Bootstrap modal is instantiated multiple times when the dialog is opened.

 2) The Grid is initially in a hidden state.

 3) The attachment to DataSource occurs while the Grid is still hidden. The drag-and-drop functionality would rely on the rendered DOM elements representing the rows of the Grid.

Generally, when the Grid is initially in a hidden state, it cannot calculate its rendering dimensions within the DOM markup accordingly which could produce insufficient functionality depending on the current Grid configuration in the long run.

Taking these factors into mind, a possible suggestion would be to handle the show.bs.modal event instead, setting the .AutoBind() API configuration explicitly to "false", and call both the .resize() method and the dataSource.read() method if the DataSource CRUD endpoints point to a remote endpoint in order to resize its dimensions and bind the data when the component is in a presentable state.

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#ServiceDetailModal">
  Open Modal
</button>

<script>
    $(document).ready(function () {
        $("#ServiceDetailModal").on('shown.bs.modal', function () {
            $("#modalServiceDetail_ServiceFeeItem").data("kendoGrid").dataSource.read();
            $("#modalServiceDetail_ServiceFeeItem").data("kendoGrid").resize();
        });
    })
</script>

More information in regard to the hidden container state of the Grid is available within the following documentation that you might find helpful as well:

Hidden Containers - (Documentation)

If this does not help, would it be possible for you to share the client-side side responsible for setting the DataSource so that I could examine it further? This will help get a better overall understanding of the case as well as debug the scenario in a more local environment.

Kind Regards,
Alexander
Progress Telerik

[Jimmy]

Thank you for your reply, Alexander.

I have resolved the issue using Kendo Sortable attaching to the grid and it works.

I will give your suggestion a try later when I have some time in between projects. 

Thank you!

[Alexander]

Hi Jimmy,

Thank you for letting me know. Please take as much time as you need in trying out the aforementioned suggestions.

I will be looking forward to hearing back from you with more input regarding the subject matter.