![Working with Blazor Dynamic Component and 2021 Volume 2 Blazor Updates [Webinar Show Notes]](https://www.syncfusion.com/blogs/wp-content/uploads/2021/09/Working-with-Blazor-Dynamic-Component-and-2021-Volume-2-Blazor-Updates-Webinar-Show-Notes.png)
This blog provides the show notes for our August 19, 2021, webinar, “Working with Blazor DynamicComponent and 2021 Volume 2 Blazor Updates.” The webinar was presented and hosted by Syncfusion Product Manager Uma Maheswari Chandrabose. The Q & A portion of the webinar is at the end of the blog. If you missed the webinar or would like to watch it again, please see our YouTube channel or watch it here.
Overview
In this webinar, we showed how to render Syncfusion Blazor components dynamically using the DynamicComponent, a new, built-in Blazor component. With it, you can easily specify the component type and pass the required parameters using a dictionary. To depict the working of DynamicComponent, we placed a dropdown list with two options in this example: Employee Details and Meeting Schedules. When Employee Details is chosen, the Blazor DataGrid component is dynamically rendered, whereas choosing Meeting Schedules renders the Blazor Scheduler component dynamically.
Agenda
- What’s new in Blazor for the 2021 Volume 2 release.
- What’s new for web components in the 2021 Volume 2 release.
- Creating a Blazor WebAssembly app and using DynamicComponent.
What’s new in Blazor for 2021 Vol. 2
Tailwind CSS
- A new CSS theme has been added for all Blazor components.
Diagram
- Create diagrams using a code-behind visual interface.
DataGrid
- Lazy loading with grouping.
- Frozen rows and columns on the right side.
- Frozen columns with virtualization.
Scheduler
- Adaptive layout.
- Interval support in year view.
- Print improvements in agenda view.
- Performance enhancements.
Gantt Chart
- Virtual scrolling.
- Edit templates.
- Dynamic object data binding.
TreeGrid
- Virtual scrolling with remote data.
- Dynamic object data binding.
Data Manager
- Named HTTPClient usage.
Word Processor
- Preserve text box shape with square wrapping style.
- Preserve image positions and wrap styles.
Kanban
- Freeze swim lane rows.
Rich Text Editor
- Change list style types.
Pivot Table
- Field panel.
- Median aggregation type.
- Inline editing.
- Multiple axes in Pivot Chart.
Accumulation charts
- Palette support.
VS Code Extensions
- Tailwind CSS theme added to Template Studio and project conversion wizard.
VS extensions
- Template Studio, code generator, scaffolding, conversion, and migration will work in Visual Studio 2022 and supports Tailwind theme.
- Authentication enabled in Template Studio.
What’s new in Essential JS 2 for 2021 Vol. 2
Tailwind CSS
- A new CSS theme has been added for all Essential JS 2 components.
Chart
- Spline range area chart.
DatePicker and TimePicker
- Masked date and time inputs.
DateTimePicker
- Masked date-time input.
Data Grid
- Row drag and drop with virtual scrolling.
- Editing with column virtualization.
Word Processor
- Table paste options.
- Preservation of text box shape with square wrap style.
Gantt Chart
- Time zone support.
Kanban
- Freeze swim lane rows.
PDF Viewer
- Annotations.
- Form designer.
Rich Text Editor
- List style types.
Pivot Table
- Field panel.
Scheduler
- Adaptive layout.
- Customization of the first month of the year.
- Year views intervals and template support.
- Print enhancements.
Stock Chart
· Legend support added.
Prerequisites to working with Blazor DynamicComponent
- .NET 6 Preview 1 or later.
- Visual Studio 2019.
Conclusion
To review, in this webinar we covered DynamicComponent in Blazor and how to best utilize it. Also, we’ll take a look at the new updates added to Essential Studio for Blazor in our 2021 Volume 2 release.
We hope you enjoyed this webinar and please keep an eye out for our future Syncfusion webinars.
Q&A
Q: Hey, thanks for a great presentation. Is the DynamicComponent much faster than using, say, an if statement in the Razor?
A: We have internally checked this scenario and detected a very minor difference in speed between rendering the DynamicComponent and rendering the components directly inside an “if” statement. Mostly, we can say the DynamicComponent is one of the simplest and cleanest approaches to rendering Blazor components dynamically as it avoids the need for multiple iterations through type-checks. Although you can use complex conditions, render fragments, use reflection, or render a builder tree to iterate through your components, it becomes hard to deal with complex parameter passing. So, the DynamicComponent simply helps in rendering the components specified by type and parameters and speeds up the working of applications by segregating the complex code.
Q: Can you make a DynamicComponent using OData?
A: Yes, it is possible to create a DynamicComponent in Blazor that uses OData services. Say, for example, you can bind data to the Blazor DataGrid from an OData service using the Syncfusion DataManager component. Then, you can render it dynamically by passing the component type to the DynamicComponent in the index.razor page. You can refer to this Github example, where you need to uncomment the commented lines to see the working of how the data will be retrieved from the OData service and bound to the DataGrid that renders dynamically.
