ASP.NET Core PropertyGrid Overview
The PropertyGrid is part of Telerik UI for ASP.NET Core, a
professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
The Telerik UI PropertyGrid TagHelper and HtmlHelper for ASP.NET Core are server-side wrappers 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));
})
)
@addTagHelper *, Kendo.Mvc
@model PropertyViewModel
<kendo-propertygrid name="propertyGrid" model="@Model">
<columns>
<field-column width="200" />
<value-column width="250" />
</columns>
</kendo-propertygrid>
using System.ComponentModel.DataAnnotations;
public class PropertyViewModel
{
[Display(GroupName = "Size", Description = "Control the width of the element.")]
public int Width { get; set; }
[Display(GroupName = "Size", Description = "Control the height of the element.")]
public int Height { get; set; }
[Display(GroupName = "Alignment", Description = "Add space around the element.")]
public int Margin { get; set; }
[Display(GroupName = "Alignment", Description = "Add space around the content of the element.")]
public int Padding { get; set; }
}
public ActionResult Index()
{
return View(new PropertyViewModel()
{
Width = 500,
Height = 300,
Margin = 20,
Padding = 50
});
}
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"
}
}));
})
)
@addTagHelper *, Kendo.Mvc
@model PropertyViewModel
@{
var icons = new List<SelectListItem>() {
new SelectListItem() {
Text = "search", Value = "search"
},
new SelectListItem() {
Text = "user", Value = "user"
},
new SelectListItem() {
Text = "folder", Value = "folder"
}
};
}
<kendo-propertygrid name="propertyGrid" model="@Model" edit-mode="true">
<context-menu enabled="true"></context-menu>
<columns>
<field-column width="200" />
<value-column width="250" />
</columns>
<property-grid-items>
<property-grid-item field="Width">
<numerictextbox-editor min="1" max="1000" step="1"></numerictextbox-editor>
</property-grid-item>
<property-grid-item field="Height">
<numerictextbox-editor min="1" max="1000" step="1"></numerictextbox-editor>
</property-grid-item>
<property-grid-item field="Icon">
<dropdownlist-editor datatextfield="Text" datavaluefield="Value" bind-to="icons"></dropdownlist-editor>
</property-grid-item>
</property-grid-items>
</kendo-propertygrid>
using System.ComponentModel.DataAnnotations;
public class PropertyViewModel
{
[Display(GroupName = "Size", Description = "Control the width of the element.")]
public int Width { get; set; }
[Display(GroupName = "Size", Description = "Control the height of the element.")]
public int Height { get; set; }
[Display(GroupName = "UI", Description = "Defines a name of an icon.")]
public string Icon { get; set; }
}
public ActionResult Index()
{
return View(new PropertyViewModel()
{
Width = 500,
Height = 300,
icon = "search"
});
}
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(/aspnet-core/html-helpers/data-management/propertygrid/accessibility/keyboard-navigation)] for faster navigation.
Next Steps
- Getting Started with the PropertyGrid
Basic Usage of the PropertyGrid HtmlHelper for ASP.NET Core (Demo)
Basic Usage of the PropertyGrid TagHelper for ASP.NET Core (Demo)