ASP.NET MVC PropertyGrid Overview
The Telerik UI PropertyGrid HtmlHelper for ASP.NET MVC is a server-side wrapper for the Kendo UI PropertyGrid widget.
The PropertyGrid allows you to display and edit properties and attributes of objects. You can bind the component to a Model, edit its nested properties, specify the desired editor and customized template, group, sort, search, or navigate through the data or export it in Excel and PDF.
Initializing the PropertyGrid
The following example demonstrates how to define the PropertyGrid.
@model PropertyViewModel
@(Html.Kendo().PropertyGrid<PropertyViewModel>()
.Name("propertyGrid")
.Model(Model)
.Columns(columns =>
{
columns.FieldColumn(fieldCol => fieldCol.Width(200));
columns.ValueColumn(valueCol => valueCol.Width(250));
})
)Basic Configuration
The PropertyGrid provides a variety of options for the items configuration, toolbar, context menu, and appearance options like width, height, resizability, and more. The following example demonstrates the basic configuration of the PropertyGrid.
@model PropertyViewModel
@(Html.Kendo().PropertyGrid<PropertyViewModel>()
.Name("propertyGrid")
.Model(Model)
.EditMode(true)
.ContextMenu(true)
.Columns(columns =>
{
columns.FieldColumn(fieldCol => fieldCol.Width(200));
columns.ValueColumn(valueCol => valueCol.Width(250));
})
.Items(items =>
{
items.Add().Field(f => f.Width)
.Editor(editor => editor.NumericTextBox().Step(1).Min(1).Max(1000));
items.Add().Field(f => f.Height)
.Editor(editor => editor.NumericTextBox().Step(1).Min(1).Max(1000));
items.Add().Field(f => f.Icon)
.Editor(editor => editor
.DropDownList()
.DataTextField("Text")
.DataValueField("Value")
.BindTo(new List<SelectListItem>() {
new SelectListItem() {
Text = "search", Value = "search"
},
new SelectListItem() {
Text = "user", Value = "user"
},
new SelectListItem() {
Text = "folder", Value = "folder"
}
}));
})
)Toolbar
The Toolbar() configuration option of the PropertyGrid allows you to add command buttons and allow the user to invoke built-in PropertyGrid functionalities. You can also define custom commands or use templates to customize the Toolbar of the Telerik UI for ASP.NET MVC PropertyGrid.
Built-In Commands
You can configure the Toolbar and include any of the built-in commands:
.Toolbar(t =>
{
t.Group();
t.Separator();
t.Details();
t.Search();
t.Spacer();
t.Sort();
})Starting with version 2025 Q2, an alternative way to configure the tools of the PropertyGrid is to use the Items() configuration of the Toolbar:
.Toolbar(toolbar =>toolbar
.Items(item=>{
item.Group();
item.Separator();
item.Details();
item.Search();
item.Spacer();
item.Sort();
})
.Overflow(overflow => overflow
.Mode(ToolBarOverflowMode.Scroll)
.ScrollButtons(ScrollButtonsType.Visible)
.ScrollButtonsPosition(ScrollButtonsPositionType.Split)
)
)| Command | Description |
|---|---|
| Group | Adds a toggle button to show the items in Groups or a List. |
| Details | Adds an info button for additional details. |
| Sort | Adds a DropDownList to control the order of the items. |
| Search | Adds a built-in Search input for the PropertyGrid. |
| Spacer | Moves the tools that are declared after it to the right side of the Toolbar. |
| Separator | Acts as a delimiter between the Toolbar commands. |
Overview
The built-in Toolbar provides properties for customizing its overflow behavior and appearance.
The following example demonstrates how to modify the default overflow settings of the Toolbar through the Oveflow() configuration.
@(Html.Kendo().PropertyGrid<PropertyViewModel>()
.Name("propertyGrid")
.Toolbar(t => t.Items(item =>
{
item.Spacer();
item.Search();
})
.Overflow(o => o
.Mode(ToolBarOverflowMode.Scroll)
.ScrollButtons(ScrollButtonsType.Auto)
.ScrollButtonsPosition(ScrollButtonsPositionType.Start)
.ScrollDistance(50))
)
... // Additional configuration.
)For more information on the available overflow options, refer to the Appearance documentation of the ToolBar component.
Functionality and Features
- Columns—The PropertyGrid displays fields and values in columns.
- Items—The configuration of the PropertyGrid items allows you to customize their appearance and behavior.
- Templates—The available templates allow you to control the rendering of the items and toolbar.
- Events—The component emits a variety of events that allow you to implement custom functionality.
- Accessibility—The PropertyGrid is accessible for screen readers, supports WAI-ARIA attributes, and delivers keyboard shortcuts for faster navigation.
Next Steps
- Getting Started with the PropertyGrid
- Basic Usage of the PropertyGrid HtmlHelper for ASP.NET MVC (Demo)