Multicolumn MultiSelect Dropdown

17 Mar 20253 minutes to read

Provide two or more columns in the popup by using the class name e-multi-column to the CssClass property and the column will be aligned like grid.

• ItemTemplate – Using ItemTemplate, add the columns in the popup.
• ValueTemplate – Using ValueTemplate, display the value of which columns to be updated.

Display the custom text alignment in each column using a built-in class like in the following code example:

• e-text-center: Displays the text in the center of the column.
• e-text-right: Displays the text in the right side of the column.
• e-text-left: Displays the text in the left side of the column.

CSHTML

@using Syncfusion.Blazor.DropDowns;

<SfMultiSelect TValue="string[]" TItem="EmployeeData" Placeholder="Select an employee" CssClass="e-multi-column" DataSource="@Data" PopupHeight="300px" Width="350px">
    <MultiSelectTemplates TItem="EmployeeData">
        <ItemTemplate>
            <table><tbody><tr><td class="e-text-center column-width">@((context as EmployeeData).unit_id)</td><td>@((context as EmployeeData).unit_name)</td><td>@((context as EmployeeData).create_date)</td></tr> </tbody></table>
        </ItemTemplate>
        <ValueTemplate>
            <span>@((context as EmployeeData).unit_name)-@((context as EmployeeData).create_date) </span>
        </ValueTemplate>
    </MultiSelectTemplates>
    <MultiSelectFieldSettings Text="unit_name" Value="unit_id" />
</SfMultiSelect>
@code{

Type models = typeof(EmployeeData);
public class EmployeeData
{
public string unit_name { get; set; }
public string unit_id { get; set; }
public string create_date { get; set; }
public string Country { get; set; }
}
List<EmployeeData> Data = new List<EmployeeData>
{
new EmployeeData() { unit_name = "Andrew Fuller", unit_id = "1", create_date = "Nov 12", Country = "England"  },
new EmployeeData() { unit_name = "Anne Dodsworth", unit_id = "2", create_date = "Feb 16", Country = "USA" },
new EmployeeData() { unit_name = "Janet Leverling", unit_id = "3", create_date = "Jun 11", Country = "USA" },
new EmployeeData() { unit_name = "Laura Callahan", unit_id = "4", create_date = "Mar 03", Country = "USA" },
new EmployeeData() { unit_name = "Margaret Peacock", unit_id = "5", create_date = "Aug 19", Country = "USA" },
new EmployeeData() { unit_name = "Michael Suyama", unit_id = "6", create_date = "Apr 29", Country = "USA"  },
new EmployeeData() { unit_name = "Nancy Davolio", unit_id = "7", create_date = "Dec 02", Country = "USA" },
new EmployeeData() { unit_name = "Robert King", unit_id = "8", create_date = "Sep 27 ", Country = "England"  },
new EmployeeData() { unit_name = "Steven Buchanan", unit_id = "9", create_date = "Jan 10", Country = "England" }
};
}

<style>
    .column-width {
        width: 75px;
    }
</style>

How to Display MultiColumn Item and CheckBox Inline

To ensure the checkbox and item details are aligned perfectly on the same line, you can apply the following CSS styles. These styles position the checkbox within the template, making it inline with the item details:

    .e-popup.e-multi-select-list-wrapper .e-list-item .e-checkbox-wrapper {
     position: absolute;
     top: 10px;
     left: 5px;
   }

Limitation of multicolumn multiselect dropdown

The component will not support column filtering and sorting, and the column will be aligned as same as grid.