Question

I have a Kendo Grid and I’m using row and alternate row templates. I want to add a detail template. How do I format the first cell for the row and alternate row templates to get the detail template to work? I can’t see the icon and the click events are not getting fired. Any suggestions would be appreciated.

I have this jsFiddle project: http://jsfiddle.net/rodneyhickman/ztk9r/4/

My markup:

<div class="assignment-portal-gird-module">
<div class="row-templates">
    <script id="rowTemplate" type="text/x-kendo-tmpl">
        <tr class="assignment-table-row1"> 
            <td class="k-hierarchy-cell"></td>
            <td class="assignment-table-centered-column"><b>${ Points }</b></td>
            <td class="assignment-table-contact-name-column" ><b><a href="/assignmentportal/providercontact/${ KlasID }">${ ContactName }</a></b>&nbsp;&nbsp;<a href="mailto:${ Email }"><img src="/content/images/toolbox/icons/email-16x16.gif" atl='email image'/></a></td>
            <td>${ Title }</td>    
            <td><a href="/Modules/DataEntry/Provider/Edit.aspx?id=${ ProviderId }">${ ProviderName }</a></td>
            <td>${ Phone }</td>
            <td class="assignment-table-centered-column"><b>${ LastNoteDate }</b></td>
            <td class="assignment-table-centered-column"><b>${ Touches }</b></td>
            <td>${ TimeZone }</td>
        </tr>
    </script>
    <script id="altRowTemplate" type="text/x-kendo-tmpl">

        <tr class="assignment-table-row1-alt"> 
            <td class="k-hierarchy-cell"></td>
            <td class="assignment-table-centered-column"><b>${ Points }</b></td>
            <td class="assignment-table-contact-name-column"><b><a href="/assignmentportal/providercontact/${ KlasID }">${ ContactName }</a></b>&nbsp;&nbsp;<a href="mailto:${ Email }"><img src="/content/images/toolbox/icons/email-16x16.gif" atl='email image';/></a></td>
            <td>${Title }</td>    
            <td><a href="/Modules/DataEntry/Provider/Edit.aspx?id=${ ProviderId }">${ ProviderName }</a></td>
            <td>${ Phone }</td>
            <td class="assignment-table-centered-column"><b>${ LastNoteDate }</b></td>
            <td class="assignment-table-centered-column"><b>${ Touches }</b></td>
            <td>${ TimeZone }</td>
        </tr>
    </script>
        <script type="text/x-kendo-template" id="template">
            <div class="tabstrip">
                <ul>
                    <li class="k-state-active">
                       Notes
                    </li>
                    <li>
                        Exchange
                    </li>
                    <li>
                        Assignments
                    </li>
                </ul>
                <div>
                    <div class="notes-details" >
                   Notes goes here     
                   </div>
                </div>
                <div>
                    <div class='exchange-details'>
                       Exchange goes here
                    </div>
                </div>
                  <div>
                    <div class='assignments-details'>
                       Assignments goes here
                    </div>
                </div>
            </div>

        </script>
</div>
<div id="gridAssignments"></div>

My Script:

jQuery('#gridAssignments').kendoGrid({
pageable: true,
scrollable: false,
rowTemplate: kendo.template($('#rowTemplate').html()),
altRowTemplate: kendo.template($('#altRowTemplate').html()),
detailTemplate: kendo.template($("#template").html()),
detailInit: detailInit,
dataBound: function() {
                        this.expandRow(this.tbody.find("tr.k-master-row").first());
                    },
sortable: true,
dataSource: {
    data: [{
        Points: 888,
        KlasID: 14926,
        ContactName: 'John Johnson',
        Email: "[e-mail]",
        Title: 'Chief Infomration Officer',
        ProviderName: 'West Coast Medical Center',
        ProviderId: 1143,
        Phone: '801-555-1234',
        TimeZone: '(E) 8:32 AM',
        LastNoteDate: '1/25/2013',
        LastNote: 'Sent Email - Requested to setup a call for 8:30 am Friday Feb 1st.',
        HasEval: 'Yes',
        Touches: 2,
        Sessions: '1',
        LastSessionDate: '1/23/2013  5:20 PM'
    }, {
        Points: 5,
        KlasID: 14926,
        ContactName: 'Jane Johnson',
        Email: "[e-mail]",
        Title: 'Chief Infomration Officer',
        ProviderName: 'East Coast Medical Center',
        ProviderId: 1143,
        Phone: '801-555-4321',
        TimeZone: '(E) 8:32 AM',
        LastNoteDate: '1/15/2013',
        LastNote: 'Sent Email - Requested to setup a call for 8:30 am Friday Feb 1st. blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah ',
        HasEval: 'No',
        Touches: 3,
        Sessions: '1',
        LastSessionDate: '1/23/2013 8:45 AM'
    }, {
        Points: 18,
        KlasID: 14926,
        ContactName: 'John Doe',
        Email: "[e-mail]",
        Title: 'Chief Infomration Officer',
        ProviderName: 'Florida Medical Center',
        ProviderId: 1143,
        Phone: '801-333-4321',
        TimeZone: '(E) 8:32 AM',
        LastNoteDate: '1/1/2013',
        LastNote: 'Sent Email - Requested to setup a call for Blah blah blah blah blah',
        HasEval: 'Yes',
        Touches: 4,
        Sessions: '1',
        LastSessionDate: '1/25/2013 12:04 PM'
    }],
    pageSize: 10
},
columns: [{
    width: 45,
    title: "P",
    field: "Points"
}, {

    title: "Contact",
    field: "ProviderName"
}, {

    title: "Title",
    field: "Title"
}, {
    width: 300,
    title: "Provider",
    field: "ProviderName"
}, {
    width: 120,
    title: "Phone",
    field: "Phone"
}, {
    title: "Last Note",
    field: "LastNoteDate"
}, {
    title: "Touches",
    field: "Touches"
}, {
    width: 120,
    title: "Time Zone",
    field: "TimeZone"
}]

});


 function detailInit(e) {
                var detailRow = e.detailRow;

                detailRow.find(".tabstrip").kendoTabStrip({
                    animation: {
                        open: { effects: "fadeIn" }
                    }
                });

 }

Answer 1

Adding the icon is replacing:

 <td class="k-hierarchy-cell"></td>

by:

 <td class="k-hierarchy-cell"><a class="k-icon k-plus" href="\\#" tabindex="-1"></a></td>

EDIT:

In order to avoid the error when you click asking for details, you should add to the tr the class k-master-row something like:

<tr class="assignment-table-row1 k-master-row">