[Solved] Events in row template inputs not bubbling to allow row selection

[Joe]

I'm not sure what update changed this, but some time between the 2013 Q3 release and the 2014 Q3 release, the way events bubble seems to have changed.

<div id="testGrid"></div>

<script>
    $(function () {
        $("#testGrid").kendoGrid({
            dataSource: [
                { name: "Joe", email: "email1 at example.org" },
                { name: "George", email: "email2 at example.org" },
                { name: "Ken", email: "email3 at example.org" },
            ],
            rowTemplate: kendo.template($("#testRowTemp").html()),
            selectable: true,
            columns: [
                { field: "name", title: "Name" },
                { field: "email", title: "E-mail" }
            ],

        });
    });
</script>
<script id="testRowTemp" type="text/x-kendo-template">
    <tr data-uid="#= uid #">
        <td>
            <input type="text" value="#: name #" />
        </td>
        <td>
            <input type="text" value="#: email #" />
        </td>
    </tr>
</script>

In this simple sample code, you'll notice that if you click inside one of the textboxes, the row containing the textbox does not get selected in the 2014 Q3 release version. In the 2013 Q3 release version, clicking in the textbox does select the row.

I don't know whether this was an intentional change or not, but I do need to have the functionality of the 2013 Q3 release where the event bubbles up to the row and selects it. Is there a setting on the grid that can be applied to get this functionality back or a workaround to be able to select the row when an input in the row is clicked?

[Joe]

As a workaround, I've come up with the following:

$("html").on("click", ".k-grid .k-grid-content .k-selectable input, .k-grid .k-grid-content .k-selectable select, .k-grid .k-grid-content .k-selectable textarea", function (e) {
      var clickedRow = $(this).closest("tr");
      var mainGrid = $(this).closest(".k-grid").data("kendoGrid");
      mainGrid.select(clickedRow);
 });

If there's a setting or a better workaround for this issue, I'd love to be able to use it instead.

[Rosen]

Hi Joe,

Indeed, the change you have observed is intentional. However, the workaround you have found seems appropriate and you should be able to use it if it fits your scenario.

Regards,
Rosen
Telerik