How to create and render the Org chart diagram by using MDF database?

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

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

Prerequisites:

• Visual Studio 202.
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.

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 etc.

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 a SQL query string based on the DataManagerRequest, execute the SQL query, and retrieve data from the database with the SqlDataAdapter. The Fill method of the DataAdapter is used to populate 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 link: https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/KB-Samples/DataBase_MDFFormat

Conclusion

I hope you enjoyed learning about how to create and render the Org chart diagram by using MDF 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!