ASP.NET Core PropertyGrid Overview

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.

• Demo page for the PropertyGrid HtmlHelper

• Demo page for the PropertyGrid TagHelper

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

Razor

    @addTagHelper *, Kendo.Mvc
    @model PropertyViewModel

    <kendo-propertygrid name="propertyGrid" model="@Model">
        <columns>
            <field-column width="200" />
            <value-column width="250" />
        </columns>
    </kendo-propertygrid>

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

Razor

    @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>

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 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)

See Also

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

• Server-Side API of the PropertyGrid HtmlHelper

• Server-Side API of the PropertyGrid TagHelper

• Client-Side API of the PropertyGrid