Skip to content

Add section on performance impact of different blazor templates. #1626

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: vnext
Choose a base branch
from
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 40 additions & 0 deletions doc/en/components/grids/_shared/virtualization.md
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,46 @@ The `{ComponentName}` supports remote virtualization, which is demonstrated in t

<!-- end: Angular -->

<!-- Blazor -->

## Templating

When needing to customize one of the existing templates in the grid, Blazor provides two possible ways to define a template:

- via a server-side template, using the related component property (i.e. `BodyTemplate` property) or declaratively with the template name. For example:

```
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could you set a language identifier to the snippets, since the automatic ones are weird and incorrect (Gherkins and XML for some reason)

<IgbColumn>
<BodyTemplate>
Template content here
</BodyTemplate>
</IgbColumn>
```

This will render the template after first requesting and resolving it from the server.

- via a client-template using the `Script` equivalent of the property (i.e. `BodyTemplateScript`) to set it to the name of the client-side function handler, for example:

```
<IgbColumn BodyTemplateScript="CellTemplate">
</IgbColumn>
```

```
igRegisterScript("CellTemplate", (ctx) => {
var html = window.igTemplating.html;
return html`Template content here`;
}, false);

```

The handler then renders the provided lit template directly in the DOM as needed.

> [!Note]
> While both approaches are valid, the server-side templates do require a round-trip request to the server to retrieve and resolve the custom template before rendering it on the client. As such the client-template approach is more optimized and recommended, especially in scenarios with many templates that need frequent updates as there may be a noticeable delay between the related user-interaction and the template updates.

<!-- end: Blazor -->

## Virtualization Limitations

* On Mac OS horizontal scrollbar is not visible when "Show scrollbars only when scrolling" system option is set to true (which is the default value). This is because the `{ComponentName}`’s row container has an overflow set to hidden. Change the option to "Always" and the scrollbar will appear.
Expand Down