Referring to item value in embedded C# code in template

[Neil N]

How do I refer to a model property value in the template? I have:

<div class="k-content">
    @(Html.Kendo().ListView<MemberSkillModel>()
        .Name("listViewSkills")
        .TagName("div")
        .ClientTemplateId("skillstemplate")
        .BindTo(@Model.MemberSkills)
        )
</div>

 

and

<script type="text/x-kendo-tmpl" id="skillstemplate">
    <div class="k-widget" style="border:0px">
        <div class="row">
            <div class="col-12">
                #:Name#
                @if (@Model.MemberSkills.ExpiryDate != null)
                {
                    @:(exp kendo.toString(ExpiryDate, "MMMM dd, yyyy")#)
                }
            </div>
        </div>
    </div>
</script>

 

Obviously @Model.MemberSkills.ExpiryDate throws an error as it needs a model item instead of the entire model contents.


[Tsvetomir]

Hi Neil,

Thank you for the provided code snippet. Indeed, when the widget is bound to a local data source, the C# collection should not be used inside the template.

This is due to the fact that the collection will be evaluated as a valid JavaScript array and after that for each item, the template will be triggered. The syntax for the template should be the following (assuming that the field is called ExpiryDate):

#=ExpiryDate#

Try alternating the template and let me know if the issue persists.

 

Kind regards,
Tsvetomir
Progress Telerik

[Neil N]

This doesn't help me. I know #=ExpiryDate# is the normal syntax.  I resorted to C# because I need to check if ExpiryDate is null inside the template so I can do a conditional display (as shown in my code snippet). Can you provide assistance with this?

Incidentally, as a happy user of your ASP.NET AJAX controls for 12+ years, I find the breadth and depth of examples for your UI for ASP.NET Core suite to be really, really poor.

 

[Tsvetomir]

Hi Neil,

The condition can be implemented within the actual kendo.template. Since the template is used based on the data source of the ListView and not based on the model of the page. There is no indexing that can be used in the C# portion, therefore, you cannot access the specific element from the model on the page. You should access it via the JavaScript implementation. Just like a regular placeholder. 

 <script type="text/x-kendo-template" id="template">
        <div class="product">
            <h3>#:ExpiryDate? ExpiryDate: 'this time the property is empty'#</h3>
        </div>
    </script>

As per the documentation of the ASP.NET Core widgets, it is a constant effort of ours and all of the widgets have their respective docs articles. However, functionalities such as the templating are inherited by the jQuery widgets, therefore, the docs can be found in the jQuery website:

https://docs.telerik.com/kendo-ui/framework/templates/overview

The AJAX suite is a very mature one and it has a lot of resources. While, on the other hand, the ASP.NET Core became very popular only in recent years, we do our best to add more and more useful information and examples.

Do let me know if you have any other questions.

 

Kind regards,
Tsvetomir
Progress Telerik