Kendo Grid - collapse parent of detail record

[Chris]

The grid is setup and works perfectly and has detail rows associated.  A button is to live on the detail section and do the same thing as the little triangle that collapses the row.  Looking through the forums, I see the following code should work, but it doesn't close the record.  Any help will be greatly appreciated.

 

<script>
    var toggleDetail = function(e) {
        var grid = $("#childGrid").data("kendoGrid");
        var parentRow = grid.wrapper.closest("tr").prev();
        grid.collapseGroup(parentRow);

    };

    $(document).ready(function () {
         $(document).on("click", "#toggleDetail", toggleDetail);
    });

</script>


@(Html.Kendo().Grid<Elsis.Application.Model.Child.ChildListModel>()
        .Name("childGrid")
        .Columns(columns =>
        {
            columns.Bound(c => c.Name).Width(120);
            columns.Bound(c => c.Age).Width(80);
            columns.Bound(c => c.Teachers).Width(200);
            columns.Bound(c => c.Schedule).Width(200);
        })
        .HtmlAttributes(new { style = "height: 550px;", @class = "lcesGrid" })
        .Scrollable()
        .Sortable()
        .ClientDetailTemplateId("childDetailTemplate")
        .Pageable(pageable => pageable
            .Refresh(true)
            .PageSizes(true)
            .ButtonCount(5))
        .DataSource(dataSource => dataSource
            .Ajax()
                .Read(read => read.Action("ChildList_Read", "ChildList"))
            .PageSize(20)
        )
)

<script id="childDetailTemplate" type="text/kendo-tmpl">
    <div>
        <div style="float: left; width:100px;">
            <div>Picture</div>
            <div>Full Bio</div>
        </div>
        <div style="float: left;width: 800px;">
            <div style="float: left;width: 800px;">
                <div style="float: left;width: 225px;">
                    <span id="name">#= Name #</span>
                    <span id="childId">(#= ChildId #)</span>
                </div>
                <div style="float: left; width: 100px;">
                    <span id="age">#= Age #</span>
                </div>
                <div style="float: left; width: 100px;">
                    <button id="toggleDetail" class="toggleDetail">Close Button</button>
                </div>
            </div>
        </div>

    </div>

</script> 

 

 

[Chris]

Trying varies things found in API docs and forums, i found that collapse group wasnt working, but collapse row works.  I got the below to work, but it closes every single open detail record, not just the one I am on.   

         //var parentRow = grid.wrapper.closest("tr.k-master-row");  // doesnt work

        var parentRow = grid.tbody.find("tr.k-master-row");
        grid.collapseRow(parentRow)

 

 

[Chris]

in case anyone else is wondering, here is the solution that took too long to figure out

    var toggleDetail = function(e) {

        // three lines of code...took way longer to figure this out than needed.

        var grid = $("#childGrid").data("kendoGrid");
        var parentRow = $(this).closest('.k-detail-row').prev('.k-master-row')[0];

         grid.collapseRow(parentRow);
                
    };