2014-08-30 34 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發生這種事。