How to Create the Org Chart Blazor Diagram by Using MDF Database?

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

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

Prerequisites:

• Visual Studio 2022.
In the following example, create a database file with data source details such as ID and ParentID. Follow these steps:

1. Create a new Windows Forms App (.NET Framework) project using Visual Studio and name it.
2. On the menu bar, select Project > Add New Item.
3. In the list of item templates, scroll down and select Service-based Database.

4. Name the database and then click Add.
5. If the Data Sources window isn't open, open it by pressing Shift+Alt+D or selecting View > Other Windows > Data Sources on the menu bar.
6. In the Data Sources window, select Add New Data Source.
7. Right-click on Tables and select Add New Table.

8. Create a table based on data source details such as ID and ParentID.

Please refer to the following link to create an SQL file in MDF format:

https://learn.microsoft.com/en-us/visualstudio/data-tools/create-a-sql-database-by-using-a-designer?view=vs-2022

Form an SQL query string based on the DataManagerRequest, execute the SQL query, and retrieve data from the database with SqlDataAdapter. The Fill method of the DataAdapter populates a DataSet with the results of the DataAdapter's SelectCommand. To bind the data to the Diagram, convert the DataSet to a List and return the Datasource.

C#

   protected override Task OnInitializedAsync()
    {
 
        string AppData = _env.ContentRootPath;
      //Update the database name.
      string DatabasePath = Path.Combine(AppData, "App_Data\\Database1.MDF");
        string ConnectionStr = $"Data Source=(LocalDB)\\MSSQLLocalDB;AttachDbFilename='{DatabasePath}';Integrated Security=True;Connect Timeout=30";
 
        // Here, the SQL query string is formed based on the skip and takes the count from the DataManagerRequest.
 
        string QueryStr = "SELECT *  FROM dbo.diagram";
        DataSet Data = CreateCommand(QueryStr, ConnectionStr);
 
        DataSource = Data.Tables[0].AsEnumerable().Select(r => new OrganizationDetails
        {
            ID = r.Field<string>("ID"),
            Manager = r.Field<string>("Manager"),
            Color=r.Field<string>("Color"),
            Role = r.Field<string>("Role"),
        }).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, 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 here: https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/KB-Samples/DataBase_MDFFormat

Conclusion:

We hope you enjoyed learning how to create an organization chart in Blazor Diagram using an MDF database.

You can refer to our Blazor Diagram 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!