Kendo Grid внутри JQuery Dialog с модальной проблемой

У меня есть управление сеткой кендо внутри диалога jquery. Он отлично работает, за исключением случаев, когда в режиме диалога модально, я не могу работать с фильтром сетки. Если диалоговое модальное значение false, оно работает отлично. Мне необходимо применить модальную истинную функциональность.

Вот моментальный снимок проблемы:

Код Jquery Dialog:

$('#dialog').dialog({
  title: 'Add Patient',
  height: 'auto',
  width: '95%',
  position: ['top', 70],
  draggable: false,
  show: 'blind',
  hide: 'blind',
  modal: true,
  resizable: false,
  open: function (event, ui) {
    var url='@Url.Action("AddPatient", "PatientManagement")';
    $(this).load(url);
  },
  close: function (event, ui) {
    $(this).html('');
  }
});

Сетка Кендо:

@(Html.Kendo().Grid<RxConnectEntities.Patient>().Name("PatientList")
  .Columns(columns =>
  {
    columns.Bound(p => p.PatientID).Visible(false);
    columns.Bound(p => p.LastName).Width(100);
    columns.Bound(p => p.FirstName).Width(100);
    columns.Bound(p => p.Gender).Width(80);
    columns.Bound(p => p.DateOfBirth).Width(90).Format("{0:MM/dd/yyyy}").EditorTemplateName("DateOfBirth");
    columns.Bound(p => p.PhoneNumber).Title("Phone Number").Width(110);
    columns.Command(command =>
    {
      command.Custom("Edit").Text("Edit").Click("EditGrid");
    }).Width(120);
  })
  .Filterable(f=>f.Enabled(true))
  .Pageable(p => p.PageSizes(true))
  .Scrollable()
  .Sortable()
  .Groupable()
  .DataSource(dataSource => dataSource
  .Ajax().ServerOperation(false)
  .PageSize(5)
  .Model(m => m.Id(p => p.PatientID))
  .Read(read => read.Action("GetPatientList", "PatientManagement"))
  .Destroy(delete => delete.Action("Deletepatient", "PatientManagement"))
))

Ответ 1

Использование KendoWindow решит вашу проблему. Пример:

$('#dialog').kendoWindow({
  title: 'Add Patient',
  height: 'auto',
  width: '95%',
  position: ['top', 70],
  draggable: false,
  show: 'blind',
  hide: 'blind',
  modal: true,
  resizable: false,
  open: function (event, ui) {
    var url='@Url.Action("AddPatient", "PatientManagement")';
    $(this).load(url);
  },
  close: function (event, ui) {
    $(this).html('');
  }
});

Ответ 2

В Jquery UI js вы просто пытаетесь найти следующий код

enter code here
this._delay(function() {
                // Handle .dialog().dialog("close") (#4065)
                if ( $.ui.dialog.overlayInstances ) {
                    this.document.bind( "focusin.dialog", function( event ){
                        if ( !that._allowInteraction( event ) ) {
                            event.preventDefault();
                            $(".ui-dialog:visible:last .ui-dialog-content")
                                .data( widgetFullName )._focusTabbable();
                        }
                    });
                }
            });

это решило мою проблему, попробуйте изменить с вашей потребностью или просто прокомментировать ее

Я попытался использовать раскрывающийся список Kendo,

с диалоговым окном JQuery UI, раскрывающийся список кендо открывается и закрывается немедленно, поэтому я обнаружил, что этот конкретный код делает это.