Angular Markup
You can create Grids either programatically (with pure JavaScript/Typescript/Components), or declare them via declaratively with markup.
Column Definition
This example declares a simple Column Definition, specifying header name, field and width.
Setting Column Properties
There are some simple rules you should follow when setting column properties via Markup:
// string value
propertyName="String Value"
[propertyName]="'String Value'"
[propertyName]="{{Interpolated Value}}"
[propertyName]="functionCallReturningAString()"
// boolean value
[propertyName]="true|false"
[propertyName]="{{Interpolated Value}}"
[propertyName]="functionCallReturningABoolean()"
// numeric value
[propertyName]="Numeric Value"
[propertyName]="functionCallReturningANumber()"
// function value
[propertyName]="functionName"
[propertyName]="functionCallReturningAFunction()"
Setting a Class or a Complex Value
You can set a Class or a Complex property in the following way:
Grouped Column Definition
To specify a Grouped Column, you can nest a column defintion:
In this example we have a parent Column of "IT Skills", with two child columns.
Example: Rich Grid using Markup
The example below shows the same rich grid as the example above, but with configuration done via Markup.