Conditionally Display ClientTemplate for Kendo UI Grid using Razor Variable

Question

I need to conditionally display buttons in a client template based on a razor variable. Here is where I get the variable:

@{
ViewBag.Title = "CompetencyConfiguration";
Layout = "~/Views/Shared/_Layout.cshtml";
var User = Model.UserInfo;
var IsiCanAssessor = Model.UserInfo.PermissionRole.RoleId == 4 || Model.UserInfo.PermissionRole.RoleId == 1  ? true : false;

}

Here is my Grid:

 @(Html.Kendo().Grid<CN.Models.Competency.ViewModels.AssessmentModel>()
        .Name("grid")
        .Columns(columns =>
        {
        columns.Bound(c => c.AssessmentId).Hidden();
        columns.Bound(c => c.AssessmentName).Width(250);
        columns.Bound(c => c.CompetencyType).Width(80);
        columns.Bound(c => c.CompanyName).Width(200);
        columns.Bound(c => c.NumOfUnits).Width(50);
        columns.Template(@<text></text>).Title("Actions")
           .Width(150)
           .ClientTemplate(
            "# if(@IsiCanAssessor == true) {#" +
            "<div class='btn btn-alt3' style='cursor:pointer' onclick='editRow()'><i class='la la-edit'></i>Edit</div><div class='btn btn-alt3' style='cursor:pointer' onclick='downloadAssessment()'><i class='lnir lnir-download'></i>Download</div><div id='deleteAssessment' class='btn btn-alt3' style='cursor: pointer;' onclick='deleteAssessment(this)'><i class='la la-trash'></i>Delete</div>"+
            "# } #");

        })
        .Height(850)
        .Scrollable()
        .Sortable()
        .Selectable()
        .ClientDetailTemplateId("template")
        .DataSource(dataSource => dataSource
        .Ajax()
        .Read(read => read.Action("GetAssessmentSearch", "Config", new { area = "Competency" }))
        .Model(m => m.Id(o => o.AssessmentId))
        )
    )

I also tried like this:

@(Html.Kendo().Grid<CN.Models.Competency.ViewModels.AssessmentModel>()
        .Name("grid")
        .Columns(columns =>
        {
        columns.Bound(c => c.AssessmentId).Hidden();
        columns.Bound(c => c.AssessmentName).Width(250);
        columns.Bound(c => c.CompetencyType).Width(80);
        columns.Bound(c => c.CompanyName).Width(200);
        columns.Bound(c => c.NumOfUnits).Width(50);
        columns.Template(@<text>
        @if (IsiCanAssessor == true)
        {
            <div class='btn btn-alt3' style='cursor:pointer' onclick='editRow()'><i class='la la-edit'></i>Edit</div><div class='btn btn-alt3' style='cursor:pointer' onclick='downloadAssessment()'><i class='lnir lnir-download'></i>Download</div><div id='deleteAssessment' class='btn btn-alt3' style='cursor: pointer;' onclick='deleteAssessment(this)'><i class='la la-trash'></i>Delete</div>
        }
        </text>).Title("Actions")
               .Width(150);


        })
        .Height(850)
        .Scrollable()
        .Sortable()
        .Selectable()
        .ClientDetailTemplateId("template")
        .DataSource(dataSource => dataSource
        .Ajax()
        .Read(read => read.Action("GetAssessmentSearch", "Config", new { area = "Competency" }))
        .Model(m => m.Id(o => o.AssessmentId))
        )
    )

Answer 1

I was able to figure out the proper syntax. This works beautifully:

@(Html.Kendo().Grid<CN.Models.Competency.ViewModels.AssessmentModel>()
        .Name("grid")
        .Columns(columns =>
        {
        columns.Bound(c => c.AssessmentId).Hidden();
        columns.Bound(c => c.AssessmentName).Width(250);
        columns.Bound(c => c.CompetencyType).Width(80);
        columns.Bound(c => c.CompanyName).Width(200);
        columns.Bound(c => c.NumOfUnits).Width(50);
        columns.Bound(c => c.CompetencyTypeId).Hidden();
        columns.Template(@<text></text>).Title("Actions")
           .Width(150)
           .ClientTemplate(
            "# if('" + @IsiCanAssessor +"'== 'True') {#" +
            "<div class='btn btn-alt3' style='cursor:pointer' onclick='editRow()'><i class='la la-edit'></i>Edit</div><div class='btn btn-alt3' style='cursor:pointer' onclick='downloadAssessment()'><i class='lnir lnir-download'></i>Download</div><div id='deleteAssessment' class='btn btn-alt3' style='cursor: pointer;' onclick='deleteAssessment(this)'><i class='la la-trash'></i>Delete</div>"+
            "# } #");

        })
        .Height(850)
        .Scrollable()
        .Sortable()
        .Selectable()
        .ClientDetailTemplateId("template")
        .DataSource(dataSource => dataSource
        .Ajax()
        .Read(read => read.Action("GetAssessmentSearch", "Config", new { area = "Competency" }))
        .Model(m => m.Id(o => o.AssessmentId))
        )
        )