POC - Object bindable datalist

[curt-w]

I've devised a proof of concept that I'm using that builds upon the existing Datalist. Please keep in mind its a rough cut and not all features / functionality are implemented; meant to communicate the concept.

Current Datalist control supports binding an IEnumerable of basic types (i.e., number, string, enum); this works well when binding to model fields of basic types. However, the existing Datalist control cannot be used for binding against complex types - i.e. other domain models.

Given the concept of a "sales order" which has a "customer" field, we'd need to leverage DTOs and simplify our domain model's definition to a string, int, etc. - perhaps a property CustomerId. Upon save, we'd have to update the actual domain model's customer field with the Customer object, etc.

This control allows the binding of complex objects and leverages an expression parameter for determining the display string. The list of TItem's passed in get stored in a Dictionary<string, TItem>, where the dictionary key is the item's display string - this is crucial for mapping the selected control value back to the complex type.

Here is an example of the implementation

<DatalistV2 
    @bind-Value=SelectedHandler 
    OnSelectionChanged="OnSelectedHandlerChanged" 
    ItemsV2=ApplicationHandlers 
    TextExpression="@((x) => x.Name)" 
    Label="SomeLabel"></DatalistV2>

And here is the DatalistV2 control

    public class DatalistV2<TItem> : Datalist<TItem>
    {

        private Expression<Func<TItem, string>>? _textExpression;
        private IEnumerable<TItem>? _items;
        private Dictionary<string, TItem>? _itemsMap;

        protected override void BuildRenderTree(RenderTreeBuilder builder)
        {
            builder.OpenElement(0, "clr-datalist-container");
                builder.AddAttribute(1, "class", "clr-form-control clr-row"); // TODO - should clr-row be dynamic or based on form type?

                builder.OpenElement(2, "label");
                    builder.AddAttribute(3, "class", "clr-control-label " + LabelCol);
                    builder.AddAttribute(4, "for", InputId);

                    builder.AddContent(5, Label);
                builder.CloseElement();

                builder.OpenElement(6, "div");
                    builder.AddAttribute(7, "class", "clr-control-container " + ControlCol);

                    builder.OpenElement(8, "div");
                        builder.AddAttribute(9, "class", "clr-input-wrapper");

                        builder.OpenElement(10, "div");
                            builder.AddAttribute(11, "class", "clr-input-group");
            
                            builder.OpenElement(12, "input");
                                builder.AddAttribute(13, "id", InputId);
                                builder.AddAttribute(14, "list", ListId);
                                builder.AddMultipleAttributes(15, AdditionalAttributes);
                                builder.AddAttribute(16, "value", BindConverter.FormatValue(CurrentValueAsString));
                                builder.AddAttribute(17, "onchange", EventCallback.Factory.CreateBinder<string?>(this, async __value => await OnValueChanged(__value), CurrentValueAsString));
                                builder.AddAttribute(18, "class", "clr-input " + (Invalid ? "invalid" : "valid"));
                            builder.CloseElement();
            
                            builder.OpenElement(19, "datalist");
                                builder.AddAttribute(20, "id", ListId);

                                // TODO, review this, sequence should be static but...
                                var elementCounter = 21;
                                foreach (var i in ItemsMap.Keys)
                                {
                                    builder.OpenElement(elementCounter, "option");
                                    builder.AddContent(elementCounter + 1, i);
                                    builder.CloseElement();
                                    elementCounter = elementCounter + 2;
                                }

                            builder.CloseElement();


                        builder.CloseElement();
                    
                        // TODO - clr icon...

                    builder.CloseElement();

                    builder.OpenElement(elementCounter + 1, "clr-control-helper");
                        builder.AddAttribute(elementCounter + 2, "class", "clr-subtext");

                        // TODO - add content...

                    builder.CloseElement();

                builder.CloseElement();

            builder.CloseElement();
        }

        protected async Task OnValueChanged(string? value)
        {
            CurrentValueAsString = value;

            await OnSelectionChanged.InvokeAsync();
        }

        [Parameter]
        public EventCallback OnSelectionChanged { get; set; }

        protected override void OnInitialized()
        {
            if (_itemsMap is null)
                GenerateItemsMap();

            base.OnInitialized();
        }

        [Parameter]
        public Expression<Func<TItem, string>> TextExpression 
        { 
            get => _textExpression ?? throw new Exception("Text expression not initialized."); 
            set => _textExpression = value;
        }

        public Dictionary<string, TItem> ItemsMap
        {
            get => _itemsMap ?? throw new Exception("Text expression not initialized.");
            set => _itemsMap = value;
        }

        [Parameter]
        public IEnumerable<TItem> ItemsV2
        {
            get => Items ?? throw new Exception("Items not initialized.");
            set
            {
                Items = value;

                if (_textExpression is not null)
                    GenerateItemsMap();
            }
        }

        private void GenerateItemsMap()
        {
            _itemsMap = new Dictionary<string, TItem>();
            foreach (var item in Items)
            {
                _itemsMap.Add(FormatValueAsString(item), item);
            }
        }


        protected override string FormatValueAsString(TItem? value)
        {
            var fn = TextExpression.Compile() ?? throw new Exception("Text expression compiled to null.");

            return value is null ? string.Empty : fn(value);
        }

        // TODO - Blazority base classes should implement as such, or we need to inherit at a higher level...
        protected override bool TryParseValueFromString(string? value, [MaybeNullWhen(false)] out TItem result, [NotNullWhen(false)] out string validationErrorMessage)
        {
            if (value is null)
                value = "";

            TItem? innerResult;
            var successful = ItemsMap.TryGetValue(value, out innerResult);

            if (successful && innerResult is not null)
            {
                validationErrorMessage = string.Empty;
                result = innerResult;
            }
            else
            {
                validationErrorMessage = "Failed to find object from map.";
                result = default(TItem);
            }

            return successful;
        }

    }

[karan-kang]

HI @curt-w, this is pretty interesting approach and we are thinking of including something similar as well.
Thanks for POC!