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

Tabstrip inside a Grid with Rowtemplate and DetailTemplate

6 Answers 308 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Sony
Top achievements
Rank 1
Sony asked on 07 Nov 2012, 12:04 AM
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"
                    }
                }
            });
});

6 Answers, 1 is accepted

Sort by
0
Gary
Top achievements
Rank 1
answered on 03 Dec 2012, 12:32 PM
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.

0
Insad
Top achievements
Rank 2
answered on 11 Jan 2017, 10:37 AM

Hi,

 

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

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

0
Ivan Danchev
Telerik team
answered on 16 Jan 2017, 09:12 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Insad
Top achievements
Rank 2
answered on 16 Jan 2017, 02:51 PM

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

0
Insad
Top achievements
Rank 2
answered on 16 Jan 2017, 03:57 PM

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)

 

0
Ivan Danchev
Telerik team
answered on 18 Jan 2017, 03:56 PM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
TabStrip
Asked by
Sony
Top achievements
Rank 1
Answers by
Gary
Top achievements
Rank 1
Insad
Top achievements
Rank 2
Ivan Danchev
Telerik team
Share this question
or