This is a migrated thread and some comments may be shown as answers.

Grid DetailExpand on selection

5 Answers 207 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Joshua
Top achievements
Rank 1
Joshua asked on 25 Jul 2013, 09:26 PM
I've implemented a way to expand the detail view of a grid by selecting a row in the grid, but in doing so I noticed the expand arrow no longer works.  Note that if the details are already expanded, the arrow will still cause the details to collapse.  I've created a jsfiddle illustrating the problem here:

http://jsfiddle.net/RaRXg/

Is there another way to achieve the desired effect (expand by row selection) which still allows the arrow to expand the selection?

Thanks. 

5 Answers, 1 is accepted

Sort by
0
Jayesh Goyani
Top achievements
Rank 2
answered on 26 Jul 2013, 10:37 AM
Hello,

<p>
    test</p>
<div id="grid">
</div>
<script type="text/x-kendo-template" id="tmpl-grid">
    <ul>
        <li><label>Price:</label>#= UnitPrice #</li>
        <li><label>Stock:</label>#= UnitsInStock #</li>
        <li><label>Discontinued:</label>#= Discontinued #</li>
    </ul>
</script>
<script>
 
    $(document).ready(function () {
 
    });
 
    function ExpandSelectedrow() {
        var grid = $("#grid").data("kendoGrid");
        $(".k-state-selected").each(function () {
            if ($(this).next().hasClass('k-detail-row') == false) {
                grid.expandRow(this);
            }
        });
 
    }
 
    var myGrid = $("#grid").kendoGrid({
        dataSource: {
            data: products,
            schema: {
                model: {
                    fields: {
                        ProductName: { type: "string" },
                        UnitPrice: { type: "number" },
                        UnitsInStock: { type: "number" },
                        Discontinued: { type: "boolean" }
                    }
                }
            },
            pageSize: 20
        },
        scrollable: true,
        selectable: true,
        sortable: true,
        filterable: false,
        pageable: true,
        detailTemplate: kendo.template($("#tmpl-grid").html()),
        detailInit: function (e) {
            console.log('detailInit');
        },
        detailExpand: function (e) {
            console.log('detailExpand');
        },
        change: function (e) {
            setInterval(function () { ExpandSelectedrow(); }, 500);
             
        },
        columns: [
            { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "130px" },
            { field: "UnitsInStock", title: "Units In Stock", width: "130px" },
            { field: "Discontinued", width: "130px" }
        ]
    }).data("kendoGrid");
</script>


Thanks,
Jayesh Goyani


0
Joshua
Top achievements
Rank 1
answered on 26 Jul 2013, 04:45 PM
Jayesh,

Thank you but that script has adverse effects as well.  You can no longer expand a row once it has been collapsed.

Thanks,

Josh
0
Jayesh Goyani
Top achievements
Rank 2
answered on 29 Jul 2013, 10:12 AM
Hello,

I am not able to reproduce this issue in my code.

Can you please provide steps to reproduce this and detail of your browser?

Thanks,
Jayesh Goyani
0
Joshua
Top achievements
Rank 1
answered on 29 Jul 2013, 03:23 PM
Here's a fiddle from the code you supplied which reproduces the issue:

http://jsfiddle.net/tbnW7/

I'm running Chrome Version 28.0.1500.72 m

Thanks,

Josh
0
Jayesh Goyani
Top achievements
Rank 2
answered on 30 Jul 2013, 09:50 AM
Hello,

Can you please try with the below code snippet?
<p>
    test</p>
<div id="grid">
</div>
<script type="text/x-kendo-template" id="tmpl-grid">
    <ul>
        <li><label>Price:</label>#= UnitPrice #</li>
        <li><label>Stock:</label>#= UnitsInStock #</li>
        <li><label>Discontinued:</label>#= Discontinued #</li>
    </ul>
</script>
<script>
 
    $(document).ready(function () {
 
    });
 
 
    function onDataBound(e) {
        var grid = $("#grid").data("kendoGrid");
        $(grid.tbody).on("click", "td", function (e) {
            var row = $(this).closest("tr");
            var rowIdx = $("tr", grid.tbody).index(row);
            var colIdx = $("td", row).index(this);
            setTimeout(function () { ExpandSelectedrow(rowIdx, colIdx); }, 100);
 
        });
    }
 
    function ExpandSelectedrow(rowIdx, colIdx) {
        if (colIdx != 0) {
            var grid = $("#grid").data("kendoGrid");
            grid.expandRow($(grid.tbody).find('tr:eq(' + rowIdx + ')'));
        }
    }
 
    var myGrid = $("#grid").kendoGrid({
        dataSource: {
            data: products,
            schema: {
                model: {
                    fields: {
                        ProductName: { type: "string" },
                        UnitPrice: { type: "number" },
                        UnitsInStock: { type: "number" },
                        Discontinued: { type: "boolean" }
                    }
                }
            },
            pageSize: 20
        },
        dataBound: onDataBound,
        scrollable: true,
        selectable: true,
        sortable: true,
        filterable: false,
        pageable: true,
        detailTemplate: kendo.template($("#tmpl-grid").html()),
        detailInit: function (e) {
            console.log('detailInit');
        },
        detailExpand: function (e) {
            console.log('detailExpand');
        },
        change: function (e) {
 
        },
        columns: [
            { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "130px" },
            { field: "UnitsInStock", title: "Units In Stock", width: "130px" },
            { field: "Discontinued", width: "130px" }
        ]
    }).data("kendoGrid");
</script>
Let me know if any concern.

Thanks,
Jayesh Goyani
Tags
Grid
Asked by
Joshua
Top achievements
Rank 1
Answers by
Jayesh Goyani
Top achievements
Rank 2
Joshua
Top achievements
Rank 1
Share this question
or