Tabstrip inside a Grid with Rowtemplate and DetailTemplate

[Sony]

Hi,

I have Tabstrip inside a Grid with Rowtemplate and DetailTemplate. Grid is working but the tabstrip is not getting called from inside the detailtemplate. Any help would be appreciated. The code is below:

<div id="ah" class="Wrapper">
                <table id="Results">
                    <thead>
                        <tr>
                            <th>Date</th>
                            <th> Time</th>                           
                        </tr>
                    </thead>
            <tbody>
                <tr>
                    <td colspan="2"></td>
                </tr>
            </tbody>
        </table>
</div>
<script id="rowTemplate" type="text/x-kendo-tmpl">
                <tr class="k-master-row">
                    <td class="k-hierarchy-cell"><a href="\#" class="k-icon k-plus"></a></td>
<td class="k-hierarchy-cell">Master Row</td>
</tr>

 </script>
    <script id="detailTemplate" type="text/x-kendo-tmpl">
           <div class="TabHolder">
        <ul>
            <li class="k-state-active">Info</li>
            <li>Details</li>
           </ul>
  <div class="TabContent">
            profile
        </div>
        <div class="TabContent">
            activities
        </div>
</div>
</script>

$(document).ready(function () {           
            $("#Results").kendoGrid({
                scrollable: false,
                dataSource: datasource,
                rowTemplate: kendo.template(jQuery("#rowTemplate").html()),
                detailTemplate: kendo.template(jQuery("#detailTemplate").html())
            });
 $(".TabHolder").kendoTabStrip({
                animation: {
                    open: {
                        effects: "fadeIn"
                    }
                }
            });
});

[Gary]

I've just done this. Look at the detail template demo example. It uses a detailInit event handler to create the TabStrip on demand.

http://demos.kendoui.com/web/grid/detailtemplate.html

Works great.

[Insad]

Hi,

 

Nice sample but I can't get it to work using MVVM..

Are there any samples on how to use this with MVVM?

[Ivan Danchev]

Hello Insad,

Here's a dojo example, which demonstrates how the TabStrip can be used in Grid detail templates in MVVM scenarios.

Regards,
Ivan Danchev
Telerik by Progress

[Insad]

Hi Ivan,

 

This level of MVVM I had in five minutes; But what I truly try to do is seperate the HTML from the viewModel(s).

In other words, no HTML in my JavaScript :)

I also like to implement this with more templates. Since templates can be maintained by the UI team while the tech guys work on the datalayer and the viewmodels.

So far I have most of it working but somehow I keep running into problems with events that don't get through and modelView binding to deeper levels in the nested templates are giving me a headache.

I already came up whith some implementation of a dynamic array with modelViews for the inner grids.

 

Regards,

Insad

[Insad]

Hi,

I have a working sample now but I don't know if it violates any (unwritten) rules?

Can you check to see if I am at the right track?

Perhaps other people can benefit from the ideas in here as well :)

 

You can find it here: http://dojo.telerik.com/@Insad/afoKU

 

Regards,

 

Albert van Peppen (Insad)

 

[Ivan Danchev]

Hello Albert,

I don't think your approach violates any rules. Thank you for sharing it with the community.

Regards,
Ivan Danchev
Telerik by Progress