how to use if-then-else in kendo template

Question

I am using UI for ASP.NET Core. I have configured autocomplete widget with customized the header & item template like below

@(Html.Kendo().AutoCompleteFor(x => x.AccountNumber)
        .DataTextField("AccountNumber")
        .DataSource(source =>
        {
            source.Read(read =>
            {
                read.Action("GetData", "Lookup");
            })
            .ServerFiltering(true);
        })           
        .MinLength(2)
        .Height(400)
        .HeaderTemplateId("headerTemplate")
        .TemplateId("itemTemplate"))

Templates

<script id="headerTemplate" type="text/x-kendo-template">
    <table>
        <tr class="auto-hd-tr">
            <td class="auto-hd-td auto-td-large">Account Number</td>             
            <td class="auto-hd-td auto-td-small">State</td>                
        </tr>
    </table>
</script>

<script id="itemTemplate" type="text/x-kendo-template">
    <table>
        <tr>
            <td class="auto-item-td auto-td-large">${AccountNumber}</td>            
            <td class="auto-item-td auto-td-small">${State}</td>               
        </tr>
    </table>
</script>

When auto complete shows searched result, and if the AccountNumber or State property is null it actually shows null string as value.

How do i use if-then-else in template, so if property is null then don't show anything

Note:

1> I can handle this on server and set value to string.empty if property is null but i would like to handle it on client side.

2>Telerik has overview of Template here. However the syntax to show property value #= # or #: # (aka hash templates) does not work. I have to use syntax ${ } to get it to work.
I know how to use if-then-else with hash template syntax. However i dont know how to use if-then-else with syntax ${ }

score 1 · Answer 1 · answered Jan 31 '18 at 00:32

I just searched my code base and the only use that I have of the ${} style is setting values such as:

 <script id="tmpMyViewItem" type="text/x-kendo-tmpl" >
    <div class="myViewItem" id=${AccountNumber}>        
        <h3>${AccountNumber}</h3>       
    </div> 
</script>

In all the places where I have conditional statements the hash templates are used:

.ItemTemplate("#if(data.Name!='<All>'){#<img style='padding-top:3px;'.....

Perhaps this link I have bookmarked from way back in 2011 may put things in perspective. What keeps you from using the has template style?

how to use if-then-else in kendo template

1 Answers1