Add a multi-select listview with checkbox to dataform

[Lonny Blank]

How do I make one of the form items a multi-select listview with checkbox and write results to a table field

[Yohapuja Selvakumaran]

Hi Lonny Blank,

Thank you for reaching out to us! We have carefully reviewed your requirement and would like to let you know that it is indeed possible to integrate a multi-select listview with checkboxes into a form field using Syncfusion’s DataForm component.

To achieve this, you can make use of the Template option in the FormItem, which allows for custom inputs such as the SfMultiSelect component with checkbox selection. We have created a sample code snippet for your reference

Code Snippet:

 

 

@using Syncfusion.Blazor.DataForm

@using System.ComponentModel.DataAnnotations

@using Syncfusion.Blazor.Inputs

@using Syncfusion.Blazor.Calendars

@using Syncfusion.Blazor.DropDowns

 

 

<SfDataForm ID="MyForm"

            Model="@CreditCardModel"

            Width="50%">

 

    <FormValidator>

        <DataAnnotationsValidator></DataAnnotationsValidator>

    </FormValidator>

 

    <FormItems>

        <FormItem Field="@nameof(CreditCardModel.Name)" Placeholder="e.g. Andrew Fuller" LabelText="Name on card"></FormItem>

        <FormItem Field="@nameof(CreditCardModel.CardNumber)" LabelText="Card Number">

        </FormItem>

        <FormItem Field="@nameof(CreditCardModel.CVV)">

            <Template>

                <label class="e-form-label">CVV*:</label>

                <SfMaskedTextBox Mask="000" @bind-Value="CreditCardModel.CVV"></SfMaskedTextBox>

            </Template>

        </FormItem>

        <FormItem Field="@nameof(CreditCardModel.ExpiryDate)">

            <Template>

                <label class="e-form-label">Expiry Date*:</label>

                <SfDatePicker TValue="DateTime?" Format="MM/yy" EnableMask="true"></SfDatePicker>

            </Template>

        </FormItem>

        <FormItem Field="@nameof(CreditCardModel.color)">

            <Template>

                <label class="e-form-label">Color:</label>

                <SfMultiSelect TValue="string" TItem="string" Mode="VisualMode.CheckBox" DataSource="Colors" @bind-Value="CreditCardModel.Color"></SfMultiSelect>

            </Template>

        </FormItem>

    </FormItems>

 

</SfDataForm>

 

 

@code {

    public char PromptCharacter { get; set; } = ' ';

    public string[] Colors = new string[] { "Black", "Grey", "White", "Red", "Beige", "Pink", "Off-White" };

 

    public class CreditCard

    {

        [Required(ErrorMessage = "Please enter the name on card")]

        public string Name { get; set; }

 

        [Required(ErrorMessage = "Please enter the card number")]

        [CreditCard]

        public string CardNumber { get; set; }

 

        [Required(ErrorMessage = "Please enter cvv number")]

        public string CVV { get; set; }

 

        [Required(ErrorMessage = "Please select/enter expiry date")]

        public DateTime? ExpiryDate { get; set; }

 

        [Required(ErrorMessage = "Please enter the color of card")]

        public string Color { get; set; }

 

    }

 

    private CreditCard CreditCardModel = new CreditCard();

}

 

The SfMultiSelect component is used inside the Template option of the form item, allowing multiple selections with checkboxes. The selected items from the multi-select dropdown are bound to the Color field in your model (CreditCardModel.Color), and you can easily store the selected values in your database. You can customize the list of colors (or other items) by adjusting the Colors array.

You can also find a working version of this solution in the following sample:

Sample: https://blazorplayground.syncfusion.com/LtBfMtssTeNvDJbw

For more details on how to use templates within the DataForm, you may refer to the official documentation here:

Documentation: https://blazor.syncfusion.com/documentation/data-form/templates

Regards,

Yohapuja S