Conditional in Client Template

[David]

Hello,

I'm trying to display a list of checkbox items inside of a list view ONLY if the boolean isSelected field is false.

Here is how I call the listview:
@(Html.Kendo().ListView<TestMultiSelect.ViewModels.TestVM>(Model)
        .Name("listView")
        .TagName("div")
        .ClientTemplateId("template")
        .DataSource(dataSource => dataSource
            .PageSize(20)
            .ServerOperation(false)
         )
        )

My TestView model:
public class TestVM
    {
        public int ID { get; set; }
        public string Name { get; set; }
        public bool IsSelected { get; set; }
    }


..and here is my Client template:

<script type="text/x-kendo-tmpl" id="template">
    <div class="product">
        # var isSelected =  @#:IsSelected#;
        if (isSelected !== true) { # @(Html.Kendo().CheckBox().Name("#:ID#").Label("#:Name#"))  # } #
    </div>
</script>

I get a failure in the client template.

Any suggestions are appreciated.

Thanks in advance,
Dave

[Venelin]

Hello David,

Your question was answered in the support ticket you sent. Please avoid duplicating threads so we can better track the issues discussed.

Regards,
Venelin
Telerik

[Hernu]

I hate it when I land on these threads. Why can' you guys not just share the answer with everyone. I wonder how many tickets with the same problem statement you need to resolve just because you don't share the solution.

[Tsvetina]

Hi Hernu,

I understand your frustration and indeed it is best to share the replies from duplicate support threads in the corresponding forum threads. We do have this in the current support processes, so there should not be such replies in present threads.

I located the support thread where this problem was discussed and here is what solution was discussed:

There was an extra @ and missing # in the template syntax, so the correct is:

# var isSelected =  IsSelected#
# if (isSelected !== true) { #
    @(Html.Kendo().CheckBox().Name("#:ID#").Label("#:Name#"))
# } #

And here is the full view content where my colleague tested this syntax:

@model IEnumerable<Kendo.Mvc.Examples.Models.ProductViewModel>

<script type="text/x-kendo-tmpl" id="template">
    <div class="product">
        <img src="@Url.Content("~/content/web/foods/")#:ProductID#.jpg" alt="#:ProductName# image" />
        <h3>#:ProductName#</h3>
        <p>#:kendo.toString(UnitPrice, "c")#</p>
        # var isSelected = ProductID#
        # if (isSelected == 1) { #
            @(Html.Kendo().CheckBox().Name("#:ProductID#").Label("#:ProductID#"))
        # } #
    </div>
</script>

<div class="demo-section k-content wide">
@(Html.Kendo().ListView<Kendo.Mvc.Examples.Models.ProductViewModel>(Model)
    .Name("listView")
    .TagName("div")
    .ClientTemplateId("template")
    .DataSource(dataSource => dataSource
        .PageSize(20)
        .ServerOperation(false)
     )
    .Pageable()
)
</div>

You could run this if you open the local demos solution for UI for ASP.NET MVC and replace the content of Views/listview/index.cshtml with the above snippet.

Regards,
Tsvetina
Progress Telerik

[Hernu]

Hi Tsvetina,

Thank you for taking the time to reply. It's great to know you are continually evolving your support processes in order to better empower your clients to improve their efficiency.

Hernu