Kendo UI for jQuery R2 2020 SP1 trial version download
Kendo UI currently provides four controls: Kendo UI for jQuery , Kendo UI for Angular , Kendo UI Support for React and Kendo UI Support for Vue . Kendo UI for jQuery is the most complete UI library for creating modern web applications.
Rows
Grid allows you to manipulate the appearance of its rows by using the ID of the data item, adding custom rows, using row templates, and disabling hover effects.
Get row by ID
To get the table row in the grid by the ID of the data item:
1. Make sure that the ID field is defined in the model configuration of the grid data source.
2. Continuously retrieve row models, model UIDs, and grid table rows.
var rowModel = gridObject.dataSource.get(10249); // get method of the Kendo UI dataSource object
var modelUID = rowModel.get("uid"); // get method of the Kendo UI Model object
var tableRow = $("[data-uid='" + modelUID + "']"); // the data-uid attribute is applied to the desired table row element. This UID is rendered by the Grid automatically.
Add custom row
When the data source does not return any data (for example, due to filtered results), you can manually add table rows with user-friendly messages.
The following example demonstrates how to add a table row in the dataBound event handler of the Grid.
function onGridDataBound(e) {
if (!e.sender.dataSource.view().length) {
var colspan = e.sender.thead.find("th:visible").length,
emptyRow = '<tr><td colspan="' + colspan + '">... no records ...</td></tr>';
e.sender.tbody.parent().width(e.sender.thead.width()).end().html(emptyRow);
}
}
Disable hover effect
Starting from the Kendo UI Q1 2016 version, all Kendo UI themes have styles for line hovering. Hovering is a UI state, when the grid is in edit mode, it can provide better visualization on longer table rows.
However, if your project requires avoiding hovering states, please use one of the following two methods:
1. Open the Kendo UI theme CSS file (for example, kendo.default.min.css), and delete the following CSS rules.
.k-grid tr:hover {
/* ...background styles here... */
}
2. Use the CSS code in the example below to override the hover style, the #f1f1f1 value corresponds to the background color of the .k-alt table row. To find the correct value for the Kendo UI theme you want to apply, please use your browser's DOM inspector or set your favorite background color value.
.k-grid tr:not(.k-state-selected):hover {
background: none;
color: inherit;
}
.k-grid tr.k-alt:not(.k-state-selected):hover {
background: #f1f1f1;
}
For the latest news about Kendo UI, please follow Telerik Chinese website!