Kendo UI Grid different detail templates depending on condition

Question

I have such grid defined

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

and details template

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

As you can see I have Type property (of type int), so what I want to do is not to show any details view and no arrow on the entire row when Type property is set to the specific value. How can I achieve it?

Answer 1

When you define your template like this, then it's used on client side. It's rendered by the @(Html.Kendo().Grid<FieldViewModel>() command but actually then used on client side. But you cannot compare a Type on clientside. but for example, when constructing the model you do:

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;
}

And here is your template where you switch by Template ID:

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

        <div>Template 1</div>

    # } else { #

        <div>Template 2</div>

    # } #
</script>

Not sure if it will work properly if you have different data to display within your data rows... Hope you get the idea though.