Syncfusion Feedback

Controls
  • General
    • Server App Creation
    • WebAssembly App Creation
    • Blazor MAUI App Creation
    • Blazor Playground App
    • Blazor WPF App Creation
    • Blazor Web App Creation
  • Appearance
    • Icons
  • Grids
    • Data Grid
    • Tree Grid
    • Pivot Table
  • Data Visualization
    • Charts
    • 3D Charts
    • Barcode Generator
    • Bullet Chart
    • Circular Gauge
    • Diagram
    • Heatmap Chart
    • Kanban Board
    • Linear Gauge
    • Maps
    • Range Selector
    • Smith Chart
    • Sparkline Charts
    • TreeMap
    • Stock Chart
  • File Viewers & Editors
    • In-Place Editor
    • Rich Text Editor
    • Image Editor
    • Word Processor
    • PDF Viewer
  • Calendars
    • Scheduler
    • Gantt Chart
    • Calendar
    • DatePicker
    • DateRangePicker
    • DateTime Picker
    • TimePicker
  • Buttons
    • Button
  • DropDowns
    • AutoComplete
    • ComboBox
    • DropDownList
    • ListBox
    • MultiSelect Dropdown
    • Mention
    • MultiColumn ComboBox
  • Smart Components
    • Smart Paste Button
    • Smart TextArea
  • Dropdowns
    • Dropdown Tree
  • Inputs
    • Radio Button & Checkbox
    • Color Picker
    • Signature
    • File Upload
    • Input Mask
    • Numeric Textbox
    • Range Slider
    • TextArea
    • TextBox
    • Toggle Switch Button
    • Rating
    • OTP Input
  • Interactive Chat
    • AI AssistView
    • Chat UI
  • Navigation
    • Accordion
    • Breadcrumb
    • Carousel
    • Context Menu
    • File Manager
    • Menu Bar
    • Pager
    • Sidebar
    • Tabs
    • Toolbar
    • TreeView
    • AppBar
    • Stepper
    • Ribbon
  • Layout
    • Card
    • Dashboard
    • Dialog
    • ListView
    • Splitter
    • Timeline
    • Tooltip
    • Media Query
    • Avatar
  • Notifications
    • Message
    • ProgressBar
    • Toast
    • Spinner
    • Skeleton
    • Badge
  • Forms
    • Query Builder UI
    • Data Form
  • Document Processing Libraries
    • Word (DocIO)
    • PDF

React ComboBox - Tutorial Videos

Go Back
thumbnail image

Watch video

Create a Diagram Component in a Blazor Server Application

Learn how easily you can create and configure the Blazor Diagram component provided by Syncfusion. This video explains how to create a Blazor application and add the Syncfusion Blazor package. Then you'll see how to add the Syncfusion Blazor Diagram component to the Blazor server application. Finally, it shows you how to create a simple flowchart using nodes and connectors.

Topics included
1. Introduction 00:00 min
2. Set up Blazor environment 00:26 min
3. Install Syncfusion Blazor assemblies 01:27 min
4. Add Syncfusion Blazor Diagram 03:05 min
5. Create default nodes and connectors 03:42 min
6. Create nodes 05:57 min
7. Create connectors 08:52 min
8. Add segments 10:42 min
Plaform: Blazor Show more
thumbnail image

Watch video

How to Create a Node and Different Types of Node Shapes in a Blazor Diagram

Learn how easily you can create a node and different node shapes in a Blazor Diagram. This video explains how to create a node programmatically and using the drawing tool. It also explains how to create different types of node shapes like text, image, path, HTML template, and SVG template.

Topics included
1. Introduction 00:00 min
2. Render the Blazor Diagram component 00:19 min
3. Create a node 00:51 min
4. Create a node using the drawing tool 05:08 min
5. Update and remove a node 07:15 min
6. Types of node shapes 08:55 min
Plaform: Blazor Show more
thumbnail image

Watch video

How to Create and Customize the Connectors in the Blazor Diagram Component

Learn how easily you can create connectors and connect nodes in the Blazor Diagram component. This video explains how to create a connector programmatically and using the drawing tool. It also explains how to customize the connector using different segment types and decorator shapes.

Topics included
1. Introduction 00:00 min
2. Overview of an app 00:21 min
3. Create a connector programmatically 01:08 min
4. Create a connector dynamically 03:03 min
5. Create a connector using the drawing tool 04:33 min
6. Update and remove the connector 06:25 min
7. Types of connector segments 08:12 min
8. Types of decorator shapes 10:23 min
Plaform: Blazor Show more
thumbnail image

Watch video

How to Group Nodes and Connectors in a Blazor Diagram

Learn how easily you can group nodes and connectors in the Blazor Diagram Component. This video demonstrates how to group nodes programmatically and dynamically. It also shows how to update a node group and add annotations to it. Additionally, it shows how to create a nested group.

Topics included
1. Introduction 00:00 min
2. Render the Blazor Diagram component 00:21 min
3. Create a node group programmatically 01:12 min
4. Create a node group dynamically 02:44 min
5. Add annotations to the node group 04:00 min
6. Update node groups 05:26 min
7. Group connectors 06:34 min
8. Interactions in a node group 07:17 min
9. Create a nested group 07:58 min
Plaform: Blazor Show more
thumbnail image

Watch video

How to Add Annotations to Nodes and Connectors in a Blazor Diagram

Learn how easily you can add annotations to nodes and connectors in a Blazor Diagram. This video demonstrates how to add annotations programmatically and dynamically. It also shows how to align them using Offset, Margin, Horizontal and Vertical Alignment properties. Additionally, it shows how to customize the appearance of annotations using text wrapping and font styles.

Topics included
1. Introduction 00:00 min
2. Render a simple flow chart 00:27 min
3. Add node annotations programmatically 01:14 min
4. Add node annotations dynamically 02:22 min
5. Update annotations dynamically 04:48 min
6. Add annotations to connectors 06:14 min
7. Customize the alignment of annotations 07:11 min
8. Add a hyperlink as an annotation 11:55 min
Plaform: Blazor Show more
thumbnail image

Watch video

How to Create and Customize Ports in the Blazor Diagram Component

Learn how easily you can add ports to the nodes in a Blazor Diagram. This video demonstrates how to create and add ports to the nodes programmatically and dynamically. It also shows how to add multiple ports and update the properties of ports dynamically. Additionally, it shows how to customize the appearance and position of the ports and how to connect nodes using ports.

Topics included
1. Introduction 00:00 min
2. Render the Blazor Diagram component 00:37 min
3. Add a port programmatically 01:19 min
4. Add a port dynamically 02:37 min
5. Add multiple ports 03:44 min
6. Update port properties 04:17 min
7. Positioning ports 05:55 min
8. Appearance of ports 07:11 min
9. Interaction in ports 08:42 min
Plaform: Blazor Show more
thumbnail image

Watch video

How to Save and Export a Blazor Diagram

Learn how easily you can save and export a Blazor Diagram of Syncfusion. This video demonstrates how to save and load a Blazor diagram as a string and file stream. It also shows how to export a diagram in different file formats.

Topics included
1. Introduction 00:00 min
2. Render the Blazor Diagram component 00:21 min
3. Save and load diagrams using string data 01:17 min
4. Save and load diagrams using file stream 04:23 min
5. Export diagrams 11:10 min
Plaform: Blazor Show more
thumbnail image

Watch video

How to Customize the Blazor Diagram and its Elements

Learn how easily you can customize the Blazor diagram and its elements. This video demonstrates how to customize the diagram canvas page, display page breaks, and multiple pages on the canvas. It also shows how to customize the appearance and position of nodes and connectors. Additionally, it shows how to bridge connectors.

Topics included
1. Introduction 00:00 min
2. Render the Blazor Diagram component 00:27 min
3. Customize the diagram canvas 01:14 min
4. Customize nodes 04:31 min
5. Customize connectors 08:39 min
6. Hit padding 10:51 min
7. Bridge connectors 12:12 min
Plaform: Blazor Show more
thumbnail image

Watch video

How to Add the Symbol Palette to the Blazor Diagram Component

Learn how easily you can create a Symbol Palette and assign it to the Blazor Diagram Component. This video explains how to create and add basic shapes, flow shapes, and connectors to the Symbol Palette and draw a simple flow chart on the Diagram Component. It also explains how to customize expand and collapse modes in a palette and add descriptions to the symbols.

Topics included
1. Introduction 00:00 min
2. Render the Blazor Diagram component 00:19 min
3. Render the Symbol Palette component 00:55 min
4. Add basic shapes to the palette 02:23 min
5. Customize symbol height and width 06:46 min
6. Add flow shapes to the palette 07:05 min
7. Add connectors to the palette 10:58 min
8. Customize expand/collapse mode 14:49 min
9. Add a description to the symbols 15:09 min
Plaform: Blazor Show more
thumbnail image

Watch video

How to Create an Organizational Chart Using Blazor Diagram

Learn how easily you can create and position an organizational chart using Blazor Diagram of Syncfusion. This video explains how to position the layout using horizontal and vertical spacing, orientation, sub-tree alignment, and assistant properties.

Topics included
1. Introduction 00:00 min
2. Render the Blazor Diagram component 00:25 min
3. Create an organizational chart 01:12 min
4. Customize the horizontal and vertical spacing 07:34 min
5. Orientation modes 07:53 min
6. Subtree alignment modes 08:33 min
7. Set an assistant node 10:24 min
Plaform: Blazor Show more
thumbnail image

Watch video

How to Create a Mindmap Layout Using the Blazor Diagram

Learn how easily you can create a Mind map layout using the Blazor Diagram Component. This video explains how to create a Mind map layout and customize the nodes and connectors in the layout. It also explains how to align the layout using horizontal spacing, vertical spacing, and layout margin properties. Additionally, it explains how to expand/collapse child nodes.

Topics included
1. Introduction 00:00 min
2. Render the Blazor Diagram 00:27 min
3. Create a Mind map layout 01:14 min
4. Customize the nodes 05:18 min
5. Customize the connectors 08:38 min
6. Spacing and margin 10:31 min
7. Add expand/collapse icons 11:22 min
Plaform: Blazor Show more
Chat with us