Templates (Angular) (Angular)
Templates allow you to customize the appearance of Radzen components. For example put a Button in a DataGrid column or make the column data bold. There are two ways to use templates in Radzen - via the Template editor and from code.
Template editor
The template editor is a custom design time experience that starts when you click the “edit template” button next to any template property.
Such properties usually contain “template” in their name - Template, HeaderTemplate, FooterTemplate etc.
Here is how to add a button to a DataGrid column and make it open a dialog.
- Click the “…” button next to the Columns property of a DataGrid to open the Column editor dialog.
- Add a new column and click the Edit template button (the last button in the Template property). Radzen switches the design time surface and shows an empty canvas.
- Drag and drop a Button component and set its Text property to “Edit”.
- Add a new event handler of the Click event of the button. Set Type to Open dialog. Pick some page. Add a parameter. Use
${data}to access the current data item. It is one of the implicit properties also known as the template context or template data. - Finally click the “End template editing button”. This will end the template editing session and return to your page.
Template code
For simpler cases (or very custom ones) you can use code in templates. For example you can make the text of a DataGrid column bold by using the <strong> HTML tag.
Set the Template of a the column to <strong>${data.PropertyName}</strong>.
