Conditional tabs in grid detail template

3 posts, 0 answers
  1. Andrea
    Andrea avatar
    52 posts
    Member since:
    Oct 2012

    Posted 28 Apr 2015 Link to this post

    Hello, I would like to show/hide tabs on a grid detail template based on grid value:

    do anyone achieved something similar?

    Best Regards

    <script id="template" type="text/kendo-tmpl">
    @(Html.Kendo().TabStrip()
        .Name("tabStrip_#=ID#")
        .SelectedIndex(0)
        .Animation(animation => animation.Open(open => open.Fade(FadeDirection.In)))
        .Items(items =>
        {               
            //if current grid row field #ShowExpected#
            items.Add().Text("Expected Items").Content(@<text>show a grid containing expected items</text>);
            //if current grid row field #ShowReceived#
            items.Add().Text("Received Items").Content(@<text>show a grid containing received items</text>);
        })
        .ToClientTemplate())
     
    </script>

     

     

  2. Andrea
    Andrea avatar
    52 posts
    Member since:
    Oct 2012

    Posted 29 Apr 2015 in reply to Andrea Link to this post

    This morning I woke up early and found this solution, even if I lost the MVC helper:

    copied the template generated by the "toClientTemplate()", deminified it and moved to a new file, then found how to insert scripts inside templates using the hash syntax:

     

    <div class="k-tabstrip-wrapper">
        <div class="k-widget k-tabstrip k-header" id="tabStrip_#=PKL_ID#">
            <ul class="k-reset k-tabstrip-items">
    #
    var _i = 1
    var _state = "k-state-active";
    if (WorkStateDescription < "4") {
    #
                <li class="k-item k-state-default #=_state#"><a class="k-link" href="\#tabStrip_#=PKL_ID#-#=_i#">
                    Expected Items</a> </li>
     
    #
    _state = "";
    ++_i;
    }
    #
                <li class="k-item k-state-default  #=_state#"><a class="k-link" href="\#tabStrip_#=PKL_ID#-#=_i#">Received Items</a> </li>
            </ul>
    #
    _i = 1;
    _state = "k-state-active";
    if (WorkStateDescription < "4") {
    #
        <div class="k-content #=_state#" id="tabStrip_#=PKL_ID#-#=_i#" style="display: block">
            __ GRID CODE HERE __
        </div>
    #
    _state = "";
    ++_i;
    }
    #
            <div class="k-content #=_state#" id="tabStrip_#=PKL_ID#-#=_i#">
            __ OTHER GRID CODE HERE __
        </div>
      </div>
    </div>
    <script>
        jQuery(function () {
            jQuery("\#tabStrip_#=PKL_ID#").kendoTabStrip({});
        });
    </script>

    I put that template inside the view using this code:

     

    <script id="template" type="text/kendo-tmpl">
    @Html.Raw(File.ReadAllText(HttpContext.Current.Server.MapPath("~") + "\\Views\\Home\\ArrivalsTmpl.html").Replace("</script>", "<\\/script>"))
    </script>

     

    That turned to be a "template" related issue instead of a tabstrip issue...

    Best regards
    Andrea

     

     

  3. Kendo UI is VS 2017 Ready
  4. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 30 Apr 2015 Link to this post

    Hello Andrea,

    The condition cannot be included in the TabStrip fluent builder, because it is constructed on the server, while the data is bound on the client. As a solution you could include all tabs by default and bind to the detailInit event of the Grid, where you could check the data and remove the tabs depending on the data.
    E.g.

    .Events(e => e.DetailInit("detailInit"))

    function detailInit(e) {
        if (e.data.FirstName == "John") {
            var ts = e.detailRow.find(".k-tabstrip").data("kendoTabStrip");
            ts.remove(1);
        }
    }

    Regards,
    Dimiter Madjarov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top