设置编辑器模板内的Kendo Grid的选项

时间:2015-06-11 07:08:55

标签: kendo-ui kendo-grid kendo-asp.net-mvc

在我的某个网格A的编辑器模板中,我有另一个网格B。我想根据read中的当前ID设置此网格的updateA操作。

我尝试在编辑器模板中使用Razor代码,如下所示:

// details grid: B
.Read("action", "controller", new { @Model.Id })

Id总是为空,可能是因为Razor是服务器端。

所以我尝试在主网格的Edit事件中将网格设置在主页面内。

function EditHandler(e) {
    if (e.model.isNew())
        return;
    var detailGrid = e.container.find("#details").data('kendoGrid');
    detailGrid.dataSource.options.transport.read.url = "@Url.Action("", "")".concat('/', e.model.Id);
    detailGrid.dataSource.options.transport.update.url = "@Url.Action("", "")".concat("/", e.model.Name);
}

这两项都不起作用。编辑器模板中Grid的定义将覆盖这些属性。

这是主网格:

 @(Html.Kendo().Grid<A>()
.Name("A")
.Columns(columns =>
{
    columns.Bound(x => x.Id).Hidden();
    columns.Bound(x => x.Name).HtmlAttributes(new { @style = "text-align: left" });
    ....
    columns.Command(command =>
    {
        command.Edit(); command.Destroy();
    });
})
.....
.Selectable()
.Navigatable()
.DataSource(ds => ds
    .Ajax()
    .Model(model =>
    {
        model.Id(x => x.Name);
    })
    .Read("", "")
    .Update("", "")
    .Destroy("", "")
    .Create("", "")
)
.Events(e => e.Edit("EditHandler").Save("SaveHandler"))
)

在此类的编辑器模板a.cshtml中,我有另一个网格,我希望其编辑和阅读操作包含网格Id的{​​{1}}。

A

更新

@(Html.Kendo().Grid<B>()
    .Name("B")
    .Columns(columns =>
    {
        columns.Bound(.....
    })
    .....
    .Editable(edit => edit.Mode(GridEditMode.InCell))
    .Selectable()
    .Navigatable()
    .DataSource(ds => ds
        .Ajax()
        .PageSize(5)
        .Model(model =>
        {
            model.Id(x => x.Id);
        })
        .Read("", "")
        .Update("", "")
    ).ToClientTemplate()
)

正如Dion所说,它需要进行2次更改:

  1. 在子网格function EditHandler(e) { if (e.model.isNew()) return; var detailGrid = e.container.find("#details").data('kendoGrid'); detailGrid.dataSource.read({ Id: e.model.Id }); detailGrid.dataSource.update({ Name: e.model.Name }); } 中,将自动绑定设置为false:B
  2. 使用.AutoBind(false)方法设置ID,而非我手动尝试。

1 个答案:

答案 0 :(得分:1)

为了克服这种情况,我将在Grid-A的read事件中手动触发Grid-B的edit。请遵循以下设置:

Grid-B配置:

.AutoBind(false)
.DataSource(ds => ds.Ajax()
                    .Read("action", "controller")
                    .Update(url => url.Action("update", "controller").Data(paramData)))

修改Grid-A edit函数:

function EditHandler(e) {
    var gridB = $("#gridB").getKendoGrid(),
        model = e.model;

    gridB.dataSource.read({Id: model.Id});
}

// get Id for update 
function paramData() {
    return { Id : $("#Id").val(); };
}

希望得到这个帮助。

注意:与阅读不同,在显示弹出窗口后会触发更新,然后Id字段将具有其值。因此,您可以在这种情况下使用Url.Action(...).Data()