Kendo grid view row high lighting

Question

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.

Answer 1

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>

Dojo

Kendo grid view row high lighting

Question

1 answers

solution1
0 2021-11-16 17:43:46

Kendo grid view row high lighting

Question

1 answers

solution1 0 2021-11-16 17:43:46

solution1
0 2021-11-16 17:43:46