New to Kendo UI for jQuery? Start a free 30-day trial

Items

configuration

Additional configuration options for the properties of the model.

items

Array

<div id="propertyGrid"></div>
<script>
  $("#propertyGrid").kendoPropertyGrid({
    columns: {
        fieldColumn: { width: 200 },
        valueColumn: { width: 250 }
    },
    model: {
        foo: "bar",
        baz: 5,
        price: 10,
        agree: false,
        details: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed gravida tincidunt tellus."
    },
    items:[
        {field: "foo", group: "Group A", editable: false},
        {field: "baz", group: "Group B", editor: "NumericTextBox", editorOptions: { min: 1, max: 10 } },
        {field: "agree", group: "Group C", validation: { required: true } },
        {field: "details", group: "Group D", editor: "TextArea", editorOptions: { rows: 5 }, template: (data)=>`<span style="color:red">${data.value}</span>`},
        {field: "price", group: "Group A", editable: false, format: "{0:C}", description: "The price for the item."}
    ]
  });
</script>

items.description

String

Sets the description for the property.

<div id="propertyGrid"></div>
<script>
$("#propertyGrid").kendoPropertyGrid({
    items: [
        { field: "name", description: "The name of the item" },
        { field: "price", description: "The price in USD" }
    ],
    model: {
        name: "Laptop",
        price: 999
    }
});
</script>

items.editable

Boolean|Function

The JavaScript function that is executed when the value cell is about to be opened for editing. The returned result will determine whether an editor will be created.

Items of type Object are not editable.

<div id="propertyGrid"></div>
<script>
$("#propertyGrid").kendoPropertyGrid({
    items: [
        { field: "name", editable: true },
        { field: "id", editable: false },
        { field: "status", editable: (data) => data.category === "active" }
    ],
    model: {
        name: "Laptop",
        id: 123,
        status: "pending",
        category: "active"
    }
});
</script>

items.editor

String|Function

Provides a way to specify a custom editing UI for the value of the property. To create the editing UI, use the container parameter.

The editing UI has to contain an element with a set name HTML attribute. The attribute value should be set to value.

The validation settings that are defined in the model.fields configuration will not be applied automatically. In order for the validation to work, you (the developer) are responsible for attaching the corresponding validation attributes to the editor input. If the custom editor is a component, to avoid visual issues, you can customize the tooltip position of the validation warning.

When used as String, defines the editor component type. Set the options for the component via the items.editorOptions.For further info check the Form API: field

<div id="propertyGrid"></div>
<script>
$("#propertyGrid").kendoPropertyGrid({
    items: [
        { field: "name", editor: "TextBox" },
        { field: "price", editor: "NumericTextBox" },
        { field: "category", editor: "DropDownList" }
    ],
    model: {
        name: "Laptop",
        price: 999,
        category: "Electronics"
    }
});
</script>

items.editorOptions

Object

Defines the component options for the custom property value UI editor that is set via the items.editor configuration. For further info check the Form API: field.

<div id="propertyGrid"></div>
<script>
$("#propertyGrid").kendoPropertyGrid({
    items: [
        { 
            field: "price", 
            editor: "NumericTextBox",
            editorOptions: { min: 0, max: 10000, decimals: 2 }
        },
        { 
            field: "category", 
            editor: "DropDownList",
            editorOptions: { 
                dataSource: ["Electronics", "Books", "Clothing"],
                filter: "startswith"
            }
        }
    ],
    model: {
        price: 999.99,
        category: "Electronics"
    }
});
</script>

items.field

String

Maps the item configuration to the model property.

<div id="propertyGrid"></div>
<script>
$("#propertyGrid").kendoPropertyGrid({
    items: [
        { field: "name" },
        { field: "price" },
        { field: "category" }
    ],
    model: {
        name: "Laptop",
        price: 999,
        category: "Electronics"
    }
});
</script>

items.fieldType

String

Specifies the JavaScript type of the field value. Used to determine the correct default editor when the model value is null. Accepted values are "string", "number", "boolean", and "date".

<div id="propertyGrid"></div>
<script>
$("#propertyGrid").kendoPropertyGrid({
    model: {
        size: null,
        count: null,
        name: "Laptop"
    },
    items: [
        { field: "size", fieldType: "string" },
        { field: "count", fieldType: "number" },
        { field: "name" }
    ]
});
</script>

items.format

String

The format that is applied to the value before it is displayed. Takes the {0:format} form where format is a standard number format, custom number format, standard date format or a custom date format.

The kendo.format function is used to format the value.

<div id="propertyGrid"></div>
<script>
$("#propertyGrid").kendoPropertyGrid({
    items: [
        { field: "price", format: "{0:C2}" },
        { field: "percent", format: "{0:P}" },
        { field: "date", format: "{0:MM/dd/yyyy}" }
    ],
    model: {
        price: 999.99,
        percent: 0.15,
        date: new Date(2023, 5, 15)
    }
});
</script>

items.group

String

Sets the name of the group to which the property will belong, if grouping is enabled. Only root level items can be grouped.

<div id="propertyGrid"></div>
<script>
$("#propertyGrid").kendoPropertyGrid({
    items: [
        { field: "name", group: "Basic Info" },
        { field: "description", group: "Basic Info" },
        { field: "price", group: "Financial" },
        { field: "cost", group: "Financial" }
    ],
    model: {
        name: "Laptop",
        description: "High-performance laptop",
        price: 999,
        cost: 500
    }
});
</script>

items.items

Array

Additional configuration options for the nested properties of the model, if any.

<div id="propertyGrid"></div>
<script>
$("#propertyGrid").kendoPropertyGrid({
    items: [
        { 
            field: "address",
            items: [
                { field: "street" },
                { field: "city" },
                { field: "zipCode" }
            ]
        }
    ],
    model: {
        address: {
            street: "123 Main St",
            city: "Anytown",
            zipCode: "12345"
        }
    }
});
</script>

items.template

String|Function

The template which is rendered for the property's value.

<div id="propertyGrid"></div>
<script>
$("#propertyGrid").kendoPropertyGrid({
    items: [
        { 
            field: "name", 
            template: (data) => `<strong>${data.value}</strong>` 
        },
        { 
            field: "status", 
            template: (data) => `<span class="${data.value}">${data.value}</span>` 
        }
    ],
    model: {
        name: "Laptop",
        status: "active"
    }
});
</script>

items.validation

Object

Specifies the validation rules for the field.

<div id="propertyGrid"></div>
<script>
$("#propertyGrid").kendoPropertyGrid({
    items: [
        { 
            field: "name", 
            validation: { required: true, minLength: 2 }
        },
        { 
            field: "email", 
            validation: { required: true, email: true }
        },
        { 
            field: "age", 
            validation: { min: 18, max: 120 }
        }
    ],
    model: {
        name: "",
        email: "",
        age: 25
    }
});
</script>