Estoy usando la vista de cuadrícula de kendo con una columna de lista desplegable. Debe resaltar la fila una vez que el usuario seleccione cualquier valor en la lista desplegable.
Intente agregar una clase css al tr :
<!DOCTYPE html> <html> <head> <base href="https://demos.telerik.com/kendo-ui/grid/local-data-binding"> <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style> <title></title> <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.3.1109/styles/kendo.default-main.min.css" /> <script src="https://kendo.cdn.telerik.com/2021.3.1109/js/jquery.min.js"></script> <script src="https://kendo.cdn.telerik.com/2021.3.1109/js/kendo.all.min.js"></script> <style type="text/css"> tr.highlight { background-color: #f55; } </style> </head> <body> <script src="../content/shared/js/products.js"></script> <div id="example"> <div id="grid"></div> <script> $(document).ready(function() { $("#grid").kendoGrid({ dataSource: { data: products, schema: { model: { fields: { ProductName: { type: "string", editable: false }, UnitPrice: { type: "number", editable: false }, UnitsInStock: { type: "number", editable: false }, Discontinued: { type: "boolean", editable: true } } } }, pageSize: 20 }, height: 550, scrollable: true, sortable: true, filterable: true, editable: true, pageable: { input: true, numeric: false }, columns: [ "ProductName", { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "130px" }, { field: "UnitsInStock", title: "Units In Stock", width: "130px" }, { field: "Discontinued", width: "130px", editor: ($cell, e) => { $('<select>' + '<option' + (e.model.Discontinued ? ' selected="selected"' : '') + '>True</option>' + '<option' + (!e.model.Discontinued ? ' selected="selected"' : '') + '>False</option></select>') .appendTo($cell) .on('change', function (dataItem, $cell, e) { dataItem.Discontinued = ($(e.target).val() === 'True'); // Highlight code $cell.closest('tr').addClass('highlight'); }.bind(null, e.model, $cell)); } } ] }); }); </script> </div> </body> </html>