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

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

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

Prerequisites:

• Visual Studio 202.
• SQL Server Management Studio.

In the following example, Make a database file with data source details such as ID and ParentID. Follow these steps to create a Database file using the 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. Then create a new table such as ID and ParentID with details.

You can form an SQL query string based on the DataManagerRequest, execute the SQL query, and retrieve data from the database using the SqlDataAdapter. The Fill method of the DataAdapter is used to populate a DataSet with the results of the SelectCommand, convert the DataSet to 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

I hope you enjoyed learning about how to create and render the Organization chart diagram by using SQL database.

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

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

If you have any queries 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!