This is a migrated thread and some comments may be shown as answers.

Conditional tabs in grid detail template

2 Answers 176 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Andrea
Top achievements
Rank 1
Andrea asked on 28 Apr 2015, 07:23 PM

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 Answers, 1 is accepted

Sort by
0
Andrea
Top achievements
Rank 1
answered on 29 Apr 2015, 05:54 AM

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

 

 

0
Dimiter Madjarov
Telerik team
answered on 30 Apr 2015, 11:50 AM

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!
 
Tags
TabStrip
Asked by
Andrea
Top achievements
Rank 1
Answers by
Andrea
Top achievements
Rank 1
Dimiter Madjarov
Telerik team
Share this question
or