<TelerikForm Model="@TriggerDetail" Columns="1" ColumnSpacing="25px" OnValidSubmit="@HandleValidSubmit" EditContext="@EditContext">
    <FormValidation>
        <FluentValidationValidator Validator="@Validator"></FluentValidationValidator>
    </FormValidation>    
    <FormItems>
        <FormGroup LabelText="General Information" Columns="2" ColumnSpacing="15px">
            <FormItem Field="@nameof(TriggerDetailModel.Name)" LabelText="@Localizer["JobTrigger_Name"]" Enabled="@Enabled"></FormItem>
            <ValidationMessage For="@(() => TriggerDetail.Name)" />
            <FormItem Field="@nameof(TriggerDetailModel.Group)" LabelText="@Localizer["JobTrigger_Group"]" Enabled="@Enabled">
                <Template>
                    <label class="k-label k-form-label">@Localizer["JobTrigger_Group"]</label>
                    <TelerikAutoComplete Data="@ExistingTriggerGroups" @bind-Value="@TriggerDetail.Group" ClearButton="true" Enabled="@Enabled" />
                </Template>
            </FormItem>
			<ValidationMessage For="@(() => TriggerDetail.Group)" />
		</FormGroup>
	</FormItems>
	<FormButtons>       
            <TelerikButton Icon="caret-alt-to-left" OnClick="@BackStep" ThemeColor="@(ThemeConstants.Button.ThemeColor.Error)">@Localizer["Back"]</TelerikButton>
            <TelerikButton ButtonType="ButtonType.Submit" Icon="caret-alt-to-right" ThemeColor="@(ThemeConstants.Button.ThemeColor.Info)">@Localizer["Next"]</TelerikButton>        
    </FormButtons>
</TelerikForm>
	
	
@code{
	public TriggerDetailModel TriggerDetail { get; set; } = null!;
	public TriggerDetailValidator Validator { get; set; } = new();
	
    private void HandleValidSubmit()
    {
        var validationResult = Validator.Validate(TriggerDetail);
        if (validationResult.IsValid)
        {
            NextStep();
        }
        else
        {
            //Errores
        }            
    }
}

public class TriggerDetailValidator : AbstractValidator<TriggerDetailModel>
{                
        public TriggerDetailValidator()
        {           
            RuleFor(t => t.Name).NotEmpty();
            RuleFor(t => t.Group).NotEmpty();
        }
}

@* Enable the CheckParents parameter and observe the behavior of this setting. *@

<TelerikTreeView Data="@FlatData"
                 @bind-ExpandedItems="@ExpandedItems"
                 CheckParents="true"
                 CheckBoxMode="@TreeViewCheckBoxMode.Multiple"
                 @bind-CheckedItems="@checkedItems">
    <TreeViewBindings>
        <TreeViewBinding IdField="Id" ParentIdField="ParentIdValue" TextField="Text" HasChildrenField="HasChildren" IconField="Icon" />
    </TreeViewBindings>
</TelerikTreeView>

<div>
    Checked items:
    <ul>
        @if (checkedItems.Any())
        {
            foreach (var item in checkedItems)
            {
                var checkedItem = item as TreeItem;
                <li>
                    <span>
                        <TelerikIcon Icon="@checkedItem.Icon"></TelerikIcon>
                    </span>
                    <span>
                        @(checkedItem.Text)
                    </span>
                </li>
            }
        }
    </ul>
    <button @onclick="Clear">clear</button>
</div>


@code {
    public IEnumerable<object> checkedItems { get; set; } = new List<object>();

    public class TreeItem
    {
        public int Id { get; set; }
        public string Text { get; set; }
        public int? ParentIdValue { get; set; }
        public bool HasChildren { get; set; }
        public string Icon { get; set; }
    }

    public IEnumerable<TreeItem> FlatData { get; set; }
    public IEnumerable<object> ExpandedItems { get; set; } = new List<TreeItem>();

    protected override void OnInitialized()
    {
        LoadFlatData();
        ExpandedItems = FlatData.Where(x => x.HasChildren == true).ToList();
    }

private void Clear() {
    checkedItems = new List<object>();
        StateHasChanged();
}

    private void LoadFlatData()
    {
        List<TreeItem> items = new List<TreeItem>();

        items.Add(new TreeItem()
        {
            Id = 1,
            Text = "Project",
            ParentIdValue = null,
            HasChildren = true,
            Icon = "folder"
        });

        items.Add(new TreeItem()
        {
            Id = 2,
            Text = "Design",
            ParentIdValue = 1,
            HasChildren = true,
            Icon = "brush"
        });
        items.Add(new TreeItem()
        {
            Id = 3,
            Text = "Implementation",
            ParentIdValue = 1,
            HasChildren = true,
            Icon = "folder"
        });

        items.Add(new TreeItem()
        {
            Id = 4,
            Text = "site.psd",
            ParentIdValue = 2,
            HasChildren = false,
            Icon = "psd"
        });
        items.Add(new TreeItem()
        {
            Id = 5,
            Text = "index.js",
            ParentIdValue = 3,
            HasChildren = false,
            Icon = "js"
        });
        items.Add(new TreeItem()
        {
            Id = 6,
            Text = "index.html",
            ParentIdValue = 3,
            HasChildren = false,
            Icon = "html"
        });
        items.Add(new TreeItem()
        {
            Id = 7,
            Text = "styles.css",
            ParentIdValue = 3,
            HasChildren = false,
            Icon = "css"
        });

        FlatData = items;
    }
}