# Data Driven Approach ## Content The data-driven approach generates tools dynamically from a data source using **ItemsSource** and an **ItemTemplate**. Use this method when creating the toolbar programmatically, such as when tools are user-configurable, loaded from a database, or generated based on application state. This approach enables flexible, scalable, and highly customizable tool creation. ![](https://cdn.mescius.io/document-site-files/images/f5b600ba-f1a7-4f89-a20c-aa6c0c35880d/datadriven.15f778.png?width=600) ### **Create Toolstrip from Data Source** 1. Create a data model: ```auto public enum ToolType { C1DropDownTool, C1ToolSeparator, C1ButtonTool, C1SelectTool, C1ToggleButtonTool, C1ContentControlTool, C1MenuTool } public class ToolItem { public ToolType Type { get; set; } public string Label { get; set; } public string Description { get; set; } public RenderFragment Content { get; set; } // For DropDownTool content } ``` 2. Create a tool list: ```auto private List ToolItems = new() { // create new dropdown new ToolItem { Type = ToolType.C1DropDownTool, Label = "options", Description = "(C1DropDownTool)", }, // create new tool seperator "|" new() { Type = ToolType.C1ToolSeparator}, // Create new C1Button Tool new() { Type = ToolType.C1ButtonTool, Label = "Save" }, new() { Type = ToolType.C1ButtonTool, Label = "Edit" }, new() { Type = ToolType.C1ButtonTool, Label = "View" } }; ``` 3. Bind ToolStrip and render each tool using ItemTemplate: ```auto @foreach (var item in ToolItems) { // Render method for rendering different controls @RenderTool(item) } ``` 4. Render each tool based on its type: ```csharp private RenderFragment RenderTool(ToolItem item) => builder => { switch (item.Type) { case ToolType.C1ToolSeparator: builder.OpenComponent(0); builder.CloseComponent(); break; case ToolType.C1ButtonTool: builder.OpenComponent(0); builder.AddAttribute(1, "Label", item.Label); builder.CloseComponent(); break; case ToolType.C1DropDownTool: builder.OpenComponent(0); builder.AddAttribute(1, "Label", item.Label); builder.AddAttribute(2, "Description", item.Description); if (item.Content != null) { builder.AddAttribute(4, "ChildContent", item.Content); } builder.CloseComponent(); break; } ``` ### **Data-Driven Approach Sample** ```auto

Data Driven

@foreach (var item in ToolItems) { @RenderTool(item) }

In the sample tools are created as components using the C1ToolStrip.ChildContent.



class="badge text-bg-secondary">C1ToolStrip.ChildContent
class="badge text-bg-secondary">RendererInfo: @RendererInfo.Name 


@code {

    public enum ToolType
    {
        C1DropDownTool,   
        C1ToolSeparator,
        C1ButtonTool,
        C1SelectTool,
        C1ToggleButtonTool,
        C1ContentControlTool,
        C1MenuTool
    }

    public class ToolItem
    {
        public ToolType Type { get; set; }
        public string Label { get; set; }
        public string Description { get; set; }
        public RenderFragment Content { get; set; }  // For DropDownTool content
    }

    private List ToolItems = new()
    {
        new ToolItem
        {
            Type = ToolType.C1DropDownTool,
            Label = "options",
            Description = "(C1DropDownTool)",
        },
        new() { Type = ToolType.C1ToolSeparator},
        new() { Type = ToolType.C1ButtonTool, Label = "Save" },
        new() { Type = ToolType.C1ButtonTool, Label = "Edit" },
        new() { Type = ToolType.C1ButtonTool, Label = "View" }
    };

    private RenderFragment RenderTool(ToolItem item) => builder =>
    {
        switch (item.Type)
        {
            case ToolType.C1ToolSeparator:
                builder.OpenComponent(0);
                builder.CloseComponent();
                break;

            case ToolType.C1ButtonTool:
                builder.OpenComponent(0);
                builder.AddAttribute(1, "Label", item.Label);
                builder.CloseComponent();
                break;

            case ToolType.C1DropDownTool:
                builder.OpenComponent(0);
                builder.AddAttribute(1, "Label", item.Label);
                builder.AddAttribute(2, "Description", item.Description);

                if (item.Content != null)
                {
                    builder.AddAttribute(4, "ChildContent", item.Content);
                }
                builder.CloseComponent();
                break;
        }
    };
}
```