弹出窗口关闭后刷新Kendo Grid

时间:2013-04-17 18:41:51

标签: asp.net-mvc kendo-ui

我正在为asp.net mvc使用Kendo UI Web。我通过网格命令按钮生成一个弹出窗口。关闭此弹出窗口后,我希望刷新网格。

在弹出窗口中关闭事件:

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

此时网格未定义。

Kendo Window定义:

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

Javascript打开窗口(返回部分视图):

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

网格定义:

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

关于如何做到这一点的任何想法?

5 个答案:

答案 0 :(得分:3)

基本上你需要使用Window的close事件和Grid的刷新方法,或者我想你需要使用dataSource.read()方法来刷新Grid的数据:)< / p>

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

答案 1 :(得分:2)

弹出窗口中未定义grid变量,因为它是在父窗口中定义的; 所以你需要做以下事情:

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

答案 2 :(得分:2)

\我确实看到很多关于未定义错误的回复。我试图在这里做同样的事情。我对该问题的解决方法是将一个函数附加到编辑窗口的关闭事件:

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

然后调用的函数是:

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

我不担心尝试接受变量,而是直接调用网格并告诉它读取dataSource

答案 3 :(得分:1)

你能试试吗;

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

答案 4 :(得分:0)

我知道这个答案可能已经很晚了。但是,如果您从其他URL获取内容。您需要设置.Iframe(true)。经过数小时的调试后发现了这一点。他们的文件确实很差。