Как получить значение из столбца внутри шаблона редактора Kendo.Grid для focus out или onblur ()?

Question

У меня есть следующий HTML, созданный для моей сетки:

Сетка имеет шаблон редактора. Поэтому каждый раз, когда я нажимаю на столбец, он переключается в режим редактирования и позволяет мне изменять значение в текстовом поле.

Как я могу получить значение $50.00 с помощью jquery для размытия или потерянного фокуса?

Answer 1

Вместо событие размытия или событие фокуса Я предлагаю использовать событие размыкания .

Вы можете делегировать событие на тд, используя : nth-child () селектор .

В следующем примере я обращаюсь к столбцу цены за единицу с:

$('#grid').on('mouseout', 'tbody[role="rowgroup"] tr[role="row"] td[role="gridcell"]:nth-child(3)', function(e) {
    var val = $(this).text();
    console.log(val);
})

$("#grid").kendoGrid({
    dataSource: {
        transport: {
            read: {
                url: "https://demos.telerik.com/kendo-ui/service/Products",
                dataType: "jsonp"
            }
        },
        pageSize: 5,
        group: {
            field: "UnitsInStock",
            dir: "asc"
        }
    },
    selectable: "multiple row",
    pageable: {
        buttonCount: 5
    },
    scrollable: true,
    groupable: true,
    columns: [
        {
            field: "ProductName",
            title: "Product Name"
        },
        {
            field: "UnitPrice",
            title: "Unit Price",
            format: "{0:c}"
        },
        {
            field: "UnitsInStock",
            title: "Units In Stock"
        }
    ],
    excelExport: function (e) {
        e.workbook.fileName = $("#fileName").val();
    }
});
$('#grid').on('mouseout', 'tbody[role="rowgroup"] tr[role="row"] td[role="gridcell"]:nth-child(3)', function(e) {
    var val = $(this).text();
    console.log(val);
})

#selectRow {
    width: 75px;
}

#groupRow {
    width: 145px;
}

#colIndex,
#colWidth {
    width: 110px;
}

#fileName {
    width: 160px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2019.2.619/styles/kendo.common.min.css"/>
<script src="http://kendo.cdn.telerik.com/2019.2.619/js/kendo.all.min.js"></script>


<div id="example">
    <div id="grid"></div>
</div>