ASP.NET MVC PropertyGrid Overview
The PropertyGrid is part of Telerik UI for ASP.NET MVC, 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 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));
})
)
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"
}
}));
})
)
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-mvc/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 MVC (Demo)