I am using kendo grid view with one dropdown list column. Need to highlight the row once user select any value in the dropdown list.
Try adding a css class to the 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>