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

2 posts, 0 answers
  1. Brett
    Brett avatar
    6 posts
    Member since:
    Oct 2011

    Posted 12 Mar 2013 Link to this post

    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

  2. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 14 Mar 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
Back to Top