Kendo Grid in Jquery Dialog mit Modal Problem

Question

Ich habe ein Kendo Grid-Steuerelement in jquery Dialog. Es funktioniert gut, außer wenn im Dialog modal wahr ist, kann ich nicht am Gitterfilter arbeiten. Wenn der Dialog Modal falsch ist, funktioniert es perfekt. Es ist Pflicht für mich, modale wahre Art von Funktionalität anzuwenden. Hier

ist die Momentaufnahme der Ausgabe:

Jquery Dialogcode:

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

Kendo Gitter:

@(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

Verwendung KendoWindow wird Ihr Problem lösen. Beispiel:

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

In JQuery UI js, Sie versuchen, nur den folgenden Code zu finden

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

das ist mein Problem behoben, versuchen Sie mit Ihrem Bedarf zu ändern oder es nur einen Kommentar

i versucht mit einer Kendo Dropdown-Liste,

mit Jquery UI-Dialog, die Kendo-Dropdown-Liste öffnet und schließt sofort, so dass ich diesen bestimmten Code gefunden m Akes, die passieren.