Tabstrip inside a Grid with Rowtemplate and DetailTemplate

2 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. Kendo UI is VS 2017 Ready
Back to Top