CODEWITHSUNDEEP
javascriptjqueryasp.net-mvckendo-gridjquery-dialog
Dhwani
Dhwani

Reputation: 7628

Kendo Grid inside Jquery Dialog with modal Issue

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:

enter image description here

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

Upvotes: 14

Views: 3710

Answers (2)

Chatur
Chatur

Reputation: 1

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.

Upvotes: 0

Shasvat
Shasvat

Reputation: 268

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

Upvotes: 11

Related Questions