Conditional Display in template.

2 posts, 1 answers
  1. Michael
    Michael avatar
    36 posts
    Member since:
    Sep 2014

    Posted 20 Aug 2018 Link to this post

    Hi, I'm using a ListBox with a template.

    <script id="roleChoiceTemplate" type="text/x-kendo-template">
    <div class="row"><div class="col-sm-9"> #: data.RoleName #</div> <div class="col-sm-3">#: data.RoleNeedsAttention == true ? 'Y' : ''#</div></div>
    </script>
     
    @(Html.Kendo().ListBox()
                           .Name("roleChoices")
                           .DataTextField("RoleName")
                           .DataValueField("RoleName")
                           .TemplateId("roleChoiceTemplate")
                           .HtmlAttributes(new { style = "width: 100%; overflow: hidden;" })
                               .DataSource(source => source
                                   .Read(read => read.Action("GetRoles", "Home"))
                               )
     
           )

    As is, this works fine, but instead of displaying a 'Y' in the template when the value is true, I want to display a formatted span like <span class=\'needsAttention\'>Attention</span>.  When I try to do this, I either see the text '<span>...' or with different alterations I get an invalid template javascript error.  Can you help me get the syntax right because I'm out of ideas.

     

    Thanks!

  2. Answer
    Georgi
    Admin
    Georgi avatar
    576 posts

    Posted 22 Aug 2018 Link to this post

    Hello Michael,

    A possible solution is to use an if clause as follows:

    <script id="roleChoiceTemplate" type="text/x-kendo-template">
        <div class="row"><div class="col-sm-9"> #: data.RoleName #</div> <div class="col-sm-3">#if( data.RoleNeedsAttention == true){ # <span class='needsAttention'>Attention</span> #}#</div></div>
    </script>


    Regards,
    Georgi
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top