1.9 KiB
| title | description | type | page_title | slug | tags | res_type | category |
|---|---|---|---|---|---|---|---|
| Display and Edit Multiple Data Item Fields in a Single Native Grid Cell | An example on how to display and edit multiple data item fields in one Kendo UI for Vue Native Grid cell. | how-to | Show and Edit Multiple Data Item Fields in One Grid Cell - Kendo UI for Vue Native Grid | grid-display-and-edit-multiple-dataitem-fields-in-one-cell | grid, custom cell, show, display, edit, multiple fields, single cell, kendovue, native | kb | knowledge-base |
Environment
| Product Version | 3.3.2 |
| Product | Progress® Kendo UI for Vue Native |
Description
The current Knowledge base article demonstrates how you can display multiple data item fields data in a single Kendo UI for Vue Native Grid cell.
KB sections
Solution description
The below solution uses the cell property of the Native Grid's column. Through this property, we can customize the way the selected cell looks.
To display the Status, Public, and Hide fields available in the data item of each Grid row, the example uses the StatusCell custom component. What the custom component does is ensure the displaying of more than one data item in the "Status" field of the Grid.
Runnable example
{% meta id:index height:500 %} {% embed_file grid-display-and-edit-multiple-dataitem-fields-in-one-cell/main.vue preview %} {% embed_file grid-display-and-edit-multiple-dataitem-fields-in-one-cell/main.js %} {% embed_file grid-display-and-edit-multiple-dataitem-fields-in-one-cell/CommandCell.vue %} {% embed_file grid-display-and-edit-multiple-dataitem-fields-in-one-cell/StatusCell.vue %} {% endmeta %}