Kendo UI Grid根据条件不同的细节模板

时间:2012-11-19 11:55:28

标签: c# telerik telerik-grid telerik-mvc kendo-ui

我有这样的网格定义

@(Html.Kendo().Grid<FieldViewModel>(Model.Fields)
    .HtmlAttributes(new { @class = "fullScreen" })
    .Name("formFields")
    .ClientDetailTemplateId("formFieldsTemplate")
    .Columns(columns =>
        {
            columns.Bound(e => e.Key);
            columns.Bound(e => e.DisplayName);
            columns.Bound(e => e.FieldTypeName);
            columns.Bound(e => e.Order);
            columns.Bound(e => e.IsMandatory);
            columns.Bound(e => e.Type);
        })
    .Pageable()
    .Sortable()
    .Scrollable()
    .Selectable()
    .Resizable(resize => resize.Columns(true))
    .Groupable()
    .Filterable()
      .DataSource(dataSource => dataSource.Ajax().ServerOperation(false).Model(model => model.Id(e => e.Key))))

和详细信息模板

<script id="formFieldsTemplate" type="text/kendo-tmpl">
    @(Html.Kendo().Grid<FieldViewModel>()
        .Name("FormField_#=Key#")
        .ClientDetailTemplateId("formFieldsTemplate")
        .Columns(columns =>
            {
                columns.Bound(e => e.Key);
                columns.Bound(e => e.DisplayName);
                columns.Bound(e => e.FieldTypeName);
                columns.Bound(e => e.Order);
                columns.Bound(e => e.IsMandatory);
                columns.Bound(e => e.Type);
            })
        .DataSource(dataSource => dataSource.Ajax().Read(read => read.Action("LoadFieldDetails", "Forms", new { formPath = Model.Schema, rootElementName = Model.Root ,fieldKey = "#=Key#" })))
        .Pageable()
        .Sortable()
        .Selectable()
        .ToClientTemplate())
</script>

正如您所看到的,我有Type属性(类型为int),所以我想要做的是当Type属性设置时,不显示任何详细信息视图,也不显示整行上的箭头到具体的价值。我怎样才能实现它?

1 个答案:

答案 0 :(得分:6)

当您像这样定义模板时,它会在客户端使用。它由@(Html.Kendo().Grid<FieldViewModel>()命令呈现,但实际上在客户端使用。但是你无法比较客户端上的Type。但是,例如,在构建模型时,您可以:

if (myType is MyDataType) // Do the type check
{
    myRow.UseTemplate = 1; // Define ID for template
} 
else  // ...and so on, can do a 'switch` or whatever
{
    myRow.UseTemplate = 2;
}

以下是您按模板ID切换的模板:

<script id="formFieldsTemplate" type="text/kendo-tmpl">
    # if (UseTemplate == 1) { #

        <div>Template 1</div>

    # } else { #

        <div>Template 2</div>

    # } #
</script>

如果您在数据行中显示不同的数据,不确定它是否能正常工作......希望您能了解这个想法。