Conditionally Display ClientTemplate for Kendo UI Grid using Razor Variable - kendo-grid

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