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
)