Create and render the Organization chart diagram by using SQL database.

The following examples explain how to consume data from SQL Server and bind it to Blazor Diagram. You can achieve this by using SQL Adapter.

Before implementation, you need to add the required NuGet packages, such as Microsoft.EntityFrameworkCore.SqlServer, Microsoft.EntityFrameworkCore.Tools, and Syncfusion.Blazor to your application.

Prerequisites:

• Visual Studio 2022.
• SQL Server Management Studio.

In the following example, create a database file with data source details such as ID and ParentID. Follow these steps to create a database file using SQL Server Management Studio.

1. In the Object Explorer, connect to an instance of the SQL Server Database Engine and then expand that instance.
2. Right-click Databases, and then select New Database.

3. In New Database, enter a database name.

4. Right-click NewDatabase, then click NewQurey.

5. Create a new table with fields such as ID and ParentID.

You can form an SQL query string based on the DataManagerRequest, execute the SQL query, and retrieve data from the database using SqlDataAdapter. The Fill method of the DataAdapter is used to populate a DataSet with the results of the SelectCommand, convert the DataSet to a List, and return the datasource to bind the data to Diagram.

C#

protected override Task OnInitializedAsync()
{
 
 
string ConnectionStr = $"Data Source=LocalHost;Initial Catalog=Diagram;User ID=sa;Password=sa@123;TrustServerCertificate=True";
 
// Here, we formed the SQL query string based on the skip and take the count from the DataManagerRequest.
 
string QueryStr = "SELECT *  FROM dbo.HierarchicalTree";
DataSet Data = CreateCommand(QueryStr, ConnectionStr);
 
DataSource = Data.Tables[0].AsEnumerable().Select(r => new OrganizationalDetails
{
     ID = r.Field<string>("ID"),
     Manager = r.Field<string>("Manager"),
     Color = r.Field<string>("Color"),
     Role = r.Field<string>("RoleName"),
}).ToList();
    return base.OnInitializedAsync();
}
 
 
public DataSet CreateCommand(string queryString, string connectionString)
{
      using (SqlConnection connection = new SqlConnection(connectionString))
{
SqlDataAdapter adapter = new SqlDataAdapter(queryString, connection);
DataSet dt = new DataSet();
try
{
connection.Open();
 
// Using the sqlDataAdapter, we process the query string and fill the data into the dataset.
 
adapter.Fill(dt);
}
catch (SqlException se)
{
Console.WriteLine(se.ToString());
}
finally
{
connection.Close();
}
return dt;
}
}

Please find a runnable sample link: https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/KB-Samples/SQLDatabase

Conclusion:

We hope you enjoyed learning how to create and render an organization chart diagram using SQL database.

You can refer to our Blazor Diagram’s feature tour page to learn about its other groundbreaking features. You can also explore our Blazor Diagram documentation to understand how to present and manipulate data.

For current customers, our Blazor components are available on the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to evaluate our Blazor Diagram and other Blazor components.

If you have any questions or require clarifications, please let us know in comments below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!