TabStrip item Visible() Method isn’t working when used in Grid Detail template scenario

[Brett]

Hi,

I’m trying to add tabs control as client template (nested element inside grid) and hide some tabs based on the data in the grid using ajax binding.

I’m using boolean expression inside item().Visible([boolean expression here]) to determine whether or not show each tab. Even though Boolean expression is correct, Visible() method doesn't reflect it.

As an example I used Kendo Demo Project (Kendo.Mvc.Examples) /razor/web/grid/detailtemplate.cshtml page:

@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.EmployeeViewModel>()

    .Name("Employees")

    .Columns(columns =>

    {

        columns.Bound(e => e.FirstName).Width(140);

        columns.Bound(e => e.LastName).Width(140);

        columns.Bound(e => e.Title).Width(200);

        columns.Bound(e => e.Country).Width(200);

        columns.Bound(e => e.City);

    })

    .ClientDetailTemplateId("employeesTemplate")

    .Pageable()

    .DataSource(dataSource => dataSource

        .Ajax()

        .Read(read => read.Action("HierarchyBinding_Employees", "Grid"))

        .PageSize(5)

    )

    .Sortable()

)

 

<script id="employeesTemplate" type="text/kendo-tmpl">

    @(Html.Kendo().TabStrip()

            .Name("TabStrip_#=EmployeeID#")

            .SelectedIndex(0)

            .Items(items =>

            {

                items.Add().Text("Orders").Content(@<text>

                    @(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.OrderViewModel>()

                        .Name("Orders_#=EmployeeID#")

                        .Columns(columns =>

                        {

                            columns.Bound(o => o.OrderID).Width(101);

                            columns.Bound(o => o.ShipCountry).Width(140);

                            columns.Bound(o => o.ShipAddress).Width(200);

                            columns.Bound(o => o.ShipName).Width(200);

                        })

                        .DataSource(dataSource => dataSource

                            .Ajax()

                            .Read(read => read.Action("HierarchyBinding_Orders", "Grid", new { employeeID = "#=EmployeeID#" }))

                        )

                        .Pageable()

                        .Sortable()

                        .ToClientTemplate())

                </text>                       

                );

                items.Add()

                    .Visible("#= Country #" == "USA")

                    .Text("Contact Information: #= Country #").Content(

                    "<div class='employee-details'>" +

                        "<ul>" +

                            "<li><label>Country:</label>#= Country #</li>" +

                            "<li><label>City:</label>#= City #</li>" +

                            "<li><label>Address:</label>#= Address #</li>" +

                            "<li><label>Home Phone:</label>#= HomePhone #</li>" +

                        "</ul>" +

                    "</div>"

                );               

            })

            .ToClientTemplate())

</script>

I've highlighted the only 2 changes I had made.

Any suggestions?

Thanks,
-Brett

[Petur Subev]

Hello Brett,

I am afraid that such logic is not valid and could not be applied. The Visible method is executed on the server and it decides rather to render the who tab item or not. The #= # expression is executed on the client.

The only work-around I can suggest you is to use the client expression in such way as shown below:

 

<script id="template" type="text/kendo-tmpl">

    @(Html.Kendo().TabStrip().Name("test#=EmployeeID#").Items(it=>it.Add().Text("#= EmployeeID % 2 == 0 ?'foo' : 'bar'#").Encoded(false)

        .Content(@"#if(EmployeeID % 2 == 0){#
                foo
                #}else{#
                    bar
        #}#")
).ToClientTemplate())


</script>

More information about templating can be found in our documentation.

Kind Regards,
Petur Subev
the Telerik team