Kendo Grid inside Jquery Dialog with modal Issue

Question

I have a kendo grid control inside jquery dialog. It works fine except when in dialog modal is true, I am not able to work on grid filter. If dialog modal is false, it works perfectly. It is must for me to apply modal true kind of functionality.

Here is the snapshot of issue:

Jquery Dialog code:

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

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

Holp

Do you have any error messages in the console window? – Pommard

@NicklasWinger No. There isn't any error. – Holp

Ok. This might just be random luck, but for me, the last time I had a similar issue it actually helped using the javascript implementation of the grid - even though it's supposed to 'map' directly. – Pommard

@NicklasWinger i must use kendo grid because it is everywhere in my site. – Holp

Yes, but Kendo Grid has both a Javascript implementation and a Html-helper implementation, like the one you're using for razor. Please have a look at demos.telerik.com/kendo-ui/grid/index (You can switch between asp.net mvc, javascript and php there) – Pommard

jQuery and plugins versions? Latest? – Sunshinesunspot

Answer 1

Use KendoWindow will solve your problem. Example :

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

Witcher

Answer 2

In Jquery UI js, you just try to find the following code

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

this resolved my issue, try to change with your need or just comment it

i tried using a Kendo dropdownlist,

with Jquery UI dialog, the kendo dropdown list opens and closes immediately, so i found that this particular code makes that happen.

Grendel