带有模态问题的Jquery Dialog中的Kendo Grid

Posted 2023-05-07

【中文标题】带有模态问题的Jquery Dialog中的Kendo Grid

【英文标题】：Kendo Grid inside Jquery Dialog with modal Issue

【发布时间】：2014-10-24 03:25:43

【问题描述】：

我在 jquery 对话框中有一个剑道网格控件。它工作正常，除非对话框模式为真，我无法处理网格过滤器。如果对话框模式为假，则它可以完美运行。我必须应用模态真正的功能。

这是问题的快照：

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"))
))

【问题讨论】：

控制台窗口中有错误信息吗？

@NicklasWinger 没有。没有任何错误。

好的。这可能只是随机的运气，但对我来说，上次我遇到类似的问题时，它实际上有助于使用网格的 javascript 实现——即使它应该直接“映射”。

@NicklasWinger 我必须使用剑道网格，因为它在我的网站中无处不在。

是的，但是 Kendo Grid 有一个 Javascript 实现和一个 Html-helper 实现，就像你用于剃须刀的那个。请看demos.telerik.com/kendo-ui/grid/index（你可以在asp.net mvc、javascript和php之间切换）

【参考方案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();
                        
                    );
                
            );

这解决了我的问题，尝试根据您的需要进行更改或只是评论它

我尝试使用剑道下拉列表，

使用 Jquery UI 对话框，kendo 下拉列表会立即打开和关闭，所以我发现这个特定的代码可以做到这一点。