2014-08-30 66 views
13

我在jQuery对话框内部有一个Kendo网格控件。它工作正常,除非在对话模态为真时,我无法在网格过滤器上工作。如果对话框模式是错误的,它可以很好地工作。我必须使用模态真正的功能。内部的JQuery对话框内的Kendo Grid模式问题

这是问题的快照:

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

控制台窗口中是否有任何错误消息? – 2014-09-09 06:44:57

+0

@NicklasWinger编号没有任何错误。 – Dhwani 2014-09-09 06:45:30

+0

好的。这可能只是偶然的运气,但对于我来说,最后一次我遇到类似的问题,它实际上帮助使用网格的JavaScript实现 - 即使它应该直接“映射”。 – 2014-09-09 06:46:54

回答

9

使用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(''); 
    } 
}); 
0

在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下拉列表立即打开和关闭,所以我发现这个特定的代码m发生这种事。