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
    21 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
    875 posts

    Posted 3 days and 10 hours ago 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
    21 posts
    Member since:
    Jan 2010

    Posted 3 days and 4 hours ago 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
    21 posts
    Member since:
    Jan 2010

    Posted 3 days and 3 hours ago 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
    875 posts

    Posted 1 day and 3 hours ago 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