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.

• Demo page for the PropertyGrid HtmlHelper

Initializing the PropertyGrid

The following example demonstrates how to define the PropertyGrid.

Razor

    @model PropertyViewModel

    @(Html.Kendo().PropertyGrid<PropertyViewModel>()
        .Name("propertyGrid")
        .Model(Model)
        .Columns(columns => 
        {
            columns.FieldColumn(fieldCol => fieldCol.Width(200));
            columns.ValueColumn(valueCol => valueCol.Width(250));
        })
    )

C#

    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; }
    }

C#

    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.

Razor

    @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"
                        }
                    }));
        })
    )

C#

    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; }
    }

C#

    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(slug://keynav_aspnetcore_propertygrid)] for faster navigation.

Next Steps

• Getting Started with the PropertyGrid
• Basic Usage of the PropertyGrid HtmlHelper for ASP.NET MVC (Demo)

See Also

• Using the API of the PropertyGrid for ASP.NET MVC (Demo)

• Server-Side API of the PropertyGrid HtmlHelper

• Client-Side API of the PropertyGrid