New to Telerik UI for ASP.NET MVC? Download free 30-day trial

Columns

Each PropertyGrid item has a field and value options that are displayed in columns.

Column Settings

You can control the width of the columns through the FieldColumn() and ValueColumn() configurations.

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

When both columns have widths (the numeric values are treated as pixels) and their sum exceeds the width of the PropertyGrid, a horizontal scrollbar appears. The example below shows how to enable the PropetyGrid horizontal scrollbar.

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

When all columns have widths and their sum is less than the width of the PropertyGrid (either the width set through the Width() option or the width of its container), the column widths are ignored and the browser expands the columns.

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

Column Resizing

The PropertyGrid supports column resizing. To allow the user to resize the columns through the component context menu, set up the following options:

  • Enable the Resizable() option.
  • Enable the ContextMenu() option.

Right-click on a specified table cell of the PropertyGrid to open the context menu, then select the Resize Column option to open the resize column menu dialog.

    @(Html.Kendo().PropertyGrid<PropertyViewModel>()
        .Name("propertyGrid")
        .Width(300)
        .Resizable(true)
        .ContextMenu(true)
        .Columns(columns => 
        {
            columns.FieldColumn(fieldCol => fieldCol.Width(200));
            columns.ValueColumn(valueCol => valueCol.Width(250));
        })
        ... //Additional configuration
    )

See Also

In this article