Tabstrip inside a Grid with Rowtemplate and DetailTemplate

7 posts, 0 answers
  1. Sony
    Sony avatar
    1 posts
    Member since:
    Nov 2012

    Posted 06 Nov 2012 Link to this post

    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"
                        }
                    }
                });
    });
  2. Gary
    Gary avatar
    28 posts
    Member since:
    Apr 2011

    Posted 03 Dec 2012 Link to this post

    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.

  3. Insad
    Insad avatar
    28 posts
    Member since:
    Jan 2010

    Posted 11 Jan in reply to Gary Link to this post

    Hi,

     

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

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

  4. Ivan Danchev
    Admin
    Ivan Danchev avatar
    922 posts

    Posted 16 Jan Link to this post

    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.
  5. Insad
    Insad avatar
    28 posts
    Member since:
    Jan 2010

    Posted 16 Jan in reply to Ivan Danchev Link to this post

    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

  6. Insad
    Insad avatar
    28 posts
    Member since:
    Jan 2010

    Posted 16 Jan in reply to Insad Link to this post

    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)

     

  7. Ivan Danchev
    Admin
    Ivan Danchev avatar
    922 posts

    Posted 18 Jan Link to this post

    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.
Back to Top