Refresh Kendo Grid after close of pop up window

Question

I'm using Kendo UI Web for asp.net mvc. I generate a pop-up window via a grid command button. After the closing of this pop-up window, I want the grid to be refreshed.

Close event on pop-up window:

function ClosingRateWindow(e) {
    var grid = $('#ContractDetailOrderEventGrid').data("kendoGrid");
    grid.dataSource.read();}

The grid is undefined at this time.

Kendo Window definition:

@(Html.Kendo().Window()
    .Name("Rates")
    .Title("Rates")
    .Visible(false)
    .Modal(true)
    .Draggable(true)
    .Width(850)
    .Height(1200)
    .Events(x => x.Close("ClosingRateWindow"))
)

Javascript to open window (a partial view is returned):

wnd.refresh({
    url: BASE_APP_URL + "ContractRateAdmin/OpenContractRate/",
    data: { data: data },
    traditional: true
});
wnd.center();
wnd.open();

Grid Definition:

@(Html.Kendo().Grid<TMS.MVC.TIMS.Models.Admin.Contract.ContractOrderEventGridModel>()
.Name("ContractDetailOrderEventGrid")
.Columns(columns =>
{
    columns.Command(o =>
    {
        o.Destroy();
        o.Edit();
    }).Width(100).Title("Commands");

    columns.Command(command => 
        { 
            command.Custom("Rates").Click("ShowRates");
        }).Title("Rates").Width(120);
    columns.Bound(o => o.ContractId).Hidden(true);
    columns.Bound(o => o.OrderTypeId).Hidden(true);
    //columns.Bound(o => o.ActiveRateMissing).Width(70).Title("Missing Rates?");
    columns.Bound(o => o.OrderLevelFlag).Width(50).Title("Order Level").EditorTemplateName("ContractOE_OrderLevelFlag");
    columns.Bound(o => o.Active).Width(80).Title("Active").EditorTemplateName("ContractOE_Active");
    columns.Bound(o => o.InvoiceDescription).Width(150).Title("Invoice Desc");
    columns.Bound(o => o.SourceContainerOwnerNameDisplay).Width(150).Title("Src Cont Owner").EditorTemplateName("ContractOE_SourceContainerOwner");
    columns.Bound(o => o.DestContainerOwnerNameDisplay).Width(150).Title("Dest Cont Owner").EditorTemplateName("ContractOE_DestContainerOwner");
    columns.Bound(o => o.SourceContainerTypeName).Width(150).Title("Src Cont Type").EditorTemplateName("ContractOE_SourceContainerTypeName");
    columns.Bound(o => o.DestContainerTypeName).Width(150).Title("Dest Cont Type").EditorTemplateName("ContractOE_DestContainerTypeName");
    columns.Bound(o => o.SourceContainerName).Width(150).Title("Src Container").EditorTemplateName("ContractOE_SourceContainerName");
    columns.Bound(o => o.DestContainerName).Width(150).Title("Dest Container").EditorTemplateName("ContractOE_DestContainerName");
    columns.Bound(o => o.EventAliasName).Width(150).Title("Event").EditorTemplateName("ContractOE_EventAliasName");
    columns.Bound(o => o.ProductName).Width(150).Title("Product").EditorTemplateName("ContractOE_ProductName");
    columns.Bound(o => o.OrderByNameDisplay).Width(150).Title("Order By").EditorTemplateName("ContractOE_OrderBy");
    columns.Bound(o => o.OrderTypeName).Width(150).Title("Order Type").EditorTemplateName("ContractOE_OrderTypeName");
    columns.Bound(o => o.EmployeeDisplay).Width(150).Title("Employee").EditorTemplateName("ContractOE_EmployeeDisplay");
    columns.Bound(o => o.CarrierName).Width(150).Title("Carrier").EditorTemplateName("ContractOE_CarrierName");
})
    .Events(e => e
        .Save("Contract_Save")
        //.Remove("ContractOrderEventGrid_Remove")
        .DataBound("Contract_DataBound"))
    .Scrollable(scrolling => scrolling.Enabled(true).Height("300px"))
    .ToolBar(toolbar =>  {
            if (Model.DetailModel.ContractAdminDetailPermissionModel.AddOrderEvent_Button_Visible == true)
                toolbar.Create().Text("Add");
    })
    .HtmlAttributes(new { style = "width: 1200px" })
    .Editable(editable => editable.Mode(GridEditMode.InLine))
    .Sortable(sorting => sorting.Enabled(true))
    .Pageable(paging => paging.Enabled(false))
    .Resizable(resizing => resizing.Columns(true))
    .Filterable(filtering => filtering.Enabled(true))
    .Groupable(grouping => grouping.Enabled(true))
    .DataSource(dataSource => dataSource
        .Ajax()
        .Model(model =>
        {
            model.Id(p => p.ContractOrderEventId);
            model.Field(x => x.ActiveRateMissing).Editable(false);
            model.Field(x => x.ContractId).Editable(false);
            model.Field(x => x.OrderTypeId).Editable(false);
            model.Field(x => x.Active).Editable(true).DefaultValue("Y");
            model.Field(x => x.OrderLevelFlag).Editable(true).DefaultValue("N");
            model.Field(x => x.InvoiceDescription).Editable(true).DefaultValue("Enter Invoice Description");
            model.Field(x => x.SourceContainerOwnerNameDisplay).Editable(true).DefaultValue("ALL");
            model.Field(x => x.DestContainerOwnerNameDisplay).Editable(true).DefaultValue("ALL");
            model.Field(x => x.SourceContainerTypeName).Editable(true).DefaultValue("ALL");
            model.Field(x => x.DestContainerTypeName).Editable(true).DefaultValue("ALL");
            model.Field(x => x.SourceContainerName).Editable(true).DefaultValue("ALL");
            model.Field(x => x.DestContainerName).Editable(true).DefaultValue("ALL");
            model.Field(x => x.EventAliasName).Editable(true).DefaultValue("ALL");
            model.Field(x => x.ProductName).Editable(true).DefaultValue("ALL");
            model.Field(x => x.OrderByNameDisplay).Editable(true).DefaultValue("ALL");
            model.Field(x => x.OrderTypeName).Editable(true).DefaultValue("ALL");
            model.Field(x => x.EmployeeDisplay).Editable(true).DefaultValue("ALL");
            model.Field(x => x.CarrierName).Editable(true).DefaultValue("ALL");
        })
           .Events(x =>
           {
              // x.RequestEnd("RefreshContractDetailOrderEventGrid");
               //x.Error("ContractDetailOrderEventGrid_Error");
           })
       .Create(update => update.Action("CreateContractOrderEvent", "ContractGrid", new { selectedContractId = Model.DetailModel.ContractId }))
       .Read(read => read.Action("ReadContractOrderEvent", "ContractGrid", new { contractId = Model.DetailModel.ContractId }))
       .Update(update => update.Action("UpdateContractOrderEvent", "ContractGrid", new { contractId = Model.DetailModel.ContractId }))
       .Destroy(update => update.Action("DestroyContractOrderEvent", "ContractGrid"))
    ))

Any ideas on how to do this?

Answer 1

I know this answer is probably late. But if you are getting content from another URL. You need to set .Iframe(true). Found this out after hours of debugging. They really have very poor documentation on this.

Answer 2

\I do see a lot of responses here concerned with the undefined error. I am attempting to do the same thing here. My resolution to the issue was to attach a function to the close event of the editor window.:

.Editable(a => a.Mode(GridEditMode.PopUp).Window(q => q.Title("New Stage").Events(e => e.Close("UpdateStages"))))

And then the function that is called is:

function UpdateStages() {
    $("#StagesForCourse").data("kendoGrid").dataSource.read();
}

I dont worry about trying to take in the variable, instead i call the grid directly and tell it to read the dataSource

Answer 3

The grid variable is undefined in the popup, because it is defined in the parent window; so you need to do the following:

var grid = window.parent.$("#grid").data("kendoGrid");
grid.dataSource.read()

Answer 4

Basically you need to use the close event of the Window and the refresh method of the Grid or I guess you need to use the dataSource.read() method which will refresh the data of the Grid :)

wnd.bind('close',function(){
    $('#Rates').data().kendoGrid.dataSource.read(); // or
    $('#Rates').data().kendoGrid.refresh();
})

Answer 5

Can you try;

function ClosingRateWindow(e) {
    var grid = $('#ContractDetailOrderEventGrid').data("kendoGrid");
    grid.refresh();
}