Kentico 12 MVC multi select form component in widget properties

Jessica Knaak asked on April 5, 2019 22:31

Hello,

I am trying to build a widget in Kentico 12 MVC and need to have the user pick as many pages as they want for an accordion. I am attempting to create a custom form component and have it working using a dropdown. But when I change it to a checkbox list, I am not able to figure out how to have the selections bind to my Model to show in the page. Any suggestions would be helpful. I used this documentation to build my dropdown that is working. https://docs.kentico.com/k12/developing-websites/form-builder-development/developing-form-components/using-a-dynamic-data-source-with-selector-components

Thanks!

Recent Answers

Arjan van Hugten answered on November 29, 2019 17:03 (last edited on November 29, 2019 17:04)

Hi,

Maybe a little late but I was looking for something like this as well. My solution was to create a custom form component (link). See the example below:

Form component class:

public class CategoryDropDownComponent : FormComponent<CategoryDropDownComponentProperties, string>
{
    public const string IDENTIFIER = "CategoryDropDownComponent";

    [BindableProperty]
    public string[] SelectedCategories { get; set; } = Array.Empty<string>();

    // Disables automatic server-side evaluation for the component
    public override bool CustomAutopostHandling => true;

    public override string GetValue()
    {
        return string.Join(",", SelectedCategories);
    }

    public override void SetValue(string value)
    {
        if (!string.IsNullOrEmpty(value))
        {
            SelectedCategories = value.Split(',');
        }
        else
        {
            SelectedCategories = Array.Empty<string>();
        }
    }

    public MultiSelectList Items()
    {
        var categories = CategoryInfoProvider.GetCategories()
                .OnSite(SiteContext.CurrentSiteID)
                .WhereEquals(nameof(CategoryInfo.CategoryParentID), sectorCategory.CategoryID);

        var data = categories.Select(x => new
        {
            Name = x.CategoryDisplayName,
            Guid = x.CategoryGUID.ToString(),
        });

        return new MultiSelectList(data, "Guid", "Name");
    }
}

Form component properties:

public class CategoryDropDownComponentProperties : FormComponentProperties<string>
{

    public CategoryDropDownComponentProperties()
        : base(FieldDataType.Text)
    {
    }

    [DefaultValueEditingComponent("CategoryDropDownComponent", DefaultValue = "")]
    public override string DefaultValue { get; set; }

}

View:

@Html.ListBoxFor(x => x.SelectedCategories, Model.Items(), htmlAttributes)

2 votesVote for this answer Mark as a Correct answer