Grid DetailExpand on selection

[Joshua]

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. 

[Jayesh Goyani]

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

[Joshua]

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

[Jayesh Goyani]

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

[Joshua]

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

[Jayesh Goyani]

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