Conditional tabs in grid detail template

[Andrea]

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>

 

 

[Andrea]

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

 

 

[Dimiter Madjarov]

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