Class DataSourceSettings

Represents the settings that specify the data source and define how the parent and child relationship will be generated in the diagram layout. It is applicable only when a diagram layout is used.

Inheritance

System.Object

SfBaseComponent

SfDataBoundComponent

DataSourceSettings

Inherited Members

SfBaseComponent.Dispose(Boolean)

SfBaseComponent.GetEffectivePlatform()

SfBaseComponent.GetMainComponentPlatform()

SfBaseComponent.IsMainLicenseComponent()

SfBaseComponent.LicenseContext

SfBaseComponent.OnObservableChange(String, Object, Boolean, NotifyCollectionChangedEventArgs)

SfBaseComponent.ValidateLicense()

SfDataBoundComponent.DataManager

SfDataBoundComponent.MainParent

SfDataBoundComponent.SetDataManager<T>(Object)

Namespace: Syncfusion.Blazor.Diagram

Assembly: Syncfusion.Blazor.dll

Syntax

public class DataSourceSettings : SfDataBoundComponent

Remarks

This class is a part of the diagram component and allows the configuration of the data source used in the layout.

Examples

<SfDiagramComponent Width="1000px" Height="1000px">
    <DataSourceSettings @bind-DataSource="@data" ID="@Id" ParentID="@ParentId" SymbolMapping="@doBinding"></DataSourceSettings>
    <Layout Type="LayoutType">
    </Layout>
</SfDiagramComponent>
@code {
    public object data { get; set; }
    public string Id;
    public string ParentId;
    public LayoutType LayoutType = LayoutType.HierarchicalTree;
    protected override void OnInitialized()
    {
        Id = "Name";
        ParentId = "Category";
        data = Data1;
    }
    // Bind the external data with the node
    private Node doBinding(Node node, object data)
    {
        HierarchicalDetails hierarchicalData = data as HierarchicalDetails;
        node.Annotations = new DiagramObjectCollection<ShapeAnnotation>()
        {
            new ShapeAnnotation()
            {
                ID = "annotation" + node.ID,
                Content = hierarchicalData.Name,
            },
        };
        return node;
    }
    public List<HierarchicalDetails> Data1 = new List<HierarchicalDetails>()
    {
        new HierarchicalDetails(){ Name = "Diagram", FillColor = "#916DAF" },
        new HierarchicalDetails(){ Name = "Layout", Category = "Diagram" },
        new HierarchicalDetails(){ Name = "Tree Layout", Category = "Layout" },
        new HierarchicalDetails(){ Name = "Organizational Chart", Category = "Layout" }
    };
    public class HierarchicalDetails
    {
        public string Name { get; set; }
        public string Category { get; set; }
        public string FillColor { get; set; }
    }
}

Constructors

DataSourceSettings()

Declaration

public DataSourceSettings()

Properties

ChildContent

Gets or sets the child content that the layout is displayed for.

Declaration

public RenderFragment ChildContent { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.RenderFragment	A nullable Microsoft.AspNetCore.Components.RenderFragment representing the display content within the layout. Initialized as empty.

Remarks

This property is used to specify the content to be displayed within the layout of the component.

Microsoft.AspNetCore.Components.RenderFragment provides a mechanism to define UI elements programmatically.

DataSource

Gets or sets the data source that the layout is displayed for. This property allows the user to bind data to the diagram, enabling dynamic rendering and interaction.

Declaration

public object DataSource { get; set; }

Property Value

Type	Description
System.Object	An System.Object representing the data source used in the diagram. The default value is null.

Remarks

The DataSource can be any collection or object that contains the data to be visualized in the diagram layout. Ensure the structure matches the requirements of the layout, including appropriate ID and ParentID mappings.

Setting the data source will automatically render the layout using the specified data, applying the defined LayoutType if any.

Examples

<SfDiagramComponent Width = "1000px" Height="1000px">
<DataSourceSettings @bind-DataSource="@data" ID="@Id" ParentID="@ParentId" SymbolMapping="@doBinding"></DataSourceSettings>
<Layout Type = "LayoutType" >
</ Layout >
</ SfDiagramComponent >
@code {
public object data { get; set; }
public string Id;
public string ParentId;
public LayoutType LayoutType = LayoutType.HierarchicalTree;
protected override void OnInitialized()
{
 Id = "Name";
 ParentId = "Category";
 data = Data1;
}
public List<HierarchicalDetails> Data1 = new List<HierarchicalDetails>()
{
 new HierarchicalDetails(){ Name ="Diagram",FillColor="#916DAF"},
 new HierarchicalDetails(){ Name ="Layout", Category="Diagram"},
 new HierarchicalDetails(){ Name ="Tree Layout",Category="Layout"},
 new HierarchicalDetails(){ Name ="Organizational Chart", Category="Layout"}
};
public class HierarchicalDetails
{
 public string Name { get; set; }
 public string Category { get; set; }
 public string FillColor { get; set; }
}
}

DataSourceChanged

Gets or sets the callback to trigger when the data source changes.

Declaration

public EventCallback<object> DataSourceChanged { get; set; }

Property Value

Type
Microsoft.AspNetCore.Components.EventCallback<System.Object>

Remarks

This event callback is invoked whenever the data source is modified, allowing you to handle the change in your application logic.

Ensure that the associated delegate processes the new data state accordingly.

Examples

<SfDataSourceComponent DataSourceChanged="OnDataSourceChanged">
</SfDataSourceComponent>

@code {
    private void OnDataSourceChanged(object newData)
    {
        // Handle data source change logic here
    }
}

ID

Gets or sets the property name that will be mapped to each node ID from the data source record.

Declaration

public string ID { get; set; }

Property Value

Type	Description
System.String	A System.String representing the ID property name in the data source. The default value is null.

Remarks

This property allows you to specify which field in your data source will be used as the unique identifier for each node within the diagram.

Examples

<SfDiagramComponent Width = "1000px" Height="1000px">
<DataSourceSettings @bind-DataSource="@data" ID="@Id" ParentID="@ParentId" SymbolMapping="@doBinding"></DataSourceSettings>
<Layout Type = "LayoutType" >
</ Layout >
</ SfDiagramComponent >
@code {
    public object data { get; set; }
    public string Id;
    public string ParentId;
    public LayoutType LayoutType = LayoutType.HierarchicalTree;

    protected override void OnInitialized()
    {
        Id = "Name";
        ParentId = "Category";
        data = Data1;
    }

    public List<HierarchicalDetails> Data1 = new List<HierarchicalDetails>()
    {
        new HierarchicalDetails(){ Name ="Diagram",FillColor="#916DAF"},
    };

    public class HierarchicalDetails
    {
        public string Name { get; set; }
        public string Category { get; set; }
        public string FillColor { get; set; }
    }
}

IDChanged

Gets or sets the callback to trigger when the ID value changes.

Declaration

public EventCallback<string> IDChanged { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<System.String>	A Microsoft.AspNetCore.Components.EventCallback<> that represents the callback event for ID change. No default value.

Remarks

Ensure to assign this callback in scenarios where ID changes should be tracked and handled.

ParentID

Gets or sets the property name used to establish the parent-child relationship between nodes.

Declaration

public string ParentID { get; set; }

Property Value

Type	Description
System.String	A System.String representing the parent ID property name in the data source. The default value is null.

Remarks

This property is essential for hierarchical data structures. It ensures that each node can reference its parent, enabling the construction of diagrams that represent tree-like structures based on data relationships.

Examples

<SfDiagramComponent Width="1000px" Height="1000px">
<DataSourceSettings @bind-DataSource="@data" ID="@Id" ParentID="@ParentId" SymbolMapping="@doBinding"></DataSourceSettings>
<Layout Type="LayoutType">
</ Layout >
</ SfDiagramComponent >
@code {
    public object data { get; set; }
    public string Id;
    public string ParentId;
    public LayoutType LayoutType = LayoutType.HierarchicalTree;

    protected override void OnInitialized()
    {
        Id = "Name";
        ParentId = "Category";
        data = Data1;
    }

    public List<HierarchicalDetails> Data1 = new List<HierarchicalDetails>()
    {
        new HierarchicalDetails(){ Name ="Diagram",FillColor="#916DAF"},
        new HierarchicalDetails(){ Name ="Layout", Category="Diagram"},
        new HierarchicalDetails(){ Name ="Tree Layout",Category="Layout"},
        new HierarchicalDetails(){ Name ="Organizational Chart", Category="Layout"}
    };

    public class HierarchicalDetails
    {
        public string Name { get; set; }
        public string Category { get; set; }
        public string FillColor { get; set; }
    }
}

ParentIDChanged

Gets or sets the callback to trigger when the parent ID value changes.

Declaration

public EventCallback<string> ParentIDChanged { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<System.String>	A Microsoft.AspNetCore.Components.EventCallback<> that represents the callback event for parent ID change. No default value.

Remarks

Assign this callback for scenarios requiring updates when parent associations change.

Query

Gets or sets the Query that is displayed for the data source settings.

Declaration

public Query Query { get; set; }

Property Value

Type	Description
Query	A Query representing the database query configuration. This property is nullable, with a default value of null.

Remarks

This property determines the query used for retrieving data from the database. The query must be properly configured to match the data structure expected by the application.

Root

Gets or sets the root (primary) node of the layout populated from the data source.

Declaration

public string Root { get; set; }

Property Value

Type	Description
System.String	A System.String representing the root node identifier in the data source. The default value is null.

Remarks

This property determines the starting point of the tree structure in your diagram layout.

Ensure that the specified root corresponds to a valid node in your data source.

Examples

  <DataSourceSettings ID="Id" ParentID="ParentId" DataSource="DataSource" Root="RootNodeId"> </DataSourceSettings>

RootChanged

Gets or sets the callback to trigger when the root value changes.

Declaration

public EventCallback<string> RootChanged { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<System.String>	A Microsoft.AspNetCore.Components.EventCallback<> that represents the callback event for root value change. No default value.

Remarks

Use this callback to handle updates when the root node alters in a hierarchical model.

SymbolBinding

Gets or sets the callback that provides customized node information during the initialization of the layout.

Declaration

public Func<Node, object, Node> SymbolBinding { get; set; }

Property Value

Type	Description
System.Func<Node, System.Object, Node>	A System.Func<, , > representing the customized node binding operation. The default value is null.

Remarks

This property is utilized when each node within the diagram requires initialization with a specific configuration.

For detailed guidance, refer to the Organizational Chart documentation.

Methods

BuildRenderTree(RenderTreeBuilder)

Declaration

protected override void BuildRenderTree(RenderTreeBuilder __builder)

Parameters

Type	Name	Description
Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder	__builder

Dispose()

This method releasing all unmanaged resources.

Declaration

public void Dispose()

OnAfterRenderAsync(Boolean)

Method invoked after each time the component has been rendered.

Declaration

protected override Task OnAfterRenderAsync(bool firstRender)

Parameters

Type	Name	Description
System.Boolean	firstRender	Set to true for the first time component rendering, otherwise gets false.

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing any asynchronous operation.

Overrides

SfDataBoundComponent.OnAfterRenderAsync(Boolean)

OnInitializedAsync()

Method invoked when the component is ready to start.

Declaration

protected override Task OnInitializedAsync()

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing any asynchronous operation.

Overrides

SfDataBoundComponent.OnInitializedAsync()

OnParametersSetAsync()

Method invoked when any changes in component state occurs.

Declaration

protected override Task OnParametersSetAsync()

Returns

Type	Description
System.Threading.Tasks.Task	Task

Overrides

SfDataBoundComponent.OnParametersSetAsync()