Kendo Grid - collapse parent of detail record

3 posts, 0 answers
  1. Chris
    Chris avatar
    3 posts
    Member since:
    Feb 2016

    Posted 11 Feb 2016 Link to this post

    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> 

     

     

  2. Chris
    Chris avatar
    3 posts
    Member since:
    Feb 2016

    Posted 11 Feb 2016 Link to this post

    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)

     

     

  3. Chris
    Chris avatar
    3 posts
    Member since:
    Feb 2016

    Posted 11 Feb 2016 Link to this post

    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);
                    
        };

Back to Top