Shulou(Shulou.com)06/01 Report--

This article introduces you how to use Rows in Kendo UI Web development, the content is very detailed, interested friends can refer to, hope to be helpful to you.

Rows

Grid allows you to work with the appearance of a data item's row by using its ID, adding custom rows, using row templates, and disabling the hover effect.

Get rows through ID

To get table rows in the grid through the ID of the data item:

1. Ensure that the ID field is defined in the model configuration of the grid data source.

two。 Continuously retrieve row model, model UID, and grid table rows.

Var rowModel = gridObject.dataSource.get (10249); / / get method of the Kendo UI dataSource objectvar modelUID = rowModel.get ("uid"); / / get method of the Kendo UI Model objectvar 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 Lin

When the data source does not return any data (for example, due to the results of filtering), you can manually add table rows with user-friendly messages.

The following example shows how to add table rows to the dataBound event handler in Grid.

Function onGridDataBound (e) {if (! e.sender.dataSource.view (). Length) {var colspan = e.sender.thead.find ("th:visible") .length, emptyRow = '... No records.'; e.sender.tbody.parent (). Width (e.sender.thead.width ()). End (). Html (emptyRow);}}

Disable hovering effect

Starting with the Kendo UI Q1 2016 release, all Kendo UI themes have styles for line hover. Hover is a UI state that provides better visualization on longer table rows when the grid is in edit mode.

However, if your project requires you to avoid hovering, 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 rule.

.k-grid tr:hover {/ *... background styles here... * /}

two。 Using the CSS code in the following example 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, 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;} this is all about how to use Rows in Kendo UI Web development. I hope the above content can be helpful to you and learn more knowledge. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.