Telerik Client Template Conditions

Question

I am using Telerik MVC Grid control to show a data grid. The detail of my grid is calling the following Client Detail template:

<script id="client-template" type="text/x-kendo-template">   <%: Html.Kendo().Grid<ASML_Scheduler.ScheduleService.AgentViewData>()
  .Name("grid_#=WorkgroupName#") 
    .DataSource(dataSource =>  
      dataSource.Ajax().Read(read => read.Action("Agents_Read", "Home", new {workgroupname= "#=WorkgroupName#", name = ViewData["LoggedInUser"] }))
  )      
  .Columns(columns =>
  {
      columns.Bound(product => product.AgentName).ClientTemplate("<strong>\\#:AgentName\\#</strong>");
      //columns.Bound(product => product.IsLoggedOn);
      //columns.Bound(product => product.IsLoggedOn).ClientTemplate("<div class='mystyle'>\\#:IsLoggedOn\\#</div>");
      columns.Bound(product => product.IsLoggedOn).ClientTemplate(
              "# if (IsLoggedOn != false) { #" +
                       "<div class='mystyle'>\\#:IsLoggedOn\\#</div>" +
              "# } else { #" +
                       "<div>\\#:IsLoggedOn\\#</div>" +
              "# } #"
          );             
      columns.Bound(product => product.IsScheduled);
  })       
  .ToClientTemplate()
%>   
</script>

The problem I have is with the IsLoggedOn client template as it does not recognise the IsLoggedOn != false.

Can anyone see what I havedone wrong here.

Answer 1

personally with this sort of thing I prefer doing this.

change this:

 columns.Bound(product => product.IsLoggedOn).ClientTemplate(
              "# if (IsLoggedOn != false) { #" +
                       "<div class='mystyle'>\\#:IsLoggedOn\\#</div>" +
              "# } else { #" +
                       "<div>\\#:IsLoggedOn\\#</div>" +
              "# } #"
          );   

to

 columns.Bound(product => product.IsLoggedOn)
.ClientTemplate("#=StyleLogin(data.IsLoggedOn)#");   

then create a javascript function

function StyleLogin(IsLoggedOn)
{
    var value = ''; 
   if (IsLoggedOn != false) { 
                     value =  '<div class="mystyle">' +  IsLoggedOn +  '</div>';
              } else { 
                       value =  '<div>' + IsLoggedOn + '</div>';
              }

return value;

}

This way you can easily debug the code and also reuse the function elsewhere if needed.