Question

我在jquery对话框中有一个kendo网格控件。它工作正常，除非在对话框模态为真时，我无法处理网格过滤器。如果对话框模态为false，则它可以正常工作。我必须应用模态真实的功能。

以下是问题的快照：

enter image description here

Jquery对话框代码：

$('#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"))
))

Answer 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('');
  }
});

Answer 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对话框，kendo下拉列表会立即打开和关闭，因此我发现这个特定代码可以实现这一点。

Jquery Dialog中的Kendo Grid与模态问题

2 个答案: